/* ================================================================
   BRAND — colours and fonts taken from the municipality logo
   (assets/images/logo.jpg: one teal, #009383, on white; geometric
   Kufi-style Arabic + geometric sans Latin lettering).
   Loaded LAST on every page, so these values win over main.css and
   civic-uplift.css. Gold is intentionally gone: the logo has none.
   ================================================================ */
/* Fonts are self-hosted (assets/css/fonts.css): Cairo, Inter, Montserrat. */

:root {
  /* Type scale (px ÷ 16 = rem). Every font size in the site snaps to one of these. */
  --fs-12: .75rem;  --fs-13: .8125rem; --fs-14: .875rem; --fs-15: .9375rem; --fs-16: 1rem;
  --fs-18: 1.125rem; --fs-20: 1.25rem; --fs-24: 1.5rem;  --fs-28: 1.75rem;  --fs-32: 2rem;
  --fs-36: 2.25rem; --fs-40: 2.5rem;  --fs-48: 3rem;    --fs-56: 3.5rem;   --fs-64: 4rem;
  /* Smallest text allowed; small labels use max(<size>, var(--fs-min)).
     Arabic letters read smaller than Latin at the same size, so Arabic gets 13px. */
  --fs-min: 12px;

  /* Teal scale built on the logo colour (same hue, darker → lighter) */
  --brand:          #009383;   /* the logo teal */
  --brand-teal:     #009383;
  --primary-deep:   #00302A;
  --primary-dark:   #00473F;
  --primary:        #006B5E;
  --primary-mid:    #005F54;
  --primary-light:  #009383;

  /* Former "gold" accents → light/mid logo teal. Light enough that the dark
     text used on gold buttons/badges stays readable (contrast ≥ 4:1). */
  --gold-dark:      #3FB5A3;
  --gold:           #5EC7B8;
  --gold-light:     #009383;
  --gold-pale:      #E6F5F3;
  --amber:          #009383;   /* civic-uplift's orange action colour → logo teal */
  --amber-dark:     #006B5E;
  --amber-light:    #3FB5A3;

  --off-white:      #F7FBFA;
  --light-bg:       #EEF6F4;
  --dark:           #041A17;
  --text-dark:      #0E2E29;
  --text-mid:       #2E4A45;
  --text-muted:     #45655E;

  --border-color:   rgba(0,47,31, 0.26);
  --border-light:   rgba(0,47,31, 0.12);
  --glass-bg:       rgba(0, 48, 42, 0.72);
  --glass-light:    rgba(0, 107, 94, 0.12);
  --overlay-dark:   rgba(0, 26, 23, 0.65);
  --overlay-green:  rgba(0, 48, 42, 0.82);
  --shadow-gold:    0 4px 30px rgba(0,47,31, 0.28);
  --shadow-card:    0 20px 60px rgba(0, 30, 26, 0.32);
  --shadow-sm:      0 4px 16px rgba(0, 30, 26, 0.16);
  --theme-color:    #00564B;

  /* Fonts: English headings in a geometric sans like the logo; Arabic stays
     Cairo — the Kufi-style geometric face closest to the logo's Arabic. */
  --font-en-head:   'Montserrat', 'Inter', 'Cairo', system-ui, sans-serif;
  --font-en-body:   'Inter', 'Cairo', system-ui, sans-serif;
  --font-ar:        'Cairo', 'Segoe UI', sans-serif;
}

/* English headings: Montserrat, slightly tighter like the logo's lettering */
body:not(.lang-ar) h1, body:not(.lang-ar) h2, body:not(.lang-ar) h3,
body:not(.lang-ar) .section-title-main, body:not(.lang-ar) .page-hero-title { font-family: var(--font-en-head); letter-spacing: -0.01em; }
body.lang-ar h1, body.lang-ar h2, body.lang-ar h3, body.lang-ar h4 { font-family: var(--font-ar); }

