/*
Theme Name: Saltrove
Theme URI: https://saltrove.com
Author: Saltrove Editorial
Author URI: https://saltrove.com
Description: A bespoke, SEO-first WordPress theme for Saltrove — a premium Australian travel publication. Designed in the visual language of Tourism Australia (transparent hero header, serif display type, warm editorial imagery) and engineered from the ground up for Pinterest traffic with hidden 1000x1500 vertical pin support.
Version: 0.5.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 8.1
License: Proprietary — All Rights Reserved
Text Domain: saltrove
Tags: travel, blog, australia, pinterest, seo
*/

/* ==========================================================================
   SALTROVE — DESIGN TOKENS
   Mirrors the Tourism Australia visual system.
   ========================================================================== */

:root {
  /* Brand — Tourism Australia palette */
  --sr-sun:          #FFCD00;   /* G'day yellow — hero accent, CTA fill */
  --sr-sun-deep:     #F5B800;   /* Hover / pressed state for yellow */
  --sr-ember:        #E4002B;   /* Logo red — used sparingly */
  --sr-reef:         #2B8FA5;   /* Footer teal, trust accents */
  --sr-reef-deep:    #1F6E80;

  /* Neutrals */
  --sr-ink:          #14142B;   /* Primary text — near-black, warm */
  --sr-ink-soft:     #3A3A4E;
  --sr-muted:        #6B7280;
  --sr-line:         #E5E7EB;
  --sr-sand:         #F7F5F0;   /* Off-white section background */
  --sr-canvas:       #FAF8F3;   /* Warm off-white — global page background, easier on eyes than pure white */
  --sr-paper:        #FFFFFF;

  /* Typography */
  --sr-font-display: "Fraunces", "Playfair Display", Georgia, serif;
  --sr-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --sr-fs-hero:      clamp(3.5rem, 9vw, 9rem);   /* "G'day" scale */
  --sr-fs-h1:        clamp(2.25rem, 4vw, 3.5rem);
  --sr-fs-h2:        clamp(1.75rem, 2.6vw, 2.25rem);
  --sr-fs-h3:        1.375rem;
  --sr-fs-body:      1rem;
  --sr-fs-small:     0.875rem;

  --sr-lh-tight:     1.05;
  --sr-lh-snug:      1.25;
  --sr-lh-body:      1.6;

  /* Spacing (8pt grid) */
  --sr-space-1:  0.25rem;
  --sr-space-2:  0.5rem;
  --sr-space-3:  0.75rem;
  --sr-space-4:  1rem;
  --sr-space-6:  1.5rem;
  --sr-space-8:  2rem;
  --sr-space-12: 3rem;
  --sr-space-16: 4rem;
  --sr-space-24: 6rem;

  /* Radius — Tourism Australia uses generous rounding on cards */
  --sr-radius-sm: 8px;
  --sr-radius-md: 16px;
  --sr-radius-lg: 24px;
  --sr-radius-pill: 999px;

  /* Elevation */
  --sr-shadow-sm: 0 1px 2px rgba(20,20,43,0.06);
  --sr-shadow-md: 0 8px 24px rgba(20,20,43,0.08);
  --sr-shadow-lg: 0 20px 60px rgba(20,20,43,0.18);

  /* Layout */
  --sr-container:    1200px;
  --sr-container-wide: 1440px;
  --sr-header-h:     80px;

  /* Motion */
  --sr-ease:         cubic-bezier(.2, .7, .2, 1);
  --sr-dur-fast:     160ms;
  --sr-dur:          240ms;
  --sr-dur-slow:     480ms;
}

