/* ============================================================
   wild terra tales - global stylesheet
   Earth's natural wonders | clean geometric sans (Outfit/Manrope)
   ============================================================ */

:root {
  --bg: #ffffff;
  --surface: #f4f7f5;
  --text: #16201c;
  --muted: #5c6b64;
  --line: #e2e8e4;
  --primary: #1f6b4f;
  --primary-dark: #15523c;
  --accent: #d9772e;
  --footer-bg: #14201c;      /* anchor reserved padding bg matches footer */
  --footer-text: #c9d2cd;
  --footer-muted: #8a978f;
  --maxw: 1180px;
  --radius: 14px;
  --shadow: 0 6px 24px rgba(20, 40, 30, 0.08);
  --header-h: 68px;
  --anchor-h: 60px;         /* fixed bottom anchor-ad strip height */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Outfit", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* ---------------- Header ---------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  height: var(--header-h);
}
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand img { height: 40px; width: auto; }
.brand .wordmark { font-weight: 700; letter-spacing: 0.5px; font-size: 18px; color: var(--text); }
.brand .wordmark small { display: block; font-weight: 300; letter-spacing: 3px; font-size: 11px; color: var(--primary); }

.main-nav { flex: 1; }
.main-nav ul {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}
.main-nav a {
  display: inline-block;
  padding: 10px 14px;
  font-weight: 500;
  font-size: 15px;
  border-radius: 8px;
  color: var(--text);
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.main-nav a:hover, .main-nav a.active { background: var(--surface); color: var(--primary); }

.header-tools {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
  /* keep the tool cluster hard against the right edge even when
     .main-nav is display:none (mobile) and no longer contributes flex:1 */
  margin-left: auto;
}

/* language toggle */
.lang-toggle {
  position: relative;
}
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.lang-btn .globe { font-size: 14px; }
.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 6px;
  min-width: 130px;
  display: none;
  z-index: 300;
}
.lang-menu.open { display: block; }
.lang-menu button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: none;
  border: none;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--text);
  text-align: left;
}
.lang-menu button:hover { background: var(--surface); }
.lang-menu button.active { color: var(--primary); font-weight: 700; }
.lang-menu .tick { color: var(--primary); }

.hamburger {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  width: 44px; height: 44px;      /* same footprint as .tool-btn / mobile .lang-btn */
  font-size: 20px;
  color: var(--text);
  flex-shrink: 0;
}

