/*
 * Sunlit Deep theme.
 *
 * Loaded after core's stylesheets, including the default theme's styles.css,
 * which every site carries, so this overrides its grey body, headings and nav
 * bar rather than starting from nothing.
 *
 * The water is canvas.sd-sea, fixed behind the page at z-index -1 and drawn
 * by sunlit-deep.js. It sits above the root background, so the gradient on
 * <html> is what shows only when WebGL is not there to draw.
 *
 * Contrast is guaranteed, not hoped for. The water moves and its caustics
 * reach near white, so no text is ever drawn on it bare: header, hero, footer
 * and the depth gauge sit on --sd-scrim, 62% of the abyss, which keeps
 * --sd-foam at 4.94:1 even over pure white (4.5:1 is the bar for body text).
 * Everything else sits on .sd-panel, 95% pale, with --sd-ink at 13.9:1 or
 * better and --sd-link at 5.8:1 or better over any water. Change either
 * alpha and those numbers change with it.
 *
 * Motion: the water animates without end, so the header carries a Pause water
 * button (WCAG 2.2.2). It starts paused when the visitor's system asks for
 * reduced motion, and the choice is remembered.
 */

:root {
    --sd-sans: 'Familjen Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --sd-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

    --sd-surface: #49B8E6;   /* where the light comes in */
    --sd-shallow: #2E8CC4;
    --sd-deep: #0A2C52;
    --sd-abyss: #04111F;     /* the bottom of the page */
    --sd-foam: #EAF7FC;      /* text on the water */
    --sd-ink: #062033;       /* text on the panel */
    --sd-link: #0B5E8E;      /* links on the panel, 6:1 on it */
    --sd-panel: rgba(240, 248, 252, 0.95);
    --sd-scrim: rgba(4, 17, 31, 0.62);
    --sd-focus: #FFD166;     /* focus ring on the water: 11:1 on the scrim */
}

/* ------------------------------------------------------------ the water */

html {
    background: linear-gradient(var(--sd-shallow), var(--sd-deep) 55%, var(--sd-abyss)) fixed;
    background-color: var(--sd-deep);
}
body.sd {
    background: transparent;
    color: var(--sd-ink);
    font-family: var(--sd-sans);
    font-size: 18px;
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.sd-sea {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    display: block;
}

/* The depth you have sunk to, read off the scroll: 0 m to 200 m. */
.sd-depth {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--sd-scrim);
    font-family: var(--sd-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--sd-foam);
    font-variant-numeric: tabular-nums;
}
.sd-depth::before { content: ""; width: 14px; height: 1px; background: currentColor; }

/* ------------------------------------------------------------ base */

/* Core parks the skip link off-screen for good; it has to appear on focus. */
body.sd a.screen-reader:focus {
    left: 16px;
    top: 16px;
    z-index: 1000;
    padding: 10px 16px;
    border-radius: 8px;
    background: var(--sd-foam);
    color: var(--sd-ink);
    font-weight: 600;
}
body.sd :focus-visible { outline: 3px solid var(--sd-link); outline-offset: 2px; }
.sd-header :focus-visible,
.sd-footer :focus-visible { outline-color: var(--sd-focus); }

body.sd a { color: var(--sd-link); text-underline-offset: 4px; }
body.sd a:hover { color: var(--sd-ink); text-decoration-thickness: 2px; }
body.sd h1, body.sd h2, body.sd h3,
body.sd h4, body.sd h5 {
    font-family: var(--sd-sans);
    color: inherit;
    font-weight: 700;
    letter-spacing: -0.015em;
    text-transform: none;
    text-wrap: balance;
}

/* Bootstrap's container width, so module screens built for it still fit. */
.sd-wrap {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}

/* ------------------------------------------------------------ header */

