/* ================================================
   Dra. Tina Bizjak da Fonseca — Website Styles
   Navy + Gold premium medical brand
   ================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Inter', sans-serif;
  color: #2d3748;
  background: #faf8f5;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* --- Tokens --- */
:root {
  --navy: #1a2744;
  --navy-light: #243358;
  --gold: #c9a96e;
  --gold-light: #e8d5b0;
  --gold-pale: #f5edd9;
  --cream: #faf8f5;
  --white: #ffffff;
  --text: #2d3748;
  --text-light: #6b7280;
  --text-muted: #9ca3af;
  --border: #e5e0d8;
  --shadow-sm: 0 2px 8px rgba(26,39,68,0.06);
  --shadow: 0 4px 24px rgba(26,39,68,0.10);
  --shadow-lg: 0 12px 48px rgba(26,39,68,0.14);
  --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
  --radius: 4px;
  --radius-lg: 16px;
  --max-width: 1200px;
  --header-height: 80px;
  --topbar-height: 40px;
}

/* --- Typography --- */
h1,h2,h3,h4,h5 { font-family:'Cormorant Garamond',serif; font-weight:500; line-height:1.15; color:var(--navy); }
h1 { font-size: clamp(2.4rem,5vw,4rem); }
h2 { font-size: clamp(1.8rem,3vw,2.8rem); }
h3 { font-size: clamp(1.2rem,2vw,1.7rem); }
h4 { font-size: 1.1rem; }
p  { margin-bottom: 1.2rem; color: var(--text-light); }
p:last-child { margin-bottom: 0; }
a  { color: var(--gold); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--navy); }
img { max-width: 100%; height: auto; display: block; }

/* --- Layout --- */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 2rem; }
.section    { padding: 6rem 0; }
.section--alt  { background: var(--white); }
.section--dark { background: var(--navy); }
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4 { color: var(--white); }
.section--dark p { color: rgba(255,255,255,0.7); }

.section-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.25em;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 0.75rem; display: block;
}
.section-title  { margin-bottom: 1rem; }
.section-subtitle { font-size: 1.05rem; color: var(--text-light); max-width: 560px; margin-bottom: 3rem; }
.text-center { text-align: center; }
.text-center .section-subtitle { margin-left: auto; margin-right: auto; }

.divider { width: 48px; height: 2px; background: var(--gold); margin: 1.5rem 0; }
.divider--center { margin-left: auto; margin-right: auto; }

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.875rem 2rem; border-radius: var(--radius);
  font-family: 'Inter',sans-serif; font-size: 0.875rem;
  font-weight: 500; letter-spacing: 0.05em;
  cursor: pointer; transition: var(--transition); border: none; text-decoration: none;
}
.btn-primary { background: var(--gold); color: var(--navy); }
.btn-primary:hover { background: #b8926a; color: var(--navy); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(201,169,110,0.4); }
.btn-outline { background: transparent; color: var(--white); border: 1.5px solid rgba(255,255,255,0.45); }
.btn-outline:hover { background: rgba(255,255,255,0.1); border-color: var(--white); color: var(--white); }
.btn-outline-dark { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); }
.btn-outline-dark:hover { background: var(--navy); color: var(--white); }

/* --- Header --- */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--header-height); transition: var(--transition);
}
.header.scrolled { background: var(--white); box-shadow: var(--shadow-sm); }
.header.scrolled .nav-logo  { color: var(--navy); }
.header.scrolled .nav-link  { color: var(--text); }
.header.scrolled .nav-link:hover { color: var(--gold); }
.header.scrolled .nav-toggle span { background: var(--navy); }

/* The container is the nav's parent and has no height of its own, so the
   nav's height:100% used to resolve to auto. It collapsed to the height of
   its text and align-items:center then centred everything inside that thin
   strip at the top of the bar rather than in the bar. */
