/* ==========================================================
   Essaouira Activities — Design "Riad"
   Navy night + sand gold + ivory. Cormorant Garamond / Jost.
   Loaded after each page's own styles: it re-themes them.
   ========================================================== */
:root{
  --ink:#0F2533;
  --deep:#0F2533;
  --deep-2:#0A1B26;
  --sand:#E9E1D3;
  --sand-2:#DCD2C0;
  --foam:#F3EEE6;
  --rust:#C9A46A;
  --rust-dark:#B8925A;
  --teal:#8A6A35;
  --line:rgba(15,37,51,.16);
  --gold-text:#8A6A35;       /* gold readable on ivory */
  --muted:#4E5A61;
}
/* on dark surfaces the accent text is the bright gold */
nav,.hero,footer,.why,.cta-band,.page-header,.article-hero,.stay-combo,.lg-extra,.contact-cta-big,
.map-info,.values-sec,.mobile-panel,.rd-dark{--gold-text:#C9A46A;--muted:#B9C4C9}

body{font-family:'Jost',sans-serif;font-weight:400;background:var(--foam);color:var(--ink)}
h1,h2,h3,h4,.brand-text,.stay-price b,.lg-price b,.stay-fact b{font-family:'Cormorant Garamond',serif;font-weight:500;letter-spacing:0;font-size-adjust:.47}
h1,h2{line-height:1.04}
em{font-style:italic}

/* accent text */
.brand-text small,.eyebrow,.sec-eyebrow,.act-link,.map-pin-row svg,.faq-item summary::after,.why-num,.t-stars,
.detail-meta-item svg,.blog-card-cat,.blog-card-foot a,.article-cat,.stay-tags span,.lg-rules svg,.team-card span,
.contact-card a.cc-link,.tr-feat svg,.route-meta-item svg,.route-cta,.hv-badge .ico svg,.hero h1 em{color:var(--gold-text)}
.eyebrow,.sec-eyebrow,.blog-card-cat,.article-cat{letter-spacing:.24em;text-transform:uppercase;font-weight:500}
.eyebrow::before{background:var(--gold-text)}
.stay-tags span{background:rgba(201,164,106,.16);color:var(--gold-text)}

/* gold buttons: dark text, square corners, no glow */
.nav-cta,.btn-primary,.how-cta-card a,.stay-tabs a.current,.stay-btn,.stay-combo .btns a,.lg-extra a,.lg-bar a,
.step-n,.value-card .vc-ico,[style*="background:var(--rust)"]{color:#0F2533 !important;box-shadow:none !important}
.nav-cta,.btn-primary,.btn,.stay-btn,.stay-combo .btns a,.lg-extra a,.lg-bar a,.how-cta-card a,.route-cta,
.chip,.stay-tabs a,.lg-more,.sx-send,.lg-send,.mobile-langs a,.lang-switch{border-radius:2px !important}
.nav-cta svg,.btn-primary svg{color:#0F2533}
.nav-cta:hover,.btn-primary:hover,.stay-btn:hover{background:#D9B87F !important}
.sx-send,.lg-send{border-radius:2px}

/* calmer surfaces: thin lines instead of big radii and shadows */
.act-card,.blog-card,.stay-card,.st-card,.t-card,.team-card,.value-card,.route-card,.contact-card,.booking,.cond,
.lg-book,.how-cta-card,.how-visual,.hv-card,.article-cta-inline,.contact-cta-big,.stay-combo,.lg-extra,.stay-fact,
.gallery,.lg-photos,.lg-map,.map-grid,.story-img,.tr-intro-img,.contact-map-frame,.sx-box,.article-cover img{border-radius:4px !important}
.act-card,.blog-card,.stay-card,.t-card,.team-card,.value-card,.route-card,.contact-card{box-shadow:none !important;border:1px solid var(--line)}
.act-card:hover,.blog-card:hover,.stay-card:hover{box-shadow:0 18px 40px rgba(15,37,51,.12) !important}
input,select,textarea{border-radius:2px !important}

/* navigation */
nav{background:rgba(15,37,51,.94) !important;border-bottom:1px solid rgba(201,164,106,.18) !important}
.nav-links a.active::after{background:var(--rust)}
.brand-text{font-size:1.45rem}
.brand-text small{font-family:'Jost',sans-serif;letter-spacing:.28em}

/* footer */
footer{background:var(--deep-2) !important;color:#B9C4C9}
footer h5{color:#C9A46A;letter-spacing:.2em;text-transform:uppercase;font-family:'Jost',sans-serif;font-weight:500}

/* page headers of inner pages */
.page-header,.article-hero{background:var(--deep) !important}
.page-header h1,.article-hero h1{font-weight:500}

/* misc */
.chip.on,.mobile-langs a.current{background:var(--deep);border-color:var(--deep)}
.stay-kind{background:var(--deep);border-radius:2px}
::selection{background:#C9A46A;color:#0F2533}
:focus-visible{outline-color:#C9A46A}

/* Arabic keeps its own fonts */
html[dir="rtl"] body{font-family:'IBM Plex Sans Arabic','Jost',sans-serif}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4{font-family:'Noto Naskh Arabic','Cormorant Garamond',serif;font-size-adjust:none;font-weight:600}

/* blog cards (shared, used for guide links on service pages) */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:50px}
.blog-card{background:var(--foam);overflow:hidden;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}
.blog-card:hover{transform:translateY(-4px)}
.blog-card-img{aspect-ratio:16/10;overflow:hidden;background:var(--sand-2)}
.blog-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.blog-card:hover .blog-card-img img{transform:scale(1.05)}
.blog-card-body{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1}
.blog-card-cat{font-size:.72rem}
.blog-card h3{font-size:1.25rem;color:var(--deep);line-height:1.25}
.blog-card p{color:#5b5650;font-size:.9rem;line-height:1.5;flex:1}
.blog-card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:6px;padding-top:14px;border-top:1px solid var(--line)}
.blog-card-foot span{font-size:.78rem;color:#8b8579}
.blog-card-foot a{font-weight:600;font-size:.86rem}
.article-lead{font-size:1.15rem !important;color:var(--deep) !important}
.article-lead strong{font-weight:500}
@media (max-width:980px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.blog-grid{grid-template-columns:1fr}}
html[dir="rtl"] .article-table th,html[dir="rtl"] .article-table td{text-align:right}
html[dir="rtl"] .article-quote{border-left:0;border-right:3px solid var(--rust);border-radius:14px 0 0 14px}
html[dir="rtl"] .article-body ul{padding-left:0;padding-right:22px}