/* ==========================================================================
   RESET + BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sr-font-body);
  font-size: var(--sr-fs-body);
  line-height: var(--sr-lh-body);
  color: var(--sr-ink);
  background: var(--sr-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--sr-font-display);
  font-weight: 500;
  line-height: var(--sr-lh-tight);
  letter-spacing: -0.01em;
  margin: 0 0 var(--sr-space-4);
}

a { color: inherit; text-decoration: none; transition: color var(--sr-dur-fast) var(--sr-ease); }
a:hover { color: var(--sr-reef-deep); }

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

/* Pinterest hidden-pin utility — used by single.php in a later task */
.sr-pin-hidden {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   HEADER — TRANSPARENT OVER HERO, SOLID ON SCROLL
   ========================================================================== */

.sr-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--sr-header-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition:
    background-color var(--sr-dur) var(--sr-ease),
    box-shadow var(--sr-dur) var(--sr-ease),
    color var(--sr-dur) var(--sr-ease);
}

.sr-header.is-scrolled,
body:not(.home):not(.sr-has-hero) .sr-header {
  background: var(--sr-paper);
  box-shadow: var(--sr-shadow-sm);
}

.sr-header__inner {
  width: 100%;
  max-width: var(--sr-container-wide);
  margin: 0 auto;
  padding: 0 var(--sr-space-6);
  display: flex;
  align-items: center;
  gap: var(--sr-space-8);
}

.sr-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sr-space-2);
  font-family: var(--sr-font-display);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--sr-ember);
  letter-spacing: -0.01em;
}

.sr-header__brand-mark { width: 36px; height: auto; }

.sr-nav {
  display: flex;
  align-items: center;
  gap: var(--sr-space-8);
  margin: 0 auto;
  font-size: 0.95rem;
  font-weight: 500;
}

.sr-nav a { color: var(--sr-ink); }
.sr-header:not(.is-scrolled).sr-header--over-hero .sr-nav a,
.sr-header:not(.is-scrolled).sr-header--over-hero .sr-header__brand { color: var(--sr-paper); }

/* Task 4c — header utility nav (replaced icons with text links) */
.sr-header__utility {
  display: inline-flex;
  align-items: center;
  gap: var(--sr-space-6);
  font-size: 0.9375rem;
  font-weight: 500;
}
.sr-header__link {
  color: var(--sr-ink);
  padding: 0.5rem 0;
  white-space: nowrap;
  text-decoration: none;
}
.sr-header__link:hover {
  color: var(--sr-reef-deep);
}
.sr-header.sr-header--over-hero:not(.is-scrolled) .sr-header__link {
  color: var(--sr-paper);
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
@media (max-width: 900px) {
  .sr-header__utility { display: none; }
}

.sr-header__icon-btn {
  background: none;
  border: 0;
  padding: var(--sr-space-2);
  cursor: pointer;
  color: inherit;
  line-height: 0;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   TASK 4c — PRIMARY NAV (definitive)
   wp_nav_menu() emits: <ul class="sr-nav__list"><li><a>...</a>
                          <ul class="sub-menu"><li><a>...</a></li></ul>
                        </li></ul>
   ========================================================================== */

.sr-nav {
  display: flex;
  align-items: center;
  margin: 0 auto;
}

/* Kill all default list styling on BOTH levels, aggressively. */
.sr-header .sr-nav__list,
.sr-header .sr-nav__list ul,
.sr-header .sr-nav__list li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none;
}

.sr-header .sr-nav__list {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: var(--sr-space-8);
}

.sr-header .sr-nav__list > li {
  position: relative;
  display: flex;
  align-items: center;
}

.sr-header .sr-nav__list > li > a {
  display: inline-block;
  padding: 0.5rem 0;
  font-weight: 500;
  font-size: 0.95rem;
  white-space: nowrap;
  text-decoration: none;
}

/* Down-caret on parent items with children */
.sr-header .sr-nav__list > li.menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 0.4rem;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  vertical-align: middle;
  opacity: 0.7;
}

/* Dropdown */
.sr-header .sr-nav__list .sub-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -6px);
  min-width: 220px;
  background: var(--sr-paper);
  box-shadow: var(--sr-shadow-md);
  border-radius: var(--sr-radius-md);
  padding: var(--sr-space-2) 0 !important;
  margin-top: var(--sr-space-2) !important;
  display: flex !important;
  flex-direction: column !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--sr-dur-fast) var(--sr-ease),
    transform var(--sr-dur-fast) var(--sr-ease),
    visibility 0s linear var(--sr-dur-fast);
  z-index: 1000;
}

