/* ============================================================
   Site-wide modern overrides, layered on top of Bootstrap 5.
   Public site only — admin tool has its own admin/style.css.
   ============================================================ */

:root {
    --site-bg:           #fafafa;
    --site-surface:      #ffffff;
    --site-border:       #e5e7eb;
    --site-border-soft:  #f1f5f9;
    --site-text:         #1a202c;
    --site-text-muted:   #4b5563;
    --site-text-soft:    #6b7280;
    --site-text-faint:   #9ca3af;
    --site-accent:       #4f46e5;
    --site-accent-hover: #4338ca;
    --site-accent-soft:  #eef2ff;
    --site-accent-ring:  rgba(79, 70, 229, 0.18);
}

/* ============================================================
   Base typography
   ============================================================ */
html { scroll-behavior: smooth; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--site-bg);
    color: var(--site-text);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
p { color: var(--site-text); }
h1, h2, h3, h4, h5, h6 { letter-spacing: -0.01em; color: var(--site-text); }
a {
    color: var(--site-accent);
    text-decoration: none;
    transition: color 140ms ease;
}
a:hover {
    color: var(--site-accent-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}
/* Links inside the intro tagline/description/info cards: color alone indicates
   the link. No underlines, no borders — visual noise dominates otherwise when
   there are many in-line references on one paragraph. Hover gives a subtle
   underline so the affordance is still discoverable. */
.intro-tagline a, .intro-description a, .info-card a {
    color: var(--site-accent);
    text-decoration: none;
    border-bottom: 0;
}
.intro-tagline a:hover, .intro-description a:hover, .info-card a:hover {
    color: var(--site-accent-hover);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* ============================================================
   Navbar polish
   ============================================================ */
.navbar.bg-dark {
    background: #0f172a !important;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}
.navbar-brand {
    font-weight: 700;
    letter-spacing: -0.01em;
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
}
.navbar-brand::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--site-accent);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.7);
    padding: 0.5rem 1rem;
    font-size: 0.92rem;
    font-weight: 500;
    border-radius: 6px;
    transition: color 140ms, background 140ms;
}
.navbar-dark .navbar-nav .nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.navbar-dark .navbar-nav .nav-link.active { color: #fff; background: rgba(255, 255, 255, 0.1); }

/* ============================================================
   Hero section (main.php)
   ============================================================ */
.intro { padding: 64px 0 40px; }

.intro-name {
    font-size: 3rem;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.025em;
    margin: 0 0 12px;
}
.intro-tagline {
    font-size: 1.2rem;
    color: var(--site-text-muted);
    line-height: 1.5;
    margin: 0 0 20px;
    font-weight: 400;
}
.intro-description {
    font-size: 1.02rem;
    color: var(--site-text-muted);
    line-height: 1.75;
    margin: 0 0 8px;
    max-width: 640px;
}
.intro-photo {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center top;
    border-radius: 14px;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.10), 0 1px 3px rgba(15, 23, 42, 0.06);
    display: block;
}
/* Right-column sidebar holding photo + socials + email + CTAs.
   Inherits the full col-lg-4 width so visible content reaches the
   container's right edge, matching the cards row below. */
.intro-sidebar {
    margin-top: 20px;
}
.intro-sidebar .social-pills {
    margin: 0 0 16px;
}
.intro-email-line {
    font-size: 0.92rem;
    color: var(--site-text-muted);
    margin: 0 0 16px;
}
.intro-email-line strong {
    color: var(--site-text);
    margin-right: 4px;
    font-weight: 600;
}
/* Stacked CTAs in the intro sidebar */
.intro-cta-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Teaching callout — sits below the CTA stack, fills the bottom-right gap */
.teaching-callout {
    display: block;
    margin-top: 16px;
    padding: 14px 18px;
    background: var(--site-surface);
    border: 1px solid var(--site-border);
    border-left: 3px solid var(--site-accent);
    border-radius: 8px;
    text-decoration: none !important;
    color: var(--site-text);
    transition: all 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
.teaching-callout:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
    color: var(--site-text);
    text-decoration: none !important;
    border-left-color: var(--site-accent-hover);
}
.teaching-callout-eyebrow {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--site-accent);
    font-weight: 600;
    margin-bottom: 4px;
}
.teaching-callout-title {
    font-size: 0.97rem;
    font-weight: 600;
    color: var(--site-text);
    line-height: 1.3;
    margin-bottom: 2px;
}
.teaching-callout-meta {
    font-size: 0.85rem;
    color: var(--site-text-muted);
}
.btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 22px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 10px;
    transition: all 160ms cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-cta.btn-primary {
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.25);
}
.btn-cta.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(79, 70, 229, 0.32);
}
.btn-cta.btn-outline-primary:hover {
    transform: translateY(-1px);
}

