/* ==========================================================================
Dr. Shireen Samargandy — Rhinology & Skull Base Surgery
Design tokens: Navy #17263C · Burgundy #7A2638 · Ivory #F7F5F1
Charcoal #24272B · Warm Gray #A5A19B
========================================================================== */
/* Fonts are loaded via +
in each page's — not @import here — so the browser can start
fetching them immediately instead of waiting on this file to parse. */
:root{
--navy:#17263C;
--navy-90:#1e3049;
--burgundy:#7A2638;
--ivory:#F7F5F1;
--ivory-rgb:247,245,241;
--charcoal:#24272B;
--warm-gray:#A5A19B;
--gray-text:#6F6B66;
--white:#FFFFFF;
--hairline: rgba(23,38,60,0.09);
--serif: 'Newsreader', Georgia, 'Times New Roman', serif;
--sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--arabic: 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
--max: 1120px;
--chrome-max: 1200px;
--pad: clamp(20px, 5vw, 64px);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:hidden;}
html,body{margin:0;padding:0;}
body{
background:var(--ivory);
color:var(--charcoal);
font-family:var(--sans);
font-size:17.5px;
line-height:1.78;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
body.lang-ar{
font-family:var(--arabic);
direction:rtl;
line-height:1.9;
}
body.lang-ar h1, body.lang-ar h2, body.lang-ar h3, body.lang-ar .serif{
font-family:var(--arabic);
font-weight:700;
}
/* Comprehensive coverage: every remaining place the site uses the English
serif display font must also switch to the Arabic sans font on Arabic
pages. Font-weight is intentionally left alone here — each of these
already carries its own appropriate weight (medium for subheadings/card
titles, inherited/regular for the rest) and this rule should only ever
correct font-family, never bold something that isn't a heading. */
body.lang-ar .faq-accordion summary,
body.lang-ar .footer-brand,
body.lang-ar .product-card-name{
font-family:var(--arabic);
}
/* language visibility */
body.lang-ar span.en{display:none;}
body.lang-ar span.ar{display:inline;}
@media (prefers-reduced-motion: reduce){
*{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
html{scroll-behavior:auto;}
}
img{max-width:100%; height:auto; display:block;}
a{color:inherit;}
/* Skip link — hidden until keyboard focus, for screen-reader and keyboard users */
.skip-link{
position:absolute; top:-48px; inset-inline-start:12px; z-index:100;
background:var(--navy); color:#fff; padding:12px 20px;
font-family:var(--sans); font-size:0.9rem; font-weight:600;
text-decoration:none; border-radius:8px;
transition:top 0.15s ease;
}
.skip-link:focus{top:12px;}
/* Visible, on-brand keyboard focus */
a:focus-visible, button:focus-visible{
outline:2px solid var(--burgundy);
outline-offset:3px;
border-radius:1px;
}
footer.site-footer a:focus-visible, .footer-bottom button:focus-visible{
outline-color:#fff;
}
h1,h2,h3,h4{
font-family:var(--serif);
font-weight:500;
color:var(--navy);
margin:0 0 0.5em;
letter-spacing:0.01em;
}
h1{font-size:clamp(2.1rem, 3.2vw, 3rem); line-height:1.18; font-weight:500;}
h2{font-size:clamp(1.7rem, 2.9vw, 2.35rem); line-height:1.25;}
h3{font-size:clamp(1.15rem, 1.8vw, 1.45rem); line-height:1.3;}
[id]{scroll-margin-top:96px;}
p{margin:0 0 1em; max-width:62ch;}
.eyebrow{
font-family:var(--sans);
font-size:clamp(1.15rem, 0.5vw + 1rem, 1.6rem);
letter-spacing:0.08em;
text-transform:uppercase;
color:var(--burgundy);
font-weight:600;
margin-bottom:0.9em;
display:block;
}
body.lang-ar .eyebrow{font-family:var(--arabic); letter-spacing:0.02em;}
/* Care-level badge — clarifies medical / office-based / surgical at a glance */
.care-badge{
display:inline-flex; align-items:center; gap:6px;
font-family:var(--sans); font-size:0.76rem; font-weight:600;
letter-spacing:0.03em; text-transform:uppercase;
padding:5px 13px; border-radius:20px;
border:1px solid var(--navy); color:var(--navy);
margin-bottom:1.1em;
}
body.lang-ar .care-badge{font-family:var(--arabic); letter-spacing:0; text-transform:none; font-weight:700;}
.care-badge::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--burgundy);}
.container{max-width:var(--max); margin:0 auto; padding:0 var(--pad);}
section{padding:104px 0;}
@media (max-width:640px){ section{padding:64px 0;} }
@media (max-width:640px){
.hero-actions{ flex-direction:column; align-items:stretch; }
.hero-actions .btn{ width:100%; text-align:center; }
}
/* ---------- Buttons ---------- */
.btn{
display:inline-flex;
align-items:center;
gap:8px;
padding:13px 26px;
font-family:var(--sans);
font-size:0.92rem;
font-weight:600;
letter-spacing:0.01em;
text-decoration:none;
border-radius:2px;
border:1px solid transparent;
cursor:pointer;
transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
body.lang-ar .btn{font-family:var(--arabic);}
.btn-primary{background:var(--burgundy); color:var(--white);}
.btn-primary:hover{background:#611d2c;}
.btn-secondary{background:transparent; color:var(--navy); border-color:var(--navy);}
.btn-secondary:hover{background:var(--navy); color:var(--white);}
.btn-ghost{background:transparent;color:var(--navy);border-color:transparent;text-decoration:underline;text-underline-offset:4px;padding:0;}
/* ---------- Header ---------- */
.site-header{
position:sticky; top:0; z-index:250;
background:rgba(var(--ivory-rgb), 0.92);
backdrop-filter:blur(8px);
border-bottom:1px solid var(--hairline);
}
.header-inner{
max-width:var(--chrome-max); margin:0 auto; padding:0 var(--pad);
display:flex; align-items:center; justify-content:space-between;
height:76px;
}
.brand{
display:flex;
align-items:center;
gap:clamp(6px, 1.2vw + 3px, 10px);
font-family:var(--serif);
font-weight:500;
font-size:clamp(0.68rem, 2.1vw + 0.26rem, 1.42rem);
color:var(--navy);
text-decoration:none;
letter-spacing:0.02em;
line-height:1.15;
flex-shrink:0;
}
.brand-mark{
height:clamp(26px, 1.8vw + 16px, 40px);
width:auto;
flex-shrink:0;
display:block;
}
@media (max-width:1200px){
.brand-mark{
height:clamp(36px, 3vw + 22px, 56px);
}
}
@media (max-width:360px){
.brand-mark{ height:30px; }
}
.brand-text{
display:flex;
flex-direction:column;
justify-content:center;
max-width:190px;
}
@media (max-width:480px){
.brand-text{ max-width:108px; }
body:not(.lang-ar) .brand-text{ max-width:82px; }
}
@media (max-width:360px){
.brand-text{ max-width:74px; }
body:not(.lang-ar) .brand-text{ max-width:44px; }
.brand small{ font-size:0.34rem; }
}
.brand-name{
white-space:nowrap;
}
.brand small{
display:block;
font-family:var(--sans);
font-size:clamp(0.38rem, 0.9vw + 0.14rem, 0.66rem);
letter-spacing:clamp(0.02em, 0.4vw, 0.08em);
text-transform:uppercase;
color:var(--gray-text);
font-weight:600;
white-space:normal;
line-height:1.3;
margin-top:2px;
}
body.lang-ar .brand-name{font-family:var(--arabic); font-weight:700;}
body.lang-ar .brand small{font-family:var(--arabic); letter-spacing:normal;}
nav.primary-nav{display:flex; align-items:center; gap:26px; flex-shrink:0;}
.drawer-close{display:none;}
nav.primary-nav a{
font-size:0.92rem; font-weight:500; text-decoration:none; color:var(--charcoal);
position:relative; padding:4px 0;
transition:color 0.2s ease;
}
nav.primary-nav a:hover{color:var(--burgundy);}
nav.primary-nav a.active{color:var(--navy); font-weight:600;}
nav.primary-nav a.active::after{
content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--burgundy);
}
/* CTA button inside the nav needs to win over the plain-link color rule above */
nav.primary-nav a.btn-primary,
nav.primary-nav a.btn-primary:hover{color:var(--white);}
nav.primary-nav a.btn-primary.active::after{content:none;}
.lang-switch{
display:inline-flex; align-items:center; justify-content:center;
font-size:0.82rem; font-weight:600; color:var(--gray-text);
background:none; border:1px solid var(--hairline); border-radius:20px;
padding:6px 14px; cursor:pointer; letter-spacing:0.02em;
text-decoration:none;
transition:border-color 0.2s ease, color 0.2s ease;
}
.lang-switch:hover{border-color:var(--navy); color:var(--navy);}
/* Header instance only — plain text, no pill outline or background.
Scoped to the desktop header width so the mobile drawer's presentation
of this same shared element is untouched, and the footer's lang-switch
(a different element entirely) is unaffected either way. */
@media (min-width:1201px){
nav.primary-nav .lang-switch{
border:none; border-radius:0; background:none;
}
nav.primary-nav .lang-switch:hover{
border:none;
}
}
.nav-actions{display:flex; align-items:center; gap:10px; position:relative; z-index:170;}
.menu-toggle{display:none; background:none; border:none; cursor:pointer; padding:6px;}
.menu-toggle span{display:block; width:22px; height:2px; background:var(--navy); margin:5px 0;}
/* Locks background scrolling while the mobile drawer is open */
body.menu-open{overflow:hidden;}
.nav-backdrop{
position:fixed; inset:0; background:rgba(23,38,60,0.35); z-index:150;
opacity:0; visibility:hidden; transition:opacity 0.25s ease, visibility 0s linear 0.25s;
}
.nav-backdrop.open{ opacity:1; visibility:visible; transition:opacity 0.25s ease, visibility 0s linear 0s; }
@media (max-width: 1200px){
nav.primary-nav{
position:fixed; top:0; inset-inline-end:0; bottom:0; width:300px; max-width:82vw;
height:100vh; height:100dvh; background:var(--ivory); z-index:160;
flex-direction:column; align-items:flex-start; gap:0;
padding:88px var(--pad) 32px;
transform:translateX(100%);
transition:transform 0.28s ease;
overflow-y:auto;
box-shadow:-8px 0 32px rgba(23,38,60,0.12);
}
body.lang-ar nav.primary-nav{ transform:translateX(-100%); }
nav.primary-nav.open{
transform:translateX(0);
}
/* The Arabic closed-state rule above is (body.lang-ar nav.primary-nav):
2 elements + 2 classes. Plain ".open" above is only 1 element + 2
classes, so on Arabic pages specificity math let the closed-state rule
keep winning even after .open was applied — the drawer never actually
moved on screen. This matches it exactly so the open state always wins
regardless of language. */
body.lang-ar nav.primary-nav.open{
transform:translateX(0);
}
.drawer-close{
position:absolute; top:20px; inset-inline-start:20px;
width:36px; height:36px; border:none; background:transparent; cursor:pointer;
color:var(--navy); border-radius:50%; display:flex; align-items:center; justify-content:center;
transition:background 0.2s ease;
}
.drawer-close:hover{ background:rgba(23,38,60,0.06); }
.drawer-close svg{ width:20px; height:20px; }
nav.primary-nav a{width:100%; padding:16px 0; border-bottom:1px solid var(--hairline); font-size:1.05rem;}
nav.primary-nav a.btn-primary{
width:auto; display:inline-flex; border-bottom:none; margin-top:14px; padding:13px 26px;
}
nav.primary-nav .mobile-lang-switch{
width:auto; border-bottom:none; margin-top:16px; display:inline-flex;
}
.menu-toggle{display:block;}
}
@media (max-width:420px){
.nav-actions{gap:6px;}
}
/* ---------- Hero ---------- */
.hero{
position:relative;
padding:88px 0 112px;
border-bottom:1px solid var(--hairline);
overflow:hidden;
}
.hero-media{
position:absolute;
inset:0;
z-index:0;
pointer-events:none;
}
/* The text column sits in a real grid track capped at 600px, so it can
never structurally overlap the image — unlike independently-calculated
percentages/vw values for two separate floating elements, which drift
out of sync at "in-between" viewport widths. The image is a decorative
absolute layer with a wide, forgiving fade that starts comfortably to
the right of wherever that text column could ever extend. */
.hero .container{
position:relative; z-index:1;
display:grid;
grid-template-columns:minmax(0,600px) 1fr;
gap:40px;
align-items:center;
}
@media (max-width:860px){
.hero .container{ grid-template-columns:1fr; }
}
.hero-media img{
position:absolute;
top:0; inset-inline-end:0;
height:100%;
width:56%;
max-width:800px;
object-fit:cover;
object-position:80% 30%;
display:block;
-webkit-mask-image:linear-gradient(to right, transparent 0%, transparent 20%, #000 62%);
mask-image:linear-gradient(to right, transparent 0%, transparent 20%, #000 62%);
}
body.lang-ar .hero-media img{
object-position:20% 30%;
-webkit-mask-image:linear-gradient(to left, transparent 0%, transparent 20%, #000 62%);
mask-image:linear-gradient(to left, transparent 0%, transparent 20%, #000 62%);
}
@media (max-width:860px){
.hero-media img{
position:absolute; top:0; inset-inline-start:0; inset-inline-end:0;
width:100%; max-width:none; height:64vw; min-height:230px;
object-position:65% 25%;
-webkit-mask-image:linear-gradient(to bottom, #000, #000 calc(100% - 130px), transparent);
mask-image:linear-gradient(to bottom, #000, #000 calc(100% - 130px), transparent);
}
body.lang-ar .hero-media img{
object-position:35% 25%;
}
}
.hero-content{
position:relative; z-index:1;
}
@media (max-width:860px){
.hero{ padding-top:0; }
.hero-content{ padding-top:calc(64vw - 15px); }
}
.hero-title{margin-bottom:0.35em;}
.hero-role{
font-family:var(--serif); font-style:normal; font-size:1.15rem; color:var(--navy);
margin-bottom:1.1em; font-weight:500;
}
body.lang-ar .hero-role{font-style:normal; font-family:var(--arabic); font-weight:500;}
.hero-sub{font-size:1.05rem; color:var(--charcoal); max-width:46ch; margin-bottom:2em;}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap;}
@media (max-width:860px){
/* The Arabic name at the unmodified mobile H1 size read as oversized
next to the now-tighter photo-to-text transition. English is left at
its normal mobile H1 size — only Arabic was reported as too large. */
body.lang-ar .hero-title{ font-size:1.75rem; line-height:1.25; }
/* MD, FRCSC shares the H1 by markup necessity (screen readers should
hear it as part of the one heading), but should read as a secondary
credential line, not equal in weight to the name itself. */
.hero-credentials{
display:block; font-size:0.95rem; font-weight:400;
margin-top:0.15em; color:var(--gray-text);
}
body.lang-ar .hero-credentials{ font-size:1rem; }
.hero-role{
margin-top:0.6em; margin-bottom:0.9em;
max-width:34ch;
}
body.lang-ar .hero-role{ margin-inline-start:auto; text-align:end; }
.hero-sub{ margin-bottom:1.3em; }
/* Subtle first-load entrance for the text block only — never the photo,
never repeated on scroll. */
.hero-content{
animation:hero-content-in 300ms ease-out both;
}
@keyframes hero-content-in{
from{ opacity:0; transform:translateY(8px); }
to{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion:reduce){
.hero-content{ animation:none; }
}
}
.portrait-frame{
aspect-ratio:4/5;
background:#EAE4D8;
border-radius:18px;
display:flex; align-items:center; justify-content:center;
position:relative;
color:var(--navy);
overflow:hidden;
box-shadow:0 6px 16px rgba(23,38,60,0.05);
}
.portrait-frame::before{
content:'';
position:absolute; inset:18px;
border:1px solid rgba(23,38,60,0.12);
border-radius:12px;
}
/* ---------- How can I help — restrained list ---------- */
.symptom-list{
border-top:1px solid var(--hairline);
margin-top:40px;
display:grid; grid-template-columns:1fr 1fr; column-gap:40px;
}
@media (max-width:700px){ .symptom-list{grid-template-columns:1fr;} }
.symptom-row{
display:flex; align-items:center; justify-content:space-between;
padding:18px 4px;
border-bottom:1px solid var(--hairline);
text-decoration:none; color:var(--charcoal);
transition:padding-inline-start 0.2s ease, color 0.2s ease;
}
.symptom-row:hover{color:var(--burgundy); padding-inline-start:10px;}
.symptom-row span.label{font-size:1.02rem; font-family:var(--serif);}
body.lang-ar .symptom-row span.label{font-family:var(--arabic); font-weight:500;}
.symptom-row .arrow, .lib-row .arrow{color:var(--warm-gray); font-size:1.1rem;}
.symptom-row:hover .arrow, .lib-row:hover .arrow{color:var(--burgundy);}
body.lang-ar .symptom-row .arrow, body.lang-ar .lib-row .arrow{display:inline-block; transform:scaleX(-1);}
/* ---------- Areas of expertise grid ---------- */
.expertise-grid{
display:grid; grid-template-columns:repeat(3,1fr); gap:36px 48px;
margin-top:40px;
}
@media (max-width:760px){ .expertise-grid{grid-template-columns:1fr; gap:32px;} }
.expertise-card{
text-decoration:none; padding-top:20px; border-top:1px solid var(--hairline);
transition:border-color 0.2s ease;
}
.expertise-card:hover{border-top-color:var(--burgundy);}
.expertise-card h3{margin-bottom:0.5em; transition:color 0.2s ease;}
.expertise-card:hover h3{color:var(--burgundy);}
.expertise-card p{font-size:0.92rem; color:var(--charcoal); margin-bottom:0;}
.expertise-card .learn{
display:inline-block; margin-top:14px; font-size:0.82rem; font-weight:600; color:var(--burgundy);
}
/* ---------- Two column intro / about blocks ---------- */
.split{
display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:start;
}
@media (max-width:860px){ .split{grid-template-columns:1fr; gap:32px;} }
/* ---------- Journey ---------- */
.journey{display:flex; flex-direction:column; gap:0; margin-top:36px;}
.journey-step{
display:grid; grid-template-columns:44px 1fr; gap:18px;
padding:22px 0; border-bottom:1px solid var(--hairline);
}
.journey-step:last-child{border-bottom:none;}
.journey-num{
font-family:var(--serif); font-style:italic; color:var(--burgundy); font-size:1.1rem;
}
body.lang-ar .journey-num{font-style:normal; font-family:var(--sans);}
.journey-text h3{margin-bottom:0.2em; font-size:1.05rem;}
.journey-text p{margin-bottom:0; font-size:0.92rem; color:var(--gray-text);}
/* ---------- Care pathway — vertical timeline (dots + line, no numerals) ---------- */
.care-timeline{
max-width:640px; margin-inline:auto; margin-top:40px;
position:relative;
padding-inline-start:28px;
}
/* No Arabic-specific override needed here: every related rule
(this padding, the connecting line, and each dot) already uses logical
inline-start/end properties consistently, so they all mirror together
correctly for RTL on their own. A prior override that forced this
padding to the physical left broke that — the line and dots kept
mirroring to the right while the padding no longer did, offsetting the
line from the dots by exactly the padding/dot-offset difference. */
.care-timeline::before{
content:''; position:absolute; top:8px; bottom:8px;
inset-inline-start:4px; width:1px;
background:rgba(23,38,60,0.14);
}
.care-stage{ position:relative; padding-bottom:34px; }
.care-stage:last-child{ padding-bottom:0; }
.care-stage::before{
content:''; position:absolute; top:7px;
inset-inline-start:-28px;
width:9px; height:9px; border-radius:50%;
background:var(--burgundy);
}
.care-stage h3{
font-family:var(--sans); font-weight:700; font-size:1.05rem;
color:var(--navy); margin:0 0 0.45em;
}
body.lang-ar .care-stage h3{ font-family:var(--arabic); }
.care-stage p{
font-family:var(--sans); font-size:0.95rem; line-height:1.7;
color:var(--gray-text); margin:0;
}
body.lang-ar .care-stage p{ font-family:var(--arabic); line-height:1.9; }
.care-stage a{ color:var(--burgundy); }
/* ---------- Section header pattern ---------- */
.section-head{max-width:640px; margin-bottom:16px;}
/* ---------- Footer ---------- */
footer.site-footer{
background:var(--navy); color:#D8DDE6; padding:48px 0 24px; margin-top:0;
}
footer.site-footer .container{ max-width:var(--chrome-max); }
.footer-disclaimer{
font-size:0.8rem; color:#9AA4B8; line-height:1.6; max-width:760px;
margin-bottom:32px; padding-bottom:28px; border-bottom:1px solid rgba(255,255,255,0.14);
}
.footer-grid{
display:grid; grid-template-columns:1.3fr repeat(3,1fr); gap:32px;
}
@media (max-width:860px){ .footer-grid{grid-template-columns:1fr 1fr; } }
@media (max-width:540px){ .footer-grid{grid-template-columns:1fr; gap:36px;} }
footer.site-footer h4{
color:#fff; font-family:var(--sans); font-size:0.78rem; letter-spacing:0.1em;
text-transform:uppercase; font-weight:600; margin-bottom:1.1em;
}
body.lang-ar footer.site-footer h4{font-family:var(--arabic); letter-spacing:0.02em;}
footer.site-footer ul{list-style:none; margin:0; padding:0;}
footer.site-footer li{margin-bottom:10px;}
footer.site-footer a{text-decoration:none; color:#C3CADA; font-size:0.9rem; transition:color 0.2s ease;}
footer.site-footer a:hover{color:#fff;}
.footer-brand{font-family:var(--serif); font-size:1.3rem; color:#fff; margin-bottom:10px;}
.footer-bottom{
border-top:1px solid rgba(255,255,255,0.14);
margin-top:32px; padding-top:20px;
display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
font-size:0.8rem; color:#9AA4B8;
}
.footer-bottom a{color:#9AA4B8; text-decoration:underline; text-underline-offset:3px;}
/* ---------- Condition / article page ---------- */
.article-hero{
background:var(--white); border-bottom:1px solid var(--hairline); padding:30px 0 40px;
}
/* The hero already provides its own bottom padding and a visual border
separating it from what follows, so the very next section needs only a
small top offset of its own — not the generic section{} padding meant
for standalone homepage-style sections. Targets the shared pattern
directly so individual pages no longer need a `style="padding-top:0"`
inline override to avoid an oversized gap here. */
.article-hero + section{
padding-top:56px;
}
@media (max-width:640px){
.article-hero + section{ padding-top:32px; }
}
/* h2's normal 2em top margin is relative to its own (large) font-size, so
on the very first heading right after the hero it was adding ~74px on
top of the section padding above — the real source of the oversized
gap, more than the padding itself. Only the first child is affected;
normal spacing between later sections in the body is untouched. */
.article-hero + section > .container > h2:first-child{
margin-top:0;
}
/* Reusable modifier: narrows the hero's container to match .article-body's
width, for pages whose body content is narrower than the site's usual
full content width. Opt-in per page (add the class to that page's hero
.container) rather than a global .article-hero change, since most pages
rely on the hero spanning the full container width. */
.article-hero .container--narrow{
max-width:760px;
}
.breadcrumb{font-size:0.82rem; color:var(--gray-text); margin-bottom:18px;}
.breadcrumb a{color:var(--gray-text); text-decoration:none; transition:color 0.2s ease;}
.breadcrumb a:hover{color:var(--burgundy);}
.article-body{max-width:760px; margin:0 auto;}
.article-body h2{margin-top:2em;}
.article-body ul{padding-inline-start:22px;}
.article-body li{margin-bottom:0.5em;}
.legal-disclosure{
font-size:0.78rem; color:var(--gray-text); margin-top:3em;
padding-top:1.2em; border-top:1px solid var(--hairline);
}
@media (max-width:600px){
.legal-page-body{ font-size:0.94rem; line-height:1.65; }
.legal-page-body h2{ margin-top:1.4em; margin-bottom:0.5em; }
.legal-page-body p{ margin-bottom:0.9em; }
.legal-page-body .callout{ padding:16px 18px; margin:1.2em 0; }
}
.callout{
background:var(--white); border:1px solid var(--hairline); border-inline-start:2px solid var(--burgundy);
padding:22px 26px; margin:2em 0; font-size:0.95rem;
}
.callout p{margin-bottom:0;}
/* ---------- In-article educational figure ---------- */
.article-figure{ margin:2em 0; }
.article-figure img{
width:100%; height:auto; display:block; border-radius:12px; border:1px solid var(--hairline);
}
.article-figure figcaption{
font-size:0.85rem; color:var(--gray-text); margin-top:10px; text-align:center;
}
.illustration-credit{
font-size:0.72rem; color:var(--gray-text); margin-top:4px; text-align:center;
line-height:1.4;
}
/* PRP infographic is a tall, portrait-oriented three-step graphic — at the
full article-body width it would render nearly 1150px tall, dominating
the page. Constrained narrower here specifically, still fully responsive
and comfortably margined on mobile via the parent's own padding. */
.prp-infographic{ max-width:420px; margin-inline:auto; }
.prp-infographic img{ width:100%; height:auto; display:block; border-radius:12px; border:1px solid var(--hairline); }
.faq-item{border-bottom:1px solid var(--hairline); padding:20px 0;}
/* ---------- "Things You Can Do at Home" — responsive trigger/advice list ---------- */
.home-care-list{ margin-top:1.5em; }
.home-care-item{
display:grid; grid-template-columns:200px 1fr; gap:24px;
padding:20px 0; border-top:1px solid var(--hairline);
}
.home-care-item:last-child{ border-bottom:1px solid var(--hairline); }
.home-care-item h3{
font-family:var(--sans); font-weight:700; font-size:0.95rem;
color:var(--navy); margin:0;
}
body.lang-ar .home-care-item h3{ font-family:var(--arabic); }
.home-care-item p{
font-size:0.92rem; color:var(--gray-text); margin:0; line-height:1.6;
}
@media (max-width:640px){
.home-care-item{ grid-template-columns:1fr; gap:6px; }
}
.faq-item h3{margin-bottom:0.4em; font-size:1.02rem;}
.faq-item p{margin-bottom:0; font-size:0.94rem; color:var(--charcoal);}
.related-links{display:flex; flex-wrap:wrap; gap:12px; margin-top:1em;}
/* ---------- Small evaluation/step cards ---------- */
.mini-card-grid{
display:grid; grid-template-columns:repeat(2, 1fr); gap:28px 32px; margin:1.5em 0;
}
@media (max-width:640px){ .mini-card-grid{ grid-template-columns:1fr; } }
.mini-card{ padding-top:16px; border-top:1px solid var(--hairline); }
.mini-card h3{ font-size:1rem; margin:0 0 0.4em; color:var(--navy); }
.mini-card p{ font-size:0.9rem; color:var(--gray-text); margin:0; line-height:1.6; }
/* ---------- Scent-group cards (smell training) ---------- */
.scent-card-grid{
display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; margin:1.5em 0 2em;
}
@media (max-width:640px){ .scent-card-grid{ grid-template-columns:1fr; } }
.scent-card{
background:var(--ivory); border-radius:12px; padding:22px 24px;
}
.scent-card h3{
font-family:var(--sans); font-weight:700; font-size:0.95rem;
color:var(--burgundy); margin:0 0 0.5em; text-transform:uppercase; letter-spacing:0.04em;
}
body.lang-ar .scent-card h3{ font-family:var(--arabic); letter-spacing:0; }
.scent-card p{ font-size:0.92rem; color:var(--charcoal); margin:0; line-height:1.6; }
/* ---------- Native accordion FAQ ---------- */
.faq-accordion{ margin-top:1em; }
.faq-accordion details{
border-top:1px solid var(--hairline); padding:16px 0;
}
.faq-accordion details:last-child{ border-bottom:1px solid var(--hairline); }
.faq-accordion summary{
font-family:var(--serif); font-size:1.02rem; color:var(--navy);
cursor:pointer; list-style:none; position:relative; padding-inline-end:28px;
}
body.lang-ar .faq-accordion summary{ font-family:var(--arabic); font-weight:500; }
.faq-accordion summary::-webkit-details-marker{ display:none; }
.faq-accordion summary::after{
content:'+'; position:absolute; inset-inline-end:0; top:0;
font-family:var(--sans); font-size:1.2rem; color:var(--burgundy); line-height:1.3;
}
.faq-accordion details[open] summary::after{ content:'–'; }
.faq-accordion .faq-answer{
margin-top:12px; font-size:0.94rem; color:var(--charcoal); line-height:1.6;
}
/* ---------- Compact credential panel (About page) ---------- */
.credential-panel{
border-top:1px solid var(--hairline); margin-top:1.2em;
}
.credential-item{
display:flex; justify-content:space-between; gap:24px;
padding:16px 0; border-bottom:1px solid var(--hairline);
}
.credential-item .cred-label{ color:var(--gray-text); font-size:0.88rem; flex:0 0 auto; }
.credential-item .cred-value{ text-align:end; font-weight:500; color:var(--navy); }
body.lang-ar .credential-item{ direction:rtl; }
@media (max-width:600px){
.credential-item{ flex-direction:column; gap:2px; }
.credential-item .cred-value{ text-align:start; }
}
.related-links a{
border:1px solid rgba(122,38,56,0.35); padding:8px 16px; border-radius:20px;
text-decoration:none; font-size:17.5px; color:#7A2638;
background:transparent;
transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.related-links a:hover, .related-links a:focus-visible{
background:#7A2638; border-color:#7A2638; color:#fff;
}
/* ---------- Publications widget — "Latest Research" bordered box ---------- */
.research-box{
border:1px solid var(--hairline);
border-radius:12px;
padding:28px 32px;
margin-top:28px;
}
.research-box-title{
font-family:var(--sans); font-weight:700; font-size:0.78rem;
letter-spacing:0.1em; text-transform:uppercase; color:var(--navy);
margin:0 0 18px;
}
body.lang-ar .research-box-title{font-family:var(--arabic); letter-spacing:0;}
.pub-list{list-style:none; margin:0; padding:0;}
.pub-item{padding:16px 0; border-top:1px solid var(--hairline);}
.pub-item:first-child{border-top:none; padding-top:0;}
.pub-item:last-child{padding-bottom:0;}
.pub-title{
display:block; font-family:var(--serif); font-size:1.02rem; color:var(--navy);
margin-bottom:4px; line-height:1.4; font-weight:500;
}
.pub-meta{font-size:0.85rem; color:var(--gray-text); margin-bottom:8px;}
.pub-link{font-size:0.85rem; color:var(--burgundy); text-decoration:none; font-weight:600;}
.pub-link:hover{text-decoration:underline;}
/* ---------- Library / index grid (conditions, treatments, resources) ---------- */
.lib-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:0; border-top:1px solid var(--hairline);}
/* When a grid has an odd number of items, the last one would otherwise sit
alone in its row with an empty cell beside it. Span it across both
columns instead, so the row always reads as intentional. */
.lib-grid > a:last-child:nth-child(odd){grid-column:1/-1;}
@media (max-width:700px){ .lib-grid{grid-template-columns:1fr;} }
/* ---------- Product card (scalable — one card per recommended item) ---------- */
.product-grid{
display:grid; grid-template-columns:repeat(3,1fr); gap:32px;
margin-top:8px;
}
@media (max-width:820px){ .product-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .product-grid{grid-template-columns:1fr;} }
.product-card{
border:1px solid var(--hairline); border-radius:10px; overflow:hidden;
display:flex; flex-direction:column;
}
.product-card-image{
aspect-ratio:4/3; background:#EFEAE0; display:flex; align-items:center; justify-content:center;
color:var(--navy); font-size:0.74rem; text-align:center; padding:14px; line-height:1.5;
}
.product-card-body{ padding:18px 20px 20px; display:flex; flex-direction:column; flex:1; }
.product-card-name{ font-family:var(--serif); font-size:1.05rem; font-weight:500; margin-bottom:0.4em; }
body.lang-ar .product-card-name{ font-family:var(--arabic); font-weight:700; }
.product-card-reason{ font-size:0.92rem; color:var(--charcoal); margin-bottom:0.6em; }
.product-card-audience{ font-size:0.82rem; color:var(--gray-text); margin-bottom:0.8em; }
.product-card-audience strong{ color:var(--navy); }
.product-card-safety{
font-size:0.78rem; color:var(--gray-text); background:var(--ivory);
border-radius:6px; padding:8px 10px; margin-bottom:0.8em; line-height:1.5;
}
.product-card-link{
margin-top:auto; font-size:0.85rem; font-weight:600; color:var(--burgundy);
}
.lib-row{
padding:24px 4px; border-bottom:1px solid var(--hairline); border-inline-start:1px solid transparent;
text-decoration:none; color:var(--charcoal); display:block;
transition:background 0.2s ease;
}
.lib-grid .lib-row:nth-child(odd){border-inline-end:1px solid var(--hairline);}
.lib-grid > .lib-row:last-child:nth-child(odd){border-inline-end:none;}
@media (max-width:700px){ .lib-grid .lib-row:nth-child(odd){border-inline-end:none;} }
.lib-row:hover{background:var(--white);}
.lib-row h3{margin-bottom:0.3em; font-size:1.08rem;}
.lib-row h2{margin-bottom:0.3em; font-size:1.08rem; font-family:var(--serif); font-weight:500;}
.lib-row p{font-size:0.88rem; color:var(--gray-text); margin-bottom:0;}
/* ---------- Disclaimer strip ---------- */
/* ---------- Contact / appointment ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px;}
@media (max-width:820px){ .contact-grid{grid-template-columns:1fr;} }
.contact-card{
background:var(--white); border:1px solid var(--hairline); padding:32px;
}
.contact-card h3{margin-bottom:1em;}
.contact-line{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:12px 0; border-bottom:1px solid var(--hairline); font-size:0.92rem;}
.contact-line:last-child{border-bottom:none;}
.contact-line span:first-child{color:var(--gray-text);}
.contact-location{line-height:1.7; text-align:start;}
.contact-location a{color:inherit; text-decoration:underline;}
.maps-link{
display:inline-block; margin-top:4px; font-size:0.85rem; font-weight:600; color:var(--burgundy) !important;
text-decoration:none !important;
}
.maps-link[aria-disabled="true"]{color:var(--gray-text) !important; cursor:default;}
@media (max-width:480px){
.contact-line{flex-direction:column; align-items:flex-start; gap:4px;}
.contact-location{text-align:start;}
}
/* ---------- Print ---------- */
@media print{
.site-header, .site-footer, .menu-toggle, .lang-switch,
.breadcrumb, .hero-actions, .related-links, .footer-disclaimer,
.skip-link, .header-cta{ display:none !important; }
h2:has(+ .related-links){ display:none !important; }
body{ background:#fff; color:#000; font-size:12pt; line-height:1.5; }
.article-hero, section{ padding:0 0 16px 0 !important; background:#fff !important; }
.container{ max-width:100% !important; padding:0 !important; }
h1{ font-size:20pt; }
h2{ font-size:15pt; page-break-after:avoid; }
h3{ font-size:13pt; page-break-after:avoid; }
p, li{ orphans:3; widows:3; }
a{ color:#000; text-decoration:underline; }
a[href]::after{ content:""; } /* avoid printing raw URLs after every link */
.callout{ border:1px solid #999; background:#fff !important; }
.portrait-frame{ display:none; } /* photos aren't useful on a printed instruction sheet */
img{ max-width:100%; }
}
/* Site search */
.search-toggle{
display:inline-flex; align-items:center; justify-content:center;
width:38px; height:38px; border:none; background:transparent; cursor:pointer;
color:var(--navy); border-radius:50%; flex-shrink:0; transition:background 0.2s ease;
}
.search-toggle:hover{ background:rgba(23,38,60,0.06); }
.search-toggle svg{ width:19px; height:19px; }
.search-overlay{
position:fixed; inset:0; z-index:200;
background:rgba(23,38,60,0.4);
display:flex; align-items:flex-start; justify-content:center;
padding:12vh 20px 20px;
opacity:0; visibility:hidden;
/* visibility only transitions (delayed) on the way OUT, so the overlay
stays visible through the opacity fade-out. On the way IN it must
become visible instantly and synchronously — a delayed/transitioned
visibility change here was the reason input.focus() right after
classList.add('open') found the input still technically hidden,
which silently no-ops focus() and is exactly what was blocking the
iOS keyboard from appearing on the same tap. */
transition:opacity 0.2s ease, visibility 0s linear 0.2s;
}
.search-overlay.open{
opacity:1; visibility:visible;
transition:opacity 0.2s ease, visibility 0s linear 0s;
}
.search-panel{
background:var(--white); border-radius:14px; width:100%; max-width:600px;
box-shadow:0 20px 60px rgba(23,38,60,0.25);
transform:translateY(-12px); transition:transform 0.2s ease;
max-height:70vh; display:flex; flex-direction:column; overflow:hidden;
}
.search-overlay.open .search-panel{ transform:translateY(0); }
.search-input-row{
display:flex; align-items:center; gap:10px;
padding:18px 20px; border-bottom:1px solid var(--hairline); flex-shrink:0;
}
.search-input-row svg{ width:19px; height:19px; color:var(--gray-text); flex-shrink:0; }
.search-input{
flex:1; min-width:0; border:none; outline:none;
font-size:1.05rem; color:var(--navy); background:transparent;
}
.search-input::placeholder{ color:var(--gray-text); }
.search-close{
border:none; background:transparent; cursor:pointer; color:var(--gray-text);
width:28px; height:28px; display:flex; align-items:center; justify-content:center;
border-radius:50%; flex-shrink:0; transition:background 0.2s ease;
}
.search-close:hover{ background:rgba(23,38,60,0.06); }
.search-close svg{ width:16px; height:16px; }
.search-results{
list-style:none; margin:0; padding:8px; overflow-y:auto;
}
.search-hint{
padding:20px 14px; color:var(--gray-text); font-size:0.92rem; text-align:center;
}
.search-result{
display:flex; flex-direction:column; gap:2px; padding:12px 14px; min-width:0;
border-radius:8px; text-decoration:none; transition:background 0.15s ease;
}
.search-result:hover, .search-result.active{ background:var(--ivory); }
.search-result-title{ color:var(--navy); font-weight:500; font-size:0.98rem; }
.search-result-desc{
display:block; width:100%; min-width:0; box-sizing:border-box;
color:var(--gray-text); font-size:0.85rem;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Tiered results (G): a quiet section label separating strong matches
from looser/fuzzy ones, so a loosely-matched page never reads as
equally authoritative as an exact one on a medical site. */
.search-section-heading{
padding:14px 14px 6px; margin-top:4px; border-top:1px solid var(--hairline);
font-size:0.72rem; font-weight:600; text-transform:uppercase; letter-spacing:0.04em;
color:var(--gray-text);
}
.search-section-heading:first-child{ border-top:none; margin-top:0; }
/* "Did you mean" (H): a clickable suggestion, never a silent
auto-correction — styled distinctly from an actual result so it reads
as a prompt, not a destination. */
.search-suggestion{ padding:10px 14px 4px; }
.search-suggestion-btn{
background:none; border:none; padding:0; margin:0; cursor:pointer;
font-size:0.92rem; color:var(--burgundy); text-decoration:underline;
font-family:inherit;
}
.search-suggestion-btn:hover{ color:var(--navy); }
body.lang-ar .search-suggestion-btn{ font-family:var(--arabic); }
body.search-open{ overflow:hidden; }
@media (max-width:480px){
.search-overlay{ padding:8vh 12px 12px; }
.search-panel{ max-height:80vh; }
}