/*
Theme Name: Tajno šumsko društvo
Theme URI: https://tajnosumskodrustvo.org
Author: Tajno šumsko društvo
Author URI: https://tajnosumskodrustvo.org
Description: Custom WordPress classic theme for Tajno šumsko društvo with a landing page and separate regulations page.
Version: 1.1.0
Text Domain: tsd
Tags: custom, accessibility, responsive, landing-page
Requires PHP: 7.4
*/

:root {
  color-scheme: light;

  /* Primary brand colours from assets/svg/logo-h.svg — these are the canonical TSD
     identity palette. Used directly for headings, primary buttons, dark sections, and
     decorative accents per CLAUDE.md "Design tokens". The cream backgrounds + bark body
     text remain muted/earthy so the brand colours pop instead of competing. */
  --brand-green: #277f4b;          /* logo green — headings, primary buttons */
  --brand-green-deep: #1b5c36;     /* darker variant for small-text contexts (eyebrow, links, hover state) */
  --brand-green-darkest: #103a22;  /* dark section background (.section-forest) */
  --brand-teal: #1a7690;           /* secondary accent — heading em + partner CTAs */
  --brand-gold: #e5a923;           /* decorative-only accent — role-line, big-mail underline */

  --color-bg: #f2ede3;             /* page background (cream) */
  --color-surface: #f2ede3;        /* alias for backwards compatibility */
  --color-cream: #e8e1d2;          /* alternating banded sections */
  --color-mushroom: #cfc4ae;       /* warm beige (photo placeholders) */

  /* The page-chrome tokens now alias the brand-* colours so every reference to
     --color-forest / --color-moss in the existing CSS auto-promotes to the logo greens. */
  --color-forest: var(--brand-green-darkest);  /* dark section bg, white text on it = 12.72:1 */
  --color-forest-soft: var(--brand-green-deep); /* button hover state */
  --color-moss: var(--brand-green-deep);        /* links, eyebrows — 6.88:1 on cream, AA ✓ */
  --color-leaf: #c3cba8;            /* pale leaf — eyebrow + em inside .section-forest */

  --color-rust: var(--brand-gold);  /* role-line + big-mail underline (decorative-only) */

  --color-ink: #3a332b;             /* body heading fallback (h2 colour is overridden to brand-green below) */
  --color-bark: #5a4f44;            /* body text */
  --color-stone: #665f57;           /* footer copyright + small labels (4.83:1 on cream-deep) */

  --color-border: rgba(90, 79, 68, 0.12);
  --color-shadow: rgba(48, 40, 32, 0.06);

  /* Typography. Fraunces and Inter are listed first so dropping their .woff2 files into
     assets/fonts/ + a small @font-face block enables them with zero CSS-token edits.
     System fallbacks render close-to-the-design on every OS in the meantime. See
     assets/fonts/README.md for the install steps. */
  /* Quicksand is the active heading face (locally hosted, variable font 300-700).
     Picture-book round sans with FULL Croatian Latin-Extended support (Fredoka shipped
     without č/ć/đ — visible mismatch on hr text). Fallback chain keeps a system serif
     as the defensive last resort. */
  --font-heading: "Quicksand", "Nunito", "Fraunces", "Iowan Old Style", "Apple Garamond", Garamond, Baskerville, Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  /* Spacing rhythm — mirrors --r-section / --r-section-sm in the reference. */
  --r-section: 7rem;
  --r-section-sm: 4.5rem;

  --rad: 18px;
  --rad-sm: 10px;
  --container: 1080px;

  --transition: 200ms ease;
}

@media (max-width: 900px) {
  :root {
    --r-section: 4.5rem;
  }
}