.header > .container { height: 100%; }
.nav { display: flex; align-items: center; height: 100%; gap: 2rem; }
.nav-logo {
  font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; font-weight: 500;
  color: var(--white); letter-spacing: 0.02em; white-space: nowrap;
  text-decoration: none; margin-right: auto; transition: var(--transition);
}
.nav-logo:hover { color: var(--gold); }
.header.scrolled .nav-logo:hover { color: var(--gold); }
.nav-links { display: flex; align-items: center; gap: 1.75rem; list-style: none; }
.nav-link {
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(255,255,255,0.92);
  text-decoration: none; transition: var(--transition); position: relative;
}
.nav-link::after {
  content:''; position: absolute; bottom: -4px; left: 0; right: 0;
  height: 1px; background: var(--gold); transform: scaleX(0); transition: transform var(--transition);
}
.nav-link:hover { color: var(--white); }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }

.lang-switcher { display: flex; align-items: center; gap: 0.2rem; border-left: 1px solid rgba(255,255,255,0.15); padding-left: 1.5rem; }
.lang-btn {
  font-size: 0.73rem; font-weight: 600; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.72); background: none; border: none;
  cursor: pointer; padding: 0.25rem 0.4rem; transition: var(--transition);
  font-family: 'Inter', sans-serif;
}
.lang-btn.active { color: var(--gold); }
.lang-btn:hover  { color: var(--white); }
.lang-sep { color: rgba(255,255,255,0.35); font-size: 0.75rem; pointer-events: none; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; background: none; border: none; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--white); border-radius: 2px; transform-origin: center; transition: transform var(--transition), opacity var(--transition), background var(--transition); }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.header.scrolled .nav-toggle.open span { background: var(--navy); }

/* Mobile drawer */
.nav-drawer {
  display: none; /* mobile-only; shown at <=640px. Prevents the panel poking below the header on desktop */
  position: fixed; top: var(--header-height); left: 0; right: 0;
  background: var(--white); padding: 1.5rem 2rem;
  box-shadow: var(--shadow); transform: translateY(-110%);
  transition: transform var(--transition); z-index: 999;
  max-height: calc(100vh - var(--header-height) - var(--topbar-height)); overflow-y: auto;
}
.nav-drawer.open { transform: translateY(0); }

/* Backdrop behind the open mobile drawer (injected by main.js) */
.nav-backdrop {
  position: fixed; inset: 0; top: var(--header-height);
  background: rgba(15,23,42,0.4); z-index: 998;
  opacity: 0; visibility: hidden; transition: opacity var(--transition), visibility var(--transition);
}
.nav-backdrop.open { opacity: 1; visibility: visible; }
body.nav-open { overflow: hidden; }
.nav-drawer .nav-links {
  display: flex; flex-direction: column; gap: 0; margin-bottom: 1.5rem;
}
.nav-drawer .nav-link {
  color: var(--text); padding: 0.875rem 0;
  border-bottom: 1px solid var(--border); font-size: 0.9rem;
}
.nav-drawer .lang-switcher { border-left: none; padding-left: 0; }
.nav-drawer .lang-btn { color: var(--text-light); }
.nav-drawer .lang-btn.active { color: var(--gold); }
.nav-drawer .lang-sep { color: var(--border); }

