/*
Theme Name: woofipedia-clean
Text Domain: woofipedia-clean
Description: Custom Woofie theme styles. Header styles live in woofie-theme.css.
Version: 1.0.1
*/

/* line 6 — add */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@700;800&display=swap');


:root{
  --wof-blue:#3bb6ff;
  --wof-shadow:0 8px 24px rgba(0,0,0,.08);
  --wof-shadow-strong:0 12px 28px rgba(0,0,0,.16);
}

/* Example existing override kept from your last screenshot */
@media (orientation:landscape){
  header.site-header .btn-3d.play-latest{ box-shadow: 0 10px 16px rgba(0,0,0,.25) !important; }
}

/* === GAMES PAGE — grid & cards (Safari/iPad safe) === */
.games-grid{
  max-width:1100px; margin:0 auto; padding:32px 16px;
  display:grid; gap:20px; grid-template-columns:1fr;
}
@media (min-width:700px){  .games-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .games-grid{ grid-template-columns:repeat(3,1fr); } }

.games-grid {
  display:grid;
  gap:20px;
  grid-template-columns:repeat(3, minmax(0,1fr)); /* force 3 equal columns */
}

.games-grid .game-card-body {
  text-align:center; /* was left */
  display:flex; flex-direction:column; align-items:center;
}


.games-grid > a.game-card:hover{ transform:translateY(-2px); box-shadow:0 16px 28px rgba(0,0,0,.24); }

.games-grid img{ width:100%; height:auto; display:block; border-radius:12px; }


