/* =====================================================================
   GoldenTrail — style.css (foundations: tokens, base, layout, header, footer)
   Australian Pet Care & Responsible Pet Ownership Platform
   ===================================================================== */

:root {
  --canvas: #FBF8F2;
  --cream: #F4EEE2;
  --sand: #E5D4B6;
  --sand-deep: #D8BE93;
  --sage: #7E9B6B;
  --sage-soft: #A8BE96;
  --forest: #33503C;
  --forest-deep: #22382A;
  --charcoal: #262420;
  --clay: #C2734A;
  --clay-soft: #E4A982;
  --bark: #5B4B3A;
  --bone: #FFFDF8;

  --ink: var(--charcoal);
  --muted: #6E6557;
  --line: rgba(38,36,32,.12);

  --ff-display: 'Spectral', Georgia, 'Times New Roman', serif;
  --ff-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --maxw: 1200px;
  --wide: 1340px;
  --gutter: clamp(20px, 4vw, 44px);

  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 30px;
  --r-pill: 999px;

  --sh-1: 0 10px 30px -18px rgba(34,56,42,.45);
  --sh-2: 0 26px 60px -30px rgba(34,56,42,.5);
  --ring: 0 0 0 3px rgba(126,155,107,.4);

  --ease: cubic-bezier(.22,1,.36,1);
  --t: 360ms var(--ease);
  --t-fast: 200ms var(--ease);
}

* , *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--ff-body);
  font-size: 17px; line-height: 1.7; color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, picture, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 8px; }

