/* pages.css — page-specific styles */


/* 1. Homepage */

/* --- Hero (serif headline, clay rule, calm vertical blend) --- */
.hero {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px var(--pad-x) 52px;
    color: #fff;
    background: var(--band-bg);
}
.hero-inner { position: relative; max-width: 760px; margin: 0 auto; }
.hero-logo { height: 72px; width: auto; margin: 0 auto 28px; }

.hero h1 {
    /* Always render the full name + credentials on ONE line.
       The name measures ~13.5em wide in Times metrics; dividing the
       available width (viewport minus the hero's 24px side padding) by a
       safe 14 gives the largest font-size that still fits. min() keeps the
       existing clamp() on wide screens and only shrinks when it must, so
       the line can never wrap or overflow at any viewport width. */
    font-size: min(clamp(2.4rem, 5.5vw, 3.6rem), calc((100vw - 48px) / 14));
    white-space: nowrap;
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.12;
    margin-bottom: 0;
}
/* .hero h1::after {
    content: '';
    display: block;
    width: var(--bar-w);
    height: var(--bar-h);
    background: rgba(255, 255, 255, 0.55);
    margin: 24px auto 0;
} */

.hero p {
    font-size: 1.12rem;
    line-height: 1.6;
    max-width: 540px;
    margin: 16px auto 0;
    color: rgba(255, 255, 255, 0.84);
}

/* Credential block under the name — business-card treatment.
   Roles and credentials share one serif voice (same family as the h1),
   stacked tight so the five lines read as a single unit. */
.hero .hero-role,
.hero .hero-creds {
    font-family: var(--font-display);
    font-weight: 400;
    /* Proportional vw slope: the longest line (~72ch of Times) tracks the
       viewport, so it stays unbroken all the way down to the 560px wrap
       breakpoint without ever overflowing the hero padding. */
    font-size: clamp(0.9rem, 2.45vw, 1.18rem);
    letter-spacing: 0.005em;
    /* Tight leading WITHIN a credential, clear margin BETWEEN credentials.
       When a long line wraps on mobile, its two halves hug each other while
       each credential stays visibly separated from its neighbours — this is
       what stops the block reading as one clumped mass. */
    line-height: 1.35;
    max-width: none;          /* override .hero p's 540px cap */
    color: rgba(255, 255, 255, 0.88);
    margin: 10px auto 0;
}
.hero h1 + .hero-role,
.hero h1 + .hero-creds { margin-top: 20px; }
/* Slightly larger break where the roles end and the institutional
   credentials (faculty post, DipMDT) begin */
.hero .hero-role + .hero-creds { margin-top: 16px; }

/* Keep each credential on a single line once there's room for the longest
   one. Below this width we let lines wrap (balanced) rather than shrink
   the type below readable size — per readability/responsiveness tradeoff. */
@media (min-width: 560px) {
    .hero-role,
    .hero-creds { white-space: nowrap; }
}
@media (max-width: 559.98px) {
    /* No separators — just balanced wrapping plus a touch more air between
       items than the desktop 10px, since wrapped lines need the extra gap
       to read as distinct credentials. */
    .hero-role,
    .hero-creds { text-wrap: balance; margin-top: 13px; }
}

/* Registered mark in credential lines sits superscript like the card */
.hero-role sup,
.hero-creds sup {
    font-size: 0.6em;
    line-height: 0;
    vertical-align: super;
}

/* Site description line */
.hero-desc { font-style: italic; }

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 22px;
}

/* Phone + two-line address below the actions */
.hero-contact {
    margin-top: 18px;
    font-family: var(--font-sans);
    font-size: 0.98rem;
    line-height: 1.65;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.84);
}
.hero-contact a {
    color: inherit;
    text-decoration: none;
    transition: color var(--t);
}
.hero-contact a:hover,
.hero-contact a:focus-visible { color: #fff; }

/* --- Intro / "Meet the doctor" --- */
/* Asymmetric padding: full breathing room above, trimmed below so the gap
   to the Services heading doesn't read as a dead zone (intro bottom +
   services top used to stack to ~176px). */
.intro { padding: 88px var(--pad-x) 48px; }
.intro-grid {
    max-width: 1040px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 300px;   /* copy left, headshot tucked top-right */
    gap: clamp(32px, 6vw, 64px);
    align-items: start;
}
.intro-photo { margin: 0; }
.intro-photo img {
    width: 100%;
    height: auto;                       /* natural aspect ratio — no cropping */
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.intro-photo figcaption {
    margin-top: 12px;
    font-size: 0.84rem;
    color: var(--text-muted);
    letter-spacing: 0.01em;
    text-align: center;
}

/* --- Services (stacked, text-focused, hairline-divided) --- */
.services {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px var(--pad-x) 88px;
    scroll-margin-top: 74px;   /* keep anchored sections clear of the sticky header */
}
.service-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 44px;
    text-align: left;
}
.service {
    padding-top: 36px;
    border-top: var(--rule);
}
.service:first-child { padding-top: 0; border-top: none; }
.service h3 {
    display: inline-block;
    font-size: clamp(1.25rem, 2.4vw, 1.55rem);
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 2px solid var(--primary);   /* clay-rule motif (left-aligned) */
}
.service > p { max-width: 70ch; }

/* Three-column method layout — one group per column, on a single line */
.service-methods {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(24px, 4vw, 48px);
}
.method-group h4 {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.76rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 12px;
}

/* --- CTA band --- */
.cta {
    padding: 84px var(--pad-x);
    text-align: center;
    color: #fff;
    background: var(--band-bg);
}
.cta-inner { max-width: 600px; margin: 0 auto; }
.cta h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); font-weight: 500; color: #fff; margin-bottom: 28px; }
.cta p { margin: 18px auto 30px; color: rgba(255, 255, 255, 0.86); line-height: 1.75;}