/* --- Hero (index) --- */
.hero {
  min-height: 100vh; background: var(--navy);
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; position: relative; overflow: hidden;
}
.hero::before {
  content:''; position: absolute; top:0; left:0; right:50%; bottom:0;
  background: radial-gradient(ellipse at 30% 50%, rgba(201,169,110,0.07) 0%, transparent 60%);
  pointer-events: none;
}
.hero-content {
  padding-top: calc(var(--header-height) + 4rem);
  padding-bottom: 4rem;
  padding-left: max(2rem, calc((100vw - var(--max-width)) / 2 + 2rem));
  padding-right: 4rem;
}
.hero-tag {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 1.5rem;
}
.hero-tag::before { content:''; display:block; width:32px; height:1px; background:var(--gold); }
.hero-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.6rem,4.5vw,4.2rem); font-weight: 400;
  color: var(--white); line-height: 1.08; margin-bottom: 0.75rem;
}
.hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.1rem,2vw,1.45rem); font-weight: 400;
  color: var(--gold-light); margin-bottom: 0.35rem;
}
.hero-detail { font-size: 0.875rem; color: rgba(255,255,255,0.45); margin-bottom: 1.1rem; }
.hero-location {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-bottom: 2.5rem; font-size: 0.92rem; letter-spacing: 0.01em;
  color: rgba(255,255,255,0.9);
}
.hero-location svg { width: 15px; height: 15px; flex-shrink: 0; }
.hero-location svg path { fill: var(--gold); }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-langs {
  margin-top: 3rem; padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
}
.hero-langs-label {
  font-size: 0.68rem; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.35); margin-right: 0.25rem;
}
.lang-chip {
  font-size: 0.73rem; color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  padding: 0.2rem 0.65rem; border-radius: 100px;
}
.hero-image { height: 100vh; position: relative; overflow: hidden; }
.hero-image img { width:100%; height:100%; object-fit:cover; object-position:center top; filter:grayscale(15%) brightness(0.82); }
.hero-image::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(to right, var(--navy) 0%, rgba(26,39,68,0.88) 12%, rgba(26,39,68,0.42) 32%, rgba(26,39,68,0.12) 58%, rgba(26,39,68,0) 100%),
              linear-gradient(to bottom, rgba(26,39,68,0.78) 0%, rgba(26,39,68,0.58) 10%, rgba(26,39,68,0.34) 26%, rgba(26,39,68,0.12) 44%, rgba(26,39,68,0) 62%),
              linear-gradient(to top, rgba(26,39,68,0.45) 0%, transparent 55%);
}

/* --- Stats Bar --- */
.stats-bar { background: var(--navy-light); padding: 2.5rem 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }
.stat-item { text-align:center; padding: 0.5rem 1rem; border-right:1px solid rgba(255,255,255,0.08); }
.stat-item:last-child { border-right: none; }
.stat-number { font-family:'Cormorant Garamond',serif; font-size:2.2rem; font-weight:500; color:var(--gold); line-height:1; display:block; margin-bottom:0.2rem; }
.stat-label  { font-size:0.7rem; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.45); }

/* --- Home About --- */
.about-home { display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:center; }
.about-home-image { position:relative; }
.about-home-image img { width:100%; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); filter:grayscale(15%); }
.about-home-image::before {
  content:''; position:absolute; top:-20px; left:-20px; right:20px; bottom:20px;
  border:2px solid var(--gold-light); border-radius:var(--radius-lg); z-index:-1;
}
.credential-list { list-style:none; margin:1.5rem 0 2rem; }
.credential-list li { display:flex; align-items:flex-start; gap:0.75rem; padding:0.65rem 0; border-bottom:1px solid var(--border); font-size:0.9rem; color:var(--text); }
.credential-list li::before { content:'✦'; color:var(--gold); font-size:0.55rem; margin-top:0.42rem; flex-shrink:0; }

/* --- Cards --- */
.cards-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.card { background:var(--white); border-radius:var(--radius-lg); padding:2rem; box-shadow:var(--shadow-sm); border:1px solid var(--border); transition:var(--transition); }
.card:hover { box-shadow:var(--shadow); transform:translateY(-2px); }
.card-num { font-family:'Cormorant Garamond',serif; font-size:2.5rem; font-weight:300; color:var(--gold-light); line-height:1; margin-bottom:0.75rem; }
.card h3  { font-size:1.15rem; margin-bottom:0.5rem; }
.card p   { font-size:0.875rem; }

