/*
Theme Name:        Saudi Atlas
Theme URI:         https://thesaudiatlas.com
Description:       Datum — The Field Log. A survey-log theme for The Saudi Atlas: mobile-first vertical field-log layout, coordinate-plate signature, near-zero motion. Built hand-rolled for Core Web Vitals. Pairs with the Atlas Core plugin.
Version:           0.1.0
Requires at least: 6.4
Requires PHP:      8.0
Author:            The Saudi Atlas
Text Domain:       saudi-atlas
Tags:              travel, custom-colors, block-styles, full-width-template
*/

/* ============================================================
   TOKENS — Datum / The Field Log
   ============================================================ */
:root{
  /* palette */
  --contour-paper:#E6E7E0;   /* page ground — cool green-grey */
  --survey-white:#F4F5F0;    /* raised plates & cards */
  --field-ink:#20241E;       /* headlines & text */
  --graphite-ink:#42463D;    /* captions & metadata */
  --sandline:#C9CBBF;        /* hairlines & frames */
  --verdigris:#2F6E57;       /* the one accent */
  --verdigris-deep:#255744;  /* accent hover */
  --ochre:#C08A2D;           /* 2px registration tick on plates only */

  /* type */
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Spline Sans Mono",ui-monospace,Menlo,Consolas,monospace;

  /* scale (fluid) */
  --step--1:clamp(0.83rem,0.80rem + 0.14vw,0.91rem);
  --step-0:clamp(1rem,0.96rem + 0.20vw,1.13rem);
  --step-1:clamp(1.20rem,1.12rem + 0.40vw,1.50rem);
  --step-2:clamp(1.44rem,1.30rem + 0.70vw,2.00rem);
  --step-3:clamp(1.73rem,1.50rem + 1.15vw,2.66rem);
  --step-4:clamp(2.07rem,1.70rem + 1.85vw,3.55rem);

  /* space */
  --sp-1:0.5rem; --sp-2:0.75rem; --sp-3:1rem; --sp-4:1.5rem;
  --sp-5:2rem;   --sp-6:3rem;    --sp-7:4.5rem; --sp-8:6.5rem;

  /* layout */
  --measure:66ch;
  --content:720px;
  --wide:1080px;
  --radius:12px;
  --radius-sm:8px;
  --gutter:clamp(1rem,5vw,2.5rem);

  --ease:cubic-bezier(.2,.6,.2,1);
}

/* ============================================================
   RESET-ish
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--contour-paper);
  color:var(--field-ink);
  font-family:var(--body);
  font-size:var(--step-0);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--verdigris);text-decoration:none}
a:hover{color:var(--verdigris-deep);text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--verdigris);outline-offset:3px;border-radius:2px}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.12;margin:0;letter-spacing:-.012em;text-wrap:balance}
p{margin:0 0 var(--sp-3)}
hr{border:none;height:1px;background:var(--sandline);margin:var(--sp-6) 0}
::selection{background:rgba(47,110,87,.18)}

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.wrap{width:100%;max-width:var(--content);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--wide{max-width:var(--wide)}
.flow > * + *{margin-top:var(--sp-3)}
.prose{max-width:var(--measure)}
.eyebrow{font-family:var(--mono);font-size:.70rem;letter-spacing:.16em;text-transform:uppercase;color:var(--verdigris);font-weight:600}
.sec-label{font-family:var(--mono);font-size:.70rem;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite-ink);display:flex;align-items:center;gap:.7rem;margin-bottom:var(--sp-3)}
.sec-label::after{content:"";flex:1;height:1px;background:var(--sandline)}
.muted{color:var(--graphite-ink)}
.mono{font-family:var(--mono)}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--field-ink);color:#fff;padding:.6rem 1rem;z-index:100;border-radius:0 0 var(--radius-sm) 0}
.skip-link:focus{left:0}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header{border-bottom:1px solid var(--sandline);background:var(--contour-paper);position:sticky;top:0;z-index:40}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);min-height:64px}
.brand{display:inline-flex;align-items:baseline;gap:.5rem;font-family:var(--display);font-weight:600;font-size:var(--step-1);color:var(--field-ink);letter-spacing:-.01em}
.brand:hover{text-decoration:none;color:var(--field-ink)}
.brand .brand__mark{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--verdigris);border:1px solid var(--sandline);border-radius:4px;padding:.15rem .4rem;transform:translateY(-2px)}
.primary-nav ul{list-style:none;display:flex;gap:var(--sp-4);margin:0;padding:0;align-items:center}
.primary-nav a{color:var(--graphite-ink);font-size:var(--step--1);font-weight:500;letter-spacing:.01em}
.primary-nav a:hover,.primary-nav .current-menu-item > a{color:var(--field-ink);text-decoration:none}
.primary-nav .current-menu-item > a{box-shadow:inset 0 -2px 0 var(--verdigris)}
.nav-toggle{display:none;background:none;border:1px solid var(--sandline);border-radius:var(--radius-sm);padding:.45rem .6rem;color:var(--field-ink);font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}

@media (max-width:760px){
  .nav-toggle{display:inline-flex;align-items:center;gap:.4rem}
  .primary-nav{position:fixed;inset:64px 0 auto 0;background:var(--contour-paper);border-bottom:1px solid var(--sandline);
    transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .15s var(--ease),transform .15s var(--ease),visibility .15s}
  .primary-nav[data-open="true"]{opacity:1;visibility:visible;transform:none}
  .primary-nav ul{flex-direction:column;align-items:stretch;gap:0;padding:var(--sp-2) var(--gutter) var(--sp-4)}
  .primary-nav li{border-bottom:1px solid var(--sandline)}
  .primary-nav a{display:block;padding:.9rem 0;font-size:var(--step-0)}
  .primary-nav .current-menu-item > a{box-shadow:none;color:var(--verdigris)}
}

/* ============================================================
   HERO / FIELD-LOG PHOTO + PLATE
   ============================================================ */