/* Quicksand — local @font-face. Picture-book round sans, full Croatian Latin-Extended
   coverage (š, č, ž, ć, đ all present — verified via fontTools cmap inspection).
   Variable font: a single 53 KB woff2 covers weights 300-700 via the wght axis. We
   declare ONE @font-face block with font-weight as a range (400-700) — no unicode-range
   subsetting, so the browser uses Quicksand for every codepoint the font supports.

   Why Quicksand: Fredoka (previous choice) ships WITHOUT č/ć/đ even in its upstream
   release — those three Croatian letters were visibly falling back to system fonts.
   Quicksand has 694 cmap entries including the full Croatian set. */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/Quicksand-VF.woff2') format('woff2-variations'),
       url('assets/fonts/Quicksand-VF.woff2') format('woff2');
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ===== Reset ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  /* Bumped from 1rem (16px) to 1.0625rem (17px) for a noticeably more comfortable
     editorial reading size. Inter at 17px on cream is the sweet spot for body
     paragraphs at this content density — large enough to read at arm's length,
     small enough that headings still feel dominant. */
  font-size: 1.0625rem;
  color: var(--color-bark);
  /* Cream base + a fine SVG noise overlay = "warm paper" tactile texture. feTurbulence
     at baseFrequency 0.85 produces ultra-fine grain reading as paper fibre. Alpha 0.12
     is deliberately above the threshold of perception — the texture is now meant to
     be visible, not subliminal. Tint is a warm earth brown so the grain reads as
     paper, not video-noise grey. */
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.18 0 0 0 0 0.13 0 0 0 0 0.08 0 0 0 0.12 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  background-repeat: repeat;
  background-size: 220px 220px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Skip link (keyboard users) */
.skip-link {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus,
.skip-link:active {
  position: fixed;
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  background: var(--color-cream);
  color: var(--color-forest);
  padding: 0.6rem 0.9rem;
  z-index: 9999;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

/* ===== Typography ===== */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  /* Brand green for every heading. h1/h2/h3 are all large text per WCAG (≥18pt or
     ≥14pt bold), so 4.28:1 contrast clears AA-Large (3:1) cleanly. */
  color: var(--brand-green);
  font-weight: 500;
  line-height: 1.1;
}

h2 {
  /* Bumped scale for more confident editorial impact — was clamp(2rem, 4vw, 2.75rem). */
  font-size: clamp(2.4rem, 5vw, 4rem);
  margin-bottom: 1.5rem;
  letter-spacing: -0.015em;
  line-height: 1.05;
}

h3 {
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  margin-bottom: 1rem;
  letter-spacing: -0.005em;
}

em {
  font-style: italic;
  color: var(--color-moss);
}

/* Quicksand (heading face) doesn't ship a true italic — browser-synthesized oblique on
   a round display font looks skewed and cheap. Inside headings, swap italic emphasis
   for the maximum 700 weight + brand-teal colour. Teal accents inside green headings
   create a three-color brand rhythm (green base, teal accent words, gold decorative
   lines). */
h1 em, h2 em, h3 em, h4 em,
.hero h1 .italic,
.ana-meta .name em {
  font-style: normal;
  font-weight: 700;
  color: var(--brand-teal);
}

p {
  margin-bottom: 1.25rem;
  max-width: 62ch;
}

p:last-child {
  margin-bottom: 0;
}

.lead {
  font-size: 1.125rem;
  color: var(--color-bark);
}

a:focus-visible {
  outline: 2px solid var(--color-moss);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ===== Layout ===== */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 2rem;
  width: 100%;
}

section {
  padding: var(--r-section) 0;
}

/* ===== Eyebrow (small label) ===== */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-moss);
  font-weight: 500;
  margin-bottom: 1.75rem;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.75rem;
  /* Brand green base. Button label is pure white (not cream) so cream-on-green at
     4.26:1 doesn't fail AA-Normal for the small 0.95rem button text. White on
     brand-green = 5.85:1, AA-Normal ✓. */
  background: var(--brand-green);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--transition), background-color var(--transition);
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-1px);
  background: var(--brand-green-deep);
  outline: none;
}

/* Secondary CTA — brand-teal pill. Used for the Tijelo (partner project) "Saznaj više"
   link so the partner project gets its own brand signal without competing with the
   primary green CTAs. White text on brand-teal = 5.20:1, AA-safe. */
.btn-teal {
  background: var(--brand-teal);
}

.btn-teal:hover,
.btn-teal:focus-visible {
  background: #155f76; /* brand-teal -15% L */
}

.btn::after {
  /* U+2192 RIGHTWARDS ARROW. Written as a CSS hex escape rather than the
     literal glyph so the result is identical regardless of how the file
     is served (UTF-8 vs Latin-1) — some Windows/XAMPP toolchains were
     decoding the 3 UTF-8 bytes as three Latin-1 chars, rendering "â†'". */
  content: "\2192";
  font-size: 1rem;
  line-height: 1;
}

