/*
Theme Name: Sunkissed Beaches
Theme URI: https://sunkissedbeaches.com.au
Author: SunPlay Australia
Author URI: https://sunplayaustralia.com
Description: Custom theme for Sunkissed Beaches, a directory and guide to the best, safest family-friendly beaches across Australia, curated by SunPlay Australia with insight from the Australian beach community.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sunkissed-beaches
*/


/* =========================================================
   SUNKISSED BEACHES, single-file site
   Coastal, classy, clean, styled to match SunPlay Australia
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,600&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --deep-ocean:#0A0A0A;
  --deep-ocean-2:#000000;
  --lagoon:#0B7A80;
  --lagoon-light:#2E9B96;
  --foam:#EAF4F1;
  --shell:#FEFEFE;
  --sand:#E9E7E2;
  --sand-light:#F7F7F5;
  --coral:#FDB92B;
  --coral-dark:#D99A1A;
  --ink:#16282A;
  --ink-60: rgba(22,40,42,.62);
  --ink-35: rgba(22,40,42,.35);
  --line: rgba(14,59,61,.14);
  --white:#ffffff;
  --font-display:'Playfair Display', Georgia, serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius-sm:10px;
  --radius-md:18px;
  --radius-lg:30px;
  --shadow-soft: 0 1px 2px rgba(14,59,61,.05), 0 12px 32px -14px rgba(14,59,61,.22);
  --shadow-card: 0 1px 2px rgba(14,59,61,.05), 0 8px 20px -10px rgba(14,59,61,.18);
  --ease: cubic-bezier(.4,0,.2,1);
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; font-family:var(--font-body); color:var(--ink); background:var(--shell); -webkit-font-smoothing:antialiased; line-height:1.6; overflow-x:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; margin:0; color:var(--deep-ocean); letter-spacing:-.01em; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; }
:focus-visible{ outline:3px solid var(--coral); outline-offset:3px; border-radius:4px; }
.skip-link{ position:absolute; left:-999px; top:auto; background:var(--deep-ocean); color:#fff; padding:.9rem 1.4rem; border-radius:0 0 10px 0; z-index:300; font-weight:600; }
.skip-link:focus{ left:0; top:0; }
.container{ width:100%; max-width:1200px; margin-inline:auto; padding-inline:24px; }
@media (min-width:900px){ .container{ padding-inline:40px; } }
.eyebrow{ font-family:var(--font-body); font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--lagoon); display:inline-flex; align-items:center; gap:.55rem; }
.eyebrow::before{ content:''; width:22px; height:1px; background:var(--coral); display:inline-block; }
.section{ padding:88px 0; }
.section--tight{ padding:56px 0; }
.section--deep{ background:var(--deep-ocean); color:var(--foam); }
.section--deep h2,.section--deep h3{ color:#fff; }
.section--foam{ background:var(--foam); }
.section--sand{ background:var(--sand-light); }
.section-head{ max-width:640px; margin-bottom:44px; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head h2{ font-size:clamp(1.8rem,3vw,2.6rem); margin-top:.6rem; }
.section-head p{ color:var(--ink-60); font-size:1.05rem; margin-top:14px; }
.section--deep .section-head p{ color:rgba(255,255,255,.72); }

/* Buttons, rounded pill shape, matching SunPlay's CTA style */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55rem; padding:.9rem 1.7rem; border-radius:100px; font-weight:700; font-size:.95rem; border:1.5px solid transparent; transition:transform .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease), box-shadow .22s var(--ease); white-space:nowrap; }
.btn:hover{ transform:translateY(-2px); }
.btn-coral{ background:var(--coral); color:#fff; box-shadow:0 10px 24px -10px rgba(221,107,75,.6); }
.btn-coral:hover{ background:var(--coral-dark); }
.btn-outline{ border-color:rgba(255,255,255,.5); color:#fff; }
.btn-outline:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.btn-ghost{ border-color:var(--line); color:var(--deep-ocean); }
.btn-ghost:hover{ border-color:var(--deep-ocean); }
.btn-sm{ padding:.62rem 1.2rem; font-size:.85rem; }
.btn svg{ width:16px; height:16px; flex:none; }
.btn:disabled{ opacity:.6; cursor:default; transform:none; }

/* Header */
.site-header{ position:sticky; top:0; z-index:200; background:rgba(252,250,246,.88); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding-block:14px; gap:16px; }
.brand{ display:flex; align-items:center; gap:.65rem; }
.brand-mark{ width:40px; height:40px; flex:none; }
.brand-word{ font-family:var(--font-display); font-weight:600; font-size:1.22rem; color:var(--deep-ocean); line-height:1.1; }
.brand-tag{ display:block; font-family:var(--font-body); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--lagoon); font-weight:700; margin-top:1px; }
.main-nav{ display:none; align-items:center; gap:2rem; }
.main-nav a{ font-weight:600; font-size:.92rem; color:var(--ink); position:relative; padding-block:6px; cursor:pointer; }
.main-nav a::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--coral); transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease); }
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after{ transform:scaleX(1); }
.main-nav a[aria-current="page"]{ color:var(--deep-ocean); }
.header-cta{ display:none; }
.nav-toggle{ display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center; border-radius:50%; border:1.5px solid var(--line); background:var(--shell); flex:none; }
@media (min-width:960px){ .main-nav{ display:flex; } .header-cta{ display:flex; } .nav-toggle{ display:none; } }

