/* GLOBAL HEADER + FOOTER — OWNER APPROVED AND LOCKED (Task 19 design, locked in Task 20, 2026-09-27).
   Loaded on EVERY template. Do not create per-page header/footer colour treatments and do not change
   these values without explicit owner approval (see redesign/ACCEPTANCE-CHECKS.md AC-L*).
   Tokens: tokens.css (--char-0/1/2 charcoal scale, --gold, --petrol, --petrol-d, --on-navy*). */

/* ---------- header: accents ---------- */
.hdr{background:var(--navy)}
.hdr__util{background:var(--navy-deep);color:var(--on-navy)}
.hdr__util b{color:var(--gold)}
.nav a::after{background:var(--gold)}
.hdr__call{background:var(--petrol)}.hdr__call:hover{background:var(--petrol-d)}

/* ---------- header: two-part continuous charcoal/graphite fade ----------
   Task 17 behaviour of the OLD/LIVE header; Task 19 colour character (neutral charcoal/graphite sampled from the
   owner's LIVE header screenshots). Top bar: lighter outer top edge → darkest junction. Main: SAME junction →
   lighter bottom. The main-section gradient is painted on .hdr (full-bleed box behind .hdr__main) starting exactly
   at --util-h (the junction); the top bar covers 0…--util-h. */
.hdr{--hdr-junction:var(--char-0)}
@media (min-width:768px){
  .hdr{background-color:var(--char-2);
    background-image:linear-gradient(to bottom,var(--hdr-junction) var(--util-h),var(--char-2) 100%)}
  .hdr__util{background-color:var(--hdr-junction);
    background-image:linear-gradient(to bottom,var(--char-1) 0%,var(--hdr-junction) 100%)}
}
/* mobile: no top bar exists (display:none), so only the main part: darkest at its top edge → lighter bottom.
   Fixed 64px stop (= mobile .hdr__main min-height) so an open menu sheet never stretches the fade. */
@media (max-width:767px){
  .hdr{background-color:var(--char-2);
    background-image:linear-gradient(to bottom,var(--hdr-junction) 0,var(--char-2) 64px);background-repeat:no-repeat;background-size:100% 64px}
}

/* ---------- footer: reverse charcoal/graphite fade ----------
   Task 18 behaviour, Task 19 colours: lighter where it meets the page (--char-2) → darkest bottom edge (--char-0).
   One gradient on the whole footer; the legal bar is transparent so main area + legal bar are ONE continuous
   composition (no internal seam by construction). Same on desktop and mobile. */
.ftr{background:var(--navy);color:var(--on-navy)}
.ftr__legal{background:var(--navy-deep);color:var(--on-navy-2)}
.ftr{background-color:var(--char-0);
  background-image:linear-gradient(to bottom,var(--char-2) 0%,var(--char-1) 50%,var(--char-0) 100%)}
.ftr__legal{background:transparent}

/* ---------- footer: phones gold on dark, exactly like the header top bar (Task 16) ---------- */
.ftr a[href^="tel:"]{color:var(--gold);text-decoration-color:rgba(232,201,90,.45)}
.ftr a[href^="tel:"]:hover{color:var(--white);text-decoration-color:currentColor}

/* ---------- the footer is the END of every page (owner, global) ----------
   Mobile keeps a fixed bottom bar (Κλήση · Ιατρεία · Βοηθός, 68px). Its reserve used to be body padding, which showed
   as a white band after the footer. The reserve now lives INSIDE the footer's legal strip (same dark gradient), so
   nothing follows the footer and its last line stays above the bar. Footer design unchanged. */
@media (max-width:767px){
  body{padding-bottom:0}
  .ftr__legal{padding-bottom:calc(14px + 68px)}
}

/* ---------- global site search (owner) ----------
   Magnifier in the main header row right after the navigation (where the LIVE site has it), next to the menu button
   on mobile. It opens a compact search bar inside the sticky header (native WordPress search form). */
.hdr__search{display:inline-grid;place-items:center;width:44px;height:44px;margin-left:-16px;border-radius:50%;border:0;background:none;color:#fff;cursor:pointer;flex:none;transition:background-color var(--m-fast),color var(--m-fast)}
.hdr__search:hover{background:rgba(255,255,255,.08);color:var(--gold)}
.hdr__search[aria-expanded="true"]{color:var(--gold)}
.hdr-search{background:#fff;border-top:1px solid var(--line);box-shadow:0 12px 28px rgba(11,11,11,.18)}
.hdr-search__in{display:flex;align-items:center;gap:12px;padding:14px 0}
.hdr-search__form{flex:1;display:flex;align-items:center;gap:10px;min-width:0;border:1px solid var(--line);border-radius:999px;padding:4px 4px 4px 16px;background:#fff}
.hdr-search__form:focus-within{border-color:var(--petrol);box-shadow:0 0 0 3px rgba(5,116,133,.15)}
.hdr-search__icon{display:grid;color:var(--muted);flex:none}
.hdr-search__q{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:17px;color:var(--ink);padding:8px 0}
.hdr-search__go{min-height:44px;padding:10px 20px;flex:none}
.hdr-search__x{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;flex:none}
.hdr-search__x:hover{border-color:var(--petrol);color:var(--petrol)}
.hdr-search :focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.hdr-search__q:focus-visible{outline:none}   /* the field's focus is shown by the whole pill (.hdr-search__form:focus-within) */
.hdr-search__form:focus-within{box-shadow:0 0 0 3px rgba(5,116,133,.28)}
.logo__dark{display:none}
@media (max-width:767px){
  .hdr__search{margin-left:auto}
  .hdr__search ~ .hdr__menu{margin-left:6px}
  .hdr-search__go{padding:10px 14px}
  .hdr-search__q{font-size:16px}
}

/* ---------- sticky / scrolled header (owner reference: the LIVE sticky bar) ----------
   Once the page scrolls (.is-scrolled, set by the existing sentinel observer) the visible main bar takes the LIVE
   site's neutral light-graphite gradient, sampled from the owner's reference: #F9F9F9 (top) → #676767 (bottom), with
   dark labels and the dark logo variant. The top-of-page header is unchanged. Cross-fade only (no movement). */
.hdr{--hdr-main-h:78px}
@media (max-width:767px){.hdr{--hdr-main-h:64px}}
.hdr::before{content:"";position:absolute;left:0;right:0;top:var(--util-h);height:var(--hdr-main-h);background:linear-gradient(to bottom,#F9F9F9 0%,#676767 100%);opacity:0;transition:opacity var(--m-normal) var(--ease-std);pointer-events:none;z-index:0}
.hdr > *{position:relative;z-index:1}
.hdr.is-scrolled::before{opacity:1}
.hdr.is-scrolled .nav a{color:#111}
.hdr.is-scrolled .nav a:hover{background:rgba(0,0,0,.06)}
.hdr.is-scrolled .hdr__search,.hdr.is-scrolled .hdr__menu{color:#111}
.hdr.is-scrolled .hdr__menu{border-color:rgba(0,0,0,.28)}
.hdr.is-scrolled .hdr__search:hover,.hdr.is-scrolled .hdr__menu:hover{background:rgba(0,0,0,.06);color:#000}
.hdr.is-scrolled .hdr__main :focus-visible{outline-color:#111}
.hdr.is-scrolled .logo__light{display:none}
.hdr.is-scrolled .logo__dark{display:block}
@media (prefers-reduced-motion:reduce){.hdr::before{transition:none}}