/* ============================================================
   GlassRepair Singapore — Heidi-style theme
   Type: Newsreader (serif display, SIL OFL) + Inter variable (body)
   Icons: HugeIcons stroke-rounded (self-hosted 18-glyph subset)
   Surfaces: pure white page, warm cream cards, bark pill CTAs
   Loaded after /assets/index-*.css; overrides Tailwind utilities.
   Purely presentational — no content or metadata changes.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Newsreader';
  src: url('/assets/fonts/Newsreader-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('/assets/fonts/Newsreader-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'InterVariable';
  src: url('/assets/fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'InterVariable';
  src: url('/assets/fonts/InterVariable-Italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'hgi-subset';
  src: url('/assets/fonts/hugeicons-subset.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root {
  --gx-sans: 'InterVariable', Inter, -apple-system, 'Segoe UI', 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', system-ui, sans-serif;
  --gx-serif: 'Newsreader', Georgia, 'Songti SC', 'Noto Serif SC', serif;
  --gx-paper: #ffffff;      /* page background — pure white */
  --gx-surface: #f5f1ea;    /* cards — Heidi cream */
  --gx-surface-2: #ece6dc;  /* chips, nested fills */
  --gx-ink: #331419;        /* headings — deep bark */
  --gx-ink-2: #4a3338;      /* strong body text */
  --gx-muted: #75676a;      /* secondary text */
  --gx-faint: #9d9194;      /* tertiary */
  --gx-line: #e9e2d8;       /* rare hairlines */
  --gx-bark: #2a0e15;       /* button fill — Heidi bark */
  --gx-bark-hover: #3d1820;
  --gx-radius-card: 28px;
}

/* ---------- Typography ---------- */
html, body,
button, input, select, textarea {
  font-family: var(--gx-sans);
}
body { background: var(--gx-paper); }

h1, h2, h3, h4, h5, h6,
/* Display-sized text the build renders on <p>/<span>/<div> rather than a
   heading tag (e.g. the "Photos / Size / Access / Quote" row) */
[class~="text-3xl"], [class~="text-4xl"], [class~="text-5xl"],
[class~="text-6xl"], [class~="text-7xl"],
[class~="md:text-3xl"], [class~="md:text-4xl"], [class~="md:text-5xl"],
[class~="md:text-6xl"], [class~="md:text-7xl"] {
  font-family: var(--gx-serif) !important;
  /* one 400 weight is loaded — pinning it avoids synthetic bold */
  font-weight: 400 !important;
  letter-spacing: 0;
}
/* Italic display subtitles get the serif's real italic */
[class~="italic"][class~="text-xl"],
[class~="italic"][class~="md:text-2xl"] {
  font-family: var(--gx-serif) !important;
}

/* ---------- Icons: RemixIcon classes -> HugeIcons glyphs ---------- */
i[class^="ri-"]::before, i[class*=" ri-"]::before {
  font-family: 'hgi-subset';
  font-style: normal;
}
i.ri-whatsapp-line::before        { content: "\4A50"; }
i.ri-arrow-right-line::before     { content: "\3B7A"; }
i.ri-arrow-right-s-line::before   { content: "\3B79"; }
i.ri-arrow-left-line::before      { content: "\3B6B"; }
i.ri-phone-line::before           { content: "\3D00"; }
i.ri-shield-check-line::before    { content: "\46AA"; }
i.ri-mail-line::before            { content: "\42EE"; }
i.ri-close-line::before           { content: "\3D42"; }
i.ri-check-line::before           { content: "\4908"; }
i.ri-zoom-in-line::before         { content: "\4AB7"; }
i.ri-map-pin-line::before         { content: "\429F"; }
i.ri-map-pin-2-line::before       { content: "\42A2"; }
i.ri-time-line::before            { content: "\3E05"; }
i.ri-subtract-line::before        { content: "\43B0"; }
i.ri-menu-line::before            { content: "\435A"; }
i.ri-file-list-3-line::before     { content: "\3FFA"; }
i.ri-checkbox-circle-line::before { content: "\3DA7"; }
i.ri-add-line::before             { content: "\454C"; }

/* ---------- Palette: pure white page, bark text ---------- */
.bg-gray-50  { background-color: var(--gx-paper) !important; }
.bg-gray-100 { background-color: var(--gx-surface-2) !important; }
.bg-gray-900 { background-color: var(--gx-bark) !important; }
.bg-gray-800 { background-color: var(--gx-bark-hover) !important; }
.hover\:bg-gray-800:hover { background-color: var(--gx-bark-hover) !important; }
.hover\:bg-gray-100:hover { background-color: var(--gx-surface-2) !important; }

.text-gray-900 { color: var(--gx-ink) !important; }
.text-gray-800, .text-gray-700 { color: var(--gx-ink-2) !important; }
.text-gray-600, .text-gray-500 { color: var(--gx-muted) !important; }
.text-gray-400 { color: var(--gx-faint) !important; }
.hover\:text-gray-900:hover { color: var(--gx-ink) !important; }

.border-gray-200, .border-gray-300 { border-color: var(--gx-line) !important; }

