/*
 * V3 Design Overrides — rossgrynko.com
 * Layered on top of the Helios/HTML5UP base theme.
 * Modern, science-forward aesthetic with navy + cyan palette.
 */

/* =============================================
   FONTS
   ============================================= */
@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;600;700&family=Inter:wght@300;400;500;600&display=swap");

/* =============================================
   CSS CUSTOM PROPERTIES (theme tokens)
   ============================================= */
:root {
    --c-primary:        #1a2744;   /* deep navy — headings, bold text  */
    --c-accent:         #0891b2;   /* cyan-teal — accent, links, buttons */
    --c-accent-light:   #06b6d4;   /* lighter cyan for hover states     */
    --c-accent-glow:    rgba(8, 145, 178, 0.18);
    --c-body-bg:        #f7f8fc;   /* clean off-white, barely blue-tinted */
    --c-body-text:      #3a3a3a;   /* darker than original for readability */
    --c-footer-bg:      #0b1526;   /* very dark navy — replaces purple-black */
    --c-overlay:        #06101e;   /* header image overlay — deep dark navy  */
    --font-heading:     'Raleway', 'Source Sans Pro', sans-serif;
    --font-body:        'Inter', 'Source Sans Pro', sans-serif;
    --radius-card:      0.6em;
    --shadow-card:      0 4px 24px rgba(10, 30, 60, 0.10);
    --shadow-card-hover:0 10px 40px rgba(10, 30, 60, 0.18);
    --transition-fast:  0.25s ease;
    --transition-std:   0.35s ease;
}

/* =============================================
   GLOBAL SMOOTH SCROLL & SELECTION
   ============================================= */
html {
    scroll-behavior: smooth;
}

::selection {
    background: var(--c-accent);
    color: #ffffff;
}

/* =============================================
   BODY & TYPOGRAPHY
   ============================================= */
body {
    background: var(--c-body-bg) !important;
    color: var(--c-body-text) !important;
    font-family: var(--font-body) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

input, textarea, select {
    font-family: var(--font-body) !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--c-primary) !important;
    font-family: var(--font-heading) !important;
    letter-spacing: 0.02em;
}

/* ── Hero/header area: headings live on a dark background image,
      so they must stay white regardless of the global palette. ── */
#header h1, #header h2, #header h3,
#header h4, #header h5, #header h6,
#header h1 a, #header h2 a, #header h3 a {
    color: #ffffff !important;
    font-family: var(--font-heading) !important;
}

/* Subtitle text on homepage hero */
#header header > p {
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    font-family: var(--font-body) !important;
    font-size: 1.0em !important;
    font-weight: 400 !important;
    opacity: 0.88;
}

strong, b {
    color: var(--c-primary) !important;
    font-weight: 600 !important;
}

/* =============================================
   LINKS
   ============================================= */
a:hover {
    color: var(--c-accent) !important;
}

/* =============================================
   BUTTONS
   ============================================= */
input[type="button"],
input[type="submit"],
input[type="reset"],
button,
.button {
    background: var(--c-accent) !important;
    border-radius: 0.4em !important;
    letter-spacing: 0.06em;
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast) !important;
    box-shadow: 0 2px 10px rgba(8, 145, 178, 0.25) !important;
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover,
.button:hover {
    background: var(--c-accent-light) !important;
    box-shadow: 0 4px 18px rgba(6, 182, 212, 0.35) !important;
    transform: translateY(-1px);
}

/* Circular scroll button on homepage */
body.homepage #header .button.circled {
    background: rgba(255,255,255,0.12) !important;
    border: 1px solid rgba(255,255,255,0.4) !important;
    box-shadow: none !important;
    transition: background var(--transition-fast) !important;
}
body.homepage #header .button.circled:hover {
    background: rgba(8, 145, 178, 0.5) !important;
    transform: none;
}

/* Alt button (secondary) */
.button.alt,
button.alt {
    background: var(--c-primary) !important;
}
.button.alt:hover,
button.alt:hover {
    background: #253761 !important;
}

/* =============================================
   NAVIGATION
   ============================================= */
#nav > ul > li > a,
#nav > ul > li > span {
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    letter-spacing: 0.06em;
}

/* Nav dropdown */
#nav > ul > li > ul {
    background: var(--c-primary) !important;
    box-shadow: 0 6px 30px rgba(0,0,0,0.35) !important;
}

#nav > ul > li > ul > li > a {
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
    border-top: 1px solid rgba(255,255,255,0.07) !important;
    transition: color var(--transition-fast), background var(--transition-fast) !important;
}