.btn-ghost {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-bark);
  border-bottom: 1px solid var(--color-bark);
  padding-bottom: 2px;
  background: none;
  transition: color var(--transition), border-color var(--transition);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  color: var(--color-moss);
  border-color: var(--color-moss);
  outline: none;
}

/* ===== Header / Nav ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(242, 237, 227, 0.92);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}

.site-header.is-scrolled {
  border-bottom-color: rgba(90, 79, 68, 0.12);
}

.header-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.site-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.site-logo svg {
  /* Logo sign variant (logo-sign.svg) is 142.2 × 152.3 — near-square brand mark
     (foliage + boots, no wordmark). Slightly taller clamp than the previous
     horizontal logo because the square footprint reads as smaller at the same
     pixel height; nav still has plenty of room on the right. */
  height: clamp(2.6rem, 4.5vw, 3.5rem);
  width: auto;
  display: block;
  transition: transform var(--transition);
}

.site-logo:hover svg,
.site-logo:focus-visible svg {
  transform: translateY(-1px);
}

.main-navigation .menu-list,
.menu-fallback {
  display: flex;
  gap: 2rem;
  list-style: none;
  font-family: var(--font-body);
  font-size: 0.9rem;
}

.menu-fallback a,
.main-navigation a {
  color: var(--color-bark);
  text-decoration: none;
  transition: color var(--transition);
}

.menu-fallback a:hover,
.menu-fallback a:focus-visible,
.main-navigation a:hover,
.main-navigation a:focus-visible,
.main-navigation .current-menu-item > a {
  color: var(--color-moss);
  outline: none;
}

/* Hamburger button.
   - Sits above the mobile menu overlay (z-index 300 > overlay 200) so the
     bars-to-X animation stays visible while the menu is open. That also makes
     this button the close trigger — no separate close × needed inside the
     overlay (it was removed from header.php).
   - Bars are absolutely positioned so they can animate independently to form
     the X (top + bottom rotate to meet in the middle, middle fades out).
   - Hit target stays 44×44 for touch (WCAG 2.5.5 Target Size). */
.menu-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 300;
  color: var(--color-ink);
}

.menu-toggle__bar {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transform-origin: center;
  transition: transform 0.32s cubic-bezier(0.65, 0.05, 0.36, 1),
              opacity 0.18s ease;
}

/* Three bars at 14 / 21 / 28px from the top — 7px spacing between centers.
   On open: top + bottom translate 7px to the centre line and rotate to form
   the X; middle bar collapses (scaleX 0 + opacity 0) so it disappears
   "into" the centre rather than fading from its full width. */
.menu-toggle__bar:nth-child(1) { top: 14px; }
.menu-toggle__bar:nth-child(2) { top: 21px; }
.menu-toggle__bar:nth-child(3) { top: 28px; }

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.menu-toggle:focus-visible {
  outline: 2px solid var(--brand-green);
  outline-offset: 4px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .menu-toggle__bar {
    transition: none;
  }
}

.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  display: none;
  background: var(--color-bg);
  color: var(--color-ink);
  padding: 5rem 2rem 2rem;
  z-index: 200;
  overflow-y: auto;
}

.mobile-menu-overlay.active {
  display: block;
}

.mobile-menu-overlay nav .menu-list,
.mobile-menu-overlay nav .menu-fallback {
  flex-direction: column;
  gap: 1.4rem;
  font-size: 1.2rem;
  font-family: var(--font-heading);
}

/* ===== Hero ===== */
.hero {
  padding: 7rem 0 6rem;
  min-height: 88vh;
  display: flex;
  align-items: center;
  /* Quiet radial cream-deep glow so the hero feels like a soft clearing in the forest,
     not a flat block. Pure colour, no images required. */
  background:
    radial-gradient(circle at 85% 30%, rgba(122, 132, 102, 0.16) 0%, transparent 50%),
    radial-gradient(circle at 10% 90%, rgba(181, 135, 114, 0.10) 0%, transparent 45%),
    var(--color-bg);
}

.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 4rem;
  align-items: center;
}