.sd-header {
    color: var(--sd-foam);
    /* the scrim holds full strength behind every line of text, then fades out
       in the padding below it, where there is nothing to read. The fade is
       eased over several stops: a straight two-stop ramp ends in a visible
       edge against moving water. */
    --sd-fade: 64px;
    padding-bottom: var(--sd-fade);
    background: linear-gradient(to bottom,
        var(--sd-scrim) 0,
        var(--sd-scrim) calc(100% - var(--sd-fade)),
        rgba(4, 17, 31, 0.44) calc(100% - var(--sd-fade) * 0.75),
        rgba(4, 17, 31, 0.24) calc(100% - var(--sd-fade) * 0.5),
        rgba(4, 17, 31, 0.08) calc(100% - var(--sd-fade) * 0.25),
        rgba(4, 17, 31, 0) 100%);
}
body.sd-home .sd-header { --sd-fade: 140px; }
.sd-header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 32px;
    min-height: 72px;
}
body.sd .sd-brand,
body.sd .sd-brand:visited {
    color: var(--sd-foam);
    text-decoration: none;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
body.sd .sd-brand:hover { color: #ffffff; }
/* the home page's hero carries the name, so the corner just says where you are */
body.sd-home .sd-brand {
    font-family: var(--sd-mono);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* The framework's nav is a Bootstrap navbar with an inline grey background;
   on the water it is a plain row of links. */
.sd-nav { flex: 1 1 auto; min-width: 0; display: flex; justify-content: flex-end; }
.sd-nav .navbar {
    background: transparent !important;
    padding: 0;
    max-width: none;
    width: auto;
    margin: 0;
}
.sd-nav .navbar-nav { gap: 4px 26px; }
.sd-nav .nav-link,
.sd-nav .nav-link:visited {
    color: var(--sd-foam) !important;
    font-weight: 500;
    font-size: 16px;
    padding: 10px 0 !important;
}
.sd-nav .nav-link:hover { text-decoration: underline; }
.sd-nav .navbar ul > li.nav-item { border-right: 0; }
.sd-nav nav ul { margin: 0 !important; padding-inline-start: 0; }
.sd-nav .nav-link.active,
.sd-nav .nav-link[aria-current="page"],
.sd-nav .active > .nav-link {
    text-decoration: underline;
    text-decoration-color: var(--sd-surface);
    text-decoration-thickness: 3px;
}
.sd-nav .dropdown-menu { border: 0; box-shadow: 0 8px 24px rgba(4, 17, 31, 0.3); }
.sd-nav .dropdown-menu .nav-link,
.sd-nav .dropdown-menu .dropdown-item { color: var(--sd-ink) !important; }

/* Pause water: a plain button, the same on every page. */
body.sd .sd-motion {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid rgba(234, 247, 252, 0.55);
    border-radius: 999px;
    background: transparent;
    color: var(--sd-foam);
    font: 500 14px/1 var(--sd-sans);
    cursor: pointer;
}
body.sd .sd-motion:hover { background: rgba(234, 247, 252, 0.12); border-color: var(--sd-foam); }
.sd-motion-icon { display: inline-flex; gap: 3px; }
.sd-motion-icon::before,
.sd-motion-icon::after { content: ""; width: 3px; height: 11px; background: currentColor; }
.sd-motion[data-state="paused"] .sd-motion-icon { gap: 0; }
.sd-motion[data-state="paused"] .sd-motion-icon::before {
    width: 0; height: 0; background: none;
    border-style: solid; border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent currentColor;
}
.sd-motion[data-state="paused"] .sd-motion-icon::after { display: none; }
.sd-motion[hidden] { display: none; }

/* The account badge: the far right of the header, opening downward.
   Centred with flex, NOT transform: a transformed element becomes the
   containing block for position:fixed descendants, and the notification and
   quick-link panels (Bootstrap offcanvas) live in here. */
.sd-account {
    position: relative;
    flex: 0 0 auto;
    min-height: 44px;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.sd-nav + .sd-motion,
.sd-nav ~ .sd-account,
.sd-motion:not([hidden]) + .sd-account { margin-left: 0; }
.sd-account:empty { display: none; }
.sd-account .user_menu { display: flex; align-items: center; z-index: 20; }
.sd-account .account-badge {
    position: static;
    background: transparent;
    border: 0;
    padding: 0;
}
.sd-account .account-badge .profile {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 6px;
}
.sd-account .account-badge .profile > * { float: none; }
.sd-account .site_notify_badge,
.sd-account .es_quicklinks { flex-direction: row; padding: 0 6px; font-size: 1.25em; }
.sd-account .notification-badge,
.sd-account .notification-badge *,
.sd-account .quicklink-badge,
.sd-account .quicklink-badge * { color: var(--sd-foam) !important; }
.sd-account .account-badge .profile .pic {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 0 2px var(--sd-foam);
}
.sd-account .account-nav {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 8px;
    width: 180px;
    background: var(--sd-deep);
    border: 0;
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 8px 24px rgba(4, 17, 31, 0.4);
}
.sd-account .account-nav li { border-radius: 6px; }
.sd-account .account-nav li:hover { background-color: var(--sd-shallow); }
.sd-account .account-nav a,
.sd-account .account-nav a:visited { color: #ffffff; text-decoration: none; }

/* ------------------------------------------------------------ home: hero */

.sd-hero {
    padding-bottom: 0;
    padding-top: clamp(48px, 10vh, 120px);
    color: var(--sd-foam);
}
body.sd h1.sd-hero-name {
    margin: 0;
    max-width: 12ch;
    font-weight: 700;
    font-size: clamp(56px, 10vw, 128px);
    line-height: 0.9;
    letter-spacing: -0.04em;
}
.sd-hero-lede {
    margin: 28px 0 0;
    max-width: 560px;
    font-size: clamp(20px, 2.4vw, 26px);
    line-height: 1.35;
    font-weight: 500;
}

/* ------------------------------------------------------------ the panel */

.sd-main { flex: 1 0 auto; padding-top: 16px; padding-bottom: 64px; }
.sd-panel {
    background: var(--sd-panel);
    border-radius: 18px;
    padding: clamp(24px, 4vw, 48px);
    box-shadow: 0 30px 80px -30px rgba(4, 17, 31, 0.6);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
            backdrop-filter: blur(14px) saturate(1.2);
}
body.sd .sd-page > h1 {
    margin: 0 0 24px;
    font-size: clamp(36px, 5vw, 60px);
    line-height: 1;
    letter-spacing: -0.03em;
}
.sd-page img { max-width: 100%; height: auto; }

/* ------------------------------------------------------------ footer */

body.sd .sd-footer { color: var(--sd-foam); padding: 0; text-align: left; background: var(--sd-scrim); }
.sd-footer-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px 24px;
    padding-top: 28px;
    padding-bottom: 48px;
    font-family: var(--sd-mono);
    font-size: 13px;
}
.sd-footer-main { flex: 1 1 320px; }
.sd-footer-name { display: block; margin-bottom: 6px; font-weight: 500; }
body.sd .sd-footer a,
body.sd .sd-footer a:visited { color: var(--sd-foam); }

/* ------------------------------------------------------------ phones */

@media (max-width: 640px) {
    .sd-wrap { padding-left: 16px; padding-right: 16px; }
    .sd-header-row { min-height: 60px; }
    .sd-nav { order: 3; flex-basis: 100%; justify-content: flex-start; }
    .sd-panel { border-radius: 14px; }
    /* on a phone the gauge would sit over the content; it is only a flourish */
    .sd-depth { display: none; }
}