/* Shared styles for blog posts — St. Clair Drug Mart */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --teal-bright:#21a1a8; --teal-mid:#5cb9bc; --teal-dark:#00737c; --teal-deeper:#00737c;
  --teal-ice:#d7fbfc; --white:#fff; --text:#0d2d2e; --text-muted:#3a6062; --border:#b8e8ea;
  --radius:12px; --shadow:0 2px 14px rgba(0,115,124,.10);
  --font-nav: 'Helvetica Neue', Helvetica, 'Arial', 'Inter', sans-serif;
}
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; }
body { font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif; background:linear-gradient(180deg, #b6ecef 0%, #cdf5f6 35%, #e4fbfc 100%) fixed; color:var(--text); line-height:1.75; overflow-x:hidden; }
a { color:var(--teal-dark); }
img { display:block; max-width:100%; }

/* Fixed sky background — same drifting clouds as the main site */
.sky-bg { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background:linear-gradient(180deg, #b6ecef 0%, #cdf5f6 45%, #e4fbfc 100%); animation:cloud-layer-in 3s ease both; }
.sky-bg-cloud { position:absolute; left:0; animation:cloud-drift linear infinite; will-change:transform; display:block; pointer-events:none; max-width:none; }
.sky-bg-cloud--flip { animation-name:cloud-drift-r; }
.sky-bg-cloud:nth-child(1) { width:1350px; height:330px; top: 1vh; animation-duration:132s; animation-delay: -25s; opacity:.80; }
.sky-bg-cloud:nth-child(2) { width:1050px; height:260px; top: 5vh; animation-duration:102s; animation-delay: -60s; opacity:.70; }
.sky-bg-cloud:nth-child(3) { width:1250px; height:305px; top: 2vh; animation-duration:122s; animation-delay: -85s; opacity:.75; }
.sky-bg-cloud:nth-child(4) { width: 980px; height:245px; top: 9vh; animation-duration: 96s; animation-delay: -12s; opacity:.65; }
.sky-bg-cloud:nth-child(5) { width:1200px; height:295px; top:22vh; animation-duration:116s; animation-delay: -40s; opacity:.58; }
.sky-bg-cloud:nth-child(6) { width:1300px; height:318px; top:33vh; animation-duration:128s; animation-delay: -18s; opacity:.50; }
.sky-bg-cloud:nth-child(7) { width:1100px; height:272px; top:46vh; animation-duration:110s; animation-delay: -72s; opacity:.44; }
.sky-bg-cloud:nth-child(8) { width: 960px; height:238px; top:60vh; animation-duration: 94s; animation-delay: -95s; opacity:.38; }
@keyframes cloud-drift   { from { transform: translateX(-60vw);           } to { transform: translateX(120vw);           } }
@keyframes cloud-drift-r { from { transform: translateX(-60vw) scaleX(-1);} to { transform: translateX(120vw) scaleX(-1);} }
@keyframes cloud-layer-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sky-bg-cloud { animation:none; } .sky-bg { animation:none; opacity:1; } }

/* Nav (identical structure/engine to index.html / braces-supports.html) */
.nav { position:fixed; top:0; left:0; right:0; width:100%; z-index:100; background:rgba(182,236,239,.97); border-bottom:1px solid rgba(33,161,168,.22); box-shadow:0 1px 14px rgba(0,80,90,.06); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.nav__clouds { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; opacity:1; mask-image:linear-gradient(to bottom, transparent 0%, transparent 8%, black 65%); -webkit-mask-image:linear-gradient(to bottom, transparent 0%, transparent 8%, black 65%); }
.nav__cloud { position:absolute; left:0; animation:cloud-drift linear infinite; will-change:transform; max-width:none; display:block; filter:drop-shadow(0 1px 3px rgba(0,60,65,.18)); }
.nav__cloud--flip { animation-name:cloud-drift-r; }
.nav__cloud:nth-child(1) { width: 950px; height: 235px; top: -100px; animation-duration:175s; animation-delay: -29s; opacity: .85; }
.nav__cloud:nth-child(2) { width: 750px; height: 185px; top: -46px; animation-duration:140s; animation-delay: -81s; opacity: .78; }
.nav__cloud:nth-child(3) { width: 880px; height: 218px; top: -88px; animation-duration:165s; animation-delay:-126s; opacity: .82; }
.nav__cloud:nth-child(4) { width: 680px; height: 168px; top: -36px; animation-duration:125s; animation-delay: -51s; opacity: .76; }
.nav__cloud:nth-child(5) { width: 820px; height: 203px; top: -57px; animation-duration:150s; animation-delay:-102s; opacity: .80; }
.nav__cloud:nth-child(6) { width: 900px; height: 223px; top: -70px; animation-duration:130s; animation-delay: 0s; opacity: .80; }
@media (max-width:768px) { .nav__cloud:nth-child(4), .nav__cloud:nth-child(5) { display:none; } }
.nav__inner { max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:flex-start; padding:0 max(1.5rem, env(safe-area-inset-right)) 0 max(1.5rem, env(safe-area-inset-left)); height:64px; position:relative; z-index:1; }
.nav__brand { display:flex; align-items:center; gap:.6rem; font-family:var(--font-nav); font-size:1.1rem; font-weight:700; color:var(--teal-deeper); letter-spacing:.02em; text-transform:uppercase; white-space:nowrap; text-decoration:none; }
.nav__brand__logo { height:34px; width:auto; display:block; }
.nav__links { display:flex; align-items:center; list-style:none; gap:.25rem; margin-left:auto; }
.nav__links > li { display:flex; align-items:center; }
.nav__links a { display:inline-flex; align-items:center; color:#2c5457; font-size:.875rem; font-weight:500; line-height:1; padding:.5rem .8rem; border-radius:7px; transition:background .15s, color .15s; text-decoration:none; }
.nav__links a:hover { background:#eef9fa; color:var(--teal-deeper); }
.nav__links a.active { background:#eef9fa; color:var(--teal-deeper); font-weight:700; }
.nav__links .nav__cta a { background:var(--teal-bright); color:var(--white); font-weight:600; box-shadow:0 3px 10px rgba(33,161,168,.25); }
.nav__links .nav__cta a:hover { background:var(--teal-deeper); color:var(--white); }
.nav__toggle { display:none; background:none; border:none; cursor:pointer; padding:.4rem; min-width:44px; min-height:44px; align-items:center; justify-content:center; }
.nav__toggle span { display:block; width:22px; height:2px; background:var(--teal-deeper); margin:4px 0; border-radius:2px; transition:transform .2s, opacity .2s; }
.nav__has-dropdown { position:relative; }
.nav__has-dropdown > a { gap:.3rem; }
.nav__has-dropdown > a::after { content:'▾'; font-size:.65rem; opacity:.65; transition:transform .2s; line-height:1; }
.nav__has-dropdown:hover > a::after { transform:rotate(180deg); }
.nav__has-dropdown::after { content:''; position:absolute; left:0; right:0; top:100%; height:10px; }
.nav__dropdown { display:none; position:absolute; top:calc(100% + 9px); left:0; background:#fff; border:1px solid #e9f4f5; border-radius:10px; box-shadow:0 12px 32px rgba(0,60,66,.12); padding:.4rem; min-width:210px; z-index:200; list-style:none; margin:0; }
.nav__dropdown li { list-style:none; }
.nav__has-dropdown:hover .nav__dropdown, .nav__has-dropdown.open .nav__dropdown { display:block; }
.nav__dropdown a { display:block; padding:.55rem .85rem; font-size:.85rem; font-weight:500; color:#2c5457; border-radius:7px; white-space:nowrap; text-decoration:none; }
.nav__dropdown a:hover { background:#eef9fa; color:var(--teal-deeper); }
.nav__dropdown a.active { background:#eef9fa; color:var(--teal-deeper); font-weight:700; }
@media (max-width:860px) and (min-width:769px){
  .nav__brand span { display:none; }
}
@media (max-width:768px){
  .nav__links { display:none; position:absolute; top:64px; left:0; right:0; background:#fff; border-bottom:1px solid #e9f4f5; box-shadow:0 8px 20px rgba(0,60,66,.08); flex-direction:column; align-items:stretch; padding:.5rem 1rem 1rem; gap:.1rem; margin-left:0; }
  .nav__links.open { display:flex; }
  .nav__links > li { display:block; }
  .nav__links a { display:flex; width:100%; min-height:44px; }
  .nav__toggle { display:block; margin-left:auto; }
  .nav__has-dropdown::after { display:none; }
  .nav__dropdown { position:static; border:none; box-shadow:none; border-radius:0; padding:0; background:#f3fafb; margin:.2rem 0 .2rem .75rem; min-width:0; }
  .nav__has-dropdown .nav__dropdown, .nav__has-dropdown:hover .nav__dropdown { display:none; }
  .nav__has-dropdown.open .nav__dropdown { display:block; }
  .nav__has-dropdown > a::after { margin-left:auto; }
  .nav__has-dropdown:hover > a::after { transform:none; }
  .nav__has-dropdown.open > a::after { transform:rotate(180deg); }
  .nav__brand span { font-size:.8rem; letter-spacing:.01em; }
  .nav__toggle.open span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
  .nav__toggle.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
  .nav__toggle.open span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
}

/* Reading-progress bar (injected by post.js) */
.reading-progress { position:fixed; top:0; left:0; height:3px; width:0; background:linear-gradient(90deg, var(--teal-bright), var(--teal-dark)); z-index:300; transition:width .12s ease-out; }

/* Post body — a white "sheet" floating over the sky so text is always legible */
.post {
  max-width:760px; margin:calc(64px + 2.25rem) auto 3rem;
  background:var(--white); border:1px solid rgba(255,255,255,.7);
  border-radius:18px; box-shadow:0 8px 38px rgba(0,80,90,.14);
  padding:2.5rem 2.75rem 2.25rem;
}
.post__breadcrumb { font-size:.8rem; color:var(--text-muted); margin-bottom:1rem; }
.post__breadcrumb a { color:var(--teal-dark); text-decoration:none; }
.post__breadcrumb a:hover { text-decoration:underline; }
.post h1 { font-size:clamp(1.7rem,4vw,2.4rem); font-weight:800; color:var(--teal-deeper); line-height:1.2; margin-bottom:.6rem; }
.post__meta { font-size:.82rem; color:var(--text-muted); margin-bottom:1.5rem; }
.post__hero-img { width:100%; height:300px; object-fit:cover; border-radius:14px; margin-bottom:1.75rem; box-shadow:var(--shadow); }

/* Author / E-E-A-T byline (injected by post.js, replaces .post__meta) */
.post__byline { display:flex; align-items:center; gap:.8rem; margin:0 0 1.6rem; padding-bottom:1.3rem; border-bottom:1px solid var(--border); }
.post__byline-logo { width:46px; height:46px; flex-shrink:0; border-radius:50%; border:1.5px solid var(--border); background:#fff; padding:5px; object-fit:contain; }
.post__byline-text { font-size:.82rem; color:var(--text-muted); line-height:1.45; }
.post__byline-text strong { display:block; color:var(--text); font-weight:700; font-size:.92rem; margin-bottom:.1rem; }

.post__lead { font-size:1.12rem; background:var(--teal-ice); border-left:4px solid var(--teal-bright); padding:1.05rem 1.3rem; border-radius:0 10px 10px 0; margin-bottom:1.75rem; color:var(--text); }

/* Table of contents (injected by post.js) */
.post__toc { background:#f3fafb; border:1px solid var(--border); border-radius:12px; padding:1.1rem 1.3rem 1.2rem; margin:0 0 1.9rem; }
.post__toc-title { font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; font-weight:700; color:var(--teal-dark); margin-bottom:.55rem; }
.post__toc ol { list-style:none; margin:0; padding:0; counter-reset:toc; }
.post__toc li { margin:0; }
.post__toc a { display:block; position:relative; padding:.32rem 0 .32rem 1.7rem; font-size:.88rem; color:var(--teal-dark); text-decoration:none; line-height:1.4; transition:color .15s; }
.post__toc a::before { counter-increment:toc; content:counter(toc); position:absolute; left:0; top:.32rem; width:1.15rem; height:1.15rem; font-size:.66rem; font-weight:700; color:var(--teal-dark); background:#fff; border:1px solid var(--border); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.post__toc a:hover { color:var(--teal-bright); }

.post h2 { font-size:1.3rem; font-weight:700; color:var(--teal-deeper); margin:2rem 0 .6rem; scroll-margin-top:84px; }
.post h3 { font-size:1.1rem; font-weight:700; color:var(--teal-deeper); margin:1.5rem 0 .5rem; scroll-margin-top:84px; }
.post p { margin-bottom:1rem; }
.post ul, .post ol { margin:0 0 1.1rem 1.25rem; }
.post li { margin-bottom:.45rem; }
.post strong { color:var(--text); }

/* CTA box — bold teal gradient so it pops off the white sheet */
.post__cta { background:linear-gradient(135deg, var(--teal-dark) 0%, var(--teal-bright) 100%); color:#fff; border:none; border-radius:16px; padding:1.9rem; text-align:center; margin:2.5rem 0 1.5rem; box-shadow:0 8px 24px rgba(0,115,124,.25); }
.post__cta h3 { margin-top:0; color:#fff; }
.post__cta p { color:rgba(255,255,255,.88); margin-bottom:1.25rem; }
.btn { display:inline-block; background:var(--teal-dark); color:#fff; font-weight:700; font-size:.9rem; padding:.7rem 1.3rem; border-radius:100px; text-decoration:none; margin:.25rem; transition:background .15s, transform .15s; }
.btn:hover { background:var(--teal-deeper); transform:translateY(-1px); }
.btn--outline { background:transparent; color:var(--teal-dark); border:1.5px solid var(--teal-dark); }
.btn--outline:hover { background:var(--teal-ice); }
.post__cta .btn { background:#fff; color:var(--teal-dark); }
.post__cta .btn:hover { background:var(--teal-ice); }
.post__cta .btn--outline { background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.7); }
.post__cta .btn--outline:hover { background:rgba(255,255,255,.15); }

/* Share row (injected by post.js) */
.post__share { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin:1.75rem 0 0; padding-top:1.4rem; border-top:1px solid var(--border); }
.post__share-label { font-size:.78rem; font-weight:700; color:var(--text-muted); margin-right:.2rem; }
.post__share a, .post__share button { width:38px; height:38px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--teal-ice); border:1px solid var(--border); color:var(--teal-dark); cursor:pointer; transition:background .15s, color .15s, border-color .15s, transform .15s; padding:0; }
.post__share a:hover, .post__share button:hover { background:var(--teal-bright); color:#fff; border-color:var(--teal-bright); transform:translateY(-2px); }
.post__share svg { width:17px; height:17px; }
.post__share-copy.copied { background:var(--teal-dark); color:#fff; border-color:var(--teal-dark); }

/* About / E-E-A-T author card (injected by post.js) */
.post__author { display:flex; gap:1rem; align-items:flex-start; background:#f3fafb; border:1px solid var(--border); border-radius:14px; padding:1.5rem; margin:1.75rem 0 1.5rem; }
.post__author-logo { width:64px; height:64px; flex-shrink:0; border-radius:12px; background:#fff; border:1px solid var(--border); padding:8px; object-fit:contain; }
.post__author-body h4 { font-size:1rem; color:var(--teal-deeper); margin-bottom:.35rem; }
.post__author-body p { font-size:.85rem; color:var(--text-muted); margin:0 0 .7rem; line-height:1.6; }
.post__author-links { display:flex; gap:1.1rem; flex-wrap:wrap; }
.post__author-links a { font-size:.82rem; font-weight:700; color:var(--teal-dark); text-decoration:none; }
.post__author-links a:hover { color:var(--teal-bright); }

.post__disclaimer { font-size:.78rem; color:var(--text-muted); font-style:italic; border-top:1px solid var(--border); padding-top:1rem; margin-top:1.5rem; }

/* Footer */
footer { background:var(--teal-deeper); color:rgba(255,255,255,.8); text-align:center; padding:2rem max(1.5rem,env(safe-area-inset-right)) max(2rem,env(safe-area-inset-bottom)) max(1.5rem,env(safe-area-inset-left)); font-size:.85rem; }
footer a { color:rgba(255,255,255,.7); }
footer a:hover { color:#fff; }
/* Footer trust badges (frosted-glass circles) */
.footer__trust { margin-top:1.5rem; display:flex; flex-direction:column; align-items:center; gap:1.1rem; }
.footer__badges { display:flex; align-items:flex-start; justify-content:center; gap:1.75rem; flex-wrap:wrap; }
.trust-badge { display:flex; flex-direction:column; align-items:center; gap:.6rem; position:relative; }
.trust-badge__disc { width:84px; height:84px; border-radius:50%; background:rgba(255,255,255,.60); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); border:1.5px solid rgba(255,255,255,.35); display:flex; align-items:center; justify-content:center; transition:background .15s, transform .15s; }
.trust-badge:hover .trust-badge__disc { background:rgba(255,255,255,.70); transform:translateY(-2px); }
.trust-badge__logo { width:auto; height:auto; max-width:60px; max-height:50px; object-fit:contain; display:block; }
.trust-badge--wordmark .trust-badge__logo { max-width:66px; max-height:54px; }
.trust-badge__caption { font-size:.64rem; color:rgba(255,255,255,.72); font-weight:600; text-align:center; line-height:1.35; letter-spacing:.02em; }
.footer__reg { font-size:.68rem; color:rgba(255,255,255,.5); text-align:center; max-width:600px; line-height:1.6; margin:.4rem auto 0; }
@media (max-width:560px){
  .footer__badges { gap:1.1rem; }
  .trust-badge__disc { width:76px; height:76px; }
  .trust-badge__logo { max-width:52px; max-height:44px; }
  .trust-badge--wordmark .trust-badge__logo { max-width:58px; max-height:48px; }
}
@media (max-width:640px){
  .post { margin:calc(64px + 1.25rem) 1rem 2.5rem; padding:1.6rem 1.3rem 1.75rem; border-radius:14px; }
  .nav__inner { padding:0 max(1rem,env(safe-area-inset-right)) 0 max(1rem,env(safe-area-inset-left)); }
  .post h1 { font-size:clamp(1.45rem,5.5vw,2rem); }
  .post__lead { font-size:1rem; padding:.85rem 1rem; }
  .post h2 { font-size:1.15rem; }
  .post__cta { padding:1.4rem 1.1rem; }
  .btn { padding:.65rem 1rem; font-size:.85rem; }
  .post__author { flex-direction:column; gap:.75rem; padding:1.25rem; }
  .post__hero-img { height:190px; border-radius:10px; margin-bottom:1.25rem; }
}