/* Phone + address block under the email button (homepage CTA + contact page) */
.contact-block {
    max-width: 600px;
    margin: 28px auto 0;
    text-align: center;
}
.contact-block p { margin: 0 0 14px; line-height: 1.75; }
.contact-block p:last-child { margin-bottom: 0; }
.contact-block a {
    color: rgba(255, 255, 255, 0.86);
    line-height: 1.75;
    text-decoration: none;
    transition: color var(--t);
}
.contact-block a:hover,
.contact-block a:focus-visible { color: #fff; }

.contact-content {
    padding: 84px var(--pad-x);
    text-align: center;
}
.contact-content { max-width: 600px; margin: 0 auto; }
.contact-content  h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); font-weight: 500; }
.contact-content  p { margin: 18px auto 30px; line-height: 1.75;}
/* On the contact page the block sits on a light background, not the green band */
.contact-content .contact-block a { color: var(--text-muted); }
.contact-content .contact-block a:hover,
.contact-content .contact-block a:focus-visible { color: var(--text); }

.contact-address {
    font-style: normal;
    line-height: 1.75;
    margin-top: 6px;
}


/* Selected Writings */
.writings {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 88px var(--pad-x);
    border-top: var(--rule);
}
.writings .section-head p { color: var(--text-muted); font-size: 1.02rem; }

.reading-list {
    width: 100%;
    max-width: 760px;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 0;
}
.reading-item a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border: var(--rule);
    border-radius: var(--radius);
    border-left: 2px solid var(--primary);
    text-decoration: none;
    color: var(--text);
    transition: background var(--t), border-color var(--t);
}
.reading-item a:hover,
.reading-item a:focus-visible {
    background: color-mix(in srgb, var(--primary) 6%, transparent);
}
.reading-title { font-weight: 600; }
.reading-meta {
    flex: none;
    font-size: 0.82rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}
.writings-all { margin-top: 28px; }
.writings-all a { font-weight: 600; color: var(--primary); }


/* 2. Generic content pages  (.content + about) */
.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 26px;
    padding: 72px var(--pad-x);
}
.content h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 500; }

.about-content { max-width: 660px; margin: 0 auto; text-align: left; }
.about-content p { color: var(--text-muted); font-size: 1.06rem; line-height: 1.85; }

.about-tagline { margin-top: 4px; }
.about-tagline p {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.15rem;
    color: var(--text);
}


/* 3. Approach page  (approach · myths) */
.approach {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
}
.pillars {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.approach-note { padding: 20px; }

/* Myths & Realities — two plain text columns */
.myths {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 5vw, 56px);
    text-align: left;
    margin-top: 36px;
}
.myth-column h3 {
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--primary);   /* clay-rule motif */
}


/* 4. Policy pages  (written content) */
.policy-content {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    text-align: left;
    align-items: stretch;
}
/* Written policy body (templates/policies/<slug>.html) */
.policy-body { color: var(--text-muted); font-size: 1.04rem; line-height: 1.8; }
.policy-body .policy-updated {
    font-size: 0.9rem;
    color: var(--text-muted);
    opacity: 0.8;
    margin-bottom: 28px;
}
.policy-body h2 {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.4vw, 1.6rem);
    font-weight: 500;
    color: var(--text);
    margin: 34px 0 12px;
}
.policy-body h2:first-of-type { margin-top: 0; }
.policy-body p { margin-bottom: 16px; }
.policy-body ul { margin: 0 0 16px 1.2em; }
.policy-body li { margin-bottom: 8px; }
.policy-body a { color: var(--primary); text-decoration: underline; }
.policy-body a:hover { color: var(--primary-dark); }