/* Mobile nav dropdown */
@media (max-width:959px){
  .main-nav{ display:flex; flex-direction:column; gap:0; position:absolute; top:100%; left:0; right:0; background:var(--shell); border-bottom:1px solid var(--line); max-height:0; overflow:hidden; opacity:0; transition:max-height .32s var(--ease), opacity .25s var(--ease); box-shadow:var(--shadow-soft); }
  .main-nav.is-open{ max-height:420px; opacity:1; }
  .main-nav a{ padding:16px 24px; border-top:1px solid var(--line); }
  .main-nav a::after{ display:none; }
  .main-nav .mobile-cta{ padding:16px 24px; border-top:1px solid var(--line); }
  .header-inner{ position:relative; }
}

/* Page entrance animation (used per real WP page load) */
.page-enter{ animation:fadein .4s var(--ease); }
@keyframes fadein{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:translateY(0);} }

/* Scroll reveal */
[data-reveal]{ opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }

/* Hero */
.hero{ position:relative; overflow:hidden; color:#fff; min-height:78vh; display:flex; align-items:center; }
.hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.hero-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,46,47,.55) 0%, rgba(10,46,47,.72) 55%, rgba(10,46,47,.92) 100%); }
.hero-inner{ position:relative; z-index:2; padding-block:70px; max-width:720px; }
.hero-eyebrow{ color:var(--sand); }
.hero-eyebrow::before{ background:var(--sand); }
.hero h1{ color:#fff; font-size:clamp(2.4rem,5.4vw,4rem); line-height:1.06; margin-top:18px; }
.hero h1 em{ font-style:italic; color:var(--sand); }
.hero-sub{ margin-top:20px; font-size:1.12rem; color:rgba(255,255,255,.82); max-width:52ch; }
.hero-actions{ margin-top:32px; display:flex; flex-wrap:wrap; gap:14px; }
.hero-stats{ margin-top:48px; display:flex; flex-wrap:wrap; gap:34px; }
.hero-stat strong{ display:block; font-family:var(--font-display); font-size:1.7rem; color:#fff; }
.hero-stat span{ font-size:.78rem; color:rgba(255,255,255,.7); }

/* Page header (non-home pages) */
.page-header{ background:linear-gradient(180deg, var(--deep-ocean-2), var(--deep-ocean)); color:#fff; padding-block:64px 56px; }
.page-header h1{ color:#fff; font-size:clamp(2.1rem,4.2vw,3.1rem); margin-top:14px; max-width:20ch; }
.page-header p{ color:rgba(255,255,255,.76); font-size:1.05rem; max-width:62ch; margin-top:16px; }

/* Trust strip */
.trust-strip{ display:grid; gap:28px; grid-template-columns:1fr; }
@media (min-width:820px){ .trust-strip{ grid-template-columns:repeat(4,1fr); } }
.trust-item{ display:flex; flex-direction:column; gap:12px; }
.trust-icon{ width:48px; height:48px; border-radius:14px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; }
.trust-icon svg{ width:22px; height:22px; color:var(--sand); }
.trust-item h4{ color:#fff; font-size:1.05rem; }
.trust-item p{ color:rgba(255,255,255,.65); font-size:.92rem; }
.trust-strip.light .trust-icon{ background:var(--foam); border-color:rgba(14,59,61,.1); }
.trust-strip.light .trust-icon svg{ color:var(--lagoon); }
.trust-strip.light h4{ color:var(--deep-ocean); }
.trust-strip.light p{ color:var(--ink-60); }

/* Benefit cards */
.benefit-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); padding:32px 28px; box-shadow:var(--shadow-card); }
.benefit-icon{ width:54px; height:54px; border-radius:16px; background:var(--foam); display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.benefit-icon svg{ width:26px; height:26px; color:var(--lagoon); }
.benefit-card h3{ font-size:1.25rem; margin-bottom:10px; }
.benefit-card p{ color:var(--ink-60); font-size:.95rem; }

/* Cards / grids */
.card-grid{ display:grid; gap:26px; grid-template-columns:1fr; }
@media (min-width:640px){ .card-grid--2{ grid-template-columns:1fr 1fr; } }
@media (min-width:680px){ .card-grid--3{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .card-grid--3{ grid-template-columns:repeat(3,1fr); } .card-grid--4{ grid-template-columns:repeat(4,1fr); } }
@media (min-width:640px){ .card-grid--4{ grid-template-columns:1fr 1fr; } }

.beach-card{ background:#fff; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-card); border:1px solid var(--line); display:flex; flex-direction:column; transition:transform .28s var(--ease), box-shadow .28s var(--ease); }
.beach-card:hover{ transform:translateY(-5px); box-shadow:0 22px 44px -18px rgba(14,59,61,.3); }
.beach-card-media{ aspect-ratio:4/2.7; position:relative; overflow:hidden; background:var(--sand-light); }
.beach-card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.beach-card:hover .beach-card-media img{ transform:scale(1.06); }
.beach-card-badge{ position:absolute; top:14px; left:14px; background:rgba(255,255,255,.94); color:var(--deep-ocean); font-size:.72rem; font-weight:700; letter-spacing:.03em; padding:.35rem .75rem; border-radius:100px; z-index:2; }
.beach-card-badge--coral{ background:var(--coral); color:#fff; }
.beach-card-body{ padding:24px; display:flex; flex-direction:column; gap:12px; flex:1; }
.beach-card-region{ font-size:.78rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--lagoon); }
.beach-card-body h3{ font-size:1.3rem; }
.beach-card-body p{ color:var(--ink-60); font-size:.92rem; }
.beach-card-foot{ margin-top:auto; padding-top:16px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; }

/* Chips */
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; font-weight:600; color:var(--deep-ocean); background:var(--foam); border:1px solid rgba(14,59,61,.10); padding:.4rem .8rem; border-radius:100px; }
.chip svg{ width:14px; height:14px; flex:none; color:var(--lagoon); }
.chip--coral{ background:rgba(221,107,75,.1); color:var(--coral-dark); border-color:rgba(221,107,75,.25); }
.chip--coral svg{ color:var(--coral); }

/* Why-we-chose / family-friendly blocks on Directory cards */
.why-block{ background:var(--foam); border-radius:var(--radius-sm); padding:14px 16px; }
.why-block h5{ font-size:.74rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--lagoon); margin-bottom:6px; }
.why-block p{ font-size:.88rem; color:var(--ink); }

/* Filter bar */
.filter-bar{ background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-soft); padding:22px; display:grid; gap:14px; min-width:0; }
.filter-bar > *{ min-width:0; }
@media (min-width:780px){ .filter-bar{ grid-template-columns:1fr 1fr 1fr auto; align-items:end; padding:26px 28px; } }
.filter-field{ display:flex; flex-direction:column; gap:6px; }
.filter-field label{ font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-60); }
.filter-field select, .filter-field input{ border:1.5px solid var(--line); border-radius:12px; padding:.8rem .95rem; font-family:inherit; font-size:16px; color:var(--ink); background:var(--shell); }
.filter-bar .btn{ min-height:50px; height:auto; white-space:normal; text-align:center; line-height:1.3; }
.result-count{ font-size:.85rem; color:var(--ink-60); font-weight:600; }

/* Testimonials */
.testimonial-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); padding:30px 26px; box-shadow:var(--shadow-card); display:flex; flex-direction:column; gap:18px; }
.stars{ display:flex; gap:4px; color:var(--coral); }
.stars svg{ width:16px; height:16px; }
.testimonial-card p{ font-size:1rem; color:var(--ink); font-style:italic; }
.testimonial-author{ display:flex; align-items:center; gap:12px; margin-top:auto; }
.avatar{ width:42px; height:42px; border-radius:50%; background:var(--lagoon); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-family:var(--font-display); flex:none; }
.testimonial-author strong{ display:block; font-size:.92rem; color:var(--deep-ocean); }
.testimonial-author span{ font-size:.82rem; color:var(--ink-60); }

