/* ==========================================================================
   AcademicLab — UI Widgets
   Dark mode CSS variables, dark mode toggle, announcement banner,
   cookie notice, and scroll-to-top button.
   These are always enqueued sitewide.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Dark mode custom properties
   -------------------------------------------------------------------------- */

:root {
    --dm-bg:          #fff;
    --dm-surface:     #f9fafb;
    --dm-border:      #e8e8e8;
    --dm-text:        #333;
    --dm-text-muted:  #666;
    --dm-text-light:  #999;
    --dm-heading:     var(--uh-slate);
    --dm-card-bg:     #fff;
}

[data-theme="dark"] {
    --dm-bg:          #0f1117;
    --dm-surface:     #1a1d26;
    --dm-border:      #2a2d3a;
    --dm-text:        #e2e4ec;
    --dm-text-muted:  #9096a8;
    --dm-text-light:  #969cae; /* was #6b7280 — lightened so small text clears WCAG AA on dark surfaces */
    --dm-heading:     #e2e4ec;
    --dm-card-bg:     #1a1d26;
    color-scheme:     dark;
}

/* Apply dark mode bg/text globally */
body {
    background-color: var(--dm-bg) !important;
    color:            var(--dm-text) !important;
}

/* --------------------------------------------------------------------------
   2. Dark mode toggle button
   -------------------------------------------------------------------------- */

.al-dark-toggle {
    position:        fixed;
    bottom:          5.5rem;
    right:           2rem;
    z-index:         9990;
    background:      var(--dm-surface);
    border:          1px solid var(--dm-border);
    color:           var(--dm-text);
    cursor:          pointer;
    width:           44px;
    height:          44px;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1.1rem;
    box-shadow:      0 4px 12px rgba(0, 0, 0, .15);
    transition:      all .2s;
}

.al-dark-toggle:hover { transform: scale(1.1); }

@media print { .al-dark-toggle { display: none !important; } }

/* --------------------------------------------------------------------------
   3. Announcement banner
   -------------------------------------------------------------------------- */

.al-announcement-banner {
    position:    relative;
    z-index:     9999;
    display:     flex;
    align-items: center;
    justify-content: center;
    padding:     .65rem 3rem .65rem 1rem;
    gap:         1rem;
    transition:  max-height .3s ease, opacity .3s ease;
}

.al-announcement-banner.al-hidden { display: none; }

.al-announcement-banner__inner {
    display:         flex;
    align-items:     center;
    flex-wrap:       wrap;
    gap:             .75rem;
    justify-content: center;
}

.al-announcement-banner__text {
    margin:      0;
    font-size:   .88rem;
    font-weight: 500;
    color:       #fff;
    text-align:  center;
}

.al-announcement-banner__link {
    font-size:       .82rem;
    font-weight:     700;
    color:           #fff;
    border:          1px solid rgba(255, 255, 255, .7);
    padding:         .25rem .85rem;
    text-decoration: none;
    border-radius:   2px;
    white-space:     nowrap;
    transition:      background .15s;
}

.al-announcement-banner__link:hover { background: rgba(255, 255, 255, .2); }

.al-announcement-banner__close {
    position:   absolute;
    right:      .75rem;
    top:        50%;
    transform:  translateY(-50%);
    background: none;
    border:     none;
    color:      #fff;
    font-size:  1.4rem;
    cursor:     pointer;
    line-height: 1;
    opacity:    .75;
}

.al-announcement-banner__close:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   4. Cookie notice
   -------------------------------------------------------------------------- */

.al-cookie-notice {
    position:   fixed;
    bottom:     0;
    left:       0;
    right:      0;
    z-index:    99999;
    background: var(--uh-slate);
    border-top: 3px solid var(--uh-red);
    padding:    1rem 2rem;
    transform:  translateY(100%);
    transition: transform .4s ease;
}

.al-cookie-notice.al-visible { transform: translateY(0); }
.al-cookie-notice.al-hidden  { display: none; }

.al-cookie-notice__inner {
    max-width:       1200px;
    margin:          0 auto;
    display:         flex;
    align-items:     center;
    gap:             1.5rem;
    flex-wrap:       wrap;
    justify-content: space-between;
}

.al-cookie-notice__text {
    color:       rgba(255, 255, 255, .85);
    font-size:   .85rem;
    line-height: 1.6;
    margin:      0;
    flex:        1;
}

.al-cookie-notice__text a {
    color:           var(--uh-gold);
    text-decoration: underline;
}

.al-cookie-notice__accept {
    background:     var(--uh-red);
    color:          #fff;
    border:         none;
    padding:        .55rem 1.5rem;
    font-size:      .82rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: .5px;
    cursor:         pointer;
    flex-shrink:    0;
    transition:     background .2s;
}

.al-cookie-notice__accept:hover { background: var(--uh-gold); }

/* --------------------------------------------------------------------------
   5. Scroll-to-top button
   -------------------------------------------------------------------------- */

.al-scroll-top {
    position:        fixed;
    bottom:          2rem;
    right:           2rem;
    z-index:         9990;
    width:           44px;
    height:          44px;
    border-radius:   50%;
    background:      var(--uh-red);
    color:           #fff;
    border:          none;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       .9rem;
    box-shadow:      0 4px 14px rgba(0, 0, 0, .25);
    opacity:         0;
    transform:       translateY(16px);
    transition:      opacity .3s ease, transform .3s ease, background .2s;
}

