/*
 * University City Church of Christ — ChurchCRM Member Portal theme.
 *
 * Owned by the church, not by ChurchCRM: nothing in a ChurchCRM release
 * overwrites `Include/themes/universitycitychurchofchrist/`.
 *
 * The design is the congregation's new website (universitycitychurchofchrist.org,
 * the Next.js rebuild, 2026). Its tokens live in that project's
 * `src/app/globals.css`; the ones this theme uses are copied below as `--uccc-*`
 * and should be changed there and here together.
 *
 *   paper      #f8f5ee   the page ground          paper-deep  #efe9dc  page bands
 *   ink        #1d231f   text                     line        #d8d1c1  rules, borders
 *   pine-700   #2f5a3c   buttons, links           pine-900    #1b3325  top strip
 *   pine-950   #122219   footer                   leaf        #93c860  dark-mode primary
 *   marigold   #e2a93b   focus ring, badges       clay        #9a3f26  errors
 *
 *   Display: Newsreader 400/500.  Text: Hanken Grotesk (variable).
 *
 * Beyond the tokens, three templates (header strip, home welcome band,
 * footer) and the website's wordmarks in images/ — see README.md.
 *
 * Both typefaces are the website's own files (SIL Open Font License), served
 * from this theme's `fonts/` folder, so the portal makes no request to Google.
 *
 * The website has no dark mode; the dark block below is this theme's own,
 * built from the same pines with the website's leaf green as the action colour.
 *
 * Logical properties only — no `left`/`right`/`margin-left` — so the portal
 * stays correct in a right-to-left locale without a second stylesheet.
 */

/* ---------------------------------------------------------------------------
   Typefaces
   --------------------------------------------------------------------------- */