/* --- Affiliation --- */
.affiliation { background:linear-gradient(135deg,var(--navy) 0%,#1e2f50 100%); padding:5rem 0; }
.affiliation-inner { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.affil-badge {
  background:rgba(255,255,255,0.04); border:1px solid rgba(201,169,110,0.25);
  border-radius:var(--radius-lg); padding:2.5rem; text-align:center;
}
.affil-badge-title { font-family:'Cormorant Garamond',serif; font-size:1.5rem; color:var(--white); margin-bottom:0.5rem; }
.affil-badge-sub   { font-size:0.8rem; color:rgba(255,255,255,0.45); margin-bottom:1.5rem; }

/* --- Contact CTA (home) --- */
.contact-cta { background:var(--gold-pale); padding:5rem 0; text-align:center; }
.contact-cta h2 { color:var(--navy); margin-bottom:0.75rem; }
.contact-cta p  { color:var(--text-light); max-width:500px; margin:0 auto 2rem; }

/* --- Thank-you page --- */
.success-check {
  width:66px; height:66px; border-radius:50%;
  background:rgba(201,169,110,0.14); border:1.5px solid var(--gold);
  color:var(--gold); display:flex; align-items:center; justify-content:center;
  font-size:1.9rem; margin:0 auto 1.75rem;
}

/* --- Page Hero (interior pages) --- */
.page-hero { background:var(--navy); padding:10rem 0 5rem; text-align:center; }
.page-hero h1 { color:var(--white); margin-bottom:1rem; }
.page-hero p  { color:rgba(255,255,255,0.6); max-width:560px; margin:0 auto; font-size:1.05rem; }

/* --- About Page --- */
.about-layout { display:grid; grid-template-columns:1fr 340px; gap:5rem; align-items:start; }
.about-photo { border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); position:sticky; top:calc(var(--header-height) + 2rem); }
.about-photo img { width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center top; filter:grayscale(15%); }

.timeline { position:relative; padding:1rem 0; }
.timeline::before { content:''; position:absolute; left:6px; top:0; bottom:0; width:1px; background:var(--border); }
.timeline-item { display:flex; gap:2rem; margin-bottom:2rem; position:relative; }
.timeline-dot { width:13px; height:13px; border-radius:50%; background:var(--gold); border:2px solid var(--white); flex-shrink:0; margin-top:0.3rem; box-shadow:0 0 0 3px var(--gold-light); }
.timeline-year { font-size:0.72rem; font-weight:600; letter-spacing:0.08em; color:var(--gold); margin-bottom:0.2rem; }
.timeline-content h3 { color:var(--navy); font-size:0.95rem; margin-bottom:0.15rem; font-family:'Inter',sans-serif; font-weight:500; }
.timeline-content p  { font-size:0.85rem; margin-bottom:0; }

.languages-grid { display:flex; flex-wrap:wrap; gap:0.65rem; margin-top:1.5rem; }
.language-chip {
  display:flex; align-items:center; gap:0.5rem;
  padding:0.55rem 1.1rem; background:var(--white);
  border:1px solid var(--border); border-radius:100px;
  font-size:0.85rem; font-weight:500; color:var(--text);
  box-shadow:var(--shadow-sm);
}
.language-chip .flag { font-size:1rem; }

/* --- Specialties --- */
.specialties-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.75rem; }
.specialty-card { background:var(--white); border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border); transition:var(--transition); display:flex; }
.specialty-card:hover { box-shadow:var(--shadow); transform:translateY(-2px); }
.specialty-accent { width:5px; background:var(--gold); flex-shrink:0; }
.specialty-body { padding:2rem; }
.specialty-tag { display:inline-block; font-size:0.68rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); background:var(--gold-pale); padding:0.2rem 0.7rem; border-radius:100px; margin-bottom:0.65rem; }
.specialty-body h2 { font-size:1.2rem; margin-bottom:0.65rem; }
.specialty-body p  { font-size:0.875rem; line-height:1.75; }

/* --- Research --- */
.research-layout { display:grid; grid-template-columns:1fr 300px; gap:5rem; align-items:start; }
.pub-list { margin-top:1.5rem; }
.pub-item { padding:1.5rem 0; border-bottom:1px solid var(--border); }
.pub-item:first-child { border-top:1px solid var(--border); }
.pub-type  { font-size:0.68rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold); margin-bottom:0.2rem; }
.pub-title { font-family:'Cormorant Garamond',serif; font-size:1.05rem; color:var(--navy); margin-bottom:0.2rem; line-height:1.4; }
.pub-meta  { font-size:0.8rem; color:var(--text-muted); }

.congress-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1.5rem; }
.congress-item { background:var(--cream); border-radius:var(--radius); padding:1.25rem; border-left:3px solid var(--gold); font-size:0.85rem; color:var(--text); }
.congress-item strong { display:block; color:var(--navy); margin-bottom:0.2rem; font-family:'Cormorant Garamond',serif; font-size:1rem; }