/* Small red pill for the Play CTA */
.btn-3d{
  display:inline-block; padding:.55em .9em; line-height:1; border-radius:999px;
  background:#e11; color:#fff; font-weight:700; text-decoration:none;
  box-shadow:0 10px 16px rgba(0,0,0,.25);
}
.btn-3d:hover{ opacity:.9; color:#fff; }

/* Safety: never hide any card (fixes prior :has() Safari issue) */
.games-grid > a.game-card{ display:block !important; }
.games-grid > a.game-card:empty{ display:none !important; }

/* === Fallback presentation for when /games/ uses Gutenberg content === */
.games-cms{
  max-width:1100px; margin:0 auto; padding:16px;
}
.games-cms .wp-block-image img{
  width:100%; height:auto; display:block; max-width:560px; margin:0 auto 12px; border-radius:16px; box-shadow:0 8px 18px rgba(0,0,0,.18);
}
.games-cms h2, .games-cms h3{ text-align:center; margin:6px 0; font-weight:700; color:#111; }
.games-cms p{ text-align:center; margin:4px 0 12px; }
.games-cms a{ font-weight:700; }

/* === 2025-08-27: Games cards smaller + left-justified === */
.games-grid{
  display:flex !important;
  flex-wrap:wrap;
  gap:20px;
  justify-content:flex-start;   /* left align the row */
  align-items:stretch;
}


/* === 2025-08-27: Friendly title font (Baloo 2) === */
:root{
  --wof-title-font: 'Baloo 2', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Page titles & section headings */
.page-title,
.entry-content h1,
.entry-content h2,
.wp-block-heading{
  font-family: var(--wof-title-font) !important;
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.1;
  color: #111;
}

/* Responsive sizing for the main H1 like “Games” */
.page-title{
  font-size: clamp(36px, 5vw, 56px);
  margin: 0 0 12px;
}

/* Hero/section H2 like “Come Learn With Woofie” */
.entry-content h2{
  font-size: clamp(28px, 3.8vw, 40px);
  margin: 6px 0 12px;
}

/* Optional: make CTA pills match the friendly look */
.btn-3d,
.play-latest{
  font-family: var(--wof-title-font) !important;
  font-weight: 800;
}
.games-grid > a.game-card{
  width:300px;                  /* smaller card width */
  max-width:100%;
}

/* Slightly wider on big screens */
@media (min-width:1000px){
  .games-grid > a.game-card{ width:320px; }
}
/* === 2025-08-27: Friendly title font === */
:root{
  --wof-title-font: 'Baloo 2', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Page titles and section headings */
.page-title,
.entry-content h1,
.entry-content h2,
.wp-block-heading{
  font-family: var(--wof-title-font) !important;
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.1;
  color: #111;
}

/* Responsive sizing for page H1 like “Games” */
.page-title{
  font-size: clamp(36px, 5vw, 56px);
  margin: 0 0 12px;
}

/* Useful for hero lines like “Come Learn With Woofie” when it’s an H2 */
.entry-content h2{
  font-size: clamp(28px, 3.8vw, 40px);
  margin: 6px 0 12px;
}
/* === 2025-08-27: Center page/section headings === */
.page-title,
.hero-title,
.entry-content h1,
.entry-content h2,
.wp-block-heading {
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
}

/* Left align ONLY the Videos section title */
#videos .box > h3 {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Keep card titles LEFT (do not center these) */
.games-grid .game-title{ text-align: left !important; }



/* === 2025-08-27 — Home + Videos targeted tweaks (append) === */
/* Hero title Baloo font & size */
.hero-title{
  font-family: 'Baloo 2', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(42px, 6vw, 72px) !important;
  line-height: 1.05 !important;
  letter-spacing: .2px !important;
}

/* Rainbow CTA under videos (match header gradient) */
#videos .channel-cta{
  background: linear-gradient(90deg,#FFA23A,#FFD84A,#7ED957,#3DBBFF,#8E5CFF) !important;
  color:#fff !important;
  border:2px solid rgba(255,255,255,.9) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.15) !important;
  box-shadow: var(--wof-shadow-strong, 0 12px 28px rgba(0,0,0,.16)) !important;
}
#videos .channel-cta:hover{ opacity:.95; transform: translateY(-1px); }

/* Landscape: bump video section width a touch */
@media (orientation:landscape){
  #videos .wrap{ max-width: 1280px !important; }
}

/* 2025-08-27 — subtle top spacing before titles */
.hero-title{                /* "Come Learn With Woofie" */
  margin-top: 12px !important;
}

/* If you also want a little space above the Videos title: */
#videos .box > h3{          /* "Latest Woofipedia Videos" */
  margin-top: 10px !important;
}
/* =========================
   FULL-BLEED HEADER + BURGER
   ========================= */

/* [A] Unbox the rainbow (full-bleed) */
/* L1 */  header.site-header,
          .site-header{
/* L2 */    position: relative;
/* L3 */    overflow: visible !important;      /* ensure the bleed can show */
/* L4 */    margin-top: 0 !important;          /* touch the top */
/* L5 */    border-radius: 0 !important;       /* kill rounded corners */
/* L6 */    box-shadow: none !important;       /* kill any card shadow */
          }
/* L7 */  .site-header::before{
/* L8 */    content: "";
/* L9 */    position: absolute; inset: 0 auto 0 50%;
/* L10 */   transform: translateX(-50%);
/* L11 */   width: 100vw;                      /* span the viewport width */
/* L12 */   height: 100%;
/* L13 */   background: inherit;               /* use the same rainbow background */
/* L14 */   z-index: -1;                       /* sit behind header contents */
          }

/* [A2] Nuke container padding that creates a “box” above/below */
/* L15 */ .wp-site-blocks,
          #page,
          .site{
/* L16 */   padding-top: 0 !important;
          }
/* L17 */ .site-header .header-inner,
          .site-header .wp-block-group{
/* L18 */   margin: 0 !important;              /* stop inner margins making a box */
          }

/* [B] Burger alignment with CTA (same row, vertically centered) */
/* L19 */ .site-header .header-inner{
/* L20 */   display:flex; align-items:center; justify-content:space-between;
/* L21 */   gap:16px; padding: 0 16px;
          }
/* L22 */ .menu-toggle{
/* L23 */   display:inline-flex; align-items:center; justify-content:center;
/* L24 */   height:44px; width:44px; line-height:1;
/* L25 */   margin-left:8px; order:3;          /* to the right of the CTA */
          }
/* L26 */ @media (max-width:1024px){
/* L27 */   .primary-navigation{ display:none; }
          }
/* L28 */ @media (min-width:1025px){
/* L29 */   .menu-toggle{ display:none; }
          }

/* =========================
   WOOFIE — UNBOX & FULL-BLEED HEADER
   ========================= */

/* [1] Kill the “card” look some block themes add to the Header template part */
/* L1 */  .wp-block-template-part[aria-label="Header"],
/* L2 */  .wp-block-template-part[area="header"],
/* L3 */  .wp-site-blocks > header,
/* L4 */  header.site-header,
           header .wp-block-group.has-background,
           header .wp-block-cover{
/* L5 */    border-radius: 0 !important;
/* L6 */    box-shadow: none !important;
/* L7 */    overflow: visible !important;
/* L8 */    padding-top: 0 !important;            /* removes the top “box” gap */
/* L9 */    margin-top: 0 !important;
          }

/* [2] Force the rainbow band to bleed to the viewport edges (even inside containers) */
/* L10 */ .wp-site-blocks > header,
           header.site-header{
/* L11 */   position: relative;
/* L12 */   margin-left:  calc(50% - 50vw) !important;
/* L13 */   margin-right: calc(50% - 50vw) !important;
/* L14 */   width: 100vw !important;              /* true edge-to-edge */
/* L15 */ }

/* [3] Remove any global page padding that pushes the header down */
/* L16 */ .wp-site-blocks,
           #page,
           .site{
/* L17 */   padding-top: 0 !important;
          }
/* L18 */ body{ overflow-x:hidden; }              /* avoid horizontal scroll */

/* =========================
   BURGER ALIGNMENT
   ========================= */
/* L19 */ .site-header .header-inner{
/* L20 */   display:flex; align-items:center; justify-content:space-between;
/* L21 */   gap:16px; padding: 0 16px;
          }
/* L22 */ .menu-toggle{
/* L23 */   display:inline-flex; align-items:center; justify-content:center;
/* L24 */   height:44px; width:44px; line-height:1; order:3; margin-left:8px;
          }
/* L25 */ @media (max-width:1024px){
/* L26 */   .primary-navigation{ display:none; }
          }
/* L27 */ @media (min-width:1025px){
/* L28 */   .menu-toggle{ display:none; }
          }

/* ==========================================================================
   Woofipedia — Games Grid Overrides (appended) — 2025-09-21 07:02
   - Keeps the rest of the CSS 100% intact.
   - Fixes the Games page only by overriding .games-grid at the end of the cascade.
   ========================================================================== */

.games-grid{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  gap:20px !important;
  align-items:stretch !important;
  justify-items:stretch !important;
}
@media (max-width:900px){
  .games-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width:600px){
  .games-grid{ grid-template-columns:1fr !important; }
}

/* Equal-height cards + centered content + pinned CTA */
.games-grid > a.game-card{ display:flex !important; width:auto !important; max-width:100% !important; min-width:0 !important; }
.games-grid .game-card-body{ display:flex !important; flex-direction:column !important; align-items:center !important; text-align:center !important; width:100% !important; }
.games-grid .game-title{ text-align:center !important; margin:0 0 8px; }
.games-grid .btn-row{ margin-top:auto !important; display:flex !important; justify-content:center !important; }

/* Center a lone last card on tablet (optional polish) */
@media (min-width:600px) and (max-width:900px){
  .games-grid > .game-card:last-child:nth-child(odd){
    grid-column:1 / -1;
    justify-self:center;
    max-width:520px;
  }
}

/* Gutenberg paragraph wrapper safety */
.games-grid > p{ margin:0 !important; }
.games-grid > p > a.game-card{ display:flex !important; }