/* ==========================================================================
   UBC Open Jupyter — landing page
   Styled to align with UBC's Common Look and Feel (CLF).
   Primary brand colour: UBC Blue #002145 · Accent link blue #0055B7
   ========================================================================== */

:root {
    --ubc-blue: #002145;
    --ubc-blue-accent: #0055b7;
    --ubc-steel: #3a7ca5; /* CLF unit-identifier band */
    --ubc-grey: #6b7178;
    --ubc-light-grey: #f2f2f2;
    /* CLF base font (matches UBC CLF / Bootstrap base) */
    --clf-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ----- Base typography ---------------------------------------------------- */
#home {
    margin-top: 0;
    font-family: var(--clf-font);
}

#home h4 {
    color: var(--ubc-blue);
    font-weight: 600;
}

[data-bs-theme="dark"] #home h4 {
    color: #ffffff;
}

#home a {
    color: var(--ubc-blue-accent);
}

#home a:hover {
    color: var(--ubc-blue);
}

[data-bs-theme="dark"] #home a {
    color: #6ea8fe;
}

/* ----- UBC CLF masthead --------------------------------------------------- */
/* Dark-blue signature bar with the UBC logo left-aligned to the content column. */
#ubc-header {
    background-color: var(--ubc-blue);
    padding: 18px 0;
}

#ubc-logo-link {
    display: inline-block;
    line-height: 0;
}

#ubc-logo {
    height: 62px;
    width: auto;
    max-width: 100%;
}

/* Steel-blue band carrying the CLF unit identifier, left-aligned below. */
#ubc-unit-band {
    background-color: var(--ubc-steel);
    padding: 12px 0;
}

/* UBC CLF unit identifier — names the site's owning unit in the masthead.
   Per CLF spec, unit-name text must always be Arial and white. */
#ubc7-unit-identifier {
    display: block;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1.3;
    color: #ffffff;
}

#ubc7-unit-identifier a {
    color: #ffffff;
    text-decoration: none;
}

#ubc7-unit-identifier a:hover {
    text-decoration: underline;
}

/* ----- Hero --------------------------------------------------------------- */
.hero {
    text-align: center;
    padding: 56px 16px 48px;
}

.hero-title {
    color: var(--ubc-blue);
    font-weight: 700;
    font-size: 2.6rem;
    line-height: 1.15;
    margin: 0 0 12px;
}

.hero-subtitle {
    color: var(--ubc-grey);
    font-size: 1.3rem;
    font-weight: 300;
    line-height: 1.5;
    max-width: 680px;
    margin: 0 auto;
}

[data-bs-theme="dark"] .hero-title {
    color: #ffffff;
}

[data-bs-theme="dark"] .hero-subtitle {
    color: #adb5bd;
}

.login-container {
    margin-top: 36px;
}

/* `#home #login-button` (0,2,0,0) intentionally out-specifies `#home a`
   (0,1,0,1) so the button label stays white, not the accent link colour. */
#home #login-button {
    background-color: var(--ubc-blue);
    border: 2px solid var(--ubc-blue);
    color: #ffffff;
    font-weight: 600;
    font-size: 1.15rem;
    padding: 14px 44px;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 33, 69, 0.2);
    transition: background-color 0.15s ease, border-color 0.15s ease,
        box-shadow 0.15s ease, transform 0.05s ease;
}

#home #login-button:hover,
#home #login-button:focus {
    background-color: var(--ubc-blue-accent);
    border-color: var(--ubc-blue-accent);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 85, 183, 0.35);
}

#home #login-button:active {
    transform: translateY(1px);
}

/* ----- FAQ / questions ---------------------------------------------------- */
.questions {
    margin-top: 12px;
}

.questions > div {
    margin-top: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid #e2e5e9;
}

[data-bs-theme="dark"] .questions > div {
    border-bottom-color: #343a40;
}

/* ----- Interface icons (Jupyter / Posit) --------------------------------- */
.interface-icons {
    margin-top: 40px;
    margin-bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
}