/* ---------- typography ---------- */
h1,h2,h3,h4,h5 { font-family: var(--ff-display); font-weight: 600; line-height: 1.12; color: var(--forest-deep); letter-spacing: -.012em; }
h1 { font-size: clamp(2.7rem, 6vw, 4.8rem); font-weight: 500; }
h2 { font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 500; }
h3 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); }
h4 { font-size: 1.18rem; }
p { color: var(--muted); }
.lead { font-size: clamp(1.12rem, 1.7vw, 1.35rem); color: #51493d; line-height: 1.65; }
strong { color: var(--ink); font-weight: 600; }
em { font-style: italic; }

/* ---------- layout ---------- */
.wrap { width: min(100% - 2*var(--gutter), var(--maxw)); margin-inline: auto; }
.wrap--wide { width: min(100% - 2*var(--gutter), var(--wide)); margin-inline: auto; }
.section { padding-block: clamp(60px, 8vw, 120px); }
.section--sm { padding-block: clamp(44px, 5vw, 76px); }
.bg-cream { background: var(--cream); }
.bg-sand { background: linear-gradient(180deg, var(--canvas), var(--sand)); }
.bg-forest { background: var(--forest-deep); color: #fff; }
.bg-forest h1,.bg-forest h2,.bg-forest h3,.bg-forest h4 { color: #fff; }
.bg-forest p { color: rgba(255,255,255,.78); }

/* ---------- eyebrow ---------- */
.eyebrow { display:inline-flex; align-items:center; gap:.6em; font-size:.74rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color: var(--clay); }
.eyebrow::before { content:""; width:24px; height:2px; background: currentColor; border-radius:2px; }
.eyebrow--center { justify-content:center; }
.headline { max-width: 60ch; }
.headline--center { margin-inline:auto; text-align:center; }

/* =====================================================================
   HEADER / NAVIGATION
   ===================================================================== */
.masthead { position: sticky; top:0; z-index: 120; transition: background var(--t), box-shadow var(--t); }
.masthead.is-stuck { background: rgba(251,248,242,.86); backdrop-filter: saturate(150%) blur(16px); box-shadow: 0 1px 0 var(--line), 0 16px 40px -30px rgba(34,56,42,.6); }
.masthead__bar { display:flex; align-items:center; justify-content:space-between; gap:1.4rem; padding-block: 16px; }
.logo { display:inline-flex; align-items:center; gap:.6em; font-family: var(--ff-display); font-size:1.4rem; font-weight:600; color: var(--forest-deep); letter-spacing:-.02em; }
.logo__mark { width:40px; height:40px; flex:none; }
.logo b { color: var(--clay); font-weight:600; }
.mainnav { display:flex; align-items:center; gap: clamp(.5rem,1.3vw,1.4rem); }
.mainnav a { position:relative; font-size:.94rem; font-weight:500; color:#473f33; padding:.4em .15em; }
.mainnav a::after { content:""; position:absolute; left:0; right:100%; bottom:-3px; height:2px; background: var(--clay); border-radius:2px; transition: right var(--t-fast); }
.mainnav a:hover::after, .mainnav a[aria-current="page"]::after { right:0; }
.mainnav a[aria-current="page"] { color: var(--forest-deep); }
.masthead__tools { display:flex; align-items:center; gap:.6rem; }
.icon-btn { width:46px; height:46px; border-radius:var(--r-pill); display:grid; place-items:center; background: var(--cream); color: var(--forest-deep); transition: background var(--t-fast), transform var(--t-fast); }
.icon-btn:hover { background: var(--sand); transform: translateY(-1px); }
.icon-btn svg { width:21px; height:21px; }
.nav-burger { display:none; }
@media (max-width: 1080px){ .mainnav, .masthead__tools .btn { display:none; } .nav-burger { display:grid; } }

/* mobile drawer */
.drawer { position:fixed; inset:0; z-index:200; visibility:hidden; }
.drawer__scrim { position:absolute; inset:0; background: rgba(34,56,42,.5); opacity:0; transition: opacity var(--t); }
.drawer__panel { position:absolute; top:0; right:0; height:100%; width:min(88vw,400px); background: linear-gradient(165deg, var(--bone), var(--cream)); padding:26px; display:flex; flex-direction:column; gap:1rem; transform: translateX(100%); transition: transform var(--t); box-shadow: -30px 0 70px -30px rgba(34,56,42,.6); overflow-y:auto; }
.drawer.is-open { visibility:visible; }
.drawer.is-open .drawer__scrim { opacity:1; }
.drawer.is-open .drawer__panel { transform:none; }
.drawer__top { display:flex; align-items:center; justify-content:space-between; }
.drawer nav { display:flex; flex-direction:column; margin-top:.5rem; }
.drawer nav a { display:flex; justify-content:space-between; align-items:center; font-family: var(--ff-display); font-size:1.32rem; color: var(--forest-deep); padding:.62rem 0; border-bottom:1px solid var(--line); }
.drawer nav a small { font-family: var(--ff-body); font-size:.7rem; color: var(--clay); letter-spacing:.12em; }
.drawer__foot { margin-top:auto; padding-top:1rem; }

/* search overlay */
.search-overlay { position:fixed; inset:0; z-index:210; display:flex; align-items:flex-start; justify-content:center; padding-top:14vh; visibility:hidden; }
.search-overlay__scrim { position:absolute; inset:0; background: rgba(34,56,42,.55); backdrop-filter: blur(4px); opacity:0; transition: opacity var(--t); }
.search-overlay__box { position:relative; width:min(92vw,640px); background: var(--bone); border-radius: var(--r-lg); padding:28px; box-shadow: var(--sh-2); transform: translateY(-16px) scale(.98); opacity:0; transition: transform var(--t), opacity var(--t); }
.search-overlay.is-open { visibility:visible; }
.search-overlay.is-open .search-overlay__scrim { opacity:1; }
.search-overlay.is-open .search-overlay__box { transform:none; opacity:1; }
.search-field { display:flex; align-items:center; gap:.8rem; border-bottom:2px solid var(--sage); padding-bottom:.7rem; }
.search-field svg { width:24px; color: var(--sage); flex:none; }
.search-field input { flex:1; border:none; font-size:1.3rem; font-family: var(--ff-display); color: var(--ink); background:none; }
.search-field input:focus { outline:none; box-shadow:none; }
.search-hint { font-size:.8rem; color:var(--muted); margin-top:.8rem; }
.search-results { margin-top:1.2rem; display:grid; gap:.3rem; max-height:42vh; overflow:auto; }
.search-results a { display:flex; justify-content:space-between; padding:.7rem .8rem; border-radius:var(--r-sm); transition: background var(--t-fast); }
.search-results a:hover, .search-results a.is-active { background: var(--cream); }
.search-results .tag { color: var(--clay); font-size:.8rem; }
.search-suggest { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.search-suggest button { font-size:.82rem; padding:.4em .9em; border-radius:var(--r-pill); background: var(--cream); color: var(--bark); }
.search-suggest button:hover { background: var(--sand); }

/* =====================================================================
   FOOTER  (deliberately different visual language to the header)
   ===================================================================== */
.colophon { background: var(--forest-deep); color: rgba(255,255,255,.8); margin-top: clamp(60px,8vw,110px); position:relative; overflow:hidden; }
.colophon__wave { position:absolute; top:-1px; left:0; width:100%; color: var(--canvas); }
.colophon__inner { position:relative; padding-block: clamp(70px,8vw,110px) 0; }
.colophon__lead { display:grid; grid-template-columns: 1.3fr 1fr; gap:2.4rem; align-items:end; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.14); }
.colophon h2 { color:#fff; max-width:16ch; }
.colophon__news label { font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color: var(--clay-soft); }
.news-row { display:flex; gap:.6rem; margin-top:.8rem; }
.news-row input { flex:1; padding:.9em 1.2em; border-radius: var(--r-pill); border:1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color:#fff; }
.news-row input::placeholder { color: rgba(255,255,255,.55); }
.colophon__grid { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap:2rem; padding-block:3rem; }
.colophon__about p { color: rgba(255,255,255,.66); max-width:32ch; margin-top:1rem; }
.colophon__col h4 { color:#fff; font-family: var(--ff-body); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:1rem; }
.colophon__col a { display:block; padding:.3rem 0; color: rgba(255,255,255,.74); font-size:.93rem; transition: color var(--t-fast), padding-left var(--t-fast); }
.colophon__col a:hover { color:#fff; padding-left:5px; }
.socials { display:flex; gap:.55rem; margin-top:1.2rem; }
.socials a { width:42px; height:42px; border-radius:var(--r-pill); display:grid; place-items:center; background: rgba(255,255,255,.1); transition: background var(--t-fast); }
.socials a:hover { background: var(--clay); }
.socials svg { width:18px; }
.colophon__base { display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; padding-block:24px; border-top:1px solid rgba(255,255,255,.14); font-size:.84rem; color: rgba(255,255,255,.6); }
.colophon__base nav { display:flex; gap:1.2rem; flex-wrap:wrap; }
.colophon__disclaimer { font-size:.82rem; color: rgba(255,255,255,.5); max-width: 70ch; padding-bottom:2rem; }
@media (max-width: 900px){ .colophon__lead { grid-template-columns:1fr; } .colophon__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .colophon__grid { grid-template-columns: 1fr; } }

/* back to top + reading progress + scroll indicator */
.to-top { position:fixed; right:22px; bottom:22px; z-index:90; width:50px; height:50px; border-radius:var(--r-pill); background: var(--forest); color:#fff; display:grid; place-items:center; box-shadow: var(--sh-1); opacity:0; transform: translateY(14px); pointer-events:none; transition: opacity var(--t), transform var(--t), background var(--t-fast); }
.to-top.show { opacity:1; transform:none; pointer-events:auto; }
.to-top:hover { background: var(--clay); }
.to-top svg { width:22px; }
.read-progress { position:fixed; top:0; left:0; height:3px; width:0; background: linear-gradient(90deg, var(--sage), var(--clay)); z-index:130; transition: width 80ms linear; }

/* skip link */
.skip { position:absolute; left:-999px; top:0; background: var(--forest); color:#fff; padding:.7em 1.1em; border-radius:0 0 var(--r-sm) 0; z-index:300; }
.skip:focus { left:0; }

@media (prefers-reduced-motion: reduce){ *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; } }