.sidebar-box { background:var(--navy); border-radius:var(--radius-lg); padding:2rem; position:sticky; top:calc(var(--header-height) + 2rem); }
.sidebar-box .sidebar-title { color:var(--white); margin-bottom:0.75rem; font-size:1rem; font-family:'Inter',sans-serif; font-weight:500; }
.sidebar-box p  { color:rgba(255,255,255,0.6); font-size:0.875rem; margin-bottom:1.5rem; }

/* --- Contact --- */
.contact-layout { display:grid; grid-template-columns:1fr 460px; gap:6rem; align-items:start; }
.contact-info-item { display:flex; gap:1rem; align-items:flex-start; padding:1.25rem 0; border-bottom:1px solid var(--border); }
.contact-info-icon { width:40px; height:40px; background:var(--gold-pale); border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1.1rem; }
.contact-info-label { font-size:0.68rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-muted); margin-bottom:0.2rem; }
.contact-info-value { font-size:0.9rem; color:var(--text); }
.contact-info-value a { color:var(--gold); }
.contact-info-value a:hover { color:var(--navy); }

.contact-form { background:var(--white); border-radius:var(--radius-lg); padding:2.5rem; box-shadow:var(--shadow); border:1px solid var(--border); }
.form-title   { font-size:1.4rem; margin-bottom:1.75rem; }
.form-group   { margin-bottom:1.1rem; }
.form-label   { display:block; font-size:0.78rem; font-weight:500; letter-spacing:0.04em; color:var(--text); margin-bottom:0.4rem; }
.form-control {
  width:100%; padding:0.8rem 1rem; border:1.5px solid var(--border);
  border-radius:var(--radius); font-family:'Inter',sans-serif; font-size:0.9rem;
  color:var(--text); background:var(--cream); transition:var(--transition); outline:none;
}
.form-control:focus { border-color:var(--gold); background:var(--white); box-shadow:0 0 0 3px rgba(201,169,110,0.12); }
.form-control::placeholder { color:var(--text-muted); }
textarea.form-control { min-height:130px; resize:vertical; }
.form-submit { width:100%; justify-content:center; padding:1rem; font-size:0.9rem; }
.form-note   { font-size:0.78rem; color:var(--text-muted); text-align:center; margin-top:0.75rem; }
.form-privacy { font-size:0.75rem; color:var(--text-muted); margin-top:1rem; padding-top:1rem; border-top:1px solid var(--border); line-height:1.5; }

/* --- Footer --- */
.footer { background:var(--navy); padding:3rem 0 2rem; }
.footer-inner { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:3rem; margin-bottom:2.5rem; }
.footer-brand-name  { font-family:'Cormorant Garamond',serif; font-size:1.2rem; color:var(--white); margin-bottom:0.35rem; }
.footer-brand-title { font-size:0.8rem; color:rgba(255,255,255,0.45); }
.footer-heading { font-size:0.68rem; font-weight:600; letter-spacing:0.15em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem; }
.footer-links { list-style:none; }
.footer-links li { margin-bottom:0.4rem; }
.footer-links a { font-size:0.875rem; color:rgba(255,255,255,0.5); transition:var(--transition); }
.footer-links a:hover { color:var(--gold); }
.footer-bottom { padding-top:2rem; border-top:1px solid rgba(255,255,255,0.08); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer-copy { font-size:0.78rem; color:rgba(255,255,255,0.3); }
.footer-reg  { font-size:0.72rem; color:rgba(255,255,255,0.22); }

/* --- Scroll animation --- */
.reveal { opacity:0; transform:translateY(18px); transition:opacity 0.65s ease, transform 0.65s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* --- Responsive --- */
@media (max-width: 1100px) {
  .about-layout { grid-template-columns:1fr; }
  .about-photo { display:none; }
  .research-layout { grid-template-columns:1fr; }
  .sidebar-box { position:static; }
  .congress-grid { grid-template-columns:1fr; }
}

@media (max-width: 900px) {
  .hero { grid-template-columns:1fr; min-height:100svh; }
  .hero-content {
    padding: calc(var(--header-height) + 4rem) 2rem 5rem;
    text-align:center; position:relative; z-index:1;
  }
  .hero::after {
    content:''; position:absolute; inset:0;
    background:rgba(26,39,68,0.72); z-index:0;
  }
  .hero-image { position:absolute; inset:0; height:100%; }
  .hero-image::after { background:none; }
  .hero-actions { justify-content:center; }
  .hero-langs  { justify-content:center; }
  .stats-grid  { grid-template-columns:repeat(2,1fr); }
  .about-home  { grid-template-columns:1fr; }
  .about-home-image { display:none; }
  .affiliation-inner { grid-template-columns:1fr; gap:2rem; }
  .cards-grid  { grid-template-columns:repeat(2,1fr); }
  .specialties-grid { grid-template-columns:1fr; }
  .contact-layout { grid-template-columns:1fr; }
  .footer-inner { grid-template-columns:1fr; gap:2rem; }
}

/* The header switches to the drawer at 1080px, not 640px. The five links plus
   the language switcher and the full name need about 1030px in Spanish and
   more in German, so between those two widths the row wrapped and the
   language switcher fell off the right edge. */
@media (max-width: 1080px) {
  .nav > .nav-links, .nav > .lang-switcher { display:none; }
  .nav-toggle { display:flex; }
  .nav-drawer { display:block; }
}

@media (max-width: 640px) {
  :root { --header-height:64px; }
  .section { padding:4rem 0; }
  .container { padding:0 1.25rem; }
  .cards-grid { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .congress-grid { grid-template-columns:1fr; }
}

/* ================================================
   Static multilingual build additions
   Replaces the former inline styles and the
   client side translation layer.
   ================================================ */

/* --- Accessibility helpers --- */
.visually-hidden {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link {
  position:absolute; left:-9999px; top:0; z-index:1200;
  background:var(--gold); color:var(--navy); padding:0.75rem 1.25rem;
  font-size:0.85rem; font-weight:600; border-radius:0 0 var(--radius) 0;
}
.skip-link:focus { left:0; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline:2px solid var(--gold); outline-offset:3px;
}

/* --- Language switcher is now real links, and must stay reachable
       inside the mobile drawer (it was hidden by the 640px rule) --- */
.lang-btn { text-decoration:none; cursor:pointer; }
.nav-drawer .lang-switcher {
  display:flex; border-left:none; padding-left:0; margin-top:0.5rem;
}

/* --- Page hero --- */
.page-hero-label { display:block; text-align:center; margin-bottom:0.75rem; }
.page-hero--tall { min-height:78vh; display:flex; align-items:center; }
.page-hero-actions { margin-top:2.25rem; }

/* --- Home --- */
.section-actions { text-align:center; margin-top:3rem; }

/* --- Affiliation --- */
.affiliation-title   { color:var(--white); margin-bottom:1rem; }
.affiliation-text    { color:rgba(255,255,255,0.68); max-width:480px; }
.affiliation-actions { margin-top:2rem; }
.affiliation-reg     { margin-top:1.5rem; font-size:0.78rem; color:rgba(255,255,255,0.3); }

/* --- About --- */
.timeline-wrap { max-width:700px; margin-top:2.5rem; }
.langs-wrap    { max-width:700px; }

/* --- Research --- */
.pub-list { list-style:none; margin-top:1.5rem; }
.pub-cite { font-size:0.82rem; color:var(--text-light); margin-bottom:0.2rem; }
.pub-doi {
  display:inline-block; margin-top:0.5rem; font-size:0.72rem; font-weight:600;
  letter-spacing:0.04em; color:var(--navy); border-bottom:1px solid var(--gold);
  padding-bottom:1px; word-break:break-all;
}
.pub-doi:hover { color:var(--gold); }
.pub-note { font-size:0.8rem; color:var(--text-muted); margin-top:1.5rem; }
.research-block { margin-top:4rem; }
.congress-grid { list-style:none; }
.research-areas { list-style:none; margin:0 0 1.5rem; }
.research-areas li {
  font-size:0.85rem; color:rgba(255,255,255,0.72); padding:0.5rem 0;
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.research-areas li:last-child { border-bottom:none; }
.sidebar-btn { width:100%; justify-content:center; }

/* --- Contact --- */
.contact-info-title { font-size:clamp(1.6rem,2.5vw,2.2rem); }
.contact-info-item--last { border-bottom:none; }
.contact-info-value a { color:var(--navy); border-bottom:1px solid var(--gold); }
.contact-info-value a:hover { color:var(--gold); }

/* --- Footer --- */
.footer-address {
  font-style:normal; font-size:0.8rem; color:rgba(255,255,255,0.45);
  line-height:1.9; margin-bottom:0.5rem;
}
.footer-address a { color:rgba(255,255,255,0.45); }
.footer-address a:hover { color:var(--gold); }
.footer-hosp { font-size:0.875rem; color:rgba(255,255,255,0.5); }
.footer-hosp:hover { color:var(--gold); }

/* --- Respect the reduced motion preference --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; }
  *, *::before, *::after {
    animation-duration:0.01ms !important; animation-iteration-count:1 !important;
    transition-duration:0.01ms !important; scroll-behavior:auto !important;
  }
}

/* height:auto is set on the base img rule above. The width and height
   attributes in the markup reserve layout space so the page does not shift
   as images load; without height:auto the browser honours the literal
   height attribute and distorts the picture. */

/* Portrait crop for the block on the home page, so a square source does
   not have to stretch to match the height of the text beside it. */
.about-home-image img {
  aspect-ratio:4/5; height:auto; object-fit:cover; object-position:center 12%;
}

/* --- Mobile hero -------------------------------------------------------
   Her photo used to become a full bleed background under a 72% navy wash,
   which made her almost impossible to see. On small screens it is now a
   real portrait sitting above the name. */
@media (max-width: 900px) {
  .hero { min-height:0; padding:calc(var(--header-height) + 2.25rem) 0 3.5rem; }
  .hero::before, .hero::after { display:none; }
  .hero-content { padding:0 1.5rem; text-align:center; position:relative; z-index:1; }

  .hero-image {
    position:static; order:-1; height:auto; overflow:hidden;
    width:min(260px, 60vw); margin:0 auto 2.25rem;
    border-radius:var(--radius-lg);
    border:1px solid rgba(201,169,110,0.35);
    box-shadow:0 18px 48px rgba(0,0,0,0.38);
  }
  .hero-image::after { display:none; }
  .hero-image img {
    width:100%; height:auto; aspect-ratio:4/5;
    object-fit:cover; object-position:center 10%;
    filter:grayscale(10%);
  }
}

@media (max-width: 420px) {
  .hero-image { width:min(210px, 56vw); margin-bottom:1.75rem; }
}

/* --- Closed mobile drawer must be fully hidden --------------------------
   translateY(-110%) is measured from the drawer's own top edge, which sits
   at var(--header-height). For a short drawer the bottom edge still landed
   on screen, showing a white strip under the header. */
.nav-drawer { visibility:hidden; transition:transform var(--transition), visibility var(--transition); }
.nav-drawer.open { visibility:visible; }

/* Drawer rows are full width block links, so the separator sits between
   items instead of striking through the next label, and the whole row is
   tappable rather than just the text. */
.nav-drawer .nav-links { align-items:stretch; }
.nav-drawer .nav-link { display:block; text-align:left; }
.nav-drawer .lang-switcher { justify-content:flex-start; gap:0.35rem; }

/* --- Line icons ---------------------------------------------------------
   Hand drawn strokes replacing the emoji that used to sit in the contact
   list and on the thank you page. Emoji render differently on every
   platform, so they never matched the rest of the brand. */
.icon { width:20px; height:20px; display:block; stroke:currentColor; }

.contact-info-icon {
  color:var(--gold);
  background:var(--gold-pale);
  border:1px solid rgba(201,169,110,0.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.6);
  transition:var(--transition);
}
.contact-info-item:hover .contact-info-icon {
  background:var(--gold);
  border-color:var(--gold);
  color:var(--white);
}

.success-check .icon { width:30px; height:30px; stroke-width:1.6; }

/* --- Skip link and in page anchors -------------------------------------
   The header is fixed, so an anchor jump would otherwise land underneath it. */
html { scroll-padding-top: calc(var(--header-height) + 1rem); }
#main:focus { outline:none; }

/* --- Drawer rows are comfortable tap targets --------------------------- */
.nav-drawer .nav-link { min-height:44px; display:flex; align-items:center; }
.nav-drawer .lang-btn { padding:0.6rem 0.75rem; min-height:44px; display:inline-flex; align-items:center; }
.nav-toggle { width:44px; height:44px; align-items:center; justify-content:center; }

/* ======================================================================
   Top bar and header call to action
   The language switcher moved out of the nav row and into a bar above it,
   so it is reachable at every width without opening the menu, and the nav
   row gained room for a booking button.
   ====================================================================== */

.topbar {
  background: rgba(0,0,0,0.22);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 0.78rem;
  overflow: hidden;
  height: var(--topbar-height);
  transition: height var(--transition), opacity var(--transition);
}
.topbar-inner {
  display: flex; align-items: center; gap: 1.75rem;
  height: var(--topbar-height);
}
.topbar-item { display: inline-flex; align-items: center; gap: 0.5rem; color: rgba(255,255,255,0.62); white-space: nowrap; }
.topbar-item a { display: inline-flex; align-items: center; gap: 0.5rem; color: rgba(255,255,255,0.78); }
.topbar-item a:hover { color: var(--white); }
.topbar .icon { width: 14px; height: 14px; opacity: 0.75; }

/* Language pills, pushed to the right of the bar */
.topbar .lang-switcher {
  margin-left: auto; display: inline-flex; align-items: center; gap: 0.15rem;
  border-left: none; padding-left: 0;
}
.lang-btn {
  padding: 0.25rem 0.6rem; border-radius: 100px;
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.6); transition: var(--transition);
}
.lang-btn:hover { color: var(--white); background: rgba(255,255,255,0.1); }
.lang-btn.is-active { color: var(--navy); background: var(--gold); font-weight: 600; }
.lang-btn.is-active:hover { color: var(--navy); background: var(--gold); }

/* Once the page scrolls the bar folds away and the white nav row alone
   stays pinned, which keeps the stuck header compact. */
.header.scrolled .topbar { height: 0; opacity: 0; border-bottom-width: 0; }
.header.scrolled { background: var(--white); }

/* The header is now two stacked rows, so it can no longer be a fixed height */
.header { height: auto; }
.header > .container { height: var(--header-height); }
.nav { height: var(--header-height); }

/* Booking button in the nav row */
.header-cta { padding: 0.7rem 1.5rem; font-size: 0.8rem; white-space: nowrap; margin-left: 0.5rem; }
.drawer-cta { width: 100%; justify-content: center; margin-top: 1.25rem; }

/* Everything that clears the fixed header has to clear the bar as well */
.hero-content { padding-top: calc(var(--header-height) + var(--topbar-height) + 4rem); }
.page-hero { padding-top: calc(var(--header-height) + var(--topbar-height) + 5rem); }
.nav-drawer, .nav-backdrop { top: calc(var(--header-height) + var(--topbar-height)); }
.header.scrolled ~ .nav-drawer, .header.scrolled ~ .nav-backdrop { top: var(--header-height); }
html { scroll-padding-top: calc(var(--header-height) + var(--topbar-height) + 1rem); }
.about-photo, .sidebar-box { top: calc(var(--header-height) + var(--topbar-height) + 2rem); }

@media (max-width: 900px) {
  .hero { padding-top: calc(var(--header-height) + var(--topbar-height) + 2.25rem); }
}

@media (max-width: 780px) {
  /* The address is the first thing to go when the bar gets tight */
  .topbar-item--wide { display: none; }
}

@media (max-width: 480px) {
  :root { --topbar-height: 36px; }
  .topbar { font-size: 0.72rem; }
  .topbar-inner { gap: 0.75rem; }
  .header-cta { display: none; }
}

/* In the drawer each row already has its own divider, so the sliding
   underline used on the desktop links landed on top of it and read as a
   double rule. The current page is marked with gold text instead. */
.nav-drawer .nav-link::after { display: none; }
.nav-drawer .nav-link.active { color: var(--gold); font-weight: 600; }