/* =========================================================================
   Best Morocco Trip — design system
   Palette grounded in Morocco's own materials: plaster white, kasbah clay,
   dusk indigo, zellige sage. Editorial serif headings + a plain grotesk body.
   ========================================================================= */

:root{
  --ink:        #1C2B3A;   /* deep dusk indigo — primary text & dark surfaces */
  --paper:      #F7F3EC;   /* warm plaster white — page background */
  --paper-alt:  #EFE8DA;   /* slightly deeper plaster for section bands */
  --clay:       #B5622A;   /* burnt clay / terracotta — primary accent */
  --clay-dark:  #93501F;
  --sage:       #6E7F5C;   /* faded zellige green — secondary accent */
  --teal:       #3E5C63;   /* atlas teal — links, quiet accents */
  --line:       #DCD3C0;   /* hairline rule on paper */
  --line-dark:  rgba(247,243,236,0.18);
  --white:      #FFFFFF;
  --shadow:     0 12px 28px rgba(28,43,58,0.10);

  --font-display: "Fraunces", "Iowan Old Style", "Georgia", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --maxw: 1180px;
  --radius: 3px;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--teal); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.15;
  margin:0 0 0.5em;
  color:var(--ink);
  letter-spacing:-0.01em;
}
h1{ font-size:clamp(2.1rem, 4vw, 3.4rem); font-weight:600; }
h2{ font-size:clamp(1.6rem, 2.6vw, 2.3rem); }
h3{ font-size:1.3rem; }
p{ margin:0 0 1em; max-width:70ch; }
ul,ol{ padding-left:1.2em; }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.section{ padding:64px 0; }
.section--tight{ padding:40px 0; }
.section--alt{ background:var(--paper-alt); }
.section--ink{ background:var(--ink); color:var(--paper); }
.section--ink h1, .section--ink h2, .section--ink h3{ color:var(--paper); }
.section--ink p{ color:rgba(247,243,236,0.82); }
.center{ text-align:center; margin-left:auto; margin-right:auto; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
:focus-visible{ outline:3px solid var(--clay); outline-offset:2px; }

.eyebrow{
  font-family:var(--font-body);
  font-size:0.8rem;
  color:var(--clay);
  font-weight:600;
  margin:0 0 10px;
}
.lede{ font-size:1.15rem; color:#3A4A57; max-width:62ch; }
.section--ink .lede{ color:rgba(247,243,236,0.85); }

/* -------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px;
  border-radius:var(--radius);
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.97rem;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  text-decoration:none;
}
.btn:hover{ text-decoration:none; }
.btn-primary{ background:var(--clay); color:var(--white); }
.btn-primary:hover{ background:var(--clay-dark); transform:translateY(-1px); }
.btn-outline{ background:transparent; border-color:var(--ink); color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--paper); }
.btn-outline-light{ background:transparent; border-color:rgba(247,243,236,0.55); color:var(--paper); }
.btn-outline-light:hover{ background:var(--paper); color:var(--ink); }
.btn-block{ width:100%; justify-content:center; }
.btn-sm{ padding:9px 16px; font-size:0.87rem; }

/* -------------------------------------------------------------- header */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(247,243,236,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header__bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0;
}
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:1.35rem; font-weight:600; color:var(--ink); }
.brand:hover{ text-decoration:none; }
.brand__mark{ width:34px; height:34px; flex:none; }
.main-nav{ display:flex; align-items:center; gap:28px; }
.main-nav a{ color:var(--ink); font-weight:500; font-size:0.97rem; position:relative; }
.main-nav a:hover{ text-decoration:none; color:var(--clay); }
.has-drop{ position:relative; }
.has-drop > a::after{ content:"▾"; font-size:0.65em; margin-left:4px; opacity:.6; }
.dropdown{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%);
  background:var(--white); border:1px solid var(--line); box-shadow:var(--shadow);
  min-width:220px; padding:10px; border-radius:var(--radius);
  opacity:0; visibility:hidden; transition:opacity .15s ease;
}
.has-drop:hover .dropdown, .has-drop:focus-within .dropdown{ opacity:1; visibility:visible; }
.dropdown a{ display:block; padding:8px 10px; border-radius:2px; font-size:0.92rem; }
.dropdown a:hover{ background:var(--paper-alt); text-decoration:none; }
.nav-toggle{ display:none; background:none; border:none; font-size:1.6rem; cursor:pointer; color:var(--ink); }