#nav > ul > li > ul > li > a:hover {
    background: rgba(8, 145, 178, 0.2) !important;
    color: var(--c-accent-light) !important;
}

/* =============================================
   HEADER HERO — OVERLAY COLOR UPDATE
   (change #1C0920 purple-black → deep navy)
   ============================================= */
body.homepage #header:after,
body.no-sidebar-Other #header:after,
body.no-sidebar-NS #header:after,
body.no-sidebar-NLO #header:after,
body.no-sidebar-DH #header:after,
body.no-sidebar-Places #header:after {
    background: var(--c-overlay) !important;
}

/* Hero HR divider */
#header hr {
    border-top-color: rgba(8, 145, 178, 0.3) !important;
    border-bottom-color: rgba(8, 145, 178, 0.1) !important;
    box-shadow: none !important;
}
#header hr:before, #header hr:after {
    background: rgba(8, 145, 178, 0.25) !important;
}

/* Page title headings in non-homepage headers */
body.no-sidebar #header h1 a,
body.no-sidebar-NS #header h1 a,
body.no-sidebar-NLO #header h1 a,
body.no-sidebar-DH #header h1 a,
body.no-sidebar-Other #header h1 a,
body.no-sidebar-Places #header h1 a {
    font-family: var(--font-heading) !important;
    font-weight: 300 !important;
    letter-spacing: 0.06em;
}

/* =============================================
   CONTENT WRAPPERS
   ============================================= */
.wrapper {
    background: #ffffff !important;
}

/* Alternate (light) wrapper for home bio section */
.wrapper.style2 {
    background: #f7f8fc !important;
}

/* =============================================
   HOME PAGE — BIO SECTION HEADING
   Add a subtle cyan underline accent
   ============================================= */
section#banner_reset .wrapper article#main header h2 {
    position: relative;
    padding-bottom: 0.6em;
    font-weight: 300 !important;
}

section#banner_reset .wrapper article#main header h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2.5em;
    height: 3px;
    background: linear-gradient(90deg, var(--c-accent), var(--c-accent-light));
    border-radius: 3px;
}

/* "Please reach out!" heading */
.wrapper.style2 article#main header h2 {
    position: relative;
    padding-bottom: 0.6em;
    font-weight: 300 !important;
}

.wrapper.style2 article#main header h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2.5em;
    height: 3px;
    background: linear-gradient(90deg, var(--c-accent), var(--c-accent-light));
    border-radius: 3px;
}

/* =============================================
   PUBLICATION CAROUSEL CARDS
   ============================================= */

/* Force the reel into a flex row so every card stretches to the
   same height as the tallest sibling — the key equal-height fix. */
.carousel .reel {
    display: flex !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    white-space: normal !important;        /* override the base theme nowrap */
}

.carousel article {
    display: flex !important;
    flex-direction: column !important;
    flex-shrink: 0 !important;
    width: 18em !important;                /* match base theme card width   */
    margin: 0 0.5em !important;
    padding: 0 !important;                 /* kill base 3em bottom padding  */
    border-radius: var(--radius-card) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-card) !important;
    transition: transform var(--transition-std), box-shadow var(--transition-std) !important;
    background: #ffffff !important;
}

/* Neutralise base-theme negative left offset on images */
.carousel article .image {
    position: relative !important;
    left: 0 !important;
    width: 100% !important;
}

.carousel article:hover {
    transform: translateY(-5px) !important;
    box-shadow: var(--shadow-card-hover) !important;
}

/* Fixed-height image area — keeps all cards uniform.
   Book covers are portrait, so we use object-fit: contain to preserve
   the entire cover (title, art, author info) without cropping.            */
.carousel article .image.featured {
    height: 240px !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.5em !important;
}

.carousel article .image.featured img {
    width: auto !important;        /* let the natural aspect ratio drive width */
    max-width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    transition: transform 0.5s ease !important;
}

.carousel article:hover .image.featured img {
    transform: scale(1.04) !important;
}

/* Header + text area grows to fill remaining card height */
.carousel article header {
    flex: 1 !important;
    padding: 1.2em 0.5em 0 !important;
}

/* Card title links */
.carousel article header h3 a {
    font-family: var(--font-heading) !important;
    font-weight: 600 !important;
    font-size: 1.05em !important;
    line-height: 1.35em !important;
}

.carousel article header h3 a:hover {
    color: var(--c-accent) !important;
}

/* Card description text */
.carousel article p {
    font-family: var(--font-body) !important;
    font-size: 0.85em !important;
    color: #666 !important;
    line-height: 1.6em !important;
    padding: 0 0.5em 1.2em !important;     /* bottom breathing room */
}