.fieldphoto{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--sandline)}
.fieldphoto img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.fieldphoto--hero img{aspect-ratio:16/10}
@media (min-width:760px){.fieldphoto--hero img{aspect-ratio:2/1}}
.fieldphoto__tag{position:absolute;top:.6rem;left:.6rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.9);background:rgba(32,36,30,.4);padding:.2rem .5rem;border-radius:5px;backdrop-filter:blur(2px)}
/* placeholder look when no real photo yet */
.fieldphoto--empty{aspect-ratio:16/10;display:grid;place-items:center;
  background:
    radial-gradient(120% 90% at 70% 15%, rgba(240,210,150,.5), transparent 55%),
    linear-gradient(180deg,#caa46b 0%,#b98a4e 34%,#9c6f3f 63%,#6f5333 100%);}
.fieldphoto--empty::after{content:"first-hand photo · to be placed";font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.85);background:rgba(32,36,30,.34);padding:.25rem .6rem;border-radius:5px}

/* THE SIGNATURE — coordinate plate */
.plate{background:var(--survey-white);border:1px solid var(--sandline);border-top:2px solid var(--verdigris);border-radius:0 0 var(--radius) var(--radius);padding:.7rem .9rem;display:grid;gap:.35rem}
.fieldphoto + .plate{border-radius:0 0 var(--radius) var(--radius);margin-top:-1px}
.plate__coords{font-family:var(--mono);font-size:.80rem;color:var(--field-ink);letter-spacing:.01em;display:flex;flex-wrap:wrap;gap:.25rem .7rem;align-items:center}
.plate__coords .sep{color:var(--sandline)}
.plate__tick{display:inline-block;width:2px;height:.7rem;background:var(--ochre);vertical-align:-1px;margin-left:.15rem}
.plate__place{font-family:var(--body);font-size:.84rem;color:var(--graphite-ink)}
.plate__verified{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--verdigris)}
.plate__dot{width:7px;height:7px;border-radius:50%;background:var(--verdigris);box-shadow:0 0 0 3px rgba(47,110,87,.16)}
.plate--inline{border-top-width:2px;border-radius:var(--radius);margin:0}

/* ============================================================
   HERO BLOCK
   ============================================================ */
.hero{padding-block:var(--sp-6) var(--sp-5)}
.hero__eyebrow{margin-bottom:var(--sp-2)}
.hero__title{font-size:var(--step-4);margin-bottom:var(--sp-3)}
.hero__lead{font-size:var(--step-1);color:var(--graphite-ink);max-width:52ch;margin-bottom:var(--sp-4)}
.hero__media{margin-top:var(--sp-5)}

/* ============================================================
   BUTTONS / WHATSAPP CTA
   ============================================================ */
.btn{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--body);font-weight:600;font-size:var(--step-0);
  padding:.75rem 1.15rem;border-radius:var(--radius-sm);border:1px solid transparent;cursor:pointer;transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease)}