/* Arabic text is always Cairo, even where a component sets a Latin display font
   (Latin fonts have no Arabic letters, so the browser fell back to a system font).
   No slanted Arabic either: Cairo has no italic, a fake one looks broken.
   .ms-ar-sig is the mayor's calligraphic signature and keeps its own font. */
body.lang-ar { --fs-min: 13px; }

/* The language not being shown stays hidden, even where a component rule such as
   ".pwa-banner-text strong { display:block }" is more specific than the toggle. */
body:not(.lang-ar) .display-ar { display: none !important; }
body:not(.lang-fr) .display-fr { display: none !important; }
body.lang-ar .display-en, body.lang-fr .display-en { display: none !important; }
/* Designs that always show a Latin line above an Arabic line (e.g. tourism "Explore"
   panels): .lat-en is that line in English, .lat-fr the same line in French. */
body.lang-fr .lat-en, body:not(.lang-fr) .lat-fr { display: none !important; }

/* Language switch: Lebanese · UK · French flags (inc/nav.php). The active flag sits in a teal ring. */
.lang-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border-color); direction: ltr; }
.lang-opt { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 36px; padding: 0 8px;
  border: 0; border-radius: 999px; cursor: pointer; background: transparent; touch-action: manipulation;
  transition: background-color .18s ease, box-shadow .18s ease; }
