/* ==========================================================================
   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:  #6b7280;
    --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); }