.sr-header .sr-nav__list > li:hover > .sub-menu,
.sr-header .sr-nav__list > li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  pointer-events: auto;
  transition-delay: 0s;
}

.sr-header .sr-nav__list .sub-menu a {
  display: block;
  padding: 0.625rem 1.25rem;
  color: var(--sr-ink) !important;
  font-weight: 500;
  font-size: 0.9375rem;
  white-space: nowrap;
  text-decoration: none;
}

.sr-header .sr-nav__list .sub-menu a:hover,
.sr-header .sr-nav__list .sub-menu a:focus {
  background: var(--sr-sand);
}

/* Ensure nav text is readable on transparent-over-hero state. */
.sr-header.sr-header--over-hero:not(.is-scrolled) .sr-nav__list > li > a {
  color: var(--sr-paper);
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.sr-header.sr-header--over-hero:not(.is-scrolled) .sr-nav__list > li.menu-item-has-children > a::after {
  border-top-color: var(--sr-paper);
}

/* Mobile fallback — hide nav entirely until a burger menu is built. */
@media (max-width: 900px) {
  .sr-header .sr-nav { display: none !important; }
}

/* Task 4e — header right-side layout (nav + search grouped together) */
.sr-header__right {
  display: inline-flex;
  align-items: center;
  gap: var(--sr-space-6);
  margin-left: auto;
}

/* Search control — button that expands into an input panel */
.sr-header__search { position: relative; }

.sr-header__search-toggle {
  background: none;
  border: 0;
  padding: 0.5rem;
  cursor: pointer;
  color: inherit;
  line-height: 0;
  border-radius: 50%;
  transition: background var(--sr-dur-fast) var(--sr-ease);
}
.sr-header__search-toggle:hover { background: rgba(0,0,0,0.05); }
.sr-header.sr-header--over-hero:not(.is-scrolled) .sr-header__search-toggle:hover {
  background: rgba(255,255,255,0.15);
}

.sr-header__search-panel {
  position: absolute;
  top: calc(100% + 0.75rem);
  right: 0;
  min-width: 340px;
  background: var(--sr-paper);
  border-radius: var(--sr-radius-pill);
  box-shadow: var(--sr-shadow-md);
  padding: 4px;
  z-index: 1000;
}
.sr-header__search-panel[hidden] { display: none; }

.sr-header__search-panel form {
  display: flex;
  align-items: center;
  gap: 4px;
}
.sr-header__search-panel input[type="search"] {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  padding: 0.625rem 1rem;
  font-size: 0.9375rem;
  font-family: inherit;
  color: var(--sr-ink);
}
.sr-header__search-panel button[type="submit"] {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--sr-ink);
  color: var(--sr-paper);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.sr-header__search-panel button[type="submit"]:hover { background: var(--sr-reef-deep); }

@media (max-width: 600px) {
  .sr-header__search-panel {
    position: fixed;
    top: var(--sr-header-h);
    left: var(--sr-space-4);
    right: var(--sr-space-4);
    min-width: 0;
  }
}

/* ==========================================================================
   TASK 4e — GLOBAL FOOTER (moved here from saltrove-inner.css so it renders
   on every page — homepage, archives, singles, 404, search).
   ========================================================================== */

.sr-footer {
  background: var(--sr-reef);
  color: var(--sr-paper);
  padding: var(--sr-space-16) 0 var(--sr-space-8);
}
.sr-footer a { color: var(--sr-paper); text-decoration: none; }
.sr-footer a:hover { opacity: 0.85; }

.sr-footer__mark {
  display: flex;
  justify-content: center;
  font-family: var(--sr-font-display);
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: var(--sr-space-12);
}

.sr-footer__ack {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--sr-space-6);
  padding-bottom: var(--sr-space-8);
  border-bottom: 1px solid rgba(255,255,255,0.2);
  max-width: var(--sr-container);
  margin: 0 auto;
}
.sr-footer__ack-icon { font-size: 2rem; line-height: 1; color: var(--sr-sun); }
.sr-footer__ack-title { font-weight: 600; margin: 0 0 var(--sr-space-2); font-family: var(--sr-font-display); }
.sr-footer__ack-body  { margin: 0; font-size: 0.9375rem; line-height: 1.6; opacity: 0.95; }