/* ---------- Cards: flat Heidi cream, large radius ---------- */
[class*="border-gray-200"][class*="rounded-2xl"] {
  background-color: var(--gx-surface) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.rounded-2xl { border-radius: var(--gx-radius-card) !important; }
.md\:rounded-3xl { border-radius: var(--gx-radius-card) !important; }
.rounded-3xl { border-radius: 32px !important; }
.rounded-t-3xl { border-radius: 32px 32px 0 0 !important; }
.shadow-sm { box-shadow: none !important; }

/* Footer slab reads as one big cream card on the white page */
footer.bg-gray-50, .bg-gray-50.rounded-t-3xl {
  background-color: var(--gx-surface) !important;
  border-top-color: transparent !important;
}

/* Long tenant names are injected into CTAs at runtime — let pills wrap
   instead of overflowing the viewport */
a[class*="rounded-full"][class*="whitespace-nowrap"],
button[class*="rounded-full"][class*="whitespace-nowrap"] {
  white-space: normal !important;
  max-width: 100%;
  text-align: center;
  justify-content: center;
}
/* …but navbar CTAs stay on one line (their labels are short and static) */
nav a[class*="rounded-full"][class*="whitespace-nowrap"] {
  white-space: nowrap !important;
}

/* ---------- Alignment: left-aligned like the reference ----------
   The build mixes centred card bodies with right-aligned section intros,
   so blocks that sit side by side disagree. Normalise the mismatched ones;
   deliberately centred rows (footer, "View All Services") are left alone. */

/* Right-aligned intro paragraphs that sit beside left-aligned headings */
[class~="lg:text-right"], [class~="md:text-right"] { text-align: left !important; }

/* Card bodies: centred in some cards, left in others — always left.
   `:not([class~="items-center"])` keeps deliberately centred blocks such as
   the hero exactly as they were. */
[class~="text-center"][class~="flex-1"][class~="flex-col"]:not([class~="items-center"]) {
  text-align: left !important;
}
[class~="text-center"][class~="flex-1"][class~="flex-col"]:not([class~="items-center"]) > * {
  align-self: flex-start;
}

/* Stat blocks that centre on mobile and left-align on desktop — always left */
[class~="text-center"][class~="md:text-left"] { text-align: left !important; }

/* ---------- Dead-image fallback ----------
   readdy.ai (the builder that generated this site's photography) now rejects
   the embedded unsigned URLs, so those images fail for every visitor.
   image-fallback.js flags each failed image and its frame; paint an on-brand
   glass panel there instead of leaving a broken icon. Images that load are
   untouched. */
img[data-img-dead="true"] { display: none !important; }

[data-img-fallback] {
  position: relative;
  overflow: hidden;
  background-color: var(--gx-surface);
}
/* Angled highlights suggesting light across a glass pane */
[data-img-fallback]::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(118deg, transparent 18%, rgba(255,255,255,.85) 30%, transparent 42%),
    linear-gradient(118deg, transparent 52%, rgba(255,255,255,.55) 62%, transparent 72%),
    linear-gradient(150deg, var(--gx-surface-2) 0%, var(--gx-surface) 55%, #fbf8f3 100%);
}
[data-img-fallback]::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(42,14,21,.07);
  border-radius: inherit;
}
/* Behind overlaying copy: same treatment in bark so white text stays legible */
[data-img-fallback="dark"] { background-color: var(--gx-bark); }
[data-img-fallback="dark"]::before {
  background:
    linear-gradient(118deg, transparent 18%, rgba(255,255,255,.10) 30%, transparent 42%),
    linear-gradient(118deg, transparent 52%, rgba(255,255,255,.06) 62%, transparent 72%),
    linear-gradient(150deg, #1c090e 0%, var(--gx-bark) 55%, #46232b 100%);
}
[data-img-fallback="dark"]::after { border-color: rgba(255,255,255,.08); }
/* Keep overlaying content above the painted panel */
[data-img-fallback] > *:not(img) { position: relative; z-index: 1; }

/* ---------- Floating layer: just the quote pill ----------
   Only the runtime "Request a quote" pill floats. WhatsApp now lives inside
   the quote dialog (beside "Send quote request"), so the standalone floating
   WhatsApp button is redundant and hidden — direct WhatsApp is still one tap
   away from the hero CTA and the nav. The static WhatsApp pill and the mobile
   bottom bar duplicated it too, so they are hidden as well. */
a.ezzo-wa-sticky { display: none !important; }
#root div.fixed[class*="z-[80]"] { display: none !important; }
a.fixed[class*="bottom-6"][class*="right-6"] { display: none !important; }

/* ---------- Top contact bar: left-aligned + responsive ----------
   The build right-aligns the strip on desktop and lists the tenant number
   twice, which clips once the tenant name is long. Left-align it, and below
   xl drop the redundant duplicate + email so nothing is cut off. */
div.fixed[class*="z-[60]"] > div {
  justify-content: flex-start !important;
}
@media (max-width: 1119px) {
  div.fixed[class*="z-[60]"] a[href^="tel:"] ~ a[href^="tel:"],
  div.fixed[class*="z-[60]"] a[href^="tel:"] + span,
  div.fixed[class*="z-[60]"] a[href^="mailto:"] { display: none !important; }
}

/* ---------- Mobile: single clean navbar (Heidi-style) ---------- */
@media (max-width: 767px) {
  /* hide the duplicate black contact strip; nav + FAB + quote card keep the functions */
  div.fixed[class*="top-0"][class*="bg-gray-900"] { display: none !important; }
  nav.fixed { top: 0 !important; }

  /* Open menu = full-screen solid white sheet (menu open when close icon shows) */
  nav.fixed:has(i.ri-close-line) {
    background: #fff !important;
    bottom: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }
  nav.fixed:has(i.ri-close-line) > div[class*="border-t"] {
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-top-color: var(--gx-line) !important;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  nav.fixed:has(i.ri-close-line) > div[class*="border-t"] > div[class*="flex-col"] {
    flex: 1;
    gap: 2px !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  body:has(nav i.ri-close-line) { overflow: hidden; }
  /* Big tappable rows with hairlines + chevrons, Heidi-sheet style */
  nav div[class*="border-t"] > div[class*="flex-col"] > a[class*="text-gray-700"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 17px;
    padding: 12px 0;
    border-bottom: 1px solid var(--gx-line);
    color: var(--gx-ink) !important;
  }
  nav div[class*="border-t"] > div[class*="flex-col"] > a[class*="text-gray-700"]::after {
    content: "\3B79";
    font-family: 'hgi-subset';
    font-size: 16px;
    color: var(--gx-faint);
  }
  /* Compact contact rows */
  nav div[class*="border-t"] a[class*="items-center"][class*="gap-3"] {
    font-size: 15px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  /* CTA pinned to the bottom of the sheet */
  nav div[class*="border-t"] > div[class*="flex-col"] > a[class*="bg-gray-900"] {
    margin-top: auto;
    text-align: center;
    padding-top: 14px;
    padding-bottom: 14px;
  }
  /* While the sheet is open, hide floating controls beneath it */
  body:has(nav i.ri-close-line) a.fixed[class*="bottom-6"],
  body:has(nav i.ri-close-line) #ezzo-rental-tools {
    display: none !important;
  }
}

/* ---------- Rental runtime theming (inherited into its shadow DOM) ---------- */
#ezzo-rental-tools {
  --ezzo-tools-font: var(--gx-sans);
  --ezzo-tools-btn-bg: var(--gx-bark);
  --ezzo-tools-btn-radius: 999px;
  --ezzo-dialog-bg: var(--gx-surface);
  --ezzo-dialog-radius: var(--gx-radius-card);
  --ezzo-dialog-inner-radius: 24px;
  --ezzo-dialog-ink: var(--gx-ink);
}

/* ============================================================
   About / About-us pages — bridge the legacy inline design system
   Only /about/ and /about-us/ use these custom classes (header.top,
   .hero, .eyebrow, .about-card, .related) with a dark-navy hero and
   blue/teal accents. Repaint them to the Heidi palette so they match
   every other page: white hero, bark text, cream flat cards.
   These selectors exist on no other page, so the overrides are inert
   elsewhere. This block loads after the pages' inline <style>, so it wins.
   ============================================================ */

/* Remap the legacy tokens (covers any incidental use of var(--accent) etc.) */
:root {
  --accent: var(--gx-bark);
  --primary: var(--gx-bark);
  --ink: var(--gx-ink);
  --muted: var(--gx-muted);
  --soft: var(--gx-tint, #faf6f0);
  --line: var(--gx-line);
}

/* Header + hero: dark band -> light, matching the other pages */
header.top {
  background: var(--gx-paper) !important;
  border-bottom: 1px solid var(--gx-line);
}
header.top .brand,
header.top .nav-links a,
header.top .hero h1 { color: var(--gx-ink) !important; }
header.top .brand span { color: var(--gx-bark) !important; }
header.top .hero p,
header.top .hero-copy { color: var(--gx-muted) !important; }

/* Eyebrow chip: blue-on-teal -> bark-on-cream */
.eyebrow {
  color: var(--gx-ink) !important;
  background: var(--gx-surface-2) !important;
  border-color: transparent !important;
}

/* Buttons: blue -> bark pill (keep white label) */
.btn { background: var(--gx-bark) !important; color: #fff !important; }
.btn:hover { background: var(--gx-bark-hover) !important; }
.btn-light { background: var(--gx-surface) !important; color: var(--gx-ink) !important; }
.btn-outline { border-color: var(--gx-line) !important; color: var(--gx-ink) !important; }

/* Content cards: white bordered -> cream flat, larger radius */
.about-card {
  background: var(--gx-surface) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  border-radius: 20px !important;
}

/* "Related" band: dark -> cream, with dark text */
.related {
  background: var(--gx-surface) !important;
  color: var(--gx-ink) !important;
}
.related h2, .related h3, .related p, .related a { color: var(--gx-ink) !important; }

/* Nav CTA pill (if present) already bark via --primary remap; keep label white */
header.top .nav-cta { color: #fff !important; }