/* 5. Contact form embed */
.form-embed { width: 100%; max-width: 700px; position: relative; }
.form-embed iframe { border: none; }

.form-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 60px 20px;
    color: var(--text-muted);
    font-size: 0.9rem;
}
.form-loading-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* 6. Shared list pattern — dash bullets */
.myth-column ul,
.method-group ul,
.service-detail {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.myth-column ul   { gap: 12px; }
.service-detail   { gap: 6px; margin-top: 10px; }

.myth-column li,
.method-group li,
.service-detail li {
    position: relative;
    padding-left: 18px;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.55;
}
.myth-column li { font-size: 1.02rem; line-height: 1.6; }
.service-detail li { line-height: 1.6; }

.myth-column li::before,
.method-group li::before,
.service-detail li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.66em;
    width: var(--dash-w);
    height: 1px;
    background: var(--primary);
}
.method-group li::before,
.service-detail li::before { background: var(--primary-dark); }

.service-detail strong { color: var(--text); font-weight: 600; }

/* Inline links to corresponding readings within method lists */
.method-group a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    transition: border-color var(--t), color var(--t);
}
.method-group a:hover,
.method-group a:focus-visible {
    border-bottom-color: var(--accent);
}


/* Training & Background section
   (Academic Training, Author, International Educator, Delphi Panelist) */
.training-section {
    border-top: var(--rule);          /* clear divide from Services above */
}

/* Credential subheads inside the Academic Training article.
   These h4s are NOT in a .method-group, so style them explicitly
   instead of inheriting the base h4 size. */
.training-section .service h4 {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.01em;
    line-height: 1.4;
    color: var(--text);
    margin-top: 24px;
    margin-bottom: 5px;
}
.training-section .service h4:first-of-type { margin-top: 18px; }


/* 7. Responsive */
@media (max-width: 860px) {
    .intro-grid { grid-template-columns: 1fr; }
    .intro-photo { order: -1; max-width: 260px; margin: 0 auto 8px; }
    .intro-photo figcaption { text-align: center; }
}

@media (max-width: 768px) {
    .hero { padding: 44px 24px 40px; }
    .hero-logo { width: min(400px, 92%); }
    .content { padding: 48px 20px; }
    .intro, .approach, .services, .writings { padding: 56px 20px; }
    /* Tighter hand-off from the intro copy into the Services heading */
    .intro { padding-bottom: 26px; }
    .services { padding-top: 38px; }
    .myths { grid-template-columns: 1fr; gap: 32px; }
    .service-methods { grid-template-columns: 1fr; gap: 24px; }
    .cta { padding: 60px 20px; }
    .reading-item a { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* Spinner has no animation when reduced motion is requested */
@media (prefers-reduced-motion: reduce) {
    .form-loading-spinner {
        animation: none;
        border-top-color: var(--border);
        opacity: 0.5;
    }
}


/* 2. Files */

/* Writings / Files page */
.files-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
}
.files-page h1 { margin-bottom: 0.5rem; }
.files-intro { color: var(--text-muted); margin-bottom: 1.75rem; }
.file-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.file-item a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: var(--rule);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.file-item a:hover,
.file-item a:focus-visible {
    border-color: var(--primary);
    background-color: color-mix(in srgb, var(--primary) 6%, transparent);
}
.file-icon { flex: none; color: var(--primary); }
.file-name { flex: 1 1 auto; word-break: break-word; }
.file-date {
    flex: none;
    font-size: 0.85em;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.file-size {
    flex: none;
    font-size: 0.85em;
    opacity: 0.65;
    font-variant-numeric: tabular-nums;
}
.file-empty { opacity: 0.7; }

/* 3. CV — embedded PDF */
.cv-embed {
    width: 100%;
    max-width: 900px;
    margin: 24px auto 0;
}
.cv-iframe {
    width: 100%;
    height: 85vh;
    border: var(--rule);
    border-radius: var(--radius);
    background: #fff;
}
.cv-fallback {
    text-align: center;
    margin-top: 18px;
}
.cv-fallback a {
    font-weight: 600;
    color: var(--primary);
}

/* iOS Safari renders only the first page of an iframed PDF and won't let you
   scroll through it. On mobile we skip the embed entirely and send people to
   the native PDF viewer (full scroll + pinch-zoom) via a button instead. */
@media (max-width: 768px) {
    .cv-embed { display: none; }
    .cv-fallback { margin-top: 4px; }
    .cv-fallback a {
        display: inline-block;
        padding: 14px 28px;
        border-radius: var(--radius);
        background: var(--btn);
        color: #fff;
        border: 1px solid var(--btn);
    }
    .cv-fallback a:hover { background: var(--btn-hover); }
}