/* header tool buttons: search + language sit on the right */
.tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tool-btn:hover { background: #eaf1ec; color: var(--primary); border-color: #cfe0d6; }
.tool-btn svg { display: block; }

/* ---------------- Hero ---------------- */
.hero { padding: 28px 0 8px; }
.hero-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 440px;
  display: flex;
  align-items: flex-end;
  color: #fff;
  box-shadow: var(--shadow);
}
.hero-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,20,16,0.05) 0%, rgba(10,20,16,0.78) 100%);
}
.hero-body { position: relative; z-index: 2; padding: 32px; max-width: 760px; }
.hero-tag {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.hero-body h1 { font-size: 38px; line-height: 1.15; margin: 0 0 12px; font-weight: 700; }
.hero-body p { font-size: 17px; margin: 0 0 16px; color: #eaf1ec; }
.hero-meta { font-size: 13px; color: #cfe0d6; }

/* homepage value proposition + clear topic navigation (above the hero card) */
.hero-intro { max-width: 860px; margin: 0 0 22px; }
.hero-eyebrow {
  display: inline-block; margin: 0 0 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--primary); background: #eaf1ec; border: 1px solid #cfe0d6;
  padding: 6px 13px; border-radius: 999px;
}
.hero-value {
  font-size: 31px; line-height: 1.22; font-weight: 700; color: var(--text);
  margin: 0 0 16px; letter-spacing: -0.01em;
}
.hero-browse {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #5b6b62; margin: 0 0 11px;
}
.hero-nav { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-chip {
  display: inline-flex; align-items: center; padding: 10px 17px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff;
  color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none;
  transition: background .15s, color .15s, border-color .15s, transform .12s;
}
.hero-chip:hover { background: var(--primary); color: #fff; border-color: var(--primary); transform: translateY(-1px); }

/* ---------------- Section ---------------- */
.section { padding: 30px 0; }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 2px solid var(--text);
  padding-bottom: 10px;
  margin-bottom: 22px;
}
.section-head h2 { font-size: 24px; margin: 0; font-weight: 700; letter-spacing: 0.3px; }
.section-head a { font-size: 13px; color: var(--primary); font-weight: 600; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s, box-shadow 0.15s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card .thumb { aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface); }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.card .body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card .cat {
  font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--primary);
}
.card h3 { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 600; }
.card p { margin: 0; font-size: 14px; color: var(--muted); }
.card .meta { margin-top: auto; font-size: 12px; color: var(--footer-muted); }

/* ---------------- Article (detail) ---------------- */
.article { padding: 26px 0 10px; }
.article-head { max-width: 820px; margin: 0 auto; }
.article-cat {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--primary); margin-bottom: 10px;
}
.article-head h1 { font-size: 34px; line-height: 1.2; margin: 0 0 12px; font-weight: 700; }
.article-sub { font-size: 18px; color: var(--muted); margin: 0 0 14px; }
.article-meta { font-size: 13px; color: var(--footer-muted); border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.article-body { max-width: 720px; margin: 0 auto; }
.article-body p { font-size: 18px; margin: 0 0 22px; }
.article-body h3 {
  font-size: 23px; margin: 34px 0 14px; font-weight: 700; color: var(--primary-dark);
}
.article-figure { margin: 26px 0; }
.article-figure img { width: 100%; border-radius: 12px; }
.article-figure figcaption { font-size: 13px; color: var(--footer-muted); margin-top: 8px; text-align: center; }

.related { max-width: 1180px; margin: 40px auto 0; }
.related .card-grid { grid-template-columns: repeat(4, 1fr); }

/* ---------------- Ad units ---------------- */
.ad-unit {
  margin: 26px auto;
  max-width: 1180px;
  padding: 0 20px;
}
/* An ad dropped inside a card grid (e.g. directly below a specific card)
   must span the whole row at 100% width - NOT shrink to a single grid cell
   (which is what made the placeholder look narrow on mobile/tablet). */
.card-grid > .ad-unit {
  grid-column: 1 / -1;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}
.ad-slot { display: none; }      /* shown only when real ad injected */
.ad-unit.filled .ad-slot { display: block; }
.ad-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 250px;
  border: 2px dashed #b9c6bf;
  border-radius: 14px;
  background: #f4f7f5;
  color: #6c7d75;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ad-unit.filled .ad-fallback { display: none; }
.ad-fallback span { opacity: 0.9; font-weight: 600; }
/* slot id badge so the team can see exactly which slot sits where */
.ad-fallback::after {
  content: attr(data-slot);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #93a49b;
  background: #fff;
  border: 1px solid #dbe4df;
  border-radius: 999px;
  padding: 3px 12px;
  text-transform: none;
}
@media (max-width: 640px) {
  .ad-fallback { min-height: 180px; }
}

/* anchor (bottom floating bar) - fixed 60px strip pinned to the viewport
   bottom; shares the footer background so it reads as a seamless extension
   of the footer instead of a floating strip with a gap above it */
.anchor-wrap {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 150;
  display: block;                 /* always visible: same rule as home/detail slots */
  height: var(--anchor-h);       /* fixed 60px strip, height defined at :root */
  background: var(--footer-bg);  /* matches footer bg per spec */
  color: #fff;
  padding: 6px 12px;             /* symmetric: label stays centred, no button */
  text-align: center;
  overflow: hidden;
}
.anchor-wrap .ad-slot { display: none; }
/* once a real ad is injected, hide the placeholder and show the slot */
.anchor-wrap.filled .ad-slot { display: block; }
.anchor-wrap.filled .ad-fallback { display: none; }
/* on the dark bar, use a light-on-dark treatment instead; fill the 60px strip.
   Only the centred Advertisement label is shown - no slot badge, no buttons. */
.anchor-wrap .ad-fallback {
  height: 100%;
  min-height: 0;
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.72);
}
.anchor-wrap .ad-fallback::after { content: none; }
/* Reserve space so the last line of content is never hidden behind the
   fixed 60px bar. The site footer carries the extra bottom padding in the
   SAME dark colour, so the page bottom flows straight into the anchor bar
   with no light gap and no fixed-background trickery. */
body { padding-bottom: 0; }
/* Reserve 80px below the footer's last line so scrolling to the very bottom
   never hides content behind the fixed 60px anchor bar (80px = 60px bar +
   20px breathing room). Same dark colour as the footer, so it reads as a
   seamless continuation.
   Scoped with :has() so pages WITHOUT an anchor bar (the four compliance
   pages) keep their normal footer padding and gain no empty strip. */
body:has(.anchor-wrap) .site-footer { padding-bottom: 80px; }
/* .floating-actions clears the fixed 60px anchor bar at every breakpoint. */

/* interstitial overlay */
.inter-overlay {
  position: fixed; inset: 0;
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10, 18, 14, 0.72);
}
.inter-overlay.show { display: flex; }
.inter-box {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 22px;
  max-width: 92vw;
  max-height: 92vh;
  overflow: auto;
  box-shadow: var(--shadow);
}
.inter-continue {
  display: block;
  margin: 0 auto 14px;
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 10px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
}
.inter-slot .ad-slot { display: none; }