.sr-footer__cols {
  display: grid;
  gap: var(--sr-space-8);
  max-width: var(--sr-container);
  margin: var(--sr-space-12) auto 0;
  grid-template-columns: 1fr 1fr;
  max-width: 720px;
  padding: 0 var(--sr-space-6);
}
.sr-footer__cols--two { grid-template-columns: 1fr 1fr; }
.sr-footer__col h4 {
  font-family: var(--sr-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 var(--sr-space-4);
}
.sr-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sr-space-2);
  font-size: 0.9375rem;
}
.sr-footer__col ul li { list-style: none; }

.sr-footer__social {
  display: flex;
  flex-direction: column;
  gap: var(--sr-space-3);
  font-size: 0.9375rem;
}
.sr-footer__social a {
  display: inline-flex;
  align-items: center;
  gap: var(--sr-space-2);
}
.sr-footer__social-icon {
  color: var(--sr-paper);
  flex-shrink: 0;
}

.sr-footer__copy {
  text-align: center;
  font-size: 0.8125rem;
  margin: var(--sr-space-12) 0 var(--sr-space-4);
  opacity: 0.9;
}

.sr-footer__legal {
  max-width: var(--sr-container);
  margin: 0 auto;
  padding: var(--sr-space-6) var(--sr-space-6) 0;
  border-top: 1px solid rgba(255,255,255,0.2);
  font-size: 0.75rem;
  line-height: 1.55;
  opacity: 0.85;
}

.sr-footer__ack-link { display: none !important; }

@media (max-width: 600px) {
  .sr-footer__cols,
  .sr-footer__cols--two { grid-template-columns: 1fr; }
}

/* Task 4e — homepage intro block + section leads */
.sr-intro {
  padding: var(--sr-space-16) 0 var(--sr-space-8);
  text-align: center;
}
.sr-intro .sr-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 var(--sr-space-6);
}
.sr-intro__kicker {
  font-size: var(--sr-fs-small);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--sr-muted);
  margin: 0 0 var(--sr-space-4);
}
.sr-intro__lead {
  font-family: var(--sr-font-display);
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  line-height: 1.35;
  color: var(--sr-ink);
  margin: 0 0 var(--sr-space-6);
}
.sr-intro__body {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--sr-ink-soft);
  max-width: 640px;
  margin: 0 auto;
}

.sr-section-lead {
  padding: var(--sr-space-12) 0 0;
}
.sr-section-lead .sr-wrap { max-width: var(--sr-container); padding: 0 var(--sr-space-6); }
.sr-section-lead__title {
  font-size: var(--sr-fs-h2);
  margin: 0 0 var(--sr-space-2);
}
.sr-section-lead__desc {
  font-size: 1.0625rem;
  color: var(--sr-ink-soft);
  max-width: 640px;
  margin: 0 0 var(--sr-space-2);
}

/* Carousel title override: the template still renders an h2 when title is "",
   but it's empty. Hide any empty .sr-section__title to keep spacing right. */
.sr-section__title:empty { display: none; }

/* Task 4f — section lead kicker line + destinations postscript note */
.sr-section-lead__kicker {
  font-size: var(--sr-fs-small);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--sr-muted);
  margin: 0 0 var(--sr-space-2);
}

.sr-dest-note {
  padding: var(--sr-space-8) 0 var(--sr-space-4);
  text-align: center;
  color: var(--sr-muted);
  font-size: 0.9375rem;
  font-style: italic;
}
.sr-dest-note .sr-wrap { max-width: 640px; padding: 0 var(--sr-space-6); margin: 0 auto; }