.btn--wa{background:var(--verdigris);color:#fff}
.btn--wa:hover{background:var(--verdigris-deep);color:#fff;text-decoration:none}
.btn--wa .wa-host,.btn--wa .btn__hint{font-family:var(--mono);font-size:.7rem;opacity:.82;font-weight:400;margin-left:.15rem}
.btn--ghost{background:transparent;color:var(--field-ink);border-color:var(--sandline)}
.btn--ghost:hover{border-color:var(--field-ink);text-decoration:none;color:var(--field-ink)}
.wa-icon{width:1.05em;height:1.05em;flex:none}

/* plugin default button class (raw-HTML Contact page + atlas_wa_button fallback) */
.wa-btn{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--body);font-weight:600;font-size:var(--step-0);
  padding:.75rem 1.15rem;border-radius:var(--radius-sm);background:var(--verdigris);color:#fff;
  transition:background .15s var(--ease)}
.wa-btn:hover{background:var(--verdigris-deep);color:#fff;text-decoration:none}
.wa-btn .wa-host{font-family:var(--mono);font-size:.7rem;opacity:.82;font-weight:400;margin-left:.15rem}

.wa-card{background:var(--survey-white);border:1px solid var(--sandline);border-left:3px solid var(--verdigris);border-radius:var(--radius);padding:var(--sp-4);margin:var(--sp-5) 0}
.wa-card__title{font-family:var(--display);font-size:var(--step-1);margin-bottom:.35rem}
.wa-card__body{color:var(--graphite-ink);font-size:var(--step--1);margin-bottom:var(--sp-3);max-width:52ch}

/* ============================================================
   ARTICLE / GUIDE
   ============================================================ */
.article{padding-block:var(--sp-5) var(--sp-7)}
.article__header{margin-bottom:var(--sp-5)}
.article__meta{display:flex;flex-wrap:wrap;gap:.4rem 1rem;font-family:var(--mono);font-size:.70rem;letter-spacing:.05em;text-transform:uppercase;color:var(--graphite-ink);margin-top:var(--sp-3)}
.article__title{font-size:var(--step-3);margin-top:var(--sp-2)}
.entry-content{max-width:var(--measure)}
.entry-content > *{margin-top:var(--sp-4)}
.entry-content > *:first-child{margin-top:0}
.entry-content h2{font-size:var(--step-2);margin-top:var(--sp-6);scroll-margin-top:80px}
.entry-content h3{font-size:var(--step-1);margin-top:var(--sp-5)}
.entry-content p{margin:0}
.entry-content ul,.entry-content ol{margin:0;padding-left:1.25rem}
.entry-content li + li{margin-top:.35rem}
.entry-content a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--sandline)}
.entry-content a:hover{text-decoration-color:var(--verdigris)}
.entry-content blockquote{border-left:3px solid var(--verdigris);margin:0;padding-left:var(--sp-3);color:var(--graphite-ink);font-style:italic}
.entry-content img{border-radius:var(--radius);border:1px solid var(--sandline)}
.entry-content figcaption{font-family:var(--mono);font-size:.68rem;color:var(--graphite-ink);margin-top:.4rem;letter-spacing:.03em}

/* placeholder note block (from seed content) */
.atlas-placeholder{background:var(--survey-white);border:1px dashed var(--ochre);border-radius:var(--radius-sm);padding:.7rem .9rem;font-family:var(--mono);font-size:.72rem;color:var(--graphite-ink);letter-spacing:.02em}
.atlas-placeholder::before{content:"◇ ";color:var(--ochre)}

/* Table of contents (JS-built, progressive) */
.toc{background:var(--survey-white);border:1px solid var(--sandline);border-radius:var(--radius);padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-5)}
.toc[hidden]{display:none}
.toc__label{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--graphite-ink);margin-bottom:.6rem}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.toc li{counter-increment:toc}
.toc li + li{margin-top:.35rem}
.toc a{font-size:var(--step--1);color:var(--graphite-ink)}
.toc a::before{content:counter(toc,decimal-leading-zero);font-family:var(--mono);font-size:.66rem;color:var(--verdigris);margin-right:.55rem}
.toc a:hover{color:var(--field-ink)}

/* ============================================================
   FAQ
   ============================================================ */
.faq{margin-top:var(--sp-6)}
.faq__item{border-top:1px solid var(--sandline);padding:0}
.faq__item:last-child{border-bottom:1px solid var(--sandline)}
.faq__item summary{cursor:pointer;list-style:none;padding:var(--sp-3) 0;font-family:var(--display);font-weight:600;font-size:var(--step-1);display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";font-family:var(--mono);color:var(--verdigris);font-size:1.2em;transition:transform .15s var(--ease)}
.faq__item[open] summary::after{content:"–"}
.faq__answer{padding:0 0 var(--sp-4);color:var(--graphite-ink);max-width:var(--measure)}

/* ============================================================
   CARD GRID (guides, destinations)
   ============================================================ */
.card-grid{display:grid;gap:var(--sp-4);grid-template-columns:1fr}
@media (min-width:620px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.card-grid--3{grid-template-columns:repeat(3,1fr)}}
.gcard{display:flex;flex-direction:column;background:var(--survey-white);border:1px solid var(--sandline);border-radius:var(--radius);overflow:hidden;transition:border-color .15s var(--ease)}
.gcard:hover{border-color:var(--verdigris);text-decoration:none}
.gcard__media{aspect-ratio:3/2;background:var(--sandline);overflow:hidden}
.gcard__media img{width:100%;height:100%;object-fit:cover}
.gcard__body{padding:var(--sp-3) var(--sp-4) var(--sp-4);display:flex;flex-direction:column;gap:.5rem;flex:1}
.gcard__kicker{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--verdigris)}
.gcard__title{font-size:var(--step-1);color:var(--field-ink)}
.gcard__excerpt{font-size:var(--step--1);color:var(--graphite-ink);margin:0}
.gcard__more{margin-top:auto;font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--verdigris)}

