﻿/* Header enrichment: scoped override loaded after styles.css/pages.css. */
.site-header{
  position:relative;
  z-index:40;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid rgba(186,229,240,.7);
  box-shadow:0 10px 28px rgba(31,92,130,.07);
}
.header-topbar{
  background:linear-gradient(90deg,#effbff 0%,#ffffff 52%,#fff4f7 100%);
  border-bottom:1px solid rgba(199,238,246,.78);
}
.header-topbar-inner{
  width:calc(100% - clamp(28px,5vw,72px));
  max-width:1360px;
  min-height:34px;
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  color:#236298;
  font-size:12px;
  font-weight:700;
  line-height:1.5;
  letter-spacing:.02em;
}
.header-area,.header-appointment{margin:0}
.header-appointment{color:#0a8da8;text-align:right}
.header-main{
  width:calc(100% - clamp(28px,5vw,72px));
  max-width:1360px;
  min-height:82px;
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(14px,2.2vw,30px);
  padding:10px 0 8px;
}
.site-header .header-main>.brand{min-width:0;margin:0 auto 0 0;gap:13px}
.site-header .header-main .brand-mark{width:62px;height:62px;object-fit:contain;mix-blend-mode:multiply}
.site-header .header-main .brand span{min-width:0}
.site-header .header-main .brand strong{font-size:clamp(21px,1.7vw,28px);letter-spacing:-.015em;color:#0753ac;white-space:nowrap}
.site-header .header-main .brand small{font-size:clamp(11px,.9vw,14px);color:#00aaa9;letter-spacing:.065em;white-space:nowrap}
.header-contact{
  display:block;
  border-left:1px solid var(--line);
  padding-left:clamp(14px,1.8vw,24px);
  text-align:right;
  flex:none;
}
.header-contact .phone-number{font-size:clamp(27px,2.25vw,34px)}
.header-contact p{font-size:11px;margin-top:3px;color:#396b9b;font-weight:700;line-height:1.45}
.header-cta,.nav-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  border-radius:999px;
  padding:10px 22px;
  background:linear-gradient(135deg,#ff6682,#ff4f72);
  color:#fff;
  font-size:14px;
  font-weight:700;
  line-height:1.35;
  box-shadow:0 8px 22px rgba(255,97,128,.24);
  white-space:nowrap;
  transition:transform .2s,box-shadow .2s,background .2s;
}
.header-cta:hover,.nav-cta:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(255,97,128,.28);background:linear-gradient(135deg,#ff7891,#f5476a)}
.menu-toggle{display:none}
.site-nav{
  width:calc(100% - clamp(28px,5vw,72px));
  max-width:1360px;
  margin:0 auto;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(9px,1.35vw,20px);
  padding:0 0 6px;
  font-size:clamp(12px,.9vw,14px);
  font-weight:700;
  white-space:nowrap;
}
.site-nav a{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:8px 2px;
  color:#15588e;
  line-height:1.4;
}
.site-nav a:hover{color:#00aaa9}
.site-nav a.active:after,.site-nav a[aria-current="page"]:after,.site-nav a[aria-current="location"]:after{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  bottom:3px;
  border-bottom:3px solid #63ccef;
  border-radius:999px;
}
.site-nav .nav-cta{display:none}

@media(max-width:1180px){
  .header-topbar-inner{font-size:11px;gap:12px}
  .header-contact{display:none}
  .header-cta{padding-inline:18px}
  .site-nav{gap:clamp(7px,1vw,13px);font-size:12px}
}
@media(max-width:980px){
  .site-header{box-shadow:0 8px 22px rgba(31,92,130,.09)}
  .header-topbar{display:none}
  .header-main{
    width:calc(100% - 28px);
    min-height:82px;
    padding:10px 0;
    gap:10px;
  }
  .site-header .header-main .brand-mark{width:52px;height:52px}
  .site-header .header-main .brand strong{font-size:clamp(17px,4.6vw,23px)}
  .site-header .header-main .brand small{font-size:clamp(9px,2.25vw,12px);letter-spacing:.02em}
  .header-cta{display:none}
  .menu-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    min-width:66px;
    padding:8px 10px;
    border:1px solid #b6e2f0;
    border-radius:999px;
    background:#fff;
    color:#0753ac;
    font-size:11px;
    font-weight:700;
    white-space:nowrap;
    flex:none;
    box-shadow:0 3px 12px rgba(38,111,148,.08);
  }
  .menu-toggle[aria-expanded="true"]{background:#effbff;color:#008ba8}
  .site-nav{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    width:100%;
    max-width:none;
    max-height:calc(100vh - 164px);
    max-height:calc(100dvh - 164px);
    overflow-y:auto;
    overscroll-behavior:contain;
    margin:0;
    padding:14px;
    background:rgba(255,255,255,.98);
    box-shadow:0 16px 30px rgba(34,83,126,.15);
    border-top:1px solid #e8f6fa;
    white-space:normal;
    z-index:30;
  }
  .site-nav.is-open{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    align-items:stretch;
  }
  .site-nav a,.site-nav .nav-cta{
    min-height:46px;
    padding:10px 12px;
    border:1px solid #e2f2f6;
    border-radius:17px;
    background:#f9fdff;
    color:#0753ac;
    font-size:13px;
    text-align:left;
    justify-content:flex-start;
  }
  .site-nav a.active:after,.site-nav a[aria-current="page"]:after,.site-nav a[aria-current="location"]:after{display:none}
  .site-nav .nav-cta{
    display:inline-flex;
    grid-column:1 / -1;
    justify-content:center;
    background:linear-gradient(135deg,#ff6682,#ff4f72);
    color:#fff;
    border-color:transparent;
    box-shadow:0 8px 18px rgba(255,97,128,.2);
  }
}
@media(max-width:420px){
  .header-main{width:calc(100% - 20px);min-height:76px}
  .site-header .header-main>.brand{gap:7px}
  .site-header .header-main .brand-mark{width:44px;height:44px}
  .site-header .header-main .brand strong{font-size:clamp(14px,4.5vw,17px);letter-spacing:-.035em}
  .site-header .header-main .brand small{font-size:8px}
  .menu-toggle{min-width:58px;min-height:44px;font-size:10px;padding-inline:8px}
  .site-nav{padding:11px}
  .site-nav.is-open{grid-template-columns:1fr;gap:7px}
  .site-nav a,.site-nav .nav-cta{min-height:44px;font-size:12px;border-radius:15px;padding:9px 11px}
}
@media(max-width:340px){
  .site-header .header-main .brand small{display:none}
  .site-header .header-main .brand strong{font-size:14px}
  .site-nav a,.site-nav .nav-cta{font-size:11px}
}
@media(prefers-reduced-motion:reduce){.header-cta,.nav-cta{transition:none}}
