/* =========================
  TINY VALLEY TOTS — GLOBAL STYLES (clean baseline)
  Purpose of this file:
  • Brand tokens, reset & base
  • Header layout (no colour rules for pills)
  • Mobile nav container (structure only)
  • Hero, footer, utilities
  • Form field base styles
  NOTE: All button & pill COLOURS + focus/active rings live in /css/buttons.css
  ========================= */

/* A) THEME TOKENS */
:root{
  /* Brand */
  --bg: #fffef6;
  --bg-header: #ffffff;
  --ink: #111827;
  --muted: #6b7280;
  --line: #e5e7eb;

  /* Fonts */
  --title-font: "Patrick Hand SC","Patrick Hand",cursive,sans-serif;
  --ui-font: "Patrick Hand SC","Patrick Hand",cursive,sans-serif;

  /* Sizes */
  --title-size: clamp(1.6rem, 3.2vw, 2.3rem);

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 14px;
}

/* B) RESET & BASE */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:var(--ui-font);
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.container{width:90%;max-width:1200px;margin:0 auto;padding:24px 0}

/* C) HEADER LAYOUT (no pill colours here) */
header{
  background:var(--bg-header);
  position:sticky; top:0; z-index:1000;
  box-shadow:0 2px 4px rgba(0,0,0,.05);
}
.header-row{
  max-width:1200px; margin:0 auto;
  padding:10px 16px;
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:12px;
}

/* D) LOGO & TITLE */
.site-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.site-logo img{height:64px;max-width:100%;object-fit:contain;border-radius:var(--radius-md)}
.site-title{
  font-family:var(--title-font);
  font-weight:700; letter-spacing:.2px; font-size:var(--title-size); line-height:1;
  display:inline-flex; align-items:baseline; user-select:text; color:#111; text-decoration:none;
}
.site-title .t1{ color:#E14A3B } /* Tiny */
.site-title .t2{ color:#3B7BE1 } /* Valley */
.site-title .t3{ color:#29A36A } /* Tots  */

/* E) DESKTOP NAV CONTAINER (pills are styled in buttons.css) */
header nav{
  display:flex; justify-content:center; gap:12px; flex-wrap:wrap;
  font-family:var(--title-font);
}

/* F) MOBILE NAV CONTAINER (structure only; detailed positioning in tvt-mobile.css) */
.mobile-nav{ position:relative; display:none; justify-self:end }
.mobile-nav > summary{
  list-style:none; cursor:pointer; user-select:none;
  font-family:var(--title-font);
  font-size:1.05rem; line-height:1;
  padding:.6rem 1rem; border-radius:var(--radius-lg);
  border:none;
  display:inline-flex; align-items:center; gap:.55rem;
}
.mobile-nav > summary::-webkit-details-marker{ display:none }
.menu-trigger .burger{
  position:relative; width:22px; height:2px; background:currentColor; border-radius:2px; display:inline-block;
}
.menu-trigger .burger::before,
.menu-trigger .burger::after{
  content:""; position:absolute; left:0; width:100%; height:2px; background:currentColor; border-radius:2px;
}
.menu-trigger .burger::before{ transform:translateY(-6px) }
.menu-trigger .burger::after { transform:translateY( 6px) }

/* Mobile dropdown panel ONLY (do not affect desktop pills) */
.nav-mobile .menu-list-mobile{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  width:min(80vw, 320px);
  max-height:70vh;
  overflow:auto;
  z-index:1001;
  margin:0; padding:.5rem;
  background:#fff;
  border:2px solid #111;
  border-radius:14px;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
}

/* Mobile visibility */
@media (max-width: 900px){
  header nav{ display:none !important }
  .mobile-nav{ display:block !important; justify-self:center }
  .header-row{ grid-template-columns:auto 1fr auto }
}

/* G) HERO */
.hero{ text-align:center; margin:2rem 0; }
.hero img{
  width:200px; height:auto; margin:0 auto 1rem; display:block;
}
.hero-title{
  font-family:'Patrick Hand SC', cursive !important;
  font-size:3rem;
  color:#000;
  text-align:center;
  margin:0;
}
@media (max-width:480px){
  .hero-title{ font-size: clamp(2rem, 8vw, 2.6rem) }
}

/* H) FOOTER (neutral) */
.site-footer{
  margin-top:24px; background:#fff;
  border-top:1px solid rgba(0,0,0,.06);
}
.footer-inner{
  max-width:1100px; margin:0 auto; padding:18px;
  display:flex; gap:10px; flex-wrap:wrap;
  justify-content:center; align-items:center; font-size:.95rem;
}
.footer-inner a{text-decoration:none;border-bottom:1px dotted rgba(0,0,0,.25)}
.footer-inner a:hover{border-bottom-color:transparent}

/* I) FORMS — base (no button colours here) */
input, textarea, select{ font-family:var(--ui-font) }
input[type=text],
input[type=email],
input[type=tel],
input[type=number],
textarea,
select{
  width:100%;
  padding:12px 14px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:999px;           /* pill fields */
  font-size:16px;
  background:#fff;
  outline:none;
  box-sizing:border-box;
}

/* J) RESPONSIVE SAFETY */
@media (max-width: 640px){
  .site-logo img{ height:56px }
}
@media (max-width:480px){
  html, body { overflow-x:hidden }
  .site-title{
    white-space:normal !important;
    text-wrap:balance;
    line-height:1.08;
    padding-inline:60px;      /* keep clear of menu button */
    max-width:94vw;
    margin:0 auto;
  }
}

/* K) GENERIC CARD UTILITY (used across pages) */
.card{
  max-width:1100px; margin:24px auto; padding:20px;
  border-radius:16px; background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.08);
}