@font-face {
    font-family: "Newsreader";
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url("fonts/newsreader-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Newsreader";
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url("fonts/newsreader-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Newsreader";
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url("fonts/newsreader-vietnamese.woff2") format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: "Newsreader";
    font-style: italic;
    font-weight: 400 500;
    font-display: swap;
    src: url("fonts/newsreader-italic-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Newsreader";
    font-style: italic;
    font-weight: 400 500;
    font-display: swap;
    src: url("fonts/newsreader-italic-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Newsreader";
    font-style: italic;
    font-weight: 400 500;
    font-display: swap;
    src: url("fonts/newsreader-italic-vietnamese.woff2") format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: "Hanken Grotesk";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/hanken-grotesk-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Hanken Grotesk";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/hanken-grotesk-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Hanken Grotesk";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/hanken-grotesk-vietnamese.woff2") format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: "Hanken Grotesk";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/hanken-grotesk-cyrillic-ext.woff2") format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* Size-matched stand-ins while the real files load, so the text does not jump
   when they arrive. The metrics are the ones the website's build computed. */

@font-face {
    font-family: "Newsreader Fallback";
    src: local("Times New Roman");
    ascent-override: 69.68%;
    descent-override: 25.12%;
    line-gap-override: 0%;
    size-adjust: 105.48%;
}

@font-face {
    font-family: "Hanken Grotesk Fallback";
    src: local("Arial");
    ascent-override: 99.07%;
    descent-override: 30.02%;
    line-gap-override: 0%;
    size-adjust: 100.94%;
}

/* ---------------------------------------------------------------------------
   Design tokens — light
   --------------------------------------------------------------------------- */

:root {
    /* The website's palette. */
    --uccc-paper: #f8f5ee;
    --uccc-paper-deep: #efe9dc;
    --uccc-ink: #1d231f;
    --uccc-ink-soft: #3f4741;
    --uccc-muted: #5d655f;
    --uccc-line: #d8d1c1;
    --uccc-pine-950: #122219;
    --uccc-pine-900: #1b3325;
    --uccc-pine-800: #24442f;
    --uccc-pine-700: #2f5a3c;
    --uccc-pine-600: #3c6e49;
    --uccc-pine-200: #c9d8c6;
    --uccc-pine-100: #e3ebe0;
    --uccc-leaf: #93c860;
    --uccc-leaf-light: #a9d77c;
    --uccc-marigold: #e2a93b;
    --uccc-marigold-deep: #9a6512;
    --uccc-clay: #9a3f26;

    /* The portal's contract (docs/portal-themes.md). */
    --portal-primary: var(--uccc-pine-700);
    --portal-primary-contrast: var(--uccc-paper);
    --portal-accent: var(--uccc-marigold);
    --portal-surface: #fdfbf7;
    --portal-surface-alt: var(--uccc-paper);
    --portal-text: var(--uccc-ink);
    --portal-muted: var(--uccc-muted);
    --portal-border: var(--uccc-line);
    --portal-font-body: "Hanken Grotesk", "Hanken Grotesk Fallback", ui-sans-serif, system-ui, sans-serif;
    --portal-font-heading: "Newsreader", "Newsreader Fallback", "Iowan Old Style", Georgia, serif;
    --portal-radius: 0;
    --portal-header-bg: var(--uccc-paper);
    --portal-header-text: var(--uccc-ink);

    /*
     * The home page's welcome band is the website's plain page hero: a deeper
     * paper band, no photograph. To put one behind it, drop it in at
     * `images/hero.jpg` and change this to `url("images/hero.jpg")` — see
     * images/README.md.
     */
    --portal-hero-image: none;

    --portal-content-width: 84rem;
    --portal-gap: 1.25rem;

    /* Notices read like the website's form messages: a pale panel with a rule
       down its leading edge, rather than a solid block of colour. */
    --portal-success: var(--uccc-pine-100);
    --portal-success-contrast: var(--uccc-pine-900);
    --portal-warning: #f6e7c8;
    --portal-warning-contrast: var(--uccc-ink);
    --portal-danger: #f4e1da;
    --portal-danger-contrast: #5e2414;
    --portal-info: var(--uccc-paper);
    --portal-info-contrast: var(--uccc-ink);
    --portal-toast-width: 24rem;

    /* Used only by the rules in this file. */
    --uccc-primary-hover: var(--uccc-pine-800);
    --uccc-text-soft: var(--uccc-ink-soft);
    --uccc-eyebrow: var(--uccc-pine-600);
    --uccc-band: var(--uccc-paper-deep);
    --uccc-hover: var(--uccc-paper-deep);
    --uccc-field: #ffffff;
    --uccc-field-border: rgb(29 35 31 / 0.25);
    --uccc-error: var(--uccc-clay);
    --uccc-strip-bg: var(--uccc-pine-900);
    --uccc-strip-text: var(--uccc-paper);
    --uccc-footer-bg: var(--uccc-pine-950);
    --uccc-footer-text: rgb(248 245 238 / 0.85);
    --uccc-footer-quiet: rgb(248 245 238 / 0.65);
    --uccc-footer-rule: rgb(248 245 238 / 0.1);
    --uccc-footer-eyebrow: var(--uccc-pine-200);
    --uccc-logo: url("images/logo.png");
    --uccc-shadow: 0 24px 48px -24px rgb(29 35 31 / 0.35);
    --uccc-rule-success: var(--uccc-pine-600);
    --uccc-rule-warning: var(--uccc-marigold);
    --uccc-rule-danger: var(--uccc-clay);
    --uccc-rule-info: var(--uccc-pine-900);
}

/* ---------------------------------------------------------------------------
   Design tokens — dark
   Members choose light, dark or "follow my device"; in dark the portal puts
   `data-bs-theme="dark"` on <html>. Every token that changes is restated,
   because the `:root` block above would otherwise win.
   --------------------------------------------------------------------------- */

[data-bs-theme="dark"] {
    --portal-primary: var(--uccc-leaf);
    --portal-primary-contrast: var(--uccc-pine-950);
    --portal-accent: var(--uccc-marigold);
    --portal-surface: #182b1f;
    --portal-surface-alt: var(--uccc-pine-950);
    --portal-text: #efeae0;
    --portal-muted: #b3bdb2;
    --portal-border: #2e4536;
    --portal-header-bg: #0f1c14;
    --portal-header-text: #efeae0;

    --portal-success: #1f3a28;
    --portal-success-contrast: #e3ebe0;
    --portal-warning: #3a2f17;
    --portal-warning-contrast: #f6e7c8;
    --portal-danger: #3d1d14;
    --portal-danger-contrast: #f4e1da;
    --portal-info: #1b3325;
    --portal-info-contrast: #efeae0;

    --uccc-primary-hover: var(--uccc-leaf-light);
    --uccc-text-soft: #d5d6cc;
    --uccc-eyebrow: var(--uccc-leaf);
    --uccc-band: var(--uccc-pine-900);
    --uccc-hover: #213828;
    --uccc-field: #0f1c14;
    --uccc-field-border: rgb(239 234 224 / 0.28);
    --uccc-error: #ec9a80;
    --uccc-strip-bg: #0a130d;
    --uccc-strip-text: #efeae0;
    --uccc-footer-bg: #0a130d;
    --uccc-logo: url("images/logo-light.png");
    --uccc-shadow: 0 24px 48px -24px rgb(0 0 0 / 0.7);
    --uccc-rule-success: var(--uccc-leaf);
    --uccc-rule-info: var(--uccc-pine-200);
    --uccc-rule-danger: #ec9a80;
}

/* ---------------------------------------------------------------------------
   Bootstrap/Tabler
   A few portal pages still draw Tabler buttons, tabs, checkboxes and close
   buttons (the volunteering pages, mostly). Tabler's palette and font stay
   stock, as ChurchCRM's UI rules require; corners go square and links, borders
   and surfaces follow the portal tokens. The components the portal uses get
   the church's green through their own variables below.
   --------------------------------------------------------------------------- */

:root:root {
    --uccc-primary-rgb: 47, 90, 60;
    --uccc-primary-ring: rgba(var(--uccc-primary-rgb), 0.25);
    --tblr-border-radius-scale: 0;
    --tblr-link-color: var(--portal-primary);
    --tblr-link-color-rgb: var(--uccc-primary-rgb);
    --tblr-link-hover-color: var(--uccc-primary-hover);
    --tblr-link-hover-color-rgb: 36, 68, 47;
    --tblr-border-color: var(--portal-border);
    --tblr-bg-surface: var(--portal-surface);
}

:root[data-bs-theme="dark"] {
    --uccc-primary-rgb: 147, 200, 96;
    --tblr-link-hover-color-rgb: 169, 215, 124;
}

.portal-body .btn {
    --tblr-btn-font-family: var(--portal-font-body);
}

.portal-body .form-control,
.portal-body .form-select,
.portal-body .tooltip,
.portal-body .popover {
    font-family: var(--portal-font-body);
}

.portal-body .card {
    --tblr-card-color: var(--portal-text);
    color: var(--portal-text);
}

.portal-body .modal {
    --tblr-modal-color: var(--portal-text);
}

.portal-body .dropdown-menu {
    --tblr-dropdown-color: var(--portal-text);
    --tblr-dropdown-link-active-color: var(--portal-primary);
}

.portal-body .list-group {
    --tblr-list-group-color: var(--portal-text);
    --tblr-list-group-action-active-color: var(--portal-text);
}

.portal-body .btn-primary {
    --tblr-btn-color: var(--portal-primary-contrast);
    --tblr-btn-bg: var(--portal-primary);
    --tblr-btn-border-color: var(--portal-primary);
    --tblr-btn-hover-color: var(--portal-primary-contrast);
    --tblr-btn-hover-bg: var(--uccc-primary-hover);
    --tblr-btn-hover-border-color: var(--uccc-primary-hover);
    --tblr-btn-active-color: var(--portal-primary-contrast);
    --tblr-btn-active-bg: var(--uccc-primary-hover);
    --tblr-btn-active-border-color: var(--uccc-primary-hover);
    --tblr-btn-disabled-color: var(--portal-primary-contrast);
    --tblr-btn-disabled-bg: var(--portal-primary);
    --tblr-btn-disabled-border-color: var(--portal-primary);
}

.portal-body .btn-outline-primary {
    --tblr-btn-color: var(--portal-primary);
    --tblr-btn-border-color: var(--portal-primary);
    --tblr-btn-hover-color: var(--portal-primary-contrast);
    --tblr-btn-hover-bg: var(--portal-primary);
    --tblr-btn-hover-border-color: var(--portal-primary);
    --tblr-btn-active-color: var(--portal-primary-contrast);
    --tblr-btn-active-bg: var(--portal-primary);
    --tblr-btn-active-border-color: var(--portal-primary);
    --tblr-btn-disabled-color: var(--portal-primary);
    --tblr-btn-disabled-border-color: var(--portal-primary);
}

.portal-body .btn-link {
    color: var(--portal-primary);
}

.portal-body .btn-link:hover {
    color: var(--uccc-primary-hover);
}

.portal-body .form-check-input:checked,
.portal-body .form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--portal-primary);
    border-color: var(--portal-primary);
}

.portal-body .form-check-input:focus {
    border-color: var(--portal-primary);
    box-shadow: 0 0 0 0.25rem var(--uccc-primary-ring);
}

.portal-body .nav-link:focus-visible {
    box-shadow: none;
}

.portal-body .pagination {
    --tblr-pagination-color: var(--portal-text);
    --tblr-pagination-active-bg: var(--portal-primary);
    --tblr-pagination-active-border-color: var(--portal-primary);
    --tblr-pagination-focus-box-shadow: 0 0 0 0.25rem var(--uccc-primary-ring);
}

.portal-body .btn-close {
    --tblr-btn-close-focus-shadow: 0 0 0 0.25rem var(--uccc-primary-ring);
}

.portal-body .form-range::-webkit-slider-thumb {
    background-color: var(--portal-primary);
}

.portal-body .form-range::-moz-range-thumb {
    background-color: var(--portal-primary);
}

/* ---------------------------------------------------------------------------
   Base type
   The website reads at 17px with generous leading, sets every heading in
   Newsreader at weight 500, and keeps one focus ring everywhere: marigold.
   --------------------------------------------------------------------------- */

.portal-body {
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.portal-shell :is(h1, h2, h3, h4),
.portal-page-title,
.portal-card-title,
.portal-error-title,
.portal-calendar-detail-title {
    font-family: var(--portal-font-heading);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.012em;
    text-wrap: balance;
}

.portal-shell p {
    text-wrap: pretty;
}

.portal-shell a {
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
}

::selection {
    background-color: var(--uccc-pine-200);
    color: var(--uccc-pine-950);
}

.portal-shell :focus-visible,
.portal-dialog :focus-visible {
    outline: 3px solid var(--uccc-marigold);
    outline-offset: 3px;
}

/* The wide-tracked small capitals the website uses over every heading — an
   echo of "CHURCH OF CHRIST" in the logo. */
.uccc-eyebrow {
    margin: 0;
    color: var(--uccc-eyebrow);
    font-family: var(--portal-font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    line-height: 1.2;
    text-transform: uppercase;
}

.portal-container {
    padding-inline: 1.25rem;
}

@media (min-width: 768px) {
    .portal-container {
        padding-inline: 2.5rem;
    }
}

/* ---------------------------------------------------------------------------
   The top strip (partials/header.html.twig)
   The website's dark-green line above its header, here carrying the way back
   to the website and the office phone.
   --------------------------------------------------------------------------- */

.uccc-strip {
    background-color: var(--uccc-strip-bg);
    color: var(--uccc-strip-text);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.uccc-strip-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-block-size: 2.25rem;
    padding-block: 0.375rem;
}

.uccc-strip-label {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.uccc-strip-strong {
    font-weight: 600;
}

.uccc-strip-soft {
    opacity: 0.85;
}

.uccc-strip-links {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.uccc-strip a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgb(248 245 238 / 0.4);
    text-underline-offset: 4px;
}

.uccc-strip a:hover,
.uccc-strip a:focus-visible {
    color: inherit;
    text-decoration-color: currentcolor;
}

.uccc-strip-phone {
    display: none;
}

@media (min-width: 640px) {
    .uccc-strip-phone {
        display: list-item;
    }
}

/* ---------------------------------------------------------------------------
   Header
   Paper, a hairline under it, the website's wordmark on the leading edge.
   The wordmark is this theme's own file, drawn as the brand link's background;
   the church name stays in the link as its accessible name.
   --------------------------------------------------------------------------- */

.portal-header {
    border-block-end: 1px solid var(--portal-border);
}

/*
 * One line at every width, as on the website. On a phone the wordmark, the
 * menu button and "Hello <name>" only just fit side by side, so the wordmark
 * keeps its size and a long first name gives way to an ellipsis instead of
 * pushing everything onto a second line.
 */
.portal-header-inner {
    flex-wrap: nowrap;
    gap: 0.75rem;
    min-block-size: 4.25rem;
}

.portal-header-actions {
    gap: 0.25rem;
    min-inline-size: 0;
}

.portal-account {
    min-inline-size: 0;
}

.portal-account-toggle {
    max-inline-size: 100%;
}

.portal-brand {
    flex-shrink: 0;
    inline-size: 9.5rem;
    block-size: 1.71rem;
    background-image: var(--uccc-logo);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
}

[dir="rtl"] .portal-brand {
    background-position: right center;
}

.portal-brand:focus-visible {
    border-radius: 2px;
}

.portal-brand-logo {
    display: none;
}

.portal-brand-name {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (min-width: 640px) {
    .portal-brand {
        inline-size: 12.5rem;
        block-size: 2.25rem;
    }
}

@media (min-width: 1024px) {
    .portal-header-inner {
        min-block-size: 5rem;
    }

    .portal-brand {
        inline-size: 13.9rem;
        block-size: 2.5rem;
    }
}

.portal-account-toggle,
.portal-nav-toggle {
    border-radius: 0;
    font-size: 0.95rem;
    font-weight: 500;
}

.portal-account-toggle:hover,
.portal-account-toggle:focus-visible,
.portal-account-toggle[aria-expanded="true"],
.portal-nav-toggle:hover,
.portal-nav-toggle:focus-visible {
    background-color: var(--uccc-hover);
    color: var(--portal-header-text);
}

.portal-nav-toggle {
    font-size: 1.25rem;
}

.portal-account-menu {
    padding: 0.5rem;
    border-color: var(--portal-border);
    border-radius: 0;
    background-color: var(--portal-surface-alt);
    box-shadow: var(--uccc-shadow);
}

.portal-account-item {
    gap: 0.625rem;
    padding-inline: 0.75rem;
    font-size: 0.95rem;
}

.portal-account-item > i {
    inline-size: 1.1rem;
    color: var(--uccc-eyebrow);
    text-align: center;
}

.portal-account-item:hover,
.portal-account-item:focus-visible {
    background-color: var(--uccc-hover);
    color: var(--portal-primary);
}

/* ---------------------------------------------------------------------------
   Navigation
   On a phone, the website's menu: a stack of serif entries between hairlines.
   From the tablet up, its header links: plain text, the current page in green
   with a rule under it. The icons are left out on both, as the website has
   none.
   --------------------------------------------------------------------------- */

.portal-nav {
    background-color: var(--portal-header-bg);
}

.portal-nav-list {
    gap: 0;
    padding-block: 0.5rem 1rem;
}

.portal-nav-item + .portal-nav-item {
    border-block-start: 1px solid var(--portal-border);
}

.portal-nav-link {
    min-block-size: 3.5rem;
    padding-inline: 0;
    border-radius: 0;
    color: var(--portal-text);
    font-family: var(--portal-font-heading);
    font-size: 1.5rem;
}

.portal-nav-link > i {
    display: none;
}

.portal-nav-link:hover,
.portal-nav-link:focus-visible {
    background-color: transparent;
    color: var(--portal-primary);
}

.portal-nav-link.is-active {
    padding-inline-start: 0.875rem;
    border-inline-start: 3px solid var(--portal-primary);
    background-color: transparent;
    color: var(--portal-primary);
}

.portal-nav-badge,
.portal-member-badge {
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background-color: var(--uccc-marigold);
    color: var(--uccc-ink);
    font-family: var(--portal-font-body);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
}

@media (min-width: 768px) {
    .portal-nav {
        border-block-end: 1px solid var(--portal-border);
    }

    .portal-nav-list {
        gap: 0.25rem;
        padding-block: 0;
        margin-inline-start: -0.75rem;
    }

    .portal-nav-item + .portal-nav-item {
        border-block-start: 0;
    }

    .portal-nav-link {
        min-block-size: 3.25rem;
        padding-inline: 0.75rem;
        font-family: var(--portal-font-body);
        font-size: 0.95rem;
        font-weight: 500;
    }

    .portal-nav-link.is-active {
        padding-inline-start: 0.75rem;
        border-inline-start: 0;
        box-shadow: inset 0 -2px 0 var(--portal-primary);
    }
}

/* ---------------------------------------------------------------------------
   The home page's welcome band (templates/home.html.twig)
   The website's page hero without a photograph: eyebrow, a large serif
   greeting, one line of introduction, on the deeper paper.
   --------------------------------------------------------------------------- */

.uccc-hero {
    background-color: var(--uccc-band);
    background-image: var(--portal-hero-image);
    background-size: cover;
    background-position: center;
    border-block-end: 1px solid var(--portal-border);
}

.uccc-hero-inner {
    padding-block: 2.5rem 2.75rem;
}

.uccc-hero-title {
    margin: 1rem 0 0;
    max-inline-size: 20ch;
    color: var(--portal-text);
    font-size: clamp(2.6rem, 1.9rem + 3vw, 4.5rem);
    line-height: 1.02;
}

.uccc-hero-intro {
    margin: 1.25rem 0 0;
    max-inline-size: 42rem;
    color: var(--uccc-text-soft);
    font-size: 1.125rem;
}

@media (min-width: 768px) {
    .uccc-hero-inner {
        padding-block: 4rem;
    }

    .uccc-hero-intro {
        font-size: 1.25rem;
    }
}

/*
 * The band says hello and carries the page's one <h1>, so the core welcome
 * card under it — "Welcome, <name>", the family and the same introduction —
 * would only say it a second time. It is only ever on the home page, where
 * the band always is.
 */
.portal-home > .portal-welcome {
    display: none;
}

/* ---------------------------------------------------------------------------
   Page body, cards and titles
   --------------------------------------------------------------------------- */

.portal-main {
    padding-block: 2rem 3rem;
}

@media (min-width: 768px) {
    .portal-main {
        padding-block: 3rem 4.5rem;
    }
}

.portal-card {
    padding: 1.5rem;
    border-color: var(--portal-border);
    border-radius: 0;
    box-shadow: none;
}

@media (min-width: 768px) {
    .portal-card {
        padding: 2rem;
    }
}

.portal-card-grid > .portal-card {
    margin-block-end: 0;
}

.portal-card-grid {
    margin-block-end: var(--portal-gap);
}

.portal-page-title {
    color: var(--portal-text);
    font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
    line-height: 1.05;
}

.portal-card-title {
    margin-block-end: 0.75rem;
    color: var(--portal-text);
    font-size: 1.5rem;
}

/* The website's cards carry a serif title and nothing else; the icons are
   aria-hidden, so leaving them out loses nobody anything. */
.portal-card-title > i {
    display: none;
}

/* The volunteering pages head their sections with Tabler's `.h4`, which is
   sized for the admin side's sans; in Newsreader it wants more room. */
.portal-content .h4 {
    font-size: 1.375rem;
}

.portal-content .empty-title {
    font-family: var(--portal-font-heading);
    font-size: 1.5rem;
    font-weight: 500;
}

.portal-content .empty-icon {
    color: var(--uccc-eyebrow);
}

.portal-card-text {
    color: var(--uccc-text-soft);
}

.portal-card-lead {
    color: var(--portal-text);
}

/* The website's text link: green, a faint underline that firms up under the
   pointer, and an arrow that points the way the language reads. */
/* Stays inline-flex, as in core: a flex item drops the whitespace some
   templates leave before `</a>`, which would otherwise be underlined in front
   of the arrow. */
.portal-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-block-size: 44px;
    color: var(--portal-primary);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: color-mix(in oklab, currentcolor 30%, transparent);
    text-underline-offset: 0.35em;
}

.portal-card-link::after {
    content: "\2192";
    transition: transform 200ms ease;
}

[dir="rtl"] .portal-card-link::after {
    content: "\2190";
}

.portal-card-link:hover,
.portal-card-link:focus-visible {
    color: var(--uccc-primary-hover);
    text-decoration: underline;
    text-decoration-color: currentcolor;
}

.portal-card-link:hover::after {
    transform: translateX(2px);
}

[dir="rtl"] .portal-card-link:hover::after {
    transform: translateX(-2px);
}

.portal-welcome-family,
.portal-team-ministry {
    color: var(--portal-muted);
}

.portal-breadcrumb a {
    color: var(--portal-text);
    text-decoration: underline;
    text-decoration-color: color-mix(in oklab, currentcolor 30%, transparent);
    text-underline-offset: 4px;
}

.portal-breadcrumb a:hover {
    text-decoration-color: currentcolor;
}

/* The home page's calendar card. */

.portal-upcoming-item {
    gap: 0.15rem;
    padding-block: 0.75rem;
}

.portal-upcoming-title {
    font-family: var(--portal-font-heading);
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.25;
}

.portal-upcoming-when {
    color: var(--uccc-text-soft);
    font-size: 0.875rem;
}

.portal-upcoming-calendar {
    color: var(--uccc-eyebrow);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   Detail lists, members, avatars
   --------------------------------------------------------------------------- */

/* Label and value share one line height, so side by side their baselines
   meet even though the label is set smaller. */
.portal-detail-list dt,
.portal-detail-list dd {
    line-height: 1.75rem;
}

.portal-detail-list dt {
    color: var(--portal-muted);
    font-size: 0.875rem;
    font-weight: 500;
}

/* A page's own list (Profile, My Family) reads as a ledger: one hairline per
   row. The compact list inside a home card stays unruled. */
.portal-detail-list:not(.portal-card-details) dt {
    padding-block-start: 0.75rem;
}

.portal-detail-list:not(.portal-card-details) dd {
    margin: 0;
    padding-block: 0.15rem 0.75rem;
    border-block-end: 1px solid var(--portal-border);
}

.portal-detail-list:not(.portal-card-details) dd:last-of-type {
    border-block-end: 0;
}

@media (min-width: 768px) {
    .portal-detail-list:not(.portal-card-details) dt,
    .portal-detail-list:not(.portal-card-details) dd {
        padding-block: 0.75rem;
        border-block-end: 1px solid var(--portal-border);
    }

    .portal-detail-list:not(.portal-card-details) dt:last-of-type,
    .portal-detail-list:not(.portal-card-details) dd:last-of-type {
        border-block-end: 0;
    }
}

.portal-card-details dt > i {
    color: var(--uccc-eyebrow);
}

.portal-member {
    padding-block: 0.75rem;
}

.portal-member.is-self {
    border-radius: 0;
    background-color: var(--uccc-band);
}

.portal-member-fullname {
    font-family: var(--portal-font-heading);
    font-size: 1.2rem;
    font-weight: 500;
}

.portal-avatar-initials {
    background-color: var(--uccc-pine-100);
    color: var(--uccc-pine-800);
    font-family: var(--portal-font-heading);
    font-weight: 500;
}

[data-bs-theme="dark"] .portal-avatar-initials {
    background-color: var(--uccc-pine-800);
    color: var(--uccc-pine-100);
}

/* ---------------------------------------------------------------------------
   Buttons
   The website's two: solid pine, and an outlined one that fills with ink
   under the pointer. Square, 48px tall.
   --------------------------------------------------------------------------- */

.portal-button {
    min-block-size: 3rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.25;
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.portal-button:hover,
.portal-button:focus-visible {
    background-color: var(--uccc-primary-hover);
    filter: none;
}

.portal-button-quiet {
    border: 1px solid var(--uccc-field-border);
    background-color: transparent;
    color: var(--portal-text);
}

.portal-button-quiet:hover,
.portal-button-quiet:focus-visible {
    border-color: var(--portal-text);
    background-color: var(--portal-text);
    color: var(--portal-surface-alt);
}

.portal-body .btn {
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Forms
   The website's contact form: white fields with a soft ink border, the label
   above in semibold ink, a green ring when the field has focus.
   --------------------------------------------------------------------------- */

.portal-field-label {
    margin-block-end: 0.4rem;
    color: var(--portal-text);
    font-size: 0.95rem;
    font-weight: 600;
}

.portal-input,
.portal-body .form-control,
.portal-body .form-select {
    border-color: var(--uccc-field-border);
    border-radius: 0;
    background-color: var(--uccc-field);
    color: var(--portal-text);
}

.portal-input {
    min-block-size: 3rem;
    padding: 0.75rem 1rem;
}

.portal-input:hover {
    border-color: var(--portal-muted);
}

.portal-shell .portal-input:focus-visible,
.portal-dialog .portal-input:focus-visible,
.portal-body .form-control:focus,
.portal-body .form-select:focus {
    border-color: var(--portal-primary);
    outline: 2px solid var(--portal-primary);
    outline-offset: 0;
    box-shadow: none;
}

.portal-input.is-invalid {
    border-color: var(--uccc-error);
}

.portal-field-error {
    color: var(--uccc-error);
    font-weight: 600;
}

.portal-field-hint {
    color: var(--portal-muted);
}

.portal-choice input {
    accent-color: var(--portal-primary);
}

/* ---------------------------------------------------------------------------
   Notices, dialogs, tables, tabs
   --------------------------------------------------------------------------- */

.portal-flash {
    border-radius: 0;
    border-inline-start: 4px solid var(--uccc-rule-info);
    box-shadow: var(--uccc-shadow);
}

.portal-flash-success {
    border-inline-start-color: var(--uccc-rule-success);
}

.portal-flash-warning {
    border-inline-start-color: var(--uccc-rule-warning);
}

.portal-flash-danger {
    border-inline-start-color: var(--uccc-rule-danger);
}

.portal-flash-text {
    font-weight: 500;
}

.portal-dialog {
    border-radius: 0;
    background-color: var(--portal-surface-alt);
    box-shadow: var(--uccc-shadow);
}

.portal-dialog::backdrop {
    background-color: rgb(18 34 25 / 0.55);
}

.portal-table th,
.portal-table-cell::before,
.portal-calendar-detail-row dt {
    color: var(--uccc-eyebrow);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.16em;
}

/* On a phone each email is a block of eyebrow-over-value pairs, the way the
   website labels things, rather than a label squeezed beside a long date. */
@media (max-width: 767.98px) {
    .portal-table-cell {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.1rem;
        padding-block: 0.3rem;
    }

    .portal-table-cell::before {
        flex: none;
    }
}

.portal-email-kind,
.portal-email-status,
.portal-placeholder-badge,
.portal-calendar-legend-tag {
    border-radius: 999px;
}

.portal-email-body {
    border-radius: 0;
}

.portal-subnav-link {
    font-weight: 500;
}

.portal-subnav-link.is-active {
    color: var(--portal-primary);
    border-block-end-color: var(--portal-primary);
}

.portal-body .nav-tabs .nav-link.active {
    border-block-end-color: var(--portal-primary);
    color: var(--portal-primary);
}

/* ---------------------------------------------------------------------------
   Footer (templates/partials/footer.html.twig)
   The website's: deep pine, the stacked wordmark in paper, the address and
   the office's phone and email, and a quieter bar underneath.
   --------------------------------------------------------------------------- */

.portal-footer.uccc-footer {
    padding-block: 0;
    border-block-start: 0;
    background-color: var(--uccc-footer-bg);
    color: var(--uccc-footer-text);
}

.uccc-footer a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgb(248 245 238 / 0.3);
    text-underline-offset: 4px;
}

.uccc-footer a:hover,
.uccc-footer a:focus-visible {
    color: #f8f5ee;
    text-decoration-color: currentcolor;
}

.uccc-footer-main {
    display: grid;
    gap: 2.5rem;
    padding-block: 3.5rem;
}

.uccc-footer-logo {
    display: block;
    inline-size: 14rem;
    max-inline-size: 100%;
    block-size: auto;
}

.uccc-footer-address {
    margin: 2rem 0 0;
    font-style: normal;
}

.uccc-footer-address p,
.uccc-footer-list {
    margin: 0;
}

.uccc-footer .uccc-eyebrow {
    color: var(--uccc-footer-eyebrow);
}

.uccc-footer-list {
    display: grid;
    gap: 0.25rem;
    margin-block-start: 1rem;
    padding: 0;
    list-style: none;
}

.uccc-footer-list a {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.5rem;
    overflow-wrap: anywhere;
}

.uccc-footer-bar {
    border-block-start: 1px solid var(--uccc-footer-rule);
    color: var(--uccc-footer-quiet);
    font-size: 0.875rem;
}

.uccc-footer-bar-inner {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-block: 1.5rem;
}

.uccc-footer-bar p {
    margin: 0;
}

.uccc-footer-bar .portal-footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.uccc-footer-bar .portal-footer-social-link {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.5rem;
    color: inherit;
    font-size: inherit;
    text-decoration: none;
}

.uccc-footer-bar .portal-footer-social-link:hover,
.uccc-footer-bar .portal-footer-social-link:focus-visible {
    color: #f8f5ee;
    text-decoration: underline;
}

.uccc-visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (min-width: 768px) {
    .uccc-footer-main {
        grid-template-columns: 5fr 4fr 3fr;
        gap: 3rem;
        padding-block: 4.5rem;
    }

    .uccc-footer-bar-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* ---------------------------------------------------------------------------
   Motion
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .portal-card-link::after,
    .portal-button {
        transition: none;
    }
}