.hero-copy {
  /* The copy column needs to stay readable when the logo column takes width. */
  min-width: 0;
}

.hero h1 {
  font-family: var(--font-heading);
  /* Bumped upper bound for a confident editorial moment — was clamp(3.25rem, 8vw, 5.5rem). */
  font-size: clamp(3.5rem, 9vw, 7rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin-bottom: 2rem;
  color: var(--color-ink);
}

.hero h1 .italic {
  display: block;
  font-style: italic;
  color: var(--color-moss);
}

.hero-sub {
  font-family: var(--font-heading);
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  color: var(--color-bark);
  max-width: 32ch;
  line-height: 1.4;
  margin-bottom: 2.75rem;
  font-weight: 400;
}

.hero-actions {
  display: flex;
  gap: 2rem;
  align-items: center;
  flex-wrap: wrap;
}

.hero-mark {
  /* The brand SVG as the dominant feature next to the typography. Kept upright
     (no rotation) so the wordmark reads cleanly; subtle vertical hover lift only. */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
}

.hero-mark svg {
  width: 100%;
  max-width: 28rem;
  height: auto;
  transition: transform 600ms cubic-bezier(0.2, 0.7, 0.1, 1);
}

.hero:hover .hero-mark svg,
.hero-mark svg:focus-within {
  transform: translateY(-4px);
}

/* Boot animation: every 10s the two yellow boots wiggle at each other for
   about a second, then go still. Scoped to .hero-mark so the small header
   logo (which inlines the same SVG) stays still — there's only room in the
   header for a static mark. transform-box: fill-box makes transform-origin
   resolve inside each <path>'s own bounding box, so each boot pivots from
   its top edge (the laces / opening), giving the wiggle a natural hinge
   point instead of swinging from the SVG origin (0,0). */
.hero-mark .boot {
  transform-box: fill-box;
  transform-origin: center top;
  animation: tsd-boot-cycle 10s ease-in-out infinite;
  will-change: transform;
}
.hero-mark .boot--right {
  animation-name: tsd-boot-cycle-right;
  animation-delay: -0.05s;
}

@keyframes tsd-boot-cycle {
  0%,  70%, 80%, 100% { transform: rotate(0deg); }
  72%                 { transform: rotate(-7deg); }
  74%                 { transform: rotate(7deg); }
  76%                 { transform: rotate(-6deg); }
  78%                 { transform: rotate(5deg); }
}

/* Mirror the wiggle on the right boot so they look like they're shaking
   at each other, not in lockstep. */
@keyframes tsd-boot-cycle-right {
  0%,  70%, 80%, 100% { transform: rotate(0deg); }
  72%                 { transform: rotate(7deg); }
  74%                 { transform: rotate(-7deg); }
  76%                 { transform: rotate(6deg); }
  78%                 { transform: rotate(-5deg); }
}

/* Bush shake: right after the boot wiggle, the foliage shakes as if someone
   bumped the bush from below. Same 10s cycle as the boots, just phased 10%
   later (80–88% vs 72–78%) so the two animations chain: boots wiggle, *then*
   leaves shake. Pivot is bottom-center so the canopy sways from where it
   meets the boots, not from the (0,0) SVG origin. */
.hero-mark .foliage {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: tsd-bush-shake 10s ease-in-out infinite;
  will-change: transform;
}

@keyframes tsd-bush-shake {
  0%, 78%, 90%, 100% { transform: rotate(0deg); }
  80%                { transform: rotate(-2.5deg); }
  82%                { transform: rotate(2.5deg); }
  84%                { transform: rotate(-2deg); }
  86%                { transform: rotate(1.5deg); }
  88%                { transform: rotate(-0.8deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-mark .boot,
  .hero-mark .foliage {
    animation: none;
  }
}

@media (max-width: 900px) {
  .hero-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .hero-mark {
    order: -1;
    padding: 0;
  }
  .hero-mark svg {
    max-width: 16rem;
  }
}

/* ===== Reveal animation ===== */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .main-navigation {
    display: none;
  }

  .menu-toggle {
    display: inline-block;
  }

  .container {
    padding: 0 1.5rem;
  }

  .hero {
    padding: 4rem 0 3rem;
    min-height: auto;
  }
}