/* reviewer preview (?adpreview=1) placeholder for anchor + interstitial */
.ad-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90px;
  border: 2px dashed #b9c6bf;
  border-radius: 10px;
  background: #f4f7f5;
  color: #6c7d75;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.inter-slot .ad-preview { min-height: 250px; }

/* ---------------- Back to top / home ---------------- */
.floating-actions {
  position: fixed;
  right: 20px;
  bottom: calc(var(--anchor-h, 60px) + 26px);   /* always clears the anchor bar */
  z-index: 180;
  display: none;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}
.floating-actions.show { display: flex; }
.fab {
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--primary);
  box-shadow: 0 8px 22px rgba(20, 40, 30, 0.16);
  font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.12s, background 0.12s, box-shadow 0.12s;
}
.fab svg { width: 26px; height: 26px; display: block; }
.fab:hover { transform: scale(1.07); background: var(--surface); box-shadow: 0 10px 26px rgba(20, 40, 30, 0.22); }
.fab.home { background: var(--primary); color: #fff; border-color: var(--primary); }
.fab.home:hover { background: var(--primary-dark); color: #fff; }

/* ---------------- Footer ---------------- */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  margin-top: 50px;
  padding: 46px 0 26px;
}
.footer-cols {
  display: grid;
  /* brand takes a full row of its own; Categories / Company / Legal share
     ONE row below it at every viewport width. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px 28px;
}
.footer-brand { grid-column: 1 / -1; }
.footer-cols h4 { color: #fff; font-size: 14px; letter-spacing: 0.5px; margin: 0 0 14px; text-transform: uppercase; }
.footer-cols ul { list-style: none; margin: 0; padding: 0; }
.footer-cols li { margin-bottom: 9px; }
.footer-cols a { color: var(--footer-text); font-size: 14px; }
.footer-cols a:hover { color: #fff; }
.footer-brand p { font-size: 14px; color: var(--footer-muted); max-width: 320px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  margin-top: 30px;
  padding-top: 18px;
  font-size: 13px;
  color: var(--footer-muted);
}
.cookie-note { font-size: 12.5px; color: var(--footer-muted); margin-top: 10px; line-height: 1.5; }

/* ---------------- Compliance pages ---------------- */
.legal { max-width: 820px; margin: 0 auto; padding: 36px 0 10px; }
.legal h1 { font-size: 30px; margin: 0 0 8px; }
.legal h2 { font-size: 20px; margin: 30px 0 10px; color: var(--primary-dark); }
.legal p, .legal li { font-size: 16px; color: #2c3a33; }
.legal .updated { color: var(--footer-muted); font-size: 13px; }

/* ---------------- Responsive ---------------- */
@media (max-width: 900px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .related .card-grid { grid-template-columns: repeat(2, 1fr); }
  /* keep Categories / Company / Legal on a single row on tablets too */
  .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 18px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  /* keep the one-line logo compact so it fits beside the tool cluster */
  .brand img { height: 34px; }
  .header-inner { gap: 12px; }
  .main-nav { display: none; }
  .main-nav.open {
    display: block;
    position: absolute;
    top: var(--header-h);
    left: 0; right: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: 10px;
  }
  .main-nav.open ul { flex-direction: column; gap: 2px; }
  .main-nav.open a { display: block; }
  .hamburger { display: inline-flex; align-items: center; justify-content: center; }
  .card-grid, .related .card-grid { grid-template-columns: 1fr; }
  /* keep Categories / Company / Legal on a single row even on phones;
     the columns shrink and their labels wrap instead of stacking. */
  .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 16px; }
  .footer-cols h4 { font-size: 12px; margin-bottom: 10px; }
  .footer-cols a { font-size: 13px; }
  .footer-cols li { margin-bottom: 7px; }
  .hero-card { min-height: 320px; }
  .hero-body h1 { font-size: 26px; }
  .article-head h1 { font-size: 26px; }
  .floating-actions { bottom: 90px; }
  /* match language button to search (44x44) + hamburger on mobile */
  .lang-btn {
    width: 44px; height: 44px; border-radius: 10px;
    padding: 0; justify-content: center; gap: 3px; flex-direction: column;
  }
  .lang-btn .globe { font-size: 15px; }
  .lang-btn .code { font-size: 10px; line-height: 1; }
  .hero-value { font-size: 23px; }
}