/* Al Saif Travel – base tokens, header, footer */
:root {
  --teal: #0E4F5C;
  --teal-deep: #083740;
  --lagoon: #3FA7A0;
  --marigold: #F2A541;
  --sky: #E3F4F3;
  --paper: #FFFFFF;
  --ink: #12302F;
  --muted: #587070;
  --radius: 18px;
  --font: "Readex Pro", "Segoe UI", Tahoma, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before { transition: none !important; } }
body { margin: 0; font-family: var(--font); font-weight: 300; line-height: 1.75; color: var(--ink); background: var(--paper); }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-weight: 600; line-height: 1.25; margin: 0 0 .5em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
p { margin: 0 0 1em; }
a { color: var(--teal); }
strong { font-weight: 600; }
.wrap { width: min(100% - 2.5rem, 1240px); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; top: -50px; right: 1rem; z-index: 99; background: var(--marigold); color: var(--ink); padding: .5rem 1rem; border-radius: 99px; }
.skip:focus { top: .5rem; }
:focus-visible { outline: 3px solid var(--marigold); outline-offset: 3px; }

/* header floats over hero */
.top { position: absolute; top: 0; inset-inline: 0; z-index: 20; color: #fff; }
.top__row { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 0; }
.logo { display: flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; }
.logo svg { width: 42px; height: 42px; }
.logo span { font-size: 1.5rem; font-weight: 700; line-height: 1; display: flex; flex-direction: column; }
.logo small { font-size: .75rem; font-weight: 400; margin-top: .3rem; opacity: .9; }
.menu { display: flex; gap: .3rem; align-items: center; }
.menu a { color: #fff; text-decoration: none; padding: .45rem .9rem; border-radius: 99px; font-weight: 400; }
.menu a:hover { background: rgba(255,255,255,.16); }
.menu .menu__call { background: var(--marigold); color: var(--ink); font-weight: 500; }
.menu .menu__call:hover { background: #F7BB67; }
.burger { display: none; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255,255,255,.18); cursor: pointer; }
.burger span:first-child, .burger span:first-child::before, .burger span:first-child::after { display: block; width: 18px; height: 2px; background: #fff; margin: auto; position: relative; content: ""; transition: transform .2s; }
.burger span:first-child::before { position: absolute; top: -6px; }
.burger span:first-child::after { position: absolute; top: 6px; }
.burger[aria-expanded="true"] span:first-child { background: transparent; }
.burger[aria-expanded="true"] span:first-child::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:first-child::after { transform: translateY(-6px) rotate(-45deg); }

/* pill buttons */
.pill { display: inline-block; background: var(--marigold); color: var(--ink); text-decoration: none; font-weight: 500; padding: .8rem 1.6rem; border-radius: 99px; }
.pill:hover { background: #F7BB67; }
.pill--dark { background: var(--teal); color: #fff; }
.pill--dark:hover { background: var(--teal-deep); }

/* footer */
.foot { background: var(--teal-deep); color: #CFE6E4; padding: 4.5rem 0 1.5rem; }
.foot__grid { display: grid; grid-template-columns: 2fr 1fr; gap: 3rem; align-items: end; }
.foot h2 { color: #fff; font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 700; margin-bottom: .6rem; }
.foot h3 { color: var(--marigold); font-size: 1rem; }
.foot__lines { display: flex; flex-wrap: wrap; gap: .5rem 2rem; font-size: 1.25rem; }
.foot a { color: #fff; }
.foot__legal { margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.15); font-size: .82rem; }
.foot__legal p { margin: 0; }

@media (max-width: 900px) {
  .burger { display: block; }
  .menu {
    position: fixed; inset: 0; background: var(--teal-deep); flex-direction: column; justify-content: center;
    gap: .6rem; font-size: 1.4rem; visibility: hidden; opacity: 0; transition: opacity .2s, visibility .2s;
  }
  .menu.is-open { visibility: visible; opacity: 1; }
  .top .burger { position: relative; z-index: 30; }
  .foot__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .foot__lines { font-size: 1.05rem; flex-direction: column; }
}