/* Smaller image + narrower cards on mobile */
@media screen and (max-width: 736px) {
    .carousel article {
        width: 14em !important;            /* match base theme mobile width */
    }
    .carousel article .image.featured {
        height: 190px !important;
    }
}

/* Carousel navigation arrows */
.carousel .forward:before,
.carousel .backward:before {
    background-color: var(--c-accent) !important;
    opacity: 0.7 !important;
    transition: opacity var(--transition-fast) !important;
}

.carousel .forward:hover:before,
.carousel .backward:hover:before {
    opacity: 1 !important;
}

/* =============================================
   FOOTER
   ============================================= */
#footer {
    background: var(--c-footer-bg) !important;
}

#footer h3 {
    color: #ffffff !important;
    font-family: var(--font-heading) !important;
    letter-spacing: 0.08em;
}

#footer .contact p {
    color: rgba(255,255,255,0.7) !important;
    font-family: var(--font-body) !important;
}

#footer .copyright {
    color: rgba(255,255,255,0.4) !important;
}

/* Social icon hover → cyan */
#footer .icons li a:hover {
    color: var(--c-accent-light) !important;
    border-bottom-color: transparent !important;
}

/* =============================================
   INTERIOR PAGE BANNERS (style3 wrapper)
   ============================================= */
.wrapper.style3 {
    background: #ffffff !important;
}

/* Page body text — font/spacing only; colour inherits so dark-themed
   pages (e.g. Diffraction) keep their own intentional light palette. */
.wrapper.style3 p,
.wrapper.style3 p.smallphone2 {
    font-family: var(--font-body) !important;
    line-height: 1.9em !important;
}

/* =============================================
   HERO SCROLL ARROW BUTTON
   ============================================= */
@keyframes scroll-bounce {
    0%, 100% { transform: translateY(0);   opacity: 0.75; }
    50%       { transform: translateY(8px); opacity: 1;    }
}

.scroll-arrow-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 3.2em !important;
    height: 3.2em !important;
    border: 2px solid rgba(255,255,255,0.55) !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #ffffff !important;
    font-size: 1.1em !important;
    text-decoration: none !important;
    transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease !important;
    animation: scroll-bounce 2s ease-in-out infinite !important;
    box-shadow: none !important;
}

.scroll-arrow-btn i {
    font-size: 1em;
    line-height: 1;
}

.scroll-arrow-btn:hover {
    border-color: var(--c-accent-light) !important;
    background: rgba(8, 145, 178, 0.18) !important;
    color: var(--c-accent-light) !important;
    animation-play-state: paused !important;
}

/* =============================================
   BLOCKQUOTE / TIGHTP2 — Neuroscience page quote
   Prevents full-width justified italic text looking awkward
   ============================================= */
p.tightP2 {
    text-align: left !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 82% !important;
    padding: 1em 1.8em !important;
    border-left: 3px solid var(--c-accent) !important;
    background: rgba(8, 145, 178, 0.04) !important;
    border-radius: 0 0.4em 0.4em 0 !important;
    line-height: 1.85em !important;
    color: #4a5568 !important;
}

@media screen and (max-width: 736px) {
    p.tightP2 {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* =============================================
   RECOMMENDED READING — section divider headings
   The page reuses id="footer" on <section> elements as
   category dividers; keep their h2 text white and visible
   ============================================= */
#footer h2 {
    color: #ffffff !important;
}

/* =============================================
   FOCUS STYLES (accessibility)
   ============================================= */
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 3px;
    border-radius: 2px;
}

/* =============================================
   HR / DIVIDERS
   ============================================= */
hr {
    border-top-color: rgba(8, 145, 178, 0.15) !important;
    border-bottom-color: rgba(8, 145, 178, 0.08) !important;
}

/* =============================================
   RESPONSIVE TWEAKS
   ============================================= */
@media screen and (max-width: 736px) {
    #header header > p {
        font-size: 0.85em !important;
        letter-spacing: 0.12em !important;
    }

    .carousel article {
        border-radius: 0.4em !important;
    }
}


/* =============================================
   INLINE CV PAGE  (replaces the old iframe)
   ============================================= */

.cv-inline {
    max-width: 900px;
    margin: 0 auto;
    font-family: 'Lato', 'Inter', Helvetica, Arial, sans-serif;
    color: #333;
    line-height: 1.55;
    text-align: left !important;
}

/* Override theme's article.special centering */
article.special .cv-inline,
article.special .cv-inline * {
    text-align: left;
}