.interface-icons-label {
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ubc-grey);
}

[data-bs-theme="dark"] .interface-icons-label {
    color: #adb5bd;
}

.interface-icons a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--ubc-blue);
}

.interface-icons a:hover {
    opacity: 0.75;
}

.interface-logo {
    height: 60px;
    width: auto;
    display: block;
    margin-bottom: 8px;
}

.interface-icons p {
    font-size: 0.9rem;
    margin: 0;
    color: var(--ubc-blue);
}

[data-bs-theme="dark"] .interface-icons a,
[data-bs-theme="dark"] .interface-icons p {
    color: lightgray;
}

/* ==========================================================================
   UBC CLF footer — grey unit/licence band over the dark-blue UBC global footer.
   Footer colours are fixed (brand) and intentionally do NOT invert in dark mode,
   matching ubc.ca.
   ========================================================================== */
#ubc-footer {
    margin-top: 64px;
    font-family: var(--clf-font);
}

/* Blue accent links belong to the grey band only. Scoping this to
   .ubc-footer-unit (class) instead of #ubc-footer (id) keeps the id selector
   from overriding the light link colours in the dark-blue global band below. */
.ubc-footer-unit a {
    color: var(--ubc-blue-accent);
}

/* ----- Grey band: operating unit + licensing ----------------------------- */
.ubc-footer-unit {
    background-color: #e6e6e6;
    color: #333333;
    padding: 32px 0;
}

.ubc-footer-unit .container {
    display: flex;
    flex-wrap: wrap;
    gap: 32px 48px;
    align-items: flex-start;
}

.ubc-footer-unit-info {
    flex: 1 1 340px;
}

.ubc-footer-license {
    flex: 1 1 320px;
    max-width: 460px;
    margin-left: auto;
}

.ubc-unit-name {
    font-weight: 700;
    color: var(--ubc-blue);
    margin: 0 0 8px;
    font-size: 1rem;
}

.ubc-unit-address {
    margin: 0 0 20px;
    line-height: 1.7;
    font-size: 0.95rem;
    color: #333333;
}

.ubc-footer-license p {
    margin: 0;
    line-height: 1.7;
    font-size: 0.95rem;
    color: #333333;
}

.ubc-back-to-top {
    margin: 0;
}

.ubc-back-to-top a {
    text-decoration: none;
}

.ubc-back-to-top a:hover {
    text-decoration: underline;
}

/* ----- Dark-blue band: UBC global footer --------------------------------- */
.ubc-footer-global {
    background-color: var(--ubc-blue);
    color: #dfe3e8;
    padding: 36px 0 24px;
}

.ubc-global-cols {
    display: flex;
    flex-wrap: wrap;
    gap: 32px 40px;
}

.ubc-global-brand {
    flex: 1 1 300px;
}

.ubc-footer-logo {
    max-width: 300px;
    width: 100%;
    height: auto;
}

.ubc-global-col {
    flex: 1 1 200px;
}

.ubc-global-col h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 12px;
}

.ubc-global-col h3 + ul {
    margin-bottom: 20px;
}

.ubc-global-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ubc-global-col li {
    margin-bottom: 8px;
}

.ubc-global-col a {
    color: #dfe3e8;
    text-decoration: none;
    font-size: 0.95rem;
}

.ubc-global-col a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* Utility links row */
.ubc-footer-legal {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: 28px;
    padding-top: 18px;
}

.ubc-footer-links {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 0;
    margin: 0;
    padding: 0;
    font-size: 0.9rem;
}

.ubc-footer-links li + li::before {
    content: "|";
    margin: 0 16px;
    color: rgba(255, 255, 255, 0.4);
}

.ubc-footer-links a {
    color: #cfd6dd;
    text-decoration: none;
}

.ubc-footer-links a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* The default JupyterHub site footer is replaced by the UBC footer above. */
.footer {
    display: none;
}