/* Callouts */
.callout{ border-radius:var(--radius-md); padding:22px 24px; display:flex; gap:16px; align-items:flex-start; border:1px solid var(--line); }
.callout-icon{ width:40px; height:40px; flex:none; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.callout-icon svg{ width:19px; height:19px; }
.callout--verified{ background:var(--foam); }
.callout--verified .callout-icon{ background:rgba(30,127,121,.14); color:var(--lagoon); }
.callout--safety{ background:rgba(253,185,43,.10); border-color:rgba(253,185,43,.3); }
.callout--safety .callout-icon{ background:rgba(253,185,43,.2); color:var(--coral-dark); }
.callout h4{ font-size:1rem; margin-bottom:4px; }
.callout p{ font-size:.9rem; color:var(--ink-60); }

/* Contact form */
.contact-grid{ display:grid; gap:44px; grid-template-columns:1fr; }
@media (min-width:900px){ .contact-grid{ grid-template-columns:1.1fr .9fr; } }
.contact-form{ background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-soft); padding:32px; display:grid; gap:18px; }
.form-row{ display:grid; gap:18px; }
@media (min-width:560px){ .form-row--2{ grid-template-columns:1fr 1fr; } }
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-size:.82rem; font-weight:700; color:var(--deep-ocean); }
.field input, .field textarea{ border:1.5px solid var(--line); border-radius:12px; padding:.85rem 1rem; font-family:inherit; font-size:16px; color:var(--ink); background:var(--shell); resize:vertical; }
.field input:invalid:not(:placeholder-shown){ border-color:var(--coral); }
.form-success{ display:none; align-items:center; gap:14px; background:var(--foam); border:1px solid rgba(30,127,121,.25); border-radius:14px; padding:16px 18px; }
.form-success.show{ display:flex; }
.form-success svg{ width:22px; height:22px; color:var(--lagoon); flex:none; }
.contact-info-card{ background:var(--deep-ocean); color:#fff; border-radius:var(--radius-lg); padding:32px; display:flex; flex-direction:column; gap:22px; }
.contact-info-row{ display:flex; gap:14px; align-items:flex-start; }
.contact-info-row .ic{ width:38px; height:38px; border-radius:11px; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; flex:none; }
.contact-info-row .ic svg{ width:18px; height:18px; color:var(--sand); }
.contact-info-row strong{ display:block; font-size:.95rem; }
.contact-info-row span, .contact-info-row a{ font-size:.9rem; color:rgba(255,255,255,.72); }
.social-row{ display:flex; gap:10px; }
.social-row a{ width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; transition:background .2s var(--ease), transform .2s var(--ease); }
.social-row a:hover{ background:var(--coral); transform:translateY(-2px); }
.social-row svg{ width:17px; height:17px; color:#fff; }
.map-embed{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-soft); border:1px solid var(--line); aspect-ratio:16/9; }
.map-embed iframe{ width:100%; height:100%; border:0; display:block; }

/* Footer */
.site-footer{ background:var(--deep-ocean-2); color:rgba(255,255,255,.7); }
.footer-top{ padding-block:64px 40px; display:grid; gap:44px; grid-template-columns:1.4fr repeat(3,1fr); }
@media (max-width:900px){ .footer-top{ grid-template-columns:1fr 1fr; } }
.footer-brand p{ margin-top:16px; font-size:.92rem; color:rgba(255,255,255,.6); max-width:32ch; }
.footer-col h5{ color:#fff; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:16px; }
.footer-col li{ margin-bottom:10px; }
.footer-col a{ font-size:.92rem; color:rgba(255,255,255,.66); cursor:pointer; }
.footer-col a:hover{ color:var(--sand); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding-block:22px; display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; font-size:.8rem; color:rgba(255,255,255,.5); }
.footer-social{ display:flex; gap:10px; margin-top:16px; }
.footer-social a{ width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; }
.footer-social svg{ width:15px; height:15px; color:#fff; }

/* Tideline divider */
.tideline{ display:block; width:100%; height:auto; line-height:0; }

/* utility */
.text-center{ text-align:center; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (min-width:760px){
  .about-story-grid{ grid-template-columns:1fr 1fr !important; align-items:center; }
}

/* ---------------------------------------------------------
   WordPress core compatibility
   --------------------------------------------------------- */
.screen-reader-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.screen-reader-text:focus{ position:static; width:auto; height:auto; }
.alignwide{ max-width:1400px; margin-inline:auto; }
.alignfull{ width:100%; max-width:none; }
img.wp-post-image{ width:100%; height:100%; object-fit:cover; }
.beach-card-media img{ width:100%; height:100%; object-fit:cover; }
.no-results{ padding:60px 24px; text-align:center; color:var(--ink-60); }
.breadcrumb{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; font-size:.85rem; color:var(--ink-60); }
.breadcrumb a{ color:var(--lagoon); font-weight:600; }
.breadcrumb span[aria-hidden]{ color:var(--ink-35); }
.entry-content{ font-size:1.02rem; line-height:1.75; color:var(--ink); }
.entry-content p{ margin-bottom:1.2em; }
.entry-content h2,.entry-content h3{ margin-top:1.4em; margin-bottom:.5em; }
.entry-content a{ color:var(--lagoon); font-weight:600; text-decoration:underline; }
.entry-content img{ border-radius:var(--radius-md); margin-block:1em; }

/* ---------------------------------------------------------
   Default WordPress nav menu markup (wp_nav_menu output)
   --------------------------------------------------------- */
.main-nav ul{ display:contents; }
.main-nav li{ display:contents; }
.main-nav .current-menu-item > a{ color:var(--deep-ocean); }
.main-nav .current-menu-item > a::after{ transform:scaleX(1); }
@media (max-width:959px){
  .main-nav ul, .main-nav li{ display:block; }
}