/* Reset theme's h1–h4 inside the CV */
.cv-inline h1, .cv-inline h2, .cv-inline h3, .cv-inline h4 {
    border: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* ---------- Header block ---------- */
.cv-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.4em;
    padding-bottom: 1.5em;
    margin-bottom: 1.5em;
    border-bottom: 3px solid #2E8B57;
}

.cv-headshot {
    flex-shrink: 0;
}

.cv-headshot img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.cv-identity {
    flex: 1;
    min-width: 200px;
}

.cv-name {
    font-family: 'Rokkitt', 'Raleway', Helvetica, Arial, sans-serif !important;
    font-size: 2.2em !important;
    font-weight: 700 !important;
    color: #222 !important;
    margin: 0 !important;
    line-height: 1.15 !important;
}

.cv-title {
    font-family: 'Rokkitt', 'Raleway', Helvetica, Arial, sans-serif !important;
    font-size: 1.3em !important;
    font-weight: 400 !important;
    color: #555 !important;
    margin: 0.15em 0 0 !important;
}

.cv-contact {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    font-size: 0.95em;
    color: #444;
    white-space: nowrap;
}

/* ---------- Sections ---------- */
.cv-section {
    margin-top: 1.8em;
    padding-top: 1.2em;
    border-top: 1px solid #ddd;
}

.cv-section-title {
    font-family: 'Rokkitt', 'Raleway', Helvetica, Arial, sans-serif !important;
    font-size: 1.65em !important;
    font-weight: 700 !important;
    font-style: italic !important;
    color: #2E8B57 !important;
    margin: 0 0 0.6em !important;
}

/* ---------- Entries ---------- */
.cv-entry {
    margin-bottom: 1.2em;
}

.cv-entry h4 {
    font-family: 'Rokkitt', 'Raleway', Helvetica, Arial, sans-serif !important;
    font-size: 1.25em !important;
    font-weight: 700 !important;
    color: #222 !important;
    margin: 0 0 0.15em !important;
}

.cv-role {
    font-family: 'Rokkitt', 'Raleway', Helvetica, Arial, sans-serif !important;
    font-size: 1.1em !important;
    color: #444 !important;
    margin: 0.1em 0 0 !important;
    line-height: 1.35 !important;
}

.cv-date {
    font-size: 0.92em !important;
    font-style: italic !important;
    color: #777 !important;
    margin: 0.1em 0 0.4em !important;
}

.cv-plain {
    font-size: 0.95em !important;
    color: #444 !important;
    margin: 0 0 0.6em !important;
    line-height: 1.5 !important;
}

/* ---------- Bullet lists ---------- */
.cv-bullets {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 0.6em !important;
}

.cv-bullets > li {
    position: relative;
    padding-left: 1.3em;
    margin-bottom: 0.3em;
    font-size: 0.95em;
    color: #444;
    line-height: 1.45;
}

.cv-bullets > li::before {
    content: "\25B8";          /* small right-pointing triangle */
    position: absolute;
    left: 0;
    color: #2E8B57;
    font-size: 0.85em;
    top: 0.1em;
}

/* Nested sub-bullets */
.cv-bullets ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0.25em 0 0.25em 1.2em !important;
}

.cv-bullets ul li {
    position: relative;
    padding-left: 1.3em;
    margin-bottom: 0.2em;
    font-size: 0.95em;
    color: #555;
    line-height: 1.4;
}

.cv-bullets ul li::before {
    content: "\25E6";          /* white bullet */
    position: absolute;
    left: 0;
    color: #2E8B57;
    font-size: 0.85em;
    top: 0.1em;
}

/* Publication list items — tighter spacing */
.cv-pubs li {
    margin-bottom: 0.45em !important;
    font-size: 0.9em !important;
}

.cv-pubs li em {
    font-style: italic;
}

.cv-pubs li strong {
    font-weight: 700;
}

/* ---------- Mobile responsive ---------- */
@media screen and (max-width: 600px) {
    .cv-header {
        flex-direction: column;
        text-align: center;
        gap: 0.8em;
    }

    .cv-headshot img {
        width: 80px;
        height: 80px;
        margin: 0 auto;
    }

    .cv-identity {
        min-width: 0;
        text-align: center;
    }

    .cv-name {
        font-size: 1.6em !important;
    }

    .cv-title {
        font-size: 1.1em !important;
    }

    .cv-contact {
        align-items: center;
        font-size: 0.9em;
    }

    .cv-section-title {
        font-size: 1.35em !important;
    }

    .cv-entry h4 {
        font-size: 1.1em !important;
    }

    .cv-role {
        font-size: 1em !important;
    }
}

/* =============================================
   SAFARI CENTERING FIX FOR <center>-WRAPPED IMAGES
   ---------------------------------------------
   The Digital Holography (and a few other) pages use the deprecated
   <center> tag to center figure images and GIFs. Combined with the base
   theme's `.image { display: inline-block }` + `.image img { display: block;
   width: 100% }` rules, Safari resolves the sizing differently than Chrome
   and leaves GIFs left-aligned.

   The rules below force a predictable, block-level centered layout that
   works identically in Chrome, Safari and Firefox.
   ============================================= */
center {
    text-align: center;
}

center > a.image,
center > .image {
    display: block !important;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto !important;
    position: relative;
    left: 0 !important; /* neutralise .carousel article .image offset, if inherited */
}

center > a.image > img,
center > .image > img {
    display: block;
    width: auto;      /* honor the image's intrinsic width instead of 100% of parent */
    max-width: min(900px, 100%);  /* cap figures to a comfortable reading width on wide screens */
    height: auto;
    margin: 0 auto;   /* belt & suspenders centering */
}

/* Allow the multi-panel GIFs (which need extra width to be legible) a bit more room */
center > a.image > img[src*="amp_"],
center > a.image > img[src*="ILHalg"] {
    max-width: min(1100px, 100%);
}

/* =============================================
   HOME PAGE — tighten the gap between the bio
   paragraph ("...some of my featured work.")
   and the featured-work carousel below it.
   The Helios theme's wrapper.style2 adds a lot
   of bottom padding, and the carousel section
   adds its own top padding, so the visual gap
   ends up oversized. Collapse both sides.
   ============================================= */
section#banner_reset .wrapper.style2 {
    padding-bottom: 1em !important;
}

section#banner_reset article#main.container.special {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

section#banner_reset article#main.container.special header p:last-of-type {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

section#banner_reset + .carousel,
section#banner_reset ~ .carousel {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* =============================================
   HEADER SOCIAL ICONS (right side of nav bar)
   - The main menu <ul> is an inline-block centered
     inside #nav (which is position: absolute).
   - We pin a second <ul class="icons header-icons">
     to the right edge of #nav so it doesn't fight
     the centered menu for horizontal space.
   - Icons are shrunk vs. the footer icons so they
     sit nicely inline with nav-bar height.
   - Hidden below 980px so they don't clash with
     the mobile hamburger menu (they remain visible
     in the footer).
   ============================================= */
#nav > ul.header-icons {
    position: absolute;
    top: 50%;
    right: 1.25em;
    transform: translateY(-50%);
    display: flex;
    gap: 0.15em;
    margin: 0;
    padding: 0;
    font-size: 0.85em;
    /* No pill background: the horizontal nav divider lines have been
       suppressed above, so there's nothing to mask. Keeping the icons
       transparent preserves left/right symmetry with the main menu. */
    background: transparent;
    border: 0;
    line-height: 1;
    height: auto;
    z-index: 2;
}

#nav > ul.header-icons > li {
    display: inline-block;
    padding: 0;
    margin: 0;
    border: 0;
}

#nav > ul.header-icons > li > a {
    width: 2.2em;
    height: 2.2em;
    line-height: 2.2em;
    color: inherit;
    opacity: 0.75;
    transition: opacity 0.2s ease, color 0.2s ease, transform 0.2s ease;
    border-radius: 100%;
}

#nav > ul.header-icons > li > a:hover {
    opacity: 1;
    color: #ef8376;
    transform: translateY(-1px);
}

/* Hide header icons on narrow screens where the mobile menu takes over */
@media screen and (max-width: 980px) {
    #nav > ul.header-icons {
        display: none !important;
    }
}

/* =============================================
   NAV BAR HORIZONTAL DIVIDER LINES — cleanup
   - Helios's default #nav > ul uses two absolutely
     positioned pseudo-elements (:before / :after)
     that are 300% wide and sit at the vertical
     center of the menu.
   - Consequence: those lines visibly CUT THROUGH
     the menu item text ("Personal", "Utilities",
     etc.) and also through / next to the right-side
     icon pill, producing a left/right asymmetry
     once the icons were added.
   - Fix: suppress the horizontal lines entirely.
     The left/right vertical borders on #nav > ul
     remain, so the menu still feels framed — just
     without the noisy through-text rules.
   ============================================= */
#nav > ul:before,
#nav > ul:after {
    display: none !important;
}