/* DSA Consultancy — brand logo + mobile app-style layer.
   Loaded after styles.css. Tailwind utilities live in @layer, so these unlayered rules take precedence. */

/* ---------- Brand theme: colours taken from the DSA logo ---------- */
/* logo indigo #303C8A · logo green #009C72 · logo deep green #185A42 */
:root {
  --primary: #303c8a;
  --primary-foreground: #ffffff;
  --gold: #009c72;               /* brand green: buttons, bars, badges */
  --gold-foreground: #ffffff;
  --accent: #dcf3ea;             /* light green tint (tick circles, chips) */
  --accent-foreground: #185a42;  /* deep green labels on light backgrounds */
  --ring: #009c72;
  --brand-green-light: #5fdcb2;  /* green text on indigo backgrounds */
  --brand-green-text: #00805e;   /* green text on light backgrounds */
}
/* Text on green (buttons, badges): deeper logo green for 4.5:1 contrast; exact logo green on hover */
a.bg-gold, span.bg-gold { background-color: var(--brand-green-text); }
a.bg-gold:hover { background-color: var(--gold); }
/* Green text must stay legible on both indigo and light surfaces */
.bg-primary .text-gold, header .text-gold, footer .text-gold, .has-bg .text-gold { color: var(--brand-green-light); }

/* ---------- Brand logo (all sizes) ---------- */
.brand-chip {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border-radius: 10px;
  padding: 7px 12px;
  box-shadow: 0 1px 2px rgb(0 0 0 / .15);
}
.brand-logo {
  display: block;
  height: 30px;
  width: auto;
}


/* ---------- Background photos: page headers + CTA (all sizes) ---------- */
.has-bg { position: relative; isolation: isolate; }
.has-bg > .site-container { position: relative; z-index: 1; }
.section-bg-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.section-bg-overlay { position: absolute; inset: 0; z-index: -1; }
.section-bg-overlay--hero {
  background: linear-gradient(90deg,
    var(--primary) 0%,
    color-mix(in oklab, var(--primary) 86%, transparent) 45%,
    color-mix(in oklab, var(--primary) 45%, transparent) 100%);
}
.section-bg-overlay--cta {
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--primary) 92%, transparent) 0%,
    color-mix(in oklab, var(--primary) 72%, transparent) 55%,
    color-mix(in oklab, var(--primary) 38%, transparent) 100%);
}
/* CTA bands are wide and short: favour the skyline over the sky */
.section-bg-img--cta { object-position: center 72%; }
.section-bg-overlay--feature {
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--primary) 86%, transparent) 0%,
    color-mix(in oklab, var(--primary) 45%, transparent) 55%,
    color-mix(in oklab, var(--primary) 70%, transparent) 100%);
}
/* Card grids over a photo: frosted, see-through cards with hairline dividers */
.has-bg--cards .gap-px { background: transparent; }
.has-bg--cards .gap-px > article.bg-primary {
  background: color-mix(in oklab, var(--primary) 50%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 0 0 .5px rgb(255 255 255 / .16);
}
.has-bg--cards article p.text-white\/60 { color: rgb(255 255 255 / .78); }
/* Outline buttons over photos get a soft backing so they stay legible */
.has-bg a.border-white\/30.bg-transparent {
  background: color-mix(in oklab, var(--primary) 55%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.has-bg a.border-white\/30.bg-transparent:hover { background: color-mix(in oklab, var(--primary) 35%, transparent); }

/* ---------- Readability fixes (all sizes) ---------- */
/* Dark sections/cards that reuse light-theme text colours */
.bg-primary .text-foreground:not(.bg-accent *, .bg-background *, .bg-muted *) { color: var(--primary-foreground); }
.bg-primary .text-muted-foreground:not(.bg-accent *, .bg-background *, .bg-muted *) { color: color-mix(in oklab, var(--primary-foreground) 68%, transparent); }
.bg-primary .text-accent-foreground:not(.bg-accent, .bg-accent *, .bg-background *, .bg-muted *) { color: var(--brand-green-light); }
/* "Most Popular" badge must not cover the card's eyebrow text */
article.relative > span.absolute.bg-gold + p.eyebrow { padding-right: 7.5rem; }
/* Green text on light backgrounds: deeper shade so it stays legible */
.text-gold:not(.bg-primary *, header *, footer *, .has-bg *) { color: var(--brand-green-text); }

@media (max-width: 767px) {
  html { -webkit-text-size-adjust: 100%; }
  body {
    overflow-x: clip;
    -webkit-tap-highlight-color: transparent;
  }
  .site-container { width: min(100% - 2rem, 76rem); }

  /* ---------- Header ---------- */
  header .site-container.h-20 { height: 3.75rem; }
  .brand-chip { padding: 5px 9px; border-radius: 8px; }
  .brand-logo { height: 22px; }
  header [data-mobile-menu] { max-height: calc(100dvh - 3.75rem); overflow-y: auto; padding: .75rem 1rem 1rem; }
  header [data-mobile-menu] a.text-lg { font-size: 1rem; padding-block: .85rem; }
  header [data-mobile-menu] a.bg-gold { border-radius: .75rem; padding-block: .85rem; }

  /* Text spans the full width on phones, so darken the photo evenly */
  .section-bg-overlay--hero {
    background: linear-gradient(180deg,
      color-mix(in oklab, var(--primary) 78%, transparent) 0%,
      color-mix(in oklab, var(--primary) 90%, transparent) 100%);
  }
  .section-bg-overlay--cta {
    background: linear-gradient(180deg,
      color-mix(in oklab, var(--primary) 88%, transparent) 0%,
      color-mix(in oklab, var(--primary) 70%, transparent) 100%);
  }

  /* ---------- Typography ---------- */
  h1.text-5xl, .text-7xl { font-size: 2.1rem; line-height: 1.12; }
  .text-5xl { font-size: 2rem; line-height: 1.12; }
  .text-4xl { font-size: 1.65rem; line-height: 1.2; }
  .text-3xl { font-size: 1.4rem; line-height: 1.25; }
  .text-2xl { font-size: 1.2rem; line-height: 1.3; }
  .text-xl { font-size: 1.05rem; line-height: 1.35; }
  .text-lg { font-size: .95rem; line-height: 1.65; }
  .text-base { font-size: .9rem; line-height: 1.65; }
  .text-sm { font-size: .84rem; }
  .text-xs { font-size: .7rem; }
  .leading-8 { line-height: 1.7; }
  .leading-7 { line-height: 1.65; }
  .eyebrow { font-size: .65rem; letter-spacing: .12em; }

  /* ---------- Section rhythm ---------- */
  .py-24 { padding-block: 3rem; }
  .py-20 { padding-block: 2.75rem; }
  .py-16 { padding-block: 2.5rem; }
  .pt-36 { padding-top: 6rem; }
  .pb-20 { padding-bottom: 2.25rem; }
  .mt-14, .mt-12 { margin-top: 1.75rem; }
  .mt-10 { margin-top: 1.5rem; }
  .mt-9, .mt-8 { margin-top: 1.25rem; }
  .mt-7 { margin-top: 1.1rem; }
  .mt-6 { margin-top: 1rem; }
  .mt-5 { margin-top: .85rem; }
  .gap-16, .gap-14, .gap-12 { gap: 1.75rem; }
  .gap-10 { gap: 1.5rem; }
  .gap-8 { gap: 1.25rem; }
  .gap-7 { gap: 1.1rem; }
  .p-8, .p-7 { padding: 1.25rem; }
  .p-6 { padding: 1.1rem; }

  /* ---------- Buttons ---------- */
  .h-13 { height: 3rem; }
  .rounded-md { border-radius: .75rem; }
  main .flex.flex-wrap.gap-3 > a { flex: 1 1 auto; }
  main .flex.flex-col.gap-3 > a { width: 100%; }

  /* ---------- Home hero ---------- */
  main > section:first-child.min-h-\[min\(820px\,92vh\)\] { min-height: auto; padding-top: 3.75rem; }
  main > section:first-child .pt-28 { padding-top: 2.25rem; padding-bottom: 2rem; gap: 1.75rem; }
  main > section:first-child .border-l.pl-6 {
    border: 1px solid rgb(255 255 255 / .15);
    border-radius: 1rem;
    padding: 1.1rem;
    background: rgb(255 255 255 / .06);
    backdrop-filter: blur(8px);
  }
  main > section:first-child .border-l.pl-6 .mt-8 { margin-top: .75rem; }
  main > section:first-child .border-l.pl-6 .min-h-20 { min-height: 3.5rem; }
  .py-5:has(> .marquee-track) { padding-block: .8rem; }

  /* ---------- Cards: rounded, app-like ---------- */
  main .border.p-8, main .border.p-7, main .border.p-6,
  main .bg-muted.p-7, main .bg-muted.p-8, main form.p-7 {
    border-radius: 1rem;
  }
  main .gap-px { border-radius: 1rem; overflow: hidden; }
  main .gap-px > * { padding: 1.1rem 1.15rem; }

  /* Numbered process / step rows */
  .md\:grid-cols-\[100px_1fr_1\.2fr\] { gap: .35rem; padding-block: 1.25rem; }
  .md\:grid-cols-\[100px_1fr_1\.2fr\] > span.text-3xl { font-size: 1.1rem; }
  .md\:grid-cols-5.gap-5 { gap: 1rem; }
  .md\:grid-cols-5.gap-5 > .pt-6 { padding-top: 1rem; }

  /* ---------- FAQ accordions ---------- */
  h3 > button.py-6 { padding-block: 1rem; font-size: .95rem; }
  [role="region"] > .pb-7 { padding-bottom: 1.1rem; font-size: .88rem; }

  /* ---------- Free zones: chips + card list ---------- */
  main .flex.flex-wrap.gap-2 {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: -1rem;
    padding: 0 1rem .25rem;
    scrollbar-width: none;
  }
  main .flex.flex-wrap.gap-2::-webkit-scrollbar { display: none; }
  main .flex.flex-wrap.gap-2 > button { flex: none; border-radius: 999px; height: 2.1rem; padding-inline: .9rem; }
  label.max-w-md input.h-12 { border-radius: .85rem; height: 2.9rem; }

  table.min-w-\[760px\] { min-width: 0; border-collapse: separate; }
  table.min-w-\[760px\] thead { display: none; }
  table.min-w-\[760px\] tbody { display: grid; gap: .75rem; }
  table.min-w-\[760px\] tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "name profile" "emirate emirate" "focus focus";
    column-gap: .75rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--card, #fff);
    padding: 1rem 1.1rem;
  }
  table.min-w-\[760px\] td { padding: 0; }
  table.min-w-\[760px\] td:nth-child(1) { grid-area: name; font-size: 1.05rem; }
  table.min-w-\[760px\] td:nth-child(2) {
    grid-area: emirate; margin-top: .2rem;
    font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-foreground);
  }
  table.min-w-\[760px\] td:nth-child(3) { grid-area: focus; margin-top: .45rem; font-size: .84rem; }
  table.min-w-\[760px\] td:nth-child(4) { grid-area: profile; align-self: start; }
  table.min-w-\[760px\] td:nth-child(4) span { border-radius: 999px; font-size: .68rem; padding: .25rem .6rem; }
  main .mt-10.overflow-x-auto { margin-top: 1.25rem; }

  /* ---------- Contact ---------- */
  form.grid.p-7 { gap: 1rem; }
  form .h-12, form select.h-12 { height: 2.9rem; border-radius: .75rem; }
  form textarea { border-radius: .75rem; }
  form button[type="submit"] { width: 100%; border-radius: .85rem; }
  main a.flex.items-center.gap-4.pb-5 { padding-bottom: 1rem; }

  /* ---------- Footer ---------- */
  footer .site-container.py-16 { grid-template-columns: 1fr 1fr; gap: 1.75rem 1rem; padding-block: 2.25rem; }
  footer .site-container.py-16 > :first-child { grid-column: 1 / -1; }
  footer .site-container.py-16 .mt-5 { gap: .6rem; font-size: .8rem; }
  footer .site-container.py-16 a[href^="mailto"] { word-break: break-all; }
}

/* ---------- Footer credit ---------- */
.site-credit strong { font-weight: 600; color: var(--brand-green-light); }

/* ---------- White header (all sizes) ---------- */
header.fixed {
  background-color: rgb(255 255 255 / .96);
  color: var(--foreground);
  border-bottom-color: var(--border);
}
header.fixed.is-scrolled { box-shadow: 0 8px 24px -14px rgb(20 30 70 / .25); }
/* logo sits directly on the white bar, no badge */
header .brand-chip { background: transparent; box-shadow: none; padding: 0; }
header .brand-logo { height: 36px; }
@media (max-width: 767px) { header .brand-logo { height: 27px; } }
header nav a.text-white\/75, header a[href^="tel"] { color: var(--foreground); opacity: .78; }
header nav a.text-white\/75:hover, header a[href^="tel"]:hover { color: var(--primary); opacity: 1; }
header nav a[aria-current="page"] { color: var(--brand-green-text); opacity: 1; font-weight: 600; }
header button[data-menu-toggle] { color: var(--primary); }
header button[data-menu-toggle]:hover { background: var(--muted); }
/* phone dropdown menu */
header [data-mobile-menu] { background: #fff; border-top-color: var(--border); }
header [data-mobile-menu] a.text-white { color: var(--foreground); border-bottom-color: var(--border); }
header [data-mobile-menu] a.text-white:hover { color: var(--primary); }

/* ---------- White footer (all sizes) ---------- */
footer.bg-primary {
  background-color: #fff;
  color: var(--foreground);
  border-top: 1px solid var(--border);
}
footer .brand-chip { background: transparent; box-shadow: none; padding: 0; }
footer .brand-logo { height: 36px; }
footer .text-white\/60, footer .text-white\/70, footer .text-white\/45 { color: var(--muted-foreground); }
footer .text-white\/70 a:hover, footer a.hover\:text-white:hover { color: var(--primary); }
footer.bg-primary .text-gold { color: var(--brand-green-text); }  /* beats the dark-section .bg-primary rule */
footer .border-white\/10 { border-color: var(--border); }
footer .site-credit strong { color: var(--brand-green-text); }