/* Override BS5 primary button to use site indigo accent */
.btn-primary {
    background-color: var(--site-accent);
    border-color: var(--site-accent);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--site-accent-hover) !important;
    border-color: var(--site-accent-hover) !important;
}
.btn-outline-primary {
    color: var(--site-accent);
    border-color: var(--site-accent);
    background-color: transparent;
}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
    color: #fff !important;
    background-color: var(--site-accent) !important;
    border-color: var(--site-accent) !important;
}

/* ============================================================
   Social pill buttons
   ============================================================ */
.social-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 24px 0 28px;
}
.social-pills a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--site-surface);
    border: 1px solid var(--site-border);
    color: var(--site-text);
    font-size: 1.2rem;
    text-decoration: none;
    transition: all 160ms cubic-bezier(0.4, 0, 0.2, 1);
}
.social-pills a:hover {
    background: var(--site-accent);
    border-color: var(--site-accent);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(79, 70, 229, 0.25);
    text-decoration: none;
}

/* ============================================================
   Latest-preprint card (auto-pulled from arXiv every 6h, replaces
   the former news carousel in the intro's left column)
   ============================================================ */
.latest-preprint-card {
    display: block;
    margin-top: 28px;
    padding: 24px 28px;
    border-radius: 12px;
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 50%, #818cf8 100%);
    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.18);
    color: #fff !important;
    text-decoration: none !important;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.latest-preprint-card:hover {
    color: #fff !important;
    text-decoration: none !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(79, 70, 229, 0.28);
}
.latest-preprint-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.85;
    margin-bottom: 10px;
}
.latest-preprint-title {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 8px;
}
.latest-preprint-meta {
    font-size: 0.88rem;
    opacity: 0.92;
    margin-bottom: 14px;
    line-height: 1.5;
}
.latest-preprint-cta {
    font-size: 0.9rem;
    font-weight: 600;
    opacity: 0.95;
}
.latest-preprint-card:hover .latest-preprint-cta { opacity: 1; }

/* ============================================================
   News carousel (kept for legacy/future — no longer rendered on
   the homepage; the admin news tool still maintains the data)
   ============================================================ */
.news-carousel {
    position: relative;
    width: 100%;
    margin-top: 28px;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 50%, #818cf8 100%);
    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.18);
}
.news-carousel .carousel-inner { width: 100%; }
.news-carousel .carousel-item {
    min-height: 160px;
    display: flex;
    align-items: stretch; /* caption fills item height so we can position its text */
}

/* lg+: stretch the left column to match the right column's natural
   height (photo + sidebar with CTAs), then let the carousel grow to
   fill the space between the description and the callouts row. This
   makes the callouts land at the bottom of the column — vertically
   opposite the "Work with us!" / "See my availability" buttons —
   regardless of viewport width. */