@media (max-width: 900px){
  .main-nav{
    position:fixed; inset:0 0 0 30%; background:var(--ink); flex-direction:column;
    align-items:flex-start; padding:90px 28px 28px; gap:6px; transform:translateX(100%);
    transition:transform .25s ease; overflow-y:auto;
  }
  .main-nav.is-open{ transform:translateX(0); }
  .main-nav a{ color:var(--paper); padding:10px 0; width:100%; }
  .dropdown{ position:static; transform:none; opacity:1; visibility:visible; background:transparent; border:none; box-shadow:none; padding:0 0 0 12px; display:none; }
  .has-drop.is-open .dropdown{ display:block; }
  .has-drop > a::after{ float:right; }
  .nav-toggle{ display:block; }
  .nav-cta{ display:none; }
}

.nav-cta{ display:flex; align-items:center; gap:14px; }

/* -------------------------------------------------------------- hero */
.hero{
  position:relative; color:var(--paper); background:var(--ink);
  overflow:hidden;
}
.hero__media{ position:absolute; inset:0; }
.hero__media .img-frame{ width:100%; height:100%; }
.hero__media img{ width:100%; height:100%; object-fit:cover; opacity:0.55; }
.hero__scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(28,43,58,0.55) 0%, rgba(28,43,58,0.86) 100%); }
.hero__content{ position:relative; padding:110px 0 90px; max-width:720px; }
.hero .eyebrow{ color:#E7B98C; }
.hero h1{ color:var(--paper); }
.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; }
.hero__stats{ display:flex; gap:32px; margin-top:48px; flex-wrap:wrap; }
.hero__stat b{ display:block; font-family:var(--font-display); font-size:1.6rem; }
.hero__stat span{ font-size:0.85rem; opacity:.75; }

