/* ge-ui-fix.css — corrections applied after the screenshot review.
   Loaded last so it wins without editing the hashed build files. */

/* 1. Footer payment label. The build targets `.f-pay h5` but the markup is
      <h3 class="foot-h5">, so the rule never applied and the label sat at
      near-zero contrast on the dark footer. */
.f-pay .foot-h5{
  color:var(--brand-lt,#C6A15B);
  font-size:.68rem;
  letter-spacing:.26em;
  font-weight:500;
  opacity:1;
}
.f-pay .m{color:rgba(255,255,255,.82)}
.f-pay .m span{white-space:nowrap}

/* 2. Centre the payment row and the legal line, and give them room. */
.f-pay{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  text-align:center;
  padding:26px 0;
}
.f-pay .m{justify-content:center;gap:14px 22px}
.f-bot{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:12px;
  padding-top:22px;
}
.f-bot nav{justify-content:center}

/* 5. Hero buttons: equal width instead of sizing to their own label. */
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:stretch}
.hero-cta .btn{
  flex:1 1 clamp(220px,22vw,280px);
  min-height:56px;
  padding-inline:clamp(18px,2vw,34px);
  text-align:center;
}
/* same rule for the CTA rows on every other page type */
.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:stretch}
.cta-row .btn{flex:1 1 clamp(200px,20vw,260px);min-height:52px;text-align:center}

@media(max-width:660px){
  .hero-cta,.cta-row{flex-direction:column;align-items:stretch}
  .hero-cta .btn,.cta-row .btn{flex:1 1 auto;width:100%;min-height:54px}
  .f-pay .m{gap:10px 16px;font-size:.76rem}
}

/* 3. The remaining map fills its column cleanly now the second one is gone. */
.mapbox iframe{width:100%;display:block}


/* ============================================================
   PRINT
   The checklist is the page people actually print — 187 villa
   points and 96 apartment points. Strip everything that is not
   the list, keep the URL on link text so a printed copy is
   still traceable back to the source.
   ============================================================ */
@media print{
  header,nav.menu,.ge-dd,.mobar,.totop,footer,.hero-bg,
  #gc-top30,#gc-kb,#gc-related,#gc-rel,#gc-incomm,#gc-svc,
  .cta-row,.hero-cta,.lnk-grid,.ge-skip,iframe{display:none!important}

  html,body{background:#fff!important;color:#000!important;font-size:11pt}
  main,.wrap,.wrap.narrow{max-width:none!important;padding:0!important;margin:0!important}
  .sec,.sec-dune,.pg-hero{padding:0 0 14pt!important;background:#fff!important;border:0!important}

  h1{font-size:20pt;margin:0 0 8pt}
  h2{font-size:14pt;margin:14pt 0 6pt;break-after:avoid}
  h3{font-size:11.5pt;margin:9pt 0 3pt;break-after:avoid}
  p,li{orphans:3;widows:3}
  .sub,article.sub,li{break-inside:avoid}

  /* checklist points read better as a single column on paper */
  .gc-prose,.sub-grid{columns:1!important;display:block!important}

  /* every FAQ answer open, so a printed copy is complete */
  .faq .ans{display:block!important;height:auto!important;max-height:none!important}
  .faq button{font-weight:600}

  a{color:#000;text-decoration:none;border:0}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8.5pt;color:#444}
  a[href^="/"]::after{content:" (grandemirates.ae" attr(href) ")";font-size:8.5pt;color:#444}
  a[href^="#"]::after,a[href^="tel"]::after,a[href^="mailto"]::after{content:""}

  /* a printed page should still say where it came from */
  main::after{
    content:"grandemirates.ae · +971 58 563 0041 · care@grandemirates.ae";
    display:block;margin-top:16pt;padding-top:6pt;
    border-top:1pt solid #999;font-size:9pt;color:#333;
  }
}

/* ============================================================
   DARK MODE
   Same palette, inverted ground. The brand greens stay; the
   sand tones become deep ink so the site is not a torch at
   night on a phone set to dark.
   ============================================================ */
@media (prefers-color-scheme: dark){
  :root{
    --sand:#0E1512;
    --sand-2:#151E1A;
    --ink:#E8EFE9;
    --muted:#9CB0A3;
    --line:#26332C;
    --brand:#7FA88C;
    --brand-lt:#D8B872;
  }
  body{background:var(--sand);color:var(--ink)}
  .sec-dune{background:var(--sand-2)}
  img:not([aria-hidden="true"]){filter:brightness(.92)}
  .hero-bg img{opacity:.35}
  .btn-line{border-color:var(--brand)}
  .faq .ans{color:var(--muted)}
  /* the footer is already dark — keep it distinct from the page */
  footer{background:#080D0B}
}


/* ------------------------------------------------------------------
   Dark mode, completed. The first pass missed --dune / --dune-2 and
   the header's hardcoded background, so those stayed light.
   ------------------------------------------------------------------ */
@media (prefers-color-scheme: dark){
  :root{
    --dune:#141D19;
    --dune-2:#1B2621;
    --brand-pale:#1A2A22;
  }
  header,header.nav{background:#0B1310!important;border-bottom-color:var(--line)}
  nav.menu .ge-dd{background:#111A16;border-color:var(--line)}
  .sec-dune,.dune{background:var(--dune)}
  input,textarea,select{background:var(--sand-2);color:var(--ink);border-color:var(--line)}
  ::placeholder{color:var(--muted)}
}

/* ------------------------------------------------------------------
   No-JS: reveal every FAQ answer rather than hiding the content.
   The .no-js class is removed by script on load, so this only ever
   applies when scripting is unavailable.
   ------------------------------------------------------------------ */
.no-js .faq .ans{display:block!important;max-height:none!important;height:auto!important;opacity:1!important}
.no-js .faq button{cursor:default}
.no-js .faq button::after{display:none}

/* ------------------------------------------------------------------
   Enquiry form
   ------------------------------------------------------------------ */
.ge-form{max-width:620px;margin-top:26px}
.ge-form .row{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media(max-width:640px){.ge-form .row{grid-template-columns:1fr}}
.ge-form label{display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 0 6px}
.ge-form input,.ge-form select,.ge-form textarea{
  width:100%;padding:14px 15px;border:1px solid var(--line);background:var(--sand-2);
  color:var(--ink);font:inherit;font-size:.98rem;border-radius:0;min-height:50px}
.ge-form textarea{min-height:110px;resize:vertical}
.ge-form input:focus-visible,.ge-form select:focus-visible,.ge-form textarea:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px}
.ge-form .field{margin-bottom:16px}
.ge-form .err{color:#B4432F;font-size:.82rem;margin-top:6px;display:none}
.ge-form .field.bad input,.ge-form .field.bad select{border-color:#B4432F}
.ge-form .field.bad .err{display:block}
.ge-form .actions{display:flex;gap:12px;flex-wrap:wrap;align-items:stretch;margin-top:22px}
.ge-form .actions .btn{flex:1 1 200px;min-height:52px;text-align:center}
.ge-form .note{margin-top:14px;font-size:.84rem;color:var(--muted)}