@media (min-width: 992px) {
    .intro .row > .col-lg-8 {
        display: flex;
        flex-direction: column;
    }
    .intro .news-carousel {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        /* Low floor — let flex-grow size the carousel to fit the gap
           between the description and the callouts row. The right
           column (photo + sidebar) is what dictates the row height. */
        min-height: 160px;
    }
    .intro .news-carousel .carousel-inner {
        flex: 1 1 0;
        min-height: 0;
    }
    .intro .news-carousel .carousel-item {
        height: 100%;
    }
}
.news-carousel .carousel-item:not(.active):not(.carousel-item-start):not(.carousel-item-end):not(.carousel-item-next):not(.carousel-item-prev) {
    display: none;
}
.news-carousel .carousel-item img { display: none; }
.news-carousel .carousel-caption {
    position: static;
    width: 100%;
    padding: 28px 56px 36px;
    text-align: left;
    color: #fff;
    text-shadow: none;
    /* Caption is itself a flex column so children space out vertically.
       justify-content: center keeps the text block visually centered when
       there's leftover vertical space (e.g. on tall lg+ layouts), while
       the gap keeps lines from sticking together. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
}
.news-carousel .carousel-caption h1,
.news-carousel .carousel-caption h2,
.news-carousel .carousel-caption h3,
.news-carousel .carousel-caption h4 {
    color: #fff;
    margin: 0;
    font-weight: 600;
    font-size: 1.2rem;
    line-height: 1.35;
}
.news-carousel .carousel-caption p {
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    line-height: 1.7;
    font-size: 0.95rem;
}
.news-carousel .carousel-caption a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.news-carousel .carousel-caption a:hover { opacity: 0.85; }
.news-carousel .carousel-control-prev,
.news-carousel .carousel-control-next {
    width: 36px;
    opacity: 0.85;
}
.news-carousel .carousel-control-prev { left: 4px; }
.news-carousel .carousel-control-next { right: 4px; }
.news-carousel .carousel-control-prev:hover,
.news-carousel .carousel-control-next:hover { opacity: 1; }
.news-carousel .carousel-control-prev-icon,
.news-carousel .carousel-control-next-icon {
    width: 1.2rem;
    height: 1.2rem;
}
.news-carousel .carousel-indicators { margin-bottom: 6px; }
.news-carousel .carousel-indicators button {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: 0;
    margin: 0 3px;
    transition: background 140ms, transform 140ms;
}
.news-carousel .carousel-indicators button.active {
    background: #fff;
    transform: scale(1.3);
}

/* ============================================================
   Info cards (About / Background / Other interests)
   ============================================================ */
.info-cards-section { margin-bottom: 64px; }
.section-eyebrow {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--site-accent);
    margin: 0 0 12px;
    font-weight: 600;
}
.info-card {
    background: var(--site-surface);
    border: 1px solid var(--site-border);
    border-radius: 12px;
    padding: 28px;
    height: 100%;
    transition: box-shadow 160ms ease, transform 160ms ease;
}
.info-card:hover {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    transform: translateY(-2px);
}
.info-card h2.section-eyebrow { margin: 0 0 14px; font-size: 0.78rem; }
.info-card p {
    color: var(--site-text-muted);
    line-height: 1.7;
    margin: 0;
    font-size: 0.97rem;
}
.info-card p + p { margin-top: 12px; }
.info-card ul.research-themes {
    list-style: none;
    padding: 0;
    margin: 12px 0 8px;
}
.info-card ul.research-themes li {
    padding: 8px 0 8px 18px;
    position: relative;
    color: var(--site-text-muted);
    line-height: 1.6;
    font-size: 0.95rem;
    border-bottom: 1px solid var(--site-border-soft);
}
.info-card ul.research-themes li:last-child { border-bottom: 0; }
.info-card ul.research-themes li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 16px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--site-accent);
}
.info-card ul.research-themes li b {
    color: var(--site-text);
    display: block;
    margin-bottom: 2px;
}

/* ============================================================
   Group callout (text-only link to the aQa group page)
   ============================================================ */
.group-callout-section {
    margin: 16px auto 60px;
}
.group-callout {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
    background: var(--site-surface);
    border: 1px solid var(--site-border);
    border-left: 4px solid var(--site-accent);
    border-radius: 10px;
    text-decoration: none !important;
    color: var(--site-text);
    transition: all 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
.group-callout:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    color: var(--site-text);
    text-decoration: none !important;
    border-left-color: var(--site-accent-hover);
}
.group-callout-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--site-accent-soft);
    color: var(--site-accent);
    border-radius: 10px;
    font-size: 1.2rem;
}
.group-callout-body {
    flex: 1;
    min-width: 0;
}
.group-callout-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--site-text);
    margin-bottom: 2px;
}
.group-callout-text {
    font-size: 0.92rem;
    color: var(--site-text-muted);
    line-height: 1.5;
}
.group-callout-cta {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--site-accent);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.group-callout:hover .group-callout-cta {
    color: var(--site-accent-hover);
}

@media (max-width: 640px) {
    .group-callout {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    .group-callout-cta {
        align-self: flex-end;
    }
}

/* ============================================================
   Group photo banner (legacy, currently unused — kept in case you
   want to switch back. Markup removed from main.php; styles inert.)
   ============================================================ */
.group-photo-section {
    margin: 24px auto 60px;
    text-align: center;
}
.group-photo-link {
    display: block;
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.06);
    transition: all 220ms cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none !important;
}
.group-photo-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.14);
    text-decoration: none !important;
}
.group-photo-img {
    width: 100%;
    height: auto;
    display: block;
}
.group-photo-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.6) 0%, rgba(15, 23, 42, 0) 40%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity 220ms ease;
}
.group-photo-link:hover .group-photo-overlay {
    opacity: 1;
}
.group-photo-overlay-text {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    background: rgba(79, 70, 229, 0.92);
    padding: 10px 20px;
    border-radius: 8px;
    backdrop-filter: blur(4px);
}
.group-photo-caption {
    margin: 16px 0 0;
    color: var(--site-text-muted);
    font-size: 0.92rem;
    text-align: center;
}