.page-hero{
  padding:56px 0 44px; border-bottom:1px solid var(--line); background:var(--paper-alt);
}
.breadcrumb{ font-size:0.85rem; color:#5A6A75; margin-bottom:14px; }
.breadcrumb a{ color:#5A6A75; }
.breadcrumb span{ margin:0 6px; }

/* -------------------------------------------------------------- image placeholder */
.img-frame{
  position:relative; background:
    linear-gradient(135deg, #C9773E 0%, #93501F 55%, #5c3413 100%);
  display:flex; align-items:flex-end; overflow:hidden; color:#fff;
}
.img-frame img{ width:100%; height:100%; object-fit:cover; }
.img-frame .img-label{
  position:relative; z-index:2; padding:14px 16px; font-family:var(--font-display);
  font-size:1rem; text-shadow:0 1px 4px rgba(0,0,0,0.4);
}
.img-frame.has-photo .img-label{ display:none; }
.img-frame::before{
  content:""; position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 14px);
}
.ratio-16-9{ aspect-ratio:16/9; }
.ratio-4-3{ aspect-ratio:4/3; }
.ratio-1-1{ aspect-ratio:1/1; }
.ratio-3-2{ aspect-ratio:3/2; }

/* -------------------------------------------------------------- grids & cards */
.grid{ display:grid; gap:26px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:920px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

.card{
  background:var(--white); border:1px solid var(--line);
  display:flex; flex-direction:column; overflow:hidden; border-radius:var(--radius);
}
.card__body{ padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; }
.card__meta{ font-size:0.8rem; color:var(--clay); font-weight:600; margin-bottom:8px; }
.card h3{ font-size:1.15rem; margin-bottom:8px; }
.card p{ color:#4A5A65; font-size:0.95rem; }
.card__foot{ margin-top:auto; padding-top:14px; display:flex; align-items:center; justify-content:space-between; font-size:0.85rem; border-top:1px dashed var(--line); }

.tour-card__days{ display:inline-flex; align-items:center; gap:6px; color:#5A6A75; font-size:0.85rem; }

/* -------------------------------------------------------------- destination pills */
.pill-row{ display:flex; gap:10px; flex-wrap:wrap; }
.pill{
  border:1px solid var(--line); background:var(--white); padding:8px 16px;
  border-radius:30px; font-size:0.88rem; font-weight:500; color:var(--ink);
}
.pill:hover{ border-color:var(--clay); color:var(--clay); text-decoration:none; }
.pill.is-active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* -------------------------------------------------------------- itinerary timeline (day-by-day) */
.timeline{ position:relative; margin:0; padding:0; list-style:none; max-width:760px; }
.timeline::before{
  content:""; position:absolute; left:27px; top:10px; bottom:10px; width:2px;
  background:repeating-linear-gradient(180deg, var(--clay) 0 6px, transparent 6px 12px);
}
.timeline li{ position:relative; padding:0 0 40px 74px; }
.timeline li:last-child{ padding-bottom:0; }
.day-num{
  position:absolute; left:0; top:0; width:56px; height:56px; border-radius:50%;
  background:var(--ink); color:var(--paper); display:flex; align-items:center; justify-content:center;
  flex-direction:column; font-family:var(--font-display); z-index:1;
}
.day-num small{ font-size:0.6rem; text-transform:none; opacity:.7; letter-spacing:0.04em; }
.day-num b{ font-size:1.15rem; line-height:1; }
.timeline h3{ margin-bottom:8px; font-size:1.2rem; }
.timeline .stops{ margin-top:8px; font-size:0.85rem; color:var(--sage); font-weight:600; }

/* -------------------------------------------------------------- quick facts / tour summary bar */
.factbar{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--white);
}
.factbar div{ padding:18px 20px; border-right:1px solid var(--line); }
.factbar div:last-child{ border-right:none; }
.factbar span{ display:block; font-size:0.78rem; color:#5A6A75; margin-bottom:4px; }
.factbar strong{ font-family:var(--font-display); font-size:1.05rem; font-weight:600; }
@media (max-width:760px){ .factbar{ grid-template-columns:repeat(2,1fr); } .factbar div{ border-bottom:1px solid var(--line); } }

/* -------------------------------------------------------------- includes/excludes */
.check-list{ list-style:none; padding:0; margin:0; }
.check-list li{ padding-left:28px; position:relative; margin-bottom:10px; }
.check-list.yes li::before{ content:"✓"; position:absolute; left:0; color:var(--sage); font-weight:700; }
.check-list.no li::before{ content:"–"; position:absolute; left:2px; color:#B54A3A; font-weight:700; }

/* -------------------------------------------------------------- FAQ accordion */
.faq details{ border-bottom:1px solid var(--line); padding:16px 0; }
.faq summary{ cursor:pointer; font-weight:600; font-family:var(--font-display); font-size:1.05rem; list-style:none; display:flex; justify-content:space-between; gap:12px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-size:1.4rem; color:var(--clay); line-height:1; }
.faq details[open] summary::after{ content:"–"; }
.faq p{ margin-top:12px; color:#3A4A57; }

/* -------------------------------------------------------------- testimonial */
.quote{ font-family:var(--font-display); font-size:1.3rem; line-height:1.4; max-width:64ch; }
.quote cite{ display:block; margin-top:16px; font-family:var(--font-body); font-style:normal; font-size:0.9rem; color:#5A6A75; }

/* -------------------------------------------------------------- footer */
.site-footer{ background:var(--ink); color:rgba(247,243,236,0.85); padding:60px 0 28px; }
.site-footer a{ color:rgba(247,243,236,0.85); }
.site-footer h4{ color:var(--paper); font-size:1rem; margin-bottom:14px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px; }
.footer-grid ul{ list-style:none; padding:0; margin:0; }
.footer-grid li{ margin-bottom:9px; font-size:0.92rem; }
.footer-bottom{ border-top:1px solid var(--line-dark); margin-top:44px; padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:0.82rem; opacity:.7; }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; } }

/* -------------------------------------------------------------- sticky inquiry bar */
.sticky-inquiry{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  background:var(--ink); color:var(--paper);
  border-top:1px solid rgba(247,243,236,0.15);
  box-shadow:0 -8px 24px rgba(0,0,0,0.18);
}
.sticky-inquiry__inner{
  max-width:var(--maxw); margin:0 auto; padding:12px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.sticky-inquiry__text b{ font-family:var(--font-display); font-size:1.02rem; display:block; }
.sticky-inquiry__text span{ font-size:0.82rem; opacity:.78; }
.sticky-inquiry__stars{ color:#E7B98C; letter-spacing:1px; font-size:0.85rem; }
@media (max-width:640px){
  .sticky-inquiry__text span{ display:none; }
  .sticky-inquiry__inner{ padding:10px 16px; }
}

/* -------------------------------------------------------------- modal */
.modal-overlay{
  position:fixed; inset:0; background:rgba(28,43,58,0.55); z-index:100;
  display:none; align-items:flex-start; justify-content:center; padding:5vh 16px; overflow-y:auto;
}
.modal-overlay.is-open{ display:flex; }
.modal{
  background:var(--paper); max-width:520px; width:100%; border-radius:6px;
  padding:32px 30px; position:relative; box-shadow:0 30px 60px rgba(0,0,0,0.3);
  margin-bottom:5vh;
}
.modal__close{ position:absolute; top:14px; right:16px; background:none; border:none; font-size:1.5rem; cursor:pointer; color:var(--ink); line-height:1; }
.modal h3{ margin-bottom:4px; }
.modal .modal__sub{ font-size:0.9rem; color:#5A6A75; margin-bottom:20px; }
.form-row{ margin-bottom:16px; }
.form-row label{ display:block; font-size:0.85rem; font-weight:600; margin-bottom:6px; }
.form-row input, .form-row textarea, .form-row select{
  width:100%; padding:11px 13px; border:1.5px solid var(--line); border-radius:4px;
  font-family:var(--font-body); font-size:0.96rem; background:var(--white); color:var(--ink);
}
.form-row input:focus, .form-row textarea:focus{ border-color:var(--clay); outline:none; }
.form-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:480px){ .form-grid-2{ grid-template-columns:1fr; } }
.form-note{ font-size:0.78rem; color:#5A6A75; margin-top:10px; }
.form-status{ margin-top:14px; font-size:0.9rem; font-weight:600; display:none; padding:10px 12px; border-radius:4px; }
.form-status.ok{ display:block; background:#e6efe3; color:#3E5C2F; }
.form-status.err{ display:block; background:#fbeae5; color:#93321F; }
.hp-field{ position:absolute; left:-9999px; opacity:0; }

/* -------------------------------------------------------------- misc */
.tag{
  display:inline-block; font-size:0.75rem; font-weight:600; color:var(--white);
  background:var(--sage); padding:4px 10px; border-radius:20px; margin-bottom:10px;
}
.tag.tag-desert{ background:var(--clay); }
.divider{ height:1px; background:var(--line); border:none; margin:44px 0; }
.two-col{ display:grid; grid-template-columns:2fr 1fr; gap:48px; align-items:start; }
@media (max-width:900px){ .two-col{ grid-template-columns:1fr; } }
.sidebar-card{ background:var(--white); border:1px solid var(--line); padding:26px; border-radius:var(--radius); position:sticky; top:96px; }
.sidebar-card h3{ font-size:1.15rem; }
.related-list{ list-style:none; padding:0; margin:0; }
.related-list li{ padding:10px 0; border-bottom:1px solid var(--line); font-size:0.92rem; }
.related-list li:last-child{ border-bottom:none; }

.page-body{ max-width:760px; }
.page-body h2{ margin-top:1.6em; }
.page-body img{ border-radius:4px; margin:1.2em 0; }

.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }