/* ============================================
   Design tokens
   ============================================ */
:root{
  --navy:       #071E37;
  --sage:       #A5C3C2;
  --slate:      #6B909E;
  --teal-deep:  #008F98;
  --teal-bright:#3CB9AC;
  --mint-tint:  #EAF6F4;
  --white:      #FFFFFF;
  --ink:        #0F2438;

  --font-display: 'Cairo', sans-serif;
  --font-heading: 'Cairo', sans-serif;
  /* --font-body is defined in style-en.css / style-ar.css, loaded after this file */

  --max-content: 1180px;
  --radius: 8px;
  --gap: 2.5rem;

  /* Heights used by the sticky section bar and anchor offsets.
     --header-h is re-measured by page-toc.js; this is the fallback. */
  --header-h: 4.75rem;
  --bar-h: 3rem;
}

/* ============================================
   Reset / base
   ============================================ */
*, *::before, *::after{ box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior: smooth; }
}
body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  /* line-height is set in style-en.css / style-ar.css, loaded after this file */
}
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-heading); margin: 0; color: var(--navy); }
p{ margin: 0; }

:focus-visible{
  outline: 3px solid var(--teal-bright);
  outline-offset: 2px;
}

.wrap{
  max-width: var(--max-content);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* ============================================
   Placeholder blocks (images not yet supplied)
   ============================================ */
.placeholder{
  aspect-ratio: 3 / 2;
  background: var(--mint-tint);
  border: 1px dashed var(--slate);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
}
.placeholder span{
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--slate);
}

/* ============================================
   Header
   ============================================ */
.site-header{
  background: var(--white);
  border-bottom: 1px solid var(--sage);
  position: sticky;
  top: 0;
  z-index: 20;
}
.header-inner{
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-block: 0.9rem;
}
.logo{ margin-inline-end: 2.5rem; }
.logo img{ height: 44px; width: auto; transition: filter 0.25s ease; }

.site-nav{ flex: 1; }
.site-nav ul{
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
}
.site-nav a{
  font-size: 0.95rem;
  color: var(--navy);
  padding-block: 0.25rem;
  border-bottom: 2px solid transparent;
  /* font-weight is set in style-en.css / style-ar.css, loaded after this file */
}
.site-nav a:hover,
.site-nav a[aria-current="page"]{
  border-bottom-color: var(--teal-bright);
}

.lang-switch{
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--teal-deep);
  border: 1px solid var(--teal-deep);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  white-space: nowrap;
}
.lang-switch:hover{
  background: var(--teal-deep);
  color: var(--white);
}

.nav-toggle-checkbox{ display: none; }
.nav-toggle-label{
  display: none;
  width: 28px;
  height: 22px;
  position: relative;
  cursor: pointer;
}
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after{
  content: "";
  position: absolute;
  inset-inline-start: 0;
  width: 100%;
  height: 2px;
  background: var(--navy);
  transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease, background 0.2s ease;
}
.nav-toggle-label span{ top: 10px; }
.nav-toggle-label span::before{ top: -8px; }
.nav-toggle-label span::after{ top: 8px; }

/* ============================================
   Hero
   ============================================ */
.hero{
  position: relative;
  color: var(--white);
  background-image: url(../img/hero.jpg);
  background-size: cover;
  background-position: center;
  padding-block: 6rem;
  min-height: 520px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  /* gradient direction is set in style-en.css / style-ar.css —
     linear-gradient() direction keywords are physical, not logical,
     so this is one spot dir="rtl" can't flip for us automatically */
}

.hero-inner{
  max-width: none;
  margin-inline: 0;
  padding-inline: clamp(2rem, 6vw, 6rem);
  position: relative;
  z-index: 1;
}
.hero-copy{ max-width: 34rem; }

.hero h1{
  font-family: var(--font-display);
  color: var(--white);
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  line-height: 1.15;
  margin-block-end: 1.5rem;
}
.hero p{
  max-width: 52ch;
  color: var(--sage);
  font-size: 1.05rem;
}
.hero p + p{ margin-block-start: 1rem; }

/* ============================================
   Three places to start
   ============================================ */
.topics{
  background: var(--mint-tint);
  padding-block: 4rem;
}
.topics h2{
  font-size: 1.8rem;
  text-align: center;
  margin-block-end: 2.5rem;
}
.topic-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.topic-card{
  background: var(--white);
  border-top: 4px solid var(--teal-bright);
  border-radius: var(--radius);
  padding: 1.25rem 1.25rem 1.75rem;
}
.card-media{ margin-block-end: 1.25rem; }
.topic-card img{
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
  margin-block-end: 1.25rem;
}
.topic-card h3{
  font-size: 1.15rem;
  margin-block-end: 0.6rem;
}
.topic-card p{
  font-size: 0.95rem;
  color: var(--ink);
}

/* ============================================
   What We Promise
   ============================================ */
.promise{ padding-block: 4rem; }
.promise h2{
  font-size: 1.8rem;
  margin-block-end: 2rem;
}
.promise-list{
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.promise-list li{
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.promise-list .check{
  flex: none;
  width: 26px;
  height: 26px;
  color: var(--teal-deep);
  margin-block-start: 0.15rem;
}
.promise-list p{ font-size: 1rem; }
.promise-list strong{ color: var(--navy); }

/* ============================================
   CTA band
   ============================================ */
.cta-band{
  background: var(--navy);
  padding-block: 3rem;
}
.cta-inner{
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.btn{
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.85rem 2rem;
  border-radius: 999px;
  border: 2px solid transparent;
}
.btn-outline{
  border-color: var(--sage);
  color: var(--white);
}
.btn-outline:hover{
  background: var(--white);
  color: var(--navy);
}
.btn-solid{
  background: var(--teal-bright);
  color: var(--navy);
}
.btn-solid:hover{
  background: var(--white);
  border-color: var(--teal-bright);
}

/* ============================================
   Footer
   ============================================ */
.site-footer{
  background: var(--navy);
  color: var(--sage);
  padding-block: 2.5rem;
}
.footer-inner{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.75rem;
}
.footer-inner .logo img{ height: 28px; }
.footer-inner nav{ flex: 1; }
.footer-inner nav ul{
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.footer-inner nav a{
  font-size: 0.9rem;
  color: var(--sage);
}
.footer-inner nav a:hover{ color: var(--white); }

.footer-meta{
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.socials{ display: flex; gap: 0.9rem; }
.socials a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--slate);
  border-radius: 50%;
  color: var(--sage);
}
.socials a:hover{ border-color: var(--teal-bright); color: var(--white); }
.socials svg{ width: 16px; height: 16px; }
.socials span{
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.privacy{ font-size: 0.9rem; }
.privacy:hover{ color: var(--white); }

.topic-card{
  display: flex;
  flex-direction: column;
}
.topic-card p{ flex: 1; }
.topic-card .card-cta{
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.6rem 1.5rem;
  font-size: 0.95rem;
  margin-block-start: 1.25rem;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 900px){
  .topic-grid{ grid-template-columns: 1fr; }
  .hero{ min-height: 420px; padding-block: 4rem; }
  /* mobile hero scrim direction is set per-language file, right after
     each file's own gradient rule — see note there for why */
}

@media (max-width: 760px){
  .nav-toggle-label{ display: block; order: 3; position: relative; z-index: 16; }
  .lang-switch{
    order: 2;
    margin-inline-start: auto;
    position: relative;
    z-index: 16;
    flex-shrink: 0;
    font-size: 0.8rem;
    padding: 0.35rem 0.85rem;
  }
  .logo{
    position: relative;
    z-index: 16;
    flex-shrink: 0;
    margin-inline-end: 0;
  }
  .logo img{ height: 34px; }
  .header-inner:has(.nav-toggle-checkbox:checked) .logo img{
    filter: brightness(0) invert(1);
  }

  .site-nav{
    position: fixed;
    inset: 0;
    z-index: 15;
    background: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding-block: 5rem 2rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
  }
  .nav-toggle-checkbox:checked ~ .site-nav{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0s;
  }
  .site-nav ul{
    flex-direction: column;
    align-items: center;
    gap: 1.85rem;
  }
  .site-nav a{
    color: var(--white);
    font-size: 1.6rem;
  }

  /* hamburger morphs into a close (X) icon */
  .nav-toggle-checkbox:checked ~ .nav-toggle-label span{
    background: transparent;
  }
  .nav-toggle-checkbox:checked ~ .nav-toggle-label span::before{
    top: 0;
    transform: rotate(45deg);
    background: var(--white);
  }
  .nav-toggle-checkbox:checked ~ .nav-toggle-label span::after{
    top: 0;
    transform: rotate(-45deg);
    background: var(--white);
  }

  /* lock the page behind the fullscreen menu while it's open */
  body:has(.nav-toggle-checkbox:checked){ overflow: hidden; }

  .footer-inner{ flex-direction: column; align-items: flex-start; }
  .footer-meta{ width: 100%; justify-content: space-between; }
}

/* ============================================
   Interior page intro band (Who We Are, etc.)
   — a quieter sibling of .hero: solid navy, no
   photo, for secondary pages that don't have a
   dedicated hero photo of their own.
   ============================================ */
.page-intro{
  position: relative;
  color: var(--white);
  background-color: var(--navy); /* fallback for pages with no photo yet */
  background-size: cover;
  background-position: center 30%;
  padding-block: 3.5rem;
  min-height: 340px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.page-intro.page-intro--about{ background-image: url(../img/about-hero.jpg); }
.page-intro.page-intro--food{ background-image: url(../img/food-hero.jpg); }
.page-intro.page-intro--sleep{ background-image: url(../img/sleep-hero.jpg); }
.page-intro.page-intro--smoking{ background-image: url(../img/smoking-hero.jpg); }
.page-intro::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  /* gradient direction is set in style-en.css / style-ar.css —
     same reasoning as .hero::before */
}
.page-intro > .wrap{
  position: relative;
  z-index: 1;
  max-width: none;
  margin-inline: 0;
  padding-inline: clamp(2rem, 6vw, 6rem);
}
.page-intro h1{
  font-family: var(--font-heading);
  color: var(--white);
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  margin-block-end: 1.25rem;
}
.page-intro p{
  max-width: 85ch;
  color: var(--sage);
  font-size: 1.05rem;
}
.page-intro p + p{ margin-block-start: 1rem; }

/* ============================================
   Content sections on interior pages
   ============================================ */
.content-section{ padding-block: 3.5rem; }
.content-section + .content-section{ padding-block-start: 0; }
.content-section h2{
  font-size: 1.6rem;
  margin-block-end: 1.5rem;
}
.content-section h3{
  font-size: 1.2rem;
  margin-block-end: 1.25rem;
}
.content-section h4{
  font-size: 1.05rem;
  margin-block-end: 0.5rem;
}
.content-section p{
  font-size: 1rem;
  color: var(--ink);
}
.content-section p + p{ margin-block-start: 1rem; }
.content-section a {text-decoration:underline; color:var(--teal-deep);}

/* Text sits beside its supporting image instead of stacking full-width
   above it — same DOM-order trick as .hero-inner: text first in markup,
   image second, so it mirrors automatically under dir="rtl" */
.section-row{
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  margin-block: 1.5rem;
}
.section-row-text{ flex: 1 1 320px; min-width: 0; }
.section-row-media{ flex: 1 1 320px; min-width: 0; }
.section-row-media:not(.placeholder){
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
}

.section-row:has(.is-infographic){
  flex-wrap: wrap;
}
.section-row:has(.is-infographic) .section-row-text{
  flex-basis: 100%;
}
img.section-row-media.is-infographic{
  flex: 0 0 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

@media (max-width: 760px){
  .section-row{ flex-direction: column; }
}

/* General-purpose 3:2 supporting image/placeholder for content sections
   — .section-media is reserved for the About page's specific 1.74 ratio */
.content-media{
  width: 100%;
  max-width: 62ch;
  aspect-ratio: 3 / 2;
  margin-block: 1.5rem;
}
.content-media:not(.placeholder){
  object-fit: cover;
  border-radius: var(--radius);
}

.section-media{
  width: 100%;
  max-width: 62ch;
  aspect-ratio: 1.74;
  object-fit: cover;
  border-radius: var(--radius);
  margin-block: 1.5rem;
}
.section-media.placeholder{ margin-block: 1.5rem; }

/* "What We Don't Do" — same layout as .promise-list, but a muted
   cross instead of a teal checkmark, so affirmative and negative
   statements read differently at a glance, not just by wording */
.dont-list{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 62ch;
  margin-block-start: 1.5rem;
}
.dont-list li{
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.dont-list .cross{
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--slate);
  margin-block-start: 0.2rem;
}
.dont-list p{ font-size: 1rem; color: var(--ink); }

/* ============================================
   Contact form
   ============================================ */
.contact-form{
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-block-start: 2rem;
}
.form-field{
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.form-field label{
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--navy);
}
.form-field input,
.form-field textarea{
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--sage);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--white);
}
.form-field input:focus,
.form-field textarea:focus{
  outline: none;
  border-color: var(--teal-bright);
  box-shadow: 0 0 0 3px rgba(60, 185, 172, 0.25);
}
.form-field textarea{
  resize: vertical;
  min-height: 140px;
}
.contact-form .btn{
  align-self: flex-start;
  border: none;
  cursor: pointer;
}

/* "Connect with us" row reuses .socials from the footer as-is */
.connect-row{
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-block-start: 1.5rem;
}
.connect-row p{ font-weight: 700; color: var(--navy); }
.connect-row .socials a{ color: var(--teal-deep); border-color: var(--sage); }
.connect-row .socials a:hover{ border-color: var(--teal-bright); color: var(--white); background: var(--teal-bright); }

/* ============================================
   In-page contents ("On this page")
   — sits directly under .page-intro. One column
   per H2, with its H3s listed beneath. Logical
   properties throughout so it mirrors under RTL.
   ============================================ */
.page-toc{
  background: var(--mint-tint);
  border-block-end: 1px solid var(--sage);
  padding-block: 2rem 2.25rem;
  scroll-margin-block-start: var(--header-h);
}
.page-toc-summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  list-style: none;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--slate);
  cursor: default;
}
.page-toc-summary::-webkit-details-marker{ display: none; }
.page-toc-details[open] > .page-toc-summary{ margin-block-end: 1.25rem; }

.page-toc-groups{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.75rem 2.5rem;
  align-items: start;
}
.page-toc-groups > li{
  border-inline-start: 2px solid var(--sage);
  padding-inline-start: 1rem;
  line-height: 1.35;
  transition: border-color 0.2s ease;
}
.page-toc-groups > li:hover,
.page-toc-groups > li:focus-within{ border-inline-start-color: var(--teal-bright); }

.page-toc-groups > li > a{
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--navy);
}
.page-toc-groups ul{
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-block-start: 0.65rem;
}
.page-toc-groups ul a{
  font-size: 0.95rem;
  color: var(--ink);
}
.page-toc a:hover{
  color: var(--teal-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Anchor targets clear the sticky header + section bar */
.content-section :is(h2, h3, h4)[id]{
  scroll-margin-block-start: calc(var(--header-h) + var(--bar-h) + 1.25rem);
}

@media (max-width: 760px){
  .page-toc{ padding-block: 0.9rem; }
  .page-toc-summary{
    cursor: pointer;
    font-size: 1rem;
    color: var(--navy);
    padding-block: 0.25rem;
  }
  /* chevron — physical borders on purpose: a down/up chevron
     is the same in LTR and RTL */
  .page-toc-summary::after{
    content: "";
    flex: none;
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid var(--teal-deep);
    border-bottom: 2px solid var(--teal-deep);
    transform: translateY(-25%) rotate(45deg);
    transition: transform 0.2s ease;
  }
  .page-toc-details[open] > .page-toc-summary::after{
    transform: translateY(25%) rotate(-135deg);
  }
  .page-toc-details[open] > .page-toc-summary{ margin-block-end: 1rem; }
  .page-toc-groups{ gap: 1.25rem; padding-block-end: 0.5rem; }
}

/* ============================================
   Sticky section bar
   — built by page-toc.js from the H2 links above,
   fixed under .site-header (which sits above it at
   z-index 20, so it slides out from beneath it).
   Shown once .page-toc has scrolled out of view.
   ============================================ */
.section-bar{
  position: fixed;
  inset-inline: 0;
  top: var(--header-h);
  z-index: 19;
  background: var(--white);
  border-block-end: 1px solid var(--sage);
  visibility: hidden;
  transform: translateY(-100%);
}
.section-bar.is-visible{
  visibility: visible;
  transform: none;
}
@media (prefers-reduced-motion: no-preference){
  .section-bar{ transition: transform 0.25s ease, visibility 0s linear 0.25s; }
  .section-bar.is-visible{ transition: transform 0.25s ease, visibility 0s linear 0s; }
}

.section-bar-inner{
  display: flex;
  align-items: stretch;
  gap: 1.75rem;
  height: calc(var(--bar-h) - 1px);
}
.section-bar ul{
  display: flex;
  gap: 1.75rem;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.section-bar ul::-webkit-scrollbar{ display: none; }
.section-bar a{
  display: flex;
  align-items: center;
  height: 100%;
  white-space: nowrap;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--navy);
  border-block-end: 2px solid transparent;
}
.section-bar ul a:hover,
.section-bar ul a[aria-current]{ border-block-end-color: var(--teal-bright); }
.section-bar a:focus-visible{ outline-offset: -3px; }

.section-bar .section-bar-all{
  flex: none;
  gap: 0.4rem;
  margin-inline-start: auto;
  color: var(--teal-deep);
  font-size: 0.85rem;
}
.section-bar-all svg{ width: 1.1rem; height: 1.1rem; flex: none; }

/* when the links don't fit (narrow phones), fade the trailing edge */
.section-bar ul.is-overflowing{
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
}
[dir="rtl"] .section-bar ul.is-overflowing{
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 2rem), transparent);
          mask-image: linear-gradient(to left, #000 calc(100% - 2rem), transparent);
}
.section-bar .section-bar-all:hover{ text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 760px){
  .section-bar-inner,
  .section-bar ul{ gap: 1rem; }
  .section-bar a{ font-size: 0.85rem; }
  /* "All sections" collapses to its icon; the text stays for screen readers */
  .section-bar-all-text{
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .section-bar-all svg{ width: 1.35rem; height: 1.35rem; }
}

@media print{
  .section-bar{ display: none; }
}