.al-scroll-top.al-visible { opacity: 1; transform: translateY(0); }
.al-scroll-top:hover      { background: var(--uh-gold); }

/* ==========================================================================
   5. Dark mode — readability hardening (v2.2.2)
   Ensures all text stays legible in dark mode on surfaces whose background
   was hardcoded light in component CSS. Scoped entirely to [data-theme="dark"]
   so light mode is untouched. Intentional accent chips/badges/pills (which
   carry their OWN dark text on their OWN light background) are excluded so
   their contrast is preserved.
   ========================================================================== */

/* 5a. Generic content surfaces that hardcode a light background --------------
   Repaint common card/panel/section containers to the dark surface color and
   guarantee readable text. These selectors cover the theme's content wrappers;
   small accent elements are explicitly excluded in 5c. */
[data-theme="dark"] .al-event-card,
[data-theme="dark"] .al-event-secnav,
[data-theme="dark"] .al-home-rcard,
[data-theme="dark"] .al-home-news-card,
[data-theme="dark"] .al-card,
[data-theme="dark"] .al-panel,
[data-theme="dark"] .al-box,
[data-theme="dark"] .pub-entry,
[data-theme="dark"] .al-alum-row,
[data-theme="dark"] .al-section--surface {
    background-color: var(--dm-card-bg) !important;
    color:            var(--dm-text)    !important;
    border-color:     var(--dm-border)  !important;
}

/* 5b. Force readable text colors on anything inside a dark surface -----------
   Catches paragraphs, list items, spans, table cells, definition lists and
   captions that may have inherited or hardcoded dark text. Headings and muted
   text get their dedicated tokens. Links keep an accessible accent. */
[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] dd,
[data-theme="dark"] dt,
[data-theme="dark"] td,
[data-theme="dark"] th,
[data-theme="dark"] blockquote,
[data-theme="dark"] figcaption,
[data-theme="dark"] label,
[data-theme="dark"] .al-text,
[data-theme="dark"] .al-body,
[data-theme="dark"] .al-card p,
[data-theme="dark"] .al-card li {
    color: var(--dm-text) !important;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--dm-heading) !important;
}

[data-theme="dark"] small,
[data-theme="dark"] .al-meta,
[data-theme="dark"] .al-caption,
[data-theme="dark"] .al-date,
[data-theme="dark"] .al-muted,
[data-theme="dark"] time {
    color: var(--dm-text-muted) !important;
}

/* Default in-content links: lift to a high-contrast accent (lightened gold). */
[data-theme="dark"] .entry-content a:not(.button):not([class*="btn"]):not([class*="badge"]):not([class*="chip"]):not([class*="pill"]),
[data-theme="dark"] .al-content a:not(.button):not([class*="btn"]):not([class*="badge"]):not([class*="chip"]):not([class*="pill"]) {
    color: var(--uh-gold, #d8a84b);
}

/* Body copy inside the main content wrapper. */
[data-theme="dark"] .entry-content,
[data-theme="dark"] .entry-content p,
[data-theme="dark"] .entry-content li,
[data-theme="dark"] .entry-content td,
[data-theme="dark"] .entry-content blockquote {
    color: var(--dm-text) !important;
}

/* Lightened LinkedIn blue so the hover state clears AA on dark cards. */
[data-theme="dark"] .al-alum-row__linkedin:hover { color: #4aa8de; }

/* 5c. Preserve intentional accent elements ----------------------------------
   These deliberately use dark text on their own light background (badges,
   date chips, white pills/buttons, search highlights). Re-assert that pairing
   so the 5a/5b rules above never flip them to unreadable light-on-light. */
[data-theme="dark"] .al-event-card__datechip {
    background: #fff !important;
}
[data-theme="dark"] .al-event-card__datechip,
[data-theme="dark"] .al-event-card__datechip * {
    color: #111 !important;
}
[data-theme="dark"] .student-badge.phd,
[data-theme="dark"] .student-badge.ms,
[data-theme="dark"] .ochegs-btn--white,
[data-theme="dark"] .al-event-action--secondary,
[data-theme="dark"] .al-event-secnav__pill,
[data-theme="dark"] .al-type-tab--active,
[data-theme="dark"] .vh-highlight-red,
[data-theme="dark"] .vh-highlight-gold {
    /* keep their component-defined light bg + dark text (do not repaint) */
    color: #111 !important;
}
/* Category bars keep white text in dark mode (they have solid colored backgrounds) */
[data-theme="dark"] .al-event-hero__type,
[data-theme="dark"] .al-event-hero__type--symposium,
[data-theme="dark"] .al-event-hero__type--social,
[data-theme="dark"] .al-event-hero__type--seminar {
    color: #fff !important;
}
[data-theme="dark"] .pub-entry mark {
    background: #fff3a0 !important;
    color: #333 !important;
}

/* 5d. Form fields — make sure inputs are readable in dark mode --------------- */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: var(--dm-surface) !important;
    color:            var(--dm-text)    !important;
    border-color:     var(--dm-border)  !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--dm-text-light) !important;
}