/* ============================================================
   TRAVEL TOOLS
   ============================================================ */
.atlas-tools{display:grid;gap:var(--sp-5);margin-top:var(--sp-5)}
.tool{background:var(--survey-white);border:1px solid var(--sandline);border-radius:var(--radius);padding:var(--sp-4) var(--sp-4) var(--sp-5)}
.tool-eyebrow{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--verdigris);margin-bottom:.5rem}
.tool h2{font-size:var(--step-2);margin-bottom:.4rem}
.tool-sub{color:var(--graphite-ink);font-size:var(--step--1);max-width:60ch;margin-bottom:var(--sp-3)}
.tool-body{display:grid;gap:var(--sp-3)}
.tool-body label{display:grid;gap:.35rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--graphite-ink)}
.tool-body input,.tool-body select{font-family:var(--body);font-size:var(--step-0);color:var(--field-ink);background:var(--contour-paper);border:1px solid var(--sandline);border-radius:var(--radius-sm);padding:.6rem .7rem;text-transform:none;letter-spacing:normal}
.tool-body input:focus,.tool-body select:focus{border-color:var(--verdigris);outline:none}
.cur-grid{grid-template-columns:1fr 1fr 1fr}
.trip-grid{grid-template-columns:1fr 1fr}
@media (max-width:520px){.cur-grid,.trip-grid{grid-template-columns:1fr}}
.tool-result{display:block;margin-top:var(--sp-3);font-size:var(--step-0);color:var(--field-ink);min-height:1.5em}
.tool-result .big{font-family:var(--mono);font-size:var(--step-2);color:var(--field-ink);display:block;letter-spacing:.01em}
.tool-result .hint{color:var(--graphite-ink);font-size:var(--step--1)}
.tool-result.is-eligible{color:var(--verdigris)}
.tool-foot{margin-top:var(--sp-3);font-size:var(--step--1)}
.tool-cta{margin-top:var(--sp-3)}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{border-top:1px solid var(--sandline);background:var(--survey-white);margin-top:var(--sp-8);padding-block:var(--sp-6) var(--sp-5)}
.site-footer__grid{display:grid;gap:var(--sp-5);grid-template-columns:1fr}
@media (min-width:680px){.site-footer__grid{grid-template-columns:1.4fr 1fr 1fr}}
.site-footer h3{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--graphite-ink);font-weight:600;margin-bottom:var(--sp-2)}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li + li{margin-top:.4rem}
.site-footer a{color:var(--graphite-ink);font-size:var(--step--1)}
.site-footer a:hover{color:var(--field-ink)}
.footer-brand{font-family:var(--display);font-size:var(--step-1);color:var(--field-ink)}
.footer-note{color:var(--graphite-ink);font-size:var(--step--1);max-width:44ch;margin-top:.5rem}
.footer-bottom{border-top:1px solid var(--sandline);margin-top:var(--sp-5);padding-top:var(--sp-4);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-3);font-family:var(--mono);font-size:.66rem;letter-spacing:.05em;color:var(--graphite-ink);text-transform:uppercase}

/* admin gate banner (experiences hidden) */
.atlas-gate-note{background:var(--ochre);color:#20241E;font-family:var(--mono);font-size:.72rem;text-align:center;padding:.4rem;letter-spacing:.04em}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.breadcrumb{font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;color:var(--graphite-ink);margin-bottom:var(--sp-3)}
.breadcrumb a{color:var(--graphite-ink)}
.breadcrumb a:hover{color:var(--verdigris)}
.breadcrumb .sep{color:var(--sandline);margin:0 .4rem}

/* ============================================================
   UTILITIES
   ============================================================ */
.stack-lg > * + *{margin-top:var(--sp-6)}
.center{text-align:center}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tag-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:var(--sp-3)}
.tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;color:var(--graphite-ink);border:1px solid var(--sandline);border-radius:20px;padding:.25rem .7rem}