/* Anchor Family Healthcare — styles.css (v2: match legacy Wix look) */
:root{
  --blue:#38A6F5;        /* tagline + link blue */
  --navy:#173A5E;
  --ink:#2B2B2B;
  --mint:#BFF0DC;
  --sky:#7FD1F7;
  --violet:#4B57D8;      /* Schedule Appointment pill */
  --green:#3FA57D;       /* Access Your Portal pill */
  --teal:#2BB6A3;        /* Pay Your Bill pill */
  --midblue:#2F6FD6;     /* Request Info / Contact pill */
  --coral:#F55A6A;
  --line:#E4E4E4;
  --radius:22px;
  --maxw:1100px;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.6;font-size:16.5px}
h1,h2,h3{color:var(--ink);line-height:1.25;margin:0 0 .5em;font-weight:700}
h1{font-size:clamp(1.7rem,4vw,2.3rem)}
h2{font-size:clamp(1.35rem,3vw,1.8rem)}
h3{font-size:1.12rem}
p{margin:.4em 0 1em}
a{color:var(--midblue)}
img{max-width:100%;height:auto}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* Banner header — legacy photo strip with italic blue tagline */
.banner{position:relative;background:linear-gradient(90deg,#5E6E7E,#8B9AA8);min-height:clamp(240px,26vw,380px);display:flex;align-items:center;justify-content:center;overflow:hidden}
.banner img.bg,.banner video.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%}
.banner .overlay{position:relative;z-index:2;text-align:center;padding:26px 16px 40px}
.banner .overlay img.bannerlogo{max-width:min(620px,78vw);height:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.banner .tagline{font-style:italic;font-weight:700;font-size:clamp(1.15rem,3vw,1.9rem);color:var(--blue);text-shadow:0 1px 0 rgba(255,255,255,.9),0 0 12px rgba(255,255,255,.7);margin-top:10px}

/* Logo row */
/* nav overlaps the banner's bottom edge, like the legacy site */
nav.main{margin-top:-24px;position:relative;z-index:3}

/* Pill nav (legacy multicolor buttons) */
nav.main ul{list-style:none;display:flex;gap:10px;margin:0;padding:8px 0 16px;flex-wrap:wrap;justify-content:center}
nav.main a,.pill{display:inline-block;padding:9px 18px;border-radius:var(--radius);text-decoration:none;font-weight:600;font-size:.93rem;color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18)}
nav.main a:hover,.pill:hover{filter:brightness(1.08)}
nav.main a[data-key="index"]{background:var(--navy)}
nav.main a[data-key="about"]{background:var(--mint);color:#173A2E}
nav.main a[data-key="services"]{background:var(--sky);color:#0E3A52}
nav.main a[data-key="concierge"]{background:#1F1F1F}
nav.main a[data-key="location"]{background:var(--coral)}
nav.main a[data-key="contact"]{background:var(--midblue)}
nav.main a[aria-current="page"]{outline:3px solid rgba(0,0,0,.25);outline-offset:1px}
.pill.pay{background:var(--teal)}
.pill.portal{background:var(--green)}
.pill.sched{background:var(--violet)}
.actionrow{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;padding-bottom:14px}

header.site{border-bottom:1px solid var(--line);background:#fff}

/* Announcement zone — quiet card on white */
#announcement{margin:22px auto 0}
.announce{border:2px solid var(--blue);border-radius:12px;padding:14px 18px;background:#F4FAFF}
.announce h3{margin:0 0 4px;color:var(--navy)}
.announce p{margin:0}

/* Sections + service cards with photos */
section.block{padding:38px 0}
section.block h2{text-align:center}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;display:flex;flex-direction:column}
.card img.photo{width:100%;height:180px;object-fit:cover;display:block;background:#DCE7EE}
.card .body{padding:16px 18px;display:flex;flex-direction:column;flex:1}
.card h3{color:var(--navy)}
.card ul{padding-left:18px;margin:.3em 0 1em}
.card .more{margin-top:auto;font-weight:700;text-decoration:none;color:var(--midblue)}

/* Tables */
table.tiers{width:100%;border-collapse:collapse;border:1px solid var(--line)}
table.tiers th,table.tiers td{padding:10px 12px;border:1px solid var(--line);text-align:left;vertical-align:top}
table.tiers thead th{background:var(--navy);color:#fff}
table.hours{border-collapse:collapse}
table.hours td{padding:6px 18px 6px 0}
table.hours td:first-child{font-weight:700;color:var(--navy)}

/* Legacy-style footer: white, columned, like old bottom strip */
footer.site{border-top:1px solid var(--line);margin-top:48px;background:#fff;font-size:.95rem}
footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px;padding:34px 0 20px}
footer h3{color:var(--navy);font-size:1.02rem}
footer a{color:var(--midblue);text-decoration:none}
footer a:hover{text-decoration:underline}
footer .legal{border-top:1px solid var(--line);padding:14px 0;font-size:.82rem;color:#6B7680;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
a:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
@media (max-width:640px){.banner{min-height:220px}.banner .overlay img.bannerlogo{max-width:88vw}}

/* Banner slideshow */
.banner img.bg.slide{opacity:0;transition:opacity 1.2s ease}
.banner img.bg.slide.show{opacity:1}
@media (prefers-reduced-motion:reduce){.banner img.bg.slide{transition:none}}

/* Legacy Wix-style slow zoom on the banner photo */
.banner img.bg{animation:bannerzoom 18s ease-in-out infinite alternate;will-change:transform}
.banner video.bg{z-index:1}
.banner:has(video.bg) img.bg{animation:none}
@keyframes bannerzoom{from{transform:scale(1)}to{transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){.banner img.bg{animation:none}}

/* Announcement media */
.announce.hasmedia{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.announce .annmedia{display:block;border-radius:8px;max-width:100%;height:auto}
.announce .annmedialink{display:block;flex:0 0 auto;max-width:100%}
.announce .anntext{flex:1;min-width:240px}
.announce .anntext p:last-child{margin-bottom:0}

/* side-by-side sizing */
.announce.layout-side.size-small  .annmedia,
.announce.layout-side.size-small  .annmedialink{flex:0 0 auto;max-width:200px}
.announce.layout-side.size-medium .annmedia,
.announce.layout-side.size-medium .annmedialink{flex:0 0 auto;max-width:320px}
.announce.layout-side.size-large  .annmedia,
.announce.layout-side.size-large  .annmedialink{flex:0 0 auto;max-width:460px}

/* full width: media above text, centred */
.announce.layout-full{flex-direction:column;align-items:center;text-align:center}
.announce.layout-full .anntext{text-align:left;width:100%}
.announce.layout-full.size-small  .annmedia{max-width:min(420px,100%)}
.announce.layout-full.size-medium .annmedia{max-width:min(620px,100%)}
.announce.layout-full.size-large  .annmedia{max-width:100%}

/* media only */
.announce.layout-media-only{justify-content:center;padding:12px}
.announce.layout-media-only.size-small  .annmedia{max-width:min(420px,100%)}
.announce.layout-media-only.size-medium .annmedia{max-width:min(620px,100%)}
.announce.layout-media-only.size-large  .annmedia{max-width:100%}

@media (max-width:640px){
  .announce.hasmedia{flex-direction:column;align-items:center}
  .announce.layout-side .annmedia,
  .announce.layout-side .annmedialink{max-width:100% !important}
  .announce .anntext{width:100%}
}

/* Free-layout announcement (drag & drop editor output) */
.announce.announce-free{position:relative;display:block;width:100%;height:0;overflow:hidden;container-type:inline-size;padding:0;border-radius:10px;border-width:2px;border-style:solid}
.announce-free .freeel{position:absolute}
.announce-free .freemedia img,.announce-free .freemedia video{width:100%;height:auto;display:block;border-radius:6px}
.announce-free .freeh{line-height:1.15}
.announce-free .freeb{line-height:1.35;margin-top:.4em}
.announce-free .pill{font-size:2.4cqw;padding:1.2cqw 2.4cqw}