.lang-flag { display: block; width: 24px; height: 16px; border-radius: 3px; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35); opacity: .7; filter: saturate(.75); transition: opacity .18s ease, filter .18s ease, transform .18s ease; }
.lang-opt:hover { background: rgba(0,47,31, 0.14); }
.lang-opt:hover .lang-flag { opacity: 1; filter: none; }
.lang-opt[aria-pressed="true"] { background: #009383; box-shadow: 0 0 0 2px rgba(0,47,31, 0.55); cursor: default; }
.lang-opt[aria-pressed="true"] .lang-flag { opacity: 1; filter: none; transform: scale(1.06); }
.lang-opt:focus-visible { outline: 2px solid #009383; outline-offset: 2px; }
@media (max-width: 991.98px) { .lang-opt { min-height: 44px; min-width: 48px; } .lang-flag { width: 27px; height: 18px; } }

/* <small> shrinks relative to its parent (Bootstrap: .875em); never below the minimum */
small, .small { font-size: max(.875em, var(--fs-min)); }

/* Install banner title: wrap to a second line instead of being cut off with "…" */
.pwa-banner-text strong { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }
body.lang-ar .display-ar:not(.ms-ar-sig) { font-family: var(--font-ar); font-style: normal; }
body.lang-ar .display-ar em, body.lang-ar .display-ar i:not([class*="fa"]) { font-style: normal; }

/* Header (top bar + menu): the colour layer of the inner-page banner, without the branches photo
   (sampled from it: #09564C → #076A5E), slightly translucent with a soft blur behind.
   It stays the same when the menu sticks on scroll. */
.top-bar, .main-nav, .main-nav.scrolled {
  background: linear-gradient(90deg, rgba(9, 86, 76, 0.94) 0%, rgba(8, 92, 80, 0.94) 35%, rgba(8, 99, 87, 0.94) 65%, rgba(7, 106, 94, 0.94) 100%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1);
}
.top-bar { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }

/* Primary buttons: solid logo teal with white text (formerly gold) */
.btn-gold { background: linear-gradient(135deg, #009383, #007A6B) !important; color: #fff !important; border-color: transparent !important; }
.btn-gold:hover { background: linear-gradient(135deg, #009E8B, #009383) !important; color: #fff !important; box-shadow: 0 10px 26px rgba(0,47,31, 0.35) !important; }
.btn-gold i { color: inherit !important; }
.btn-outline-gold { border-color: #5EC7B8 !important; color: #5EC7B8 !important; }
.btn-outline-gold:hover { background: #009383 !important; border-color: #009383 !important; color: #fff !important; }

/* Floating actions (chat, back-to-top) in the logo teal */
.chatbot-toggle, #back-to-top { background: linear-gradient(135deg, #009383, #007A6B) !important; color: #fff !important; box-shadow: 0 8px 26px rgba(0,47,31, 0.4) !important; }
.chatbot-toggle.active { background: linear-gradient(135deg, #C0392B, #E74C3C) !important; }

/* Login / register: solid teal button, readable links on the white card */
.btn-gold-solid { background: linear-gradient(135deg, #009383, #007A6B) !important; color: #fff !important; }
.auth-switch a { color: #00796A !important; }

/* Footer bottom links */
.footer-bottom-links { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-bottom-links a { font-size: max(.75rem, var(--fs-min)); text-decoration: none; }

/* Accent words inside headings on LIGHT sections: readable logo teal */
.section-title-main .accent, .fc-intro h2 em { color: #009383; }

/* Phone menu: the language switch, login and emergency buttons wrap instead of overflowing. */
@media (max-width: 991.98px) { .nav-actions { flex-wrap: wrap; row-gap: 10px; } }

/* Desktop menu on medium screens (992–1399px): drop the small icons and tighten the
   spacing so the menu stays on one row in every language (French labels are longest). */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .main-nav .navbar-nav .nav-link { padding-left: 9px !important; padding-right: 9px !important; white-space: nowrap; }
  .main-nav .navbar-nav > .nav-item > .nav-link > i { display: none; }
}
@media (min-width: 1400px) {
  .main-nav .navbar-nav .nav-link { padding-left: 11px !important; padding-right: 11px !important; white-space: nowrap; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .main-nav .nav-logo-text { display: none; }      /* the round logo stays; its text collided with the menu */
}

/* ── Header logo (desktop ≥992px): the round logo spans the top bar AND the menu bar and sits
   at the window edge — right in Arabic, left in English / French (logical properties).
   Top bar 61px + menu 69px = 130px; the 112px logo leaves 9px above and below.
   Both bars get extra start padding only when their content would run into the logo
   (--cw = Bootstrap container width per breakpoint). When the menu sticks on scroll
   (top bar gone) the logo shrinks into the menu bar, still at the edge. */
@media (min-width: 992px) {
  :root { --tb-h: 61px; --logo-d: 112px; --logo-x: 20px; --cw: 960px; }
  .top-bar { height: var(--tb-h); padding-top: 0; padding-bottom: 0; display: flex; align-items: center; }
  .top-bar > .container,
  .main-nav > .container {
    position: static;
    padding-inline-start: max(12px, calc(var(--logo-x) + var(--logo-d) + 26px - (100vw - var(--cw)) / 2));
    transition: padding .3s ease;
  }
  .main-nav .nav-logo { padding-inline-start: 0; min-height: 52px; }
  .main-nav .nav-logo img {
    position: absolute; inset-inline-start: var(--logo-x); top: calc(9px - var(--tb-h));
    width: var(--logo-d); height: var(--logo-d); z-index: 2;
    border: 3px solid #fff; box-shadow: 0 8px 26px rgba(0, 30, 26, 0.35);
    transition: top .3s ease, width .3s ease, height .3s ease, border-width .3s ease;
  }
  .main-nav.scrolled > .container { padding-inline-start: max(12px, calc(var(--logo-x) + 52px + 22px - (100vw - var(--cw)) / 2)); }
  .main-nav.scrolled .nav-logo img { top: 8px; width: 52px; height: 52px; border-width: 2px; }
}
@media (min-width: 1200px) { :root { --cw: 1140px; } }
@media (min-width: 1400px) { :root { --cw: 1320px; } }
@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
  .main-nav .nav-logo, .main-nav .nav-logo img { transition: none; }
}

/* ── Footer: white, in the logo colours ── */
.main-footer { background: #fff !important; border-top: 4px solid #009383; }
.footer-logo img { width: auto; height: 120px; border-radius: 0; border: 0; object-fit: contain; }
.footer-logo-name { color: #00473F; }
.footer-logo-sub, .footer-heading { color: #009383; }
.footer-heading::after { background: rgba(0, 147, 131, 0.25); }
.footer-about, .footer-contact-text, .footer-links a, .footer-contact-link { color: #3B4D49; }
.footer-contact-text strong { color: #1E2D2A; }
.footer-links a::before { content: none; }   /* the link already has a chevron icon */
.footer-links a i { color: #009383; }
.footer-links a:hover, .footer-contact-link:hover, .footer-bottom-links a:hover { color: #009383; }
.footer-contact-icon { background: rgba(0, 147, 131, 0.08); border-color: rgba(0, 147, 131, 0.3); color: #009383; }
.social-btn { border-color: rgba(0, 147, 131, 0.35); color: #009383; }
.social-btn:hover { background: #009383; border-color: #009383; color: #fff; }
.footer-bottom { border-top-color: rgba(0, 0, 0, 0.08); }
.footer-bottom-text, .footer-bottom-links a { color: #5A6B67; }
.footer-badge { border-color: rgba(0, 147, 131, 0.3); color: #3B4D49; }
footer :focus-visible { outline-color: #009383 !important; box-shadow: 0 0 0 4px rgba(0, 147, 131, 0.2) !important; }
/* Medium screens: the top bar shares its row with the big logo — keep the emergency line,
   drop the address (and the hours below 1100px); both are in the footer and contact page. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .top-bar .top-bar-item:nth-child(3) { display: none; }
}
@media (min-width: 992px) and (max-width: 1099.98px) {
  .top-bar .top-bar-item:nth-child(2) { display: none; }
}

/* ── See-through header over the opening section — every page (desktop ≥992px) ──
   Each page's opening section (home video hero, inner-page banners, council, library,
   Bi-Clean and assistant heroes) slides up behind the top bar + menu (130px) and the header
   turns translucent, without divider lines, so it melts into whatever is underneath.
   A soft text shadow keeps it readable; once the menu sticks over the page (.scrolled)
   it is solid again. Phones keep the solid header (its height varies there). */
@media (min-width: 992px) {
  :root { --hdr-h: 130px; }
  .top-bar { position: relative; z-index: 999; }          /* above the hero, below the sticky menu (1000) */
  .main-nav + .page-hero { margin-top: calc(-1 * var(--hdr-h)); padding-top: calc(80px + var(--hdr-h)); }
  .main-nav + .council-hero { margin-top: calc(-1 * var(--hdr-h)); padding-top: calc(130px + var(--hdr-h)); }
  .main-nav + main > .civic-hero:first-child {
    margin-top: calc(-1 * var(--hdr-h));
    padding-top: calc(clamp(88px, 11vh, 132px) + var(--hdr-h));
    min-height: calc(max(720px, 100svh - 92px) + var(--hdr-h));
  }
  .main-nav + main.lb > .lb-hero:first-child { margin-top: calc(-1 * var(--hdr-h)); padding-top: calc(clamp(3.5rem, 8vw, 6rem) + var(--hdr-h)); }
  .main-nav + main.bc > .bc-hero:first-child { margin-top: calc(-1 * var(--hdr-h)); padding-top: calc(7rem + var(--hdr-h)); min-height: calc(min(82vh, 760px) + var(--hdr-h)); }
  .main-nav + main.ai-page { margin-top: calc(-1 * var(--hdr-h)); padding-top: calc(18px + var(--hdr-h)); }
  body:has(.main-nav + .page-hero, .main-nav + .council-hero, .main-nav + main > .civic-hero:first-child, .main-nav + main.lb > .lb-hero:first-child, .main-nav + main.bc > .bc-hero:first-child, .main-nav + main.ai-page) .top-bar,
  body:has(.main-nav + .page-hero, .main-nav + .council-hero, .main-nav + main > .civic-hero:first-child, .main-nav + main.lb > .lb-hero:first-child, .main-nav + main.bc > .bc-hero:first-child, .main-nav + main.ai-page) .main-nav:not(.scrolled) {
    background: linear-gradient(90deg, rgba(9, 86, 76, 0.42) 0%, rgba(8, 92, 80, 0.38) 50%, rgba(7, 106, 94, 0.34) 100%) !important;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: none; border-bottom-color: transparent !important;
  }
  body:has(.main-nav + .page-hero, .main-nav + .council-hero, .main-nav + main > .civic-hero:first-child, .main-nav + main.lb > .lb-hero:first-child, .main-nav + main.bc > .bc-hero:first-child, .main-nav + main.ai-page) .top-bar,
  body:has(.main-nav + .page-hero, .main-nav + .council-hero, .main-nav + main > .civic-hero:first-child, .main-nav + main.lb > .lb-hero:first-child, .main-nav + main.bc > .bc-hero:first-child, .main-nav + main.ai-page) .main-nav:not(.scrolled) .nav-link,
  body:has(.main-nav + .page-hero, .main-nav + .council-hero, .main-nav + main > .civic-hero:first-child, .main-nav + main.lb > .lb-hero:first-child, .main-nav + main.bc > .bc-hero:first-child, .main-nav + main.ai-page) .main-nav:not(.scrolled) .nav-logo-text {
    text-shadow: 0 1px 3px rgba(0, 20, 18, 0.55);
  }
  .main-nav { transition: background .35s ease; }
}

/* ── Footer logo: at the window edge like the header logo (desktop), animated on first view ── */
@media (min-width: 992px) {
  .main-footer { position: relative; }
  .main-footer > .container {
    padding-inline-start: max(12px, calc(var(--logo-x) + 120px + 26px - (100vw - var(--cw)) / 2));
  }
  .main-footer .footer-logo img {
    position: absolute; inset-inline-start: var(--logo-x); top: 64px;
    width: 120px; height: 120px;
  }
}
.main-footer .footer-logo img { transition: transform .35s ease, filter .35s ease; }
.main-footer .footer-logo img:hover { transform: translateY(-4px); filter: drop-shadow(0 10px 18px rgba(0, 147, 131, 0.35)); }
.main-footer .footer-logo img.fl-armed { opacity: 0; transform: translateY(18px) scale(.9); }
.main-footer .footer-logo img.fl-armed.fl-in {
  opacity: 1; transform: none;
  animation: flRise .9s cubic-bezier(.22, 1, .36, 1) both, flGlow 2.4s ease-in-out .9s 2;
}
@keyframes flRise { from { opacity: 0; transform: translateY(18px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes flGlow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(0, 147, 131, 0)); }
  50%      { filter: drop-shadow(0 0 16px rgba(0, 147, 131, 0.45)); }
}
@media (prefers-reduced-motion: reduce) {
  .main-footer .footer-logo img, .main-footer .footer-logo img.fl-armed { opacity: 1; transform: none; animation: none; transition: none; }
}

/* Banner of the online-service forms (inc/service_banner.php) — same look as the inner-page banners */
.svc-banner.page-hero { background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 60%, #007A6B 100%);
  position: relative; overflow: hidden; padding: 64px 0 44px; color: #fff; }
.svc-banner.page-hero::before { content: ''; position: absolute; inset: 0; background: url('../images/hero/bikfaya_balencoire.png') center/cover; opacity: .07; pointer-events: none; }
.svc-banner .page-hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(94,199,184,.15); border: 1px solid rgba(94,199,184,.35);
  color: var(--gold); border-radius: 30px; padding: 6px 18px; font-size: .8125rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 14px; }
.svc-banner .page-hero-title { font-family: var(--font-en-head); font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 700; color: var(--gold); margin-bottom: 6px; line-height: 1.25; }
body.lang-ar .svc-banner .page-hero-title { font-family: var(--font-ar); }
.svc-banner .breadcrumb { background: transparent; padding: 0; margin: 0; }
.svc-banner .breadcrumb-item, .svc-banner .breadcrumb-item a { color: rgba(255,255,255,.8); text-decoration: none; font-size: .875rem; }
.svc-banner .breadcrumb-item.active { color: var(--gold); }
.svc-banner .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.45); }
@media (min-width: 992px) { .main-nav + .svc-banner.page-hero { padding-top: calc(64px + var(--hdr-h)); } }