/* ============================================================
   Generic .card tweaks (BS5 default panels-replaced-with-cards)
   ============================================================ */
.card {
    border: 1px solid var(--site-border);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--site-border);
    font-weight: 600;
    padding: 14px 18px;
}
.card-body { padding: 18px; }
.card-footer {
    background: var(--site-border-soft);
    border-top: 1px solid var(--site-border);
}

/* ============================================================
   Footer
   ============================================================ */
.navbar-default.navbar-static-bottom,
.navbar.navbar-default {
    background: var(--site-surface) !important;
    border-top: 1px solid var(--site-border);
    border-bottom: 0;
    padding: 22px 0;
    margin-top: 60px;
    font-size: 0.85rem;
    color: var(--site-text-soft) !important;
}
.navbar-default .navbar-text {
    color: var(--site-text-soft) !important;
    padding: 0;
}

/* ============================================================
   Generic .page-header (BS3-style section heading: H1/H2 inside a
   wrapper with a thin underline + vertical breathing room). Pages
   like teaching.php use <div class="page-header"><h2>…</h2></div>;
   this rule makes the wrapper size to the heading.
   ============================================================ */
.page-header {
    border-bottom: 1px solid var(--site-border);
    margin: 56px 0 20px;
    padding-bottom: 8px;
}
.page-header:first-child { margin-top: 0; }
.page-header h1,
.page-header h2,
.page-header h3,
.page-header h4 { margin: 0; }

/* ============================================================
   Research page section headings
   Only the .page-header-minor wrappers that carry an id (one per
   research section) get vertical breathing room; the outer
   .page-header-minor that wraps the whole page is untouched.
   ============================================================ */
.page-header-minor[id] {
    margin-top: 56px;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--site-border-soft);
}
.page-header-minor[id="Overview"] { margin-top: 0; }
.page-header-minor[id] h1 { margin: 0; }

/* ============================================================
   Research page "On this page" scrollspy
   Floats on the right side using fixed positioning so its location
   in the document tree is irrelevant. Hidden below xl (1200px)
   where the content already takes the full container width.
   ============================================================ */
.research-scrollspy {
    position: fixed;
    top: 90px;
    /* Pull the panel toward the content at xxl viewports (where the
       content widens to col-xxl-10) so the gap stays ~30–50px instead
       of ballooning into the container's right margin. Floor at 20px
       from the viewport edge for narrower viewports. */
    right: max(20px, calc(50vw - 700px));
    width: 200px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    z-index: 100;
    background: var(--site-surface);
    border: 1px solid var(--site-border);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
    padding: 6px 0 8px;
}
.research-scrollspy-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--site-text-soft);
    font-weight: 600;
    margin: 10px 16px 6px;
}
.research-scrollspy .nav { gap: 0; }
.research-scrollspy .nav-link {
    color: var(--site-text);
    font-size: 0.86rem;
    line-height: 1.35;
    padding: 7px 14px;
    border-left: 2px solid transparent;
    border-radius: 0;
    transition: background 150ms, color 150ms, border-color 150ms;
    background: transparent;
}
.research-scrollspy .nav-link:hover {
    background: var(--site-accent-soft);
    color: var(--site-accent);
}
.research-scrollspy .nav-link.active {
    color: var(--site-accent);
    background: var(--site-accent-soft);
    border-left-color: var(--site-accent);
    font-weight: 600;
}
@media (max-width: 1199.98px) {
    .research-scrollspy { display: none; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 991.98px) {
    .intro { padding: 40px 0 28px; }
    .intro-name { font-size: 2.2rem; }
    .intro-tagline { font-size: 1.05rem; }
    .intro-photo { max-width: 260px; margin: 0 auto 16px; }
    .intro-sidebar { margin: 0 auto; text-align: center; }
    .intro-sidebar .social-pills { justify-content: center; }
    .news-carousel .carousel-caption { padding: 28px 40px; }
}

@media (max-width: 575.98px) {
    .intro-name { font-size: 1.85rem; }
    .social-pills a { width: 40px; height: 40px; font-size: 1.05rem; }
    .info-card { padding: 22px; }
}