/* =========================================================
   HSHS SITE UI v1.5.0
   Shared visual foundation for apus2hs.org
   ========================================================= */

:root {
    /* Brand */
    --hshs-navy-950: #071d38;
    --hshs-navy-900: #0b2341;
    --hshs-navy-800: #0b3768;
    --hshs-navy-700: #123f70;
    --hshs-blue-800: #084a78;
    --hshs-blue-700: #0b5d93;
    --hshs-blue-600: #147bd1;
    --hshs-blue-500: #0878c9;
    --hshs-cyan-500: #00a9ce;
    --hshs-teal-600: #0b7f86;
    --hshs-gold-600: #b77900;
    --hshs-gold-500: #d4a017;
    --hshs-gold-300: #f2c94c;

    /* Text */
    --hshs-text-strong: #0b2f57;
    --hshs-text: #263445;
    --hshs-text-muted: #5b7188;
    --hshs-text-soft: #718096;

    /* Surfaces */
    --hshs-surface: #ffffff;
    --hshs-surface-soft: #f8fbfd;
    --hshs-surface-blue: #edf7fd;
    --hshs-surface-blue-strong: #dfeff9;
    --hshs-surface-gold: #fff8e6;
    --hshs-surface-teal: #edf9f8;

    /* Borders */
    --hshs-border: #d7e4ef;
    --hshs-border-blue: #c9e0ef;
    --hshs-border-gold: #ead59a;

    /* Radius system — restrained/professional */
    --hshs-radius-lg: 14px;
    --hshs-radius-md: 12px;
    --hshs-radius-sm: 8px;
    --hshs-radius-xs: 6px;
    --hshs-radius-pill: 999px;

    /* Shadows */
    --hshs-shadow-xs: 0 1px 2px rgba(11, 35, 65, .05);
    --hshs-shadow-sm: 0 6px 18px rgba(11, 35, 65, .07);
    --hshs-shadow-md: 0 10px 28px rgba(11, 35, 65, .10);
    --hshs-shadow-lg: 0 16px 36px rgba(11, 35, 65, .16);

    /* Layout */
    --hshs-content-width: 1500px;
    --hshs-page-gutter: clamp(18px, 3vw, 42px);
    --hshs-section-gap: 42px;
    --hshs-card-gap: 24px;

    /* Typography
       UI/body/interface text = Montserrat
       Editorial/display moments = Cormorant Garamond
       Legacy aliases remain for backwards compatibility. */
    --hshs-font-ui: "Montserrat", Arial, sans-serif;
    --hshs-font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --hshs-font-sans: var(--hshs-font-ui);
    --hshs-font-serif: var(--hshs-font-display);

    /* Motion */
    --hshs-transition: 180ms ease;
}

/* =========================================================
   BASE / ACCESSIBILITY
   ========================================================= */

.hshs-ui-page,
.hshs-ui-page * {
    box-sizing: border-box;
}

.hshs-ui-page {
    width: 100%;
    max-width: var(--hshs-content-width);
    margin: 0 auto;
    padding: 0 0 60px;
    color: var(--hshs-text);
}

.hshs-ui-shell {
    width: 100%;
    max-width: var(--hshs-content-width);
    margin-left: auto;
    margin-right: auto;
}

.hshs-ui-page a:focus-visible,
.hshs-ui-page button:focus-visible,
.hshs-ui-page input:focus-visible,
.hshs-ui-page select:focus-visible,
.hshs-ui-page textarea:focus-visible {
    outline: 3px solid rgba(0, 169, 206, .28);
    outline-offset: 2px;
}

/* =========================================================
   TYPOGRAPHY SYSTEM
   ========================================================= */

.hshs-ui-type-ui {
    font-family: var(--hshs-font-ui) !important;
}

.hshs-ui-type-display {
    font-family: var(--hshs-font-display) !important;
}

/* Use for page/section titles that should read as interface rather than editorial. */
.hshs-ui-title--interface,
.hshs-ui-section-title--interface {
    font-family: var(--hshs-font-ui) !important;
    font-weight: 700;
    letter-spacing: -.015em;
}

/* =========================================================
   HERO SYSTEM
   ========================================================= */

.hshs-ui-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 100%;
    margin: 0 0 30px;
    padding: 42px 50px;
    border: 1px solid rgba(212, 160, 23, .34);
    border-radius: var(--hshs-radius-lg);
    background: linear-gradient(135deg, var(--hshs-navy-950) 0%, var(--hshs-navy-800) 100%);
    color: #fff;
    box-shadow: var(--hshs-shadow-lg);
}

.hshs-ui-hero::after {
    content: "";
    position: absolute;
    z-index: 0;
    right: 35px;
    top: 50%;
    width: 300px;
    height: 300px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.09) 0%, rgba(255,255,255,.035) 38%, transparent 70%);
    pointer-events: none;
}

.hshs-ui-hero > * {
    position: relative;
    z-index: 2;
}

.hshs-ui-hero--teal {
    background: linear-gradient(135deg, #073d55 0%, #087d8a 100%);
    border-color: rgba(0, 169, 206, .34);
}

.hshs-ui-hero--blue {
    background: linear-gradient(135deg, #082b53 0%, #0a6598 100%);
    border-color: rgba(0, 169, 206, .32);
}

.hshs-ui-hero--honors {
    background: linear-gradient(135deg, #071d38 0%, #0b3768 100%);
    border-color: rgba(212, 160, 23, .52);
}

.hshs-ui-hero--light {
    background: linear-gradient(135deg, #ffffff 0%, #eef8fc 58%, #e1f2fa 100%);
    border-color: var(--hshs-border-blue);
    color: var(--hshs-text-strong);
    box-shadow: var(--hshs-shadow-md);
}

.hshs-ui-hero--light::after {
    background: radial-gradient(circle, rgba(20,123,209,.10) 0%, rgba(20,123,209,.03) 40%, transparent 70%);
}

.hshs-ui-kicker {
    margin: 0 0 10px;
    color: var(--hshs-gold-500);
    font-family: var(--hshs-font-sans);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: .20em;
    text-transform: uppercase;
}

.hshs-ui-hero--light .hshs-ui-kicker {
    color: var(--hshs-blue-600);
}

.hshs-ui-title {
    margin: 0 0 12px;
    color: inherit;
    font-family: var(--hshs-font-serif);
    font-size: clamp(38px, 4vw, 48px);
    font-weight: 700;
    line-height: 1.08;
}

.hshs-ui-description {
    max-width: 860px;
    margin: 0;
    color: #eef7fb;
    font-size: 16px;
    line-height: 1.7;
}

.hshs-ui-hero--light .hshs-ui-description {
    color: #40566c;
}

.hshs-ui-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}


/* ---------------------------------------------------------
   STANDARD SPLIT HERO
   Visual reference: Community Forums hero.
   --------------------------------------------------------- */

.hshs-ui-hero--split {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
    align-items: stretch;
    min-height: 280px;
    padding: 0;
    border-color: var(--hshs-border-blue);
    background: linear-gradient(135deg, #ffffff 0%, #f7fbfe 58%, #edf7fd 100%);
    color: var(--hshs-text-strong);
    box-shadow: var(--hshs-shadow-md);
}

.hshs-ui-hero--split::after {
    display: none;
}

.hshs-ui-hero--split > * {
    position: relative;
    z-index: 1;
}

.hshs-ui-hero__copy {
    z-index: 3;
    min-width: 0;
    padding: 30px 12px 28px 32px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.hshs-ui-hero--split .hshs-ui-kicker {
    margin-bottom: 7px;
    color: var(--hshs-navy-700);
    font-size: 10px;
    letter-spacing: .22em;
}

.hshs-ui-hero--split h1,
.hshs-ui-hero--split .hshs-ui-title {
    margin: 0;
    color: #062d5d;
    font-family: var(--hshs-font-ui);
    font-size: clamp(34px, 3vw, 42px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -.025em;
}

.hshs-ui-hero__tagline {
    margin: 2px 0 10px;
    color: #0a5fc0;
    font-family: var(--hshs-font-ui);
    font-size: clamp(24px, 2.15vw, 30px);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -.02em;
}

.hshs-ui-hero--split .hshs-ui-description {
    max-width: 690px;
    margin: 0;
    color: #344f69;
    font-family: var(--hshs-font-ui);
    font-size: 13px;
    line-height: 1.55;
}

.hshs-ui-hero--split .hshs-ui-hero__actions {
    gap: 10px;
    margin-top: 20px;
}

.hshs-ui-btn--hero-primary,
.hshs-ui-btn--hero-secondary {
    min-height: 44px;
    padding: 10px 18px;
    border-radius: var(--hshs-radius-sm);
    font-size: 13px;
}

.hshs-ui-btn--hero-primary {
    background: #0d79f2;
    border-color: #0d79f2;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(13,121,242,.18);
}

.hshs-ui-btn--hero-primary:hover {
    background: #0869d6;
    border-color: #0869d6;
    color: #fff !important;
    box-shadow: 0 10px 20px rgba(13,121,242,.22);
}

.hshs-ui-btn--hero-secondary {
    background: rgba(255,255,255,.88);
    border-color: #79b5f6;
    color: #075bb8 !important;
}

.hshs-ui-btn--hero-secondary:hover {
    background: #f3f9ff;
    border-color: #4c9cf0;
    color: #064f9f !important;
}

.hshs-ui-hero__media {
    position: relative;
    z-index: 1;
    width: calc(100% + 120px);
    min-height: 280px;
    margin-left: -120px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.hshs-ui-hero__media-fade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        rgba(249,252,255,1) 0%,
        rgba(249,252,255,.98) 10%,
        rgba(249,252,255,.90) 22%,
        rgba(249,252,255,.72) 34%,
        rgba(249,252,255,.45) 46%,
        rgba(249,252,255,.18) 58%,
        rgba(249,252,255,0) 70%
    );
}

@media (max-width: 1100px) {
    .hshs-ui-hero--split {
        grid-template-columns: minmax(0, 1fr) minmax(330px, .76fr);
    }

    .hshs-ui-hero__media {
        width: calc(100% + 90px);
        margin-left: -90px;
    }
}

@media (max-width: 850px) {
    .hshs-ui-hero--split {
        grid-template-columns: 1fr;
    }

    .hshs-ui-hero__copy {
        padding: 26px 28px 22px;
    }

    .hshs-ui-hero__media {
        width: 100%;
        min-height: 205px;
        margin-left: 0;
    }

    .hshs-ui-hero__media-fade {
        background: linear-gradient(
            180deg,
            rgba(249,252,255,.95) 0%,
            rgba(249,252,255,.35) 18%,
            rgba(249,252,255,0) 42%
        );
    }
}

@media (max-width: 560px) {
    .hshs-ui-hero--split {
        min-height: 0;
        border-radius: 10px;
    }

    .hshs-ui-hero__copy {
        padding: 23px 19px;
    }

    .hshs-ui-hero--split .hshs-ui-kicker {
        font-size: 8px;
    }

    .hshs-ui-hero--split h1,
    .hshs-ui-hero--split .hshs-ui-title {
        font-size: 29px;
    }

    .hshs-ui-hero__tagline {
        font-size: 23px;
    }

    .hshs-ui-hero--split .hshs-ui-description {
        font-size: 12px;
    }

    .hshs-ui-hero--split .hshs-ui-hero__actions {
        align-items: stretch;
    }

    .hshs-ui-hero--split .hshs-ui-btn {
        width: 100%;
    }

    .hshs-ui-hero__media {
        min-height: 170px;
    }
}

/* =========================================================
   SECTIONS / HEADINGS
   ========================================================= */

.hshs-ui-section {
    margin-top: var(--hshs-section-gap);
}

.hshs-ui-section:first-child {
    margin-top: 0;
}

.hshs-ui-section-head {
    max-width: 860px;
    margin: 0 auto 24px;
    text-align: center;
}

.hshs-ui-section-head--left {
    margin-left: 0;
    text-align: left;
}

.hshs-ui-section-kicker {
    margin: 0 0 7px;
    color: var(--hshs-blue-600);
    font-family: var(--hshs-font-sans);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.hshs-ui-section-title {
    margin: 0;
    color: var(--hshs-navy-950);
    font-family: var(--hshs-font-serif);
    font-size: clamp(28px, 3vw, 36px);
    font-weight: 700;
    line-height: 1.14;
}

.hshs-ui-section-description {
    margin: 10px auto 0;
    color: var(--hshs-text-muted);
    font-size: 15px;
    line-height: 1.65;
}

.hshs-ui-section-head--left .hshs-ui-section-description {
    margin-left: 0;
}

.hshs-ui-section-divider {
    width: 70px;
    height: 3px;
    margin: 14px auto 0;
    border-radius: var(--hshs-radius-pill);
    background: var(--hshs-gold-500);
}

.hshs-ui-section-head--left .hshs-ui-section-divider {
    margin-left: 0;
}

/* =========================================================
   GRID SYSTEM
   ========================================================= */

.hshs-ui-grid {
    display: grid;
    gap: var(--hshs-card-gap);
}

.hshs-ui-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hshs-ui-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hshs-ui-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hshs-ui-grid--sidebar {
    grid-template-columns: minmax(0, 1fr) minmax(280px, .34fr);
}

/* =========================================================
   CARDS
   ========================================================= */

.hshs-ui-card {
    position: relative;
    overflow: hidden;
    background: var(--hshs-surface);
    border: 1px solid var(--hshs-border);
    border-radius: var(--hshs-radius-md);
    box-shadow: var(--hshs-shadow-sm);
}

.hshs-ui-card--padded {
    padding: 24px;
}

.hshs-ui-card--feature {
    box-shadow: var(--hshs-shadow-md);
}

.hshs-ui-card--blue {
    background: linear-gradient(135deg, #f7fbfe 0%, var(--hshs-surface-blue) 100%);
    border-color: var(--hshs-border-blue);
}

.hshs-ui-card--gold {
    background: linear-gradient(135deg, #fffdf7 0%, var(--hshs-surface-gold) 100%);
    border-color: var(--hshs-border-gold);
}

.hshs-ui-card--teal {
    background: linear-gradient(135deg, #ffffff 0%, var(--hshs-surface-teal) 100%);
    border-color: #cfe7e5;
}

.hshs-ui-card--interactive {
    transition: transform var(--hshs-transition), box-shadow var(--hshs-transition), border-color var(--hshs-transition);
}

.hshs-ui-card--interactive:hover {
    transform: translateY(-2px);
    border-color: #b8d6ea;
    box-shadow: var(--hshs-shadow-md);
}

.hshs-ui-card__header {
    padding: 20px 22px;
    border-bottom: 1px solid var(--hshs-border);
}

.hshs-ui-card__body {
    padding: 22px;
}

.hshs-ui-card__footer {
    padding: 16px 22px;
    border-top: 1px solid var(--hshs-border);
    background: var(--hshs-surface-soft);
}

.hshs-ui-card__title {
    margin: 0;
    color: var(--hshs-text-strong);
    font-size: 18px;
    font-weight: 700;
}

.hshs-ui-card__text {
    margin: 8px 0 0;
    color: var(--hshs-text-muted);
    line-height: 1.6;
}

/* =========================================================
   ICON BOXES
   ========================================================= */

.hshs-ui-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #eaf7ff;
    color: var(--hshs-blue-600);
    font-size: 20px;
}

.hshs-ui-icon--lg {
    width: 64px;
    height: 64px;
    font-size: 26px;
}

.hshs-ui-icon--navy {
    background: linear-gradient(135deg, var(--hshs-navy-950), #0a6598);
    color: #fff;
}

.hshs-ui-icon--gold {
    background: #fff4d6;
    color: var(--hshs-gold-600);
}

.hshs-ui-icon--teal {
    background: #e7f7f5;
    color: var(--hshs-teal-600);
}

/* =========================================================
   BUTTONS
   ========================================================= */

.hshs-ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 10px 16px;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: var(--hshs-radius-sm);
    font-family: var(--hshs-font-sans);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none !important;
    cursor: pointer;
    transition: transform var(--hshs-transition), background-color var(--hshs-transition), border-color var(--hshs-transition), box-shadow var(--hshs-transition), color var(--hshs-transition);
}

.hshs-ui-btn:hover {
    transform: translateY(-1px);
    text-decoration: none !important;
}

.hshs-ui-btn--primary {
    background: var(--hshs-navy-800);
    border-color: var(--hshs-navy-800);
    color: #fff !important;
}

.hshs-ui-btn--primary:hover {
    background: #0a4b82;
    border-color: #0a4b82;
    color: #fff !important;
    box-shadow: 0 6px 15px rgba(11,55,104,.18);
}

.hshs-ui-btn--secondary {
    background: var(--hshs-blue-600);
    border-color: var(--hshs-blue-600);
    color: #fff !important;
}

.hshs-ui-btn--secondary:hover {
    background: #0d69b6;
    border-color: #0d69b6;
    color: #fff !important;
}

.hshs-ui-btn--gold {
    background: var(--hshs-gold-500);
    border-color: var(--hshs-gold-500);
    color: var(--hshs-navy-900) !important;
}

.hshs-ui-btn--gold:hover {
    background: #c89512;
    border-color: #c89512;
    color: var(--hshs-navy-900) !important;
}

.hshs-ui-btn--outline {
    background: #fff;
    border-color: #bcd3e3;
    color: var(--hshs-navy-800) !important;
}

.hshs-ui-btn--outline:hover {
    background: #f3f9fd;
    border-color: #8dbbd9;
    color: var(--hshs-blue-600) !important;
}

.hshs-ui-btn--danger {
    background: #b42318;
    border-color: #b42318;
    color: #fff !important;
}

.hshs-ui-btn--compact {
    min-height: 34px;
    padding: 7px 12px;
    font-size: 12px;
}

.hshs-ui-btn--icon {
    width: 40px;
    padding-left: 0;
    padding-right: 0;
}

/* =========================================================
   STAT STRIP
   ========================================================= */

.hshs-ui-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    margin: 24px 0;
    border: 1px solid #c7deee;
    border-radius: var(--hshs-radius-md);
    background: linear-gradient(135deg, #eef7fd 0%, #e2f1fb 55%, #dceefa 100%);
    box-shadow: var(--hshs-shadow-sm);
}

.hshs-ui-stat {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    padding: 18px 20px;
    border-right: 1px solid rgba(163,198,220,.55);
}

.hshs-ui-stat:last-child {
    border-right: 0;
}

.hshs-ui-stat__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    color: var(--hshs-blue-600);
    box-shadow: var(--hshs-shadow-xs);
}

.hshs-ui-stat__value {
    display: block;
    color: var(--hshs-navy-950);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.15;
}

.hshs-ui-stat__label {
    display: block;
    margin-top: 3px;
    color: var(--hshs-text-muted);
    font-size: 12px;
    line-height: 1.3;
}

/* =========================================================
   TABS / FILTER BARS
   ========================================================= */

.hshs-ui-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    padding: 5px;
    border: 1px solid var(--hshs-border);
    border-radius: var(--hshs-radius-md);
    background: var(--hshs-surface-soft);
    scrollbar-width: thin;
}

.hshs-ui-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 9px 13px;
    border-radius: var(--hshs-radius-sm);
    color: #3e5871 !important;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
}

.hshs-ui-tab:hover,
.hshs-ui-tab.is-active {
    background: #fff;
    color: var(--hshs-blue-600) !important;
    box-shadow: var(--hshs-shadow-xs);
}

.hshs-ui-filterbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: 18px 0;
    padding: 12px 14px;
    border: 1px solid var(--hshs-border);
    border-radius: var(--hshs-radius-md);
    background: #fff;
    box-shadow: var(--hshs-shadow-xs);
}

/* =========================================================
   CALLOUTS / NOTICES / EMPTY STATES
   ========================================================= */

.hshs-ui-callout {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px 16px;
    border: 1px solid var(--hshs-border-blue);
    border-left: 4px solid var(--hshs-blue-600);
    border-radius: var(--hshs-radius-sm);
    background: #f5fbff;
    color: #334b62;
    line-height: 1.55;
}

.hshs-ui-callout--gold {
    border-color: var(--hshs-border-gold);
    border-left-color: var(--hshs-gold-500);
    background: var(--hshs-surface-gold);
}

.hshs-ui-callout--success {
    border-color: #a9dfbd;
    border-left-color: #26834d;
    background: #f1fbf5;
}

.hshs-ui-callout--warning {
    border-color: #ecd28a;
    border-left-color: #b77900;
    background: #fff9e9;
}

.hshs-ui-callout--danger {
    border-color: #efb4b0;
    border-left-color: #b42318;
    background: #fff5f4;
}

.hshs-ui-empty {
    padding: 34px 24px;
    border: 1px dashed #bfd1df;
    border-radius: var(--hshs-radius-md);
    background: var(--hshs-surface-soft);
    text-align: center;
    color: var(--hshs-text-muted);
}

.hshs-ui-empty__icon {
    margin-bottom: 10px;
    color: var(--hshs-blue-600);
    font-size: 28px;
}

.hshs-ui-empty h3 {
    margin: 0 0 7px;
    color: var(--hshs-text-strong);
    font-size: 18px;
}

.hshs-ui-empty p {
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.6;
}

/* =========================================================
   FORMS
   Opt-in classes only; does not restyle all MyBB fields.
   ========================================================= */

.hshs-ui-field {
    display: grid;
    gap: 6px;
}

.hshs-ui-label {
    color: var(--hshs-text-strong);
    font-size: 12px;
    font-weight: 700;
}

.hshs-ui-input,
.hshs-ui-select,
.hshs-ui-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 11px;
    border: 1px solid #c8d6e3;
    border-radius: var(--hshs-radius-sm);
    background: #fff;
    color: var(--hshs-text);
    font: inherit;
    transition: border-color var(--hshs-transition), box-shadow var(--hshs-transition);
}

.hshs-ui-input:focus,
.hshs-ui-select:focus,
.hshs-ui-textarea:focus {
    border-color: #69aee0;
    box-shadow: 0 0 0 3px rgba(20,123,209,.12);
    outline: 0;
}

.hshs-ui-textarea {
    min-height: 120px;
    resize: vertical;
}

/* =========================================================
   TABLES
   ========================================================= */

.hshs-ui-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--hshs-border);
    border-radius: var(--hshs-radius-md);
    background: #fff;
    box-shadow: var(--hshs-shadow-xs);
}

.hshs-ui-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--hshs-text);
}

.hshs-ui-table th {
    padding: 12px 14px;
    background: #eef6fb;
    color: var(--hshs-text-strong);
    font-size: 12px;
    font-weight: 800;
    text-align: left;
    border-bottom: 1px solid var(--hshs-border);
}

.hshs-ui-table td {
    padding: 13px 14px;
    border-bottom: 1px solid #e7eef4;
    vertical-align: top;
}

.hshs-ui-table tr:last-child td {
    border-bottom: 0;
}

/* =========================================================
   UTILITY CLASSES
   ========================================================= */

.hshs-ui-muted { color: var(--hshs-text-muted) !important; }
.hshs-ui-navy { color: var(--hshs-navy-800) !important; }
.hshs-ui-blue { color: var(--hshs-blue-600) !important; }
.hshs-ui-gold { color: var(--hshs-gold-600) !important; }
.hshs-ui-center { text-align: center !important; }
.hshs-ui-left { text-align: left !important; }
.hshs-ui-stack { display: grid; gap: 16px; }
.hshs-ui-cluster { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.hshs-ui-mt-0 { margin-top: 0 !important; }
.hshs-ui-mb-0 { margin-bottom: 0 !important; }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {
    .hshs-ui-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hshs-ui-grid--sidebar {
        grid-template-columns: 1fr;
    }

    .hshs-ui-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hshs-ui-stat:nth-child(2) {
        border-right: 0;
    }

    .hshs-ui-stat:nth-child(-n+2) {
        border-bottom: 1px solid rgba(163,198,220,.55);
    }
}

@media (max-width: 850px) {
    .hshs-ui-grid--2,
    .hshs-ui-grid--3 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    :root {
        --hshs-section-gap: 32px;
        --hshs-card-gap: 16px;
    }

    .hshs-ui-page {
        padding-bottom: 42px;
    }

    .hshs-ui-hero {
        margin-bottom: 24px;
        padding: 32px 24px;
        border-radius: var(--hshs-radius-md);
    }

    .hshs-ui-hero::after {
        right: -100px;
        width: 245px;
        height: 245px;
    }

    .hshs-ui-kicker {
        font-size: 11px;
        letter-spacing: .16em;
    }

    .hshs-ui-title {
        font-size: 34px;
    }

    .hshs-ui-description {
        font-size: 15px;
        line-height: 1.62;
    }

    .hshs-ui-grid--4 {
        grid-template-columns: 1fr;
    }

    .hshs-ui-stats {
        grid-template-columns: 1fr;
    }

    .hshs-ui-stat,
    .hshs-ui-stat:nth-child(2),
    .hshs-ui-stat:nth-child(-n+2) {
        border-right: 0;
        border-bottom: 1px solid rgba(163,198,220,.55);
    }

    .hshs-ui-stat:last-child {
        border-bottom: 0;
    }

    .hshs-ui-card--padded,
    .hshs-ui-card__body {
        padding: 19px;
    }
}

@media (max-width: 450px) {
    .hshs-ui-hero {
        padding: 28px 20px;
    }

    .hshs-ui-title {
        font-size: 31px;
    }

    .hshs-ui-hero__actions,
    .hshs-ui-cluster {
        align-items: stretch;
    }

    .hshs-ui-hero__actions .hshs-ui-btn {
        width: 100%;
    }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
    .hshs-ui-page *,
    .hshs-ui-page *::before,
    .hshs-ui-page *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* =========================================================
   MEMBERSHIP PILOT — v1.2.0
   Runtime styling for the existing membership.php ACP template.
   This section intentionally uses the template's existing classes so
   no permanent template edit is required.
   ========================================================= */

.hshs-membership-page,
.hshs-membership-page * {
    box-sizing: border-box;
}

.hshs-membership-page {
    width: 100%;
    max-width: var(--hshs-content-width);
    margin: 0 auto;
    padding: 0 0 56px;
    color: var(--hshs-text);
    font-family: var(--hshs-font-sans);
}

/* Membership adopts the shared Community-style split hero. */
.hshs-membership-page .hshs-page-hero {
    margin-bottom: 26px;
}

.hshs-membership-page .hshs-ui-hero__media--membership {
    background-image: url('../images/hshs_membership_hero.jpg');
    background-position: center center;
}

.hshs-membership-page .hshs-page-hero h1 {
    font-family: var(--hshs-font-ui);
}

/* Two membership paths. */
.hshs-membership-page .hshs-membership-main {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: 22px;
    align-items: stretch;
}

.hshs-membership-page .hshs-member-card {
    overflow: hidden;
    min-width: 0;
    background: #fff;
    border: 1px solid var(--hshs-border);
    border-radius: var(--hshs-radius-md) !important;
    box-shadow: var(--hshs-shadow-sm);
}

.hshs-membership-page .hshs-member-card-head {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 23px 24px;
    border-bottom: 1px solid var(--hshs-border-blue);
    background: linear-gradient(135deg, #f3faff 0%, #e2f2fc 100%);
}

.hshs-membership-page .hshs-member-card-head.community {
    border-bottom-color: var(--hshs-border-gold);
    background: linear-gradient(135deg, #fffdf8 0%, #fff3d7 100%);
}

.hshs-membership-page .hshs-member-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 82px;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--hshs-navy-950), #0a6598);
    color: var(--hshs-gold-300);
    font-size: 34px;
    box-shadow: 0 6px 16px rgba(11,55,104,.14);
}

.hshs-membership-page .hshs-member-icon.community {
    background: linear-gradient(135deg, var(--hshs-gold-500), var(--hshs-gold-300));
    color: var(--hshs-navy-900);
    box-shadow: 0 6px 16px rgba(183,121,0,.13);
}

.hshs-membership-page .hshs-member-card-head span {
    display: block;
    margin-bottom: 5px;
    color: var(--hshs-blue-600);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.hshs-membership-page .hshs-member-card-head.community span {
    color: var(--hshs-gold-600);
}

.hshs-membership-page .hshs-member-card-head h2 {
    margin: 0 0 7px;
    color: var(--hshs-navy-900);
    font-family: var(--hshs-font-ui);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.015em;
}

.hshs-membership-page .hshs-member-card-head p {
    margin: 0;
    color: #405469;
    font-size: 14px;
    line-height: 1.6;
}

.hshs-membership-page .hshs-requirement {
    display: grid;
    grid-template-columns: 54px minmax(0,1fr);
    gap: 16px;
    align-items: start;
    padding: 20px 24px;
    border-bottom: 1px solid #e5edf4;
}

.hshs-membership-page .hshs-requirement:last-child {
    border-bottom: 0;
}

.hshs-membership-page .hshs-requirement > i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #eaf6fd;
    color: var(--hshs-blue-600);
    font-size: 20px;
}

.hshs-membership-page .hshs-requirement.gold > i {
    background: #fff3d5;
    color: var(--hshs-gold-600);
}

.hshs-membership-page .hshs-requirement h3 {
    font-family: var(--hshs-font-ui);
    margin: 1px 0 7px;
    color: #0b5d93;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}

.hshs-membership-page .hshs-requirement.gold h3 {
    color: #946700;
}

.hshs-membership-page .hshs-requirement ul {
    margin: 0 0 0 18px;
    padding: 0;
}

.hshs-membership-page .hshs-requirement li {
    margin-bottom: 5px;
    color: #334457;
    font-size: 13px;
    line-height: 1.56;
}

.hshs-membership-page .hshs-requirement li:last-child {
    margin-bottom: 0;
}

.hshs-membership-page .hshs-membership-alert {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 20px 24px 24px;
    padding: 14px 15px;
    border: 1px solid var(--hshs-border-gold);
    border-left: 4px solid var(--hshs-gold-500);
    border-radius: var(--hshs-radius-sm) !important;
    background: var(--hshs-surface-gold);
    color: var(--hshs-navy-900);
    line-height: 1.5;
}

.hshs-membership-page .hshs-membership-alert i {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--hshs-gold-500);
    color: #fff;
    font-size: 15px;
}

/* Membership path / process cards. */
.hshs-membership-page .hshs-membership-path {
    margin: 34px 0 26px;
    text-align: center;
}

.hshs-membership-page .hshs-membership-path > p {
    margin: 0 0 20px;
    color: var(--hshs-navy-900);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .20em;
    text-transform: uppercase;
}

.hshs-membership-page .hshs-membership-path > p::after {
    content: "";
    display: block;
    width: 62px;
    height: 3px;
    margin: 11px auto 0;
    border-radius: var(--hshs-radius-pill);
    background: var(--hshs-gold-500);
}

.hshs-membership-page .hshs-path-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 20px;
}

.hshs-membership-page .hshs-path-grid > div {
    padding: 23px 21px;
    border: 1px solid var(--hshs-border);
    border-radius: var(--hshs-radius-md) !important;
    background: #fff;
    box-shadow: var(--hshs-shadow-sm);
    text-align: center;
}

.hshs-membership-page .hshs-path-grid i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin: 0 auto 13px;
    border-radius: 50%;
    background: #eaf6fd;
    color: var(--hshs-blue-600);
    font-size: 22px;
}

.hshs-membership-page .hshs-path-grid h3 {
    font-family: var(--hshs-font-ui);
    margin: 0 0 7px;
    color: var(--hshs-navy-900);
    font-size: 17px;
    font-weight: 700;
}

.hshs-membership-page .hshs-path-grid p {
    margin: 0;
    color: var(--hshs-text-muted);
    font-size: 13px;
    line-height: 1.58;
}

/* Closing CTA. */
.hshs-membership-page .hshs-membership-cta {
    display: grid;
    grid-template-columns: 1fr 1.25fr auto;
    align-items: center;
    gap: 26px;
    padding: 25px 30px;
    border: 1px solid rgba(212,160,23,.32);
    border-radius: var(--hshs-radius-lg) !important;
    background: linear-gradient(135deg, var(--hshs-navy-950), var(--hshs-navy-800));
    color: #fff;
    box-shadow: 0 12px 28px rgba(11,35,65,.14);
}

.hshs-membership-page .hshs-membership-cta > div:first-child p {
    margin: 0 0 5px;
    color: var(--hshs-gold-500);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.hshs-membership-page .hshs-membership-cta h2 {
    margin: 0;
    color: #fff;
    font-family: var(--hshs-font-display);
    font-size: 27px;
    line-height: 1.1;
}

.hshs-membership-page .hshs-membership-cta > p {
    margin: 0;
    color: #edf6fb;
    font-size: 13px;
    line-height: 1.6;
}

.hshs-membership-page .hshs-cta-buttons {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.hshs-membership-page .hshs-cta-buttons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 10px 15px;
    border: 1px solid var(--hshs-gold-500);
    border-radius: var(--hshs-radius-sm) !important;
    background: var(--hshs-gold-500);
    color: var(--hshs-navy-900) !important;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none !important;
    white-space: nowrap;
    transition: transform var(--hshs-transition), background-color var(--hshs-transition), border-color var(--hshs-transition), box-shadow var(--hshs-transition);
}

.hshs-membership-page .hshs-cta-buttons a:hover {
    transform: translateY(-1px);
    background: #c89512;
    border-color: #c89512;
    box-shadow: 0 5px 13px rgba(0,0,0,.12);
}

.hshs-membership-page .hshs-cta-buttons a.outline {
    border-color: rgba(255,255,255,.45);
    background: transparent;
    color: #fff !important;
}

.hshs-membership-page .hshs-cta-buttons a.outline:hover {
    border-color: rgba(255,255,255,.72);
    background: rgba(255,255,255,.09);
}

.hshs-membership-page .hshs-membership-contact {
    max-width: 880px;
    margin: 18px auto 0;
    padding: 11px 20px;
    border: 1px solid var(--hshs-border);
    border-radius: var(--hshs-radius-pill);
    background: #fff;
    color: #405469;
    box-shadow: var(--hshs-shadow-xs);
    text-align: center;
    font-size: 12px;
    line-height: 1.5;
}

.hshs-membership-page .hshs-membership-contact i {
    margin-right: 7px;
    color: var(--hshs-blue-600);
}

@media (max-width: 1000px) {
    .hshs-membership-page .hshs-membership-main,
    .hshs-membership-page .hshs-path-grid,
    .hshs-membership-page .hshs-membership-cta {
        grid-template-columns: 1fr;
    }

    .hshs-membership-page .hshs-membership-cta {
        text-align: center;
    }

    .hshs-membership-page .hshs-cta-buttons {
        justify-content: center;
    }
}

@media (max-width: 700px) {
    .hshs-membership-page {
        padding-bottom: 42px;
    }

    .hshs-membership-page .hshs-member-card-head {
        align-items: flex-start;
        gap: 15px;
        padding: 20px;
    }

    .hshs-membership-page .hshs-member-icon {
        flex-basis: 64px;
        width: 64px;
        height: 64px;
        font-size: 27px;
    }

    .hshs-membership-page .hshs-member-card-head h2 {
        font-size: 22px;
    }

    .hshs-membership-page .hshs-requirement {
        grid-template-columns: 46px minmax(0,1fr);
        gap: 13px;
        padding: 18px 20px;
    }

    .hshs-membership-page .hshs-requirement > i {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }

    .hshs-membership-page .hshs-membership-alert {
        margin: 18px 20px 20px;
    }

    .hshs-membership-page .hshs-membership-cta {
        padding: 23px 21px;
    }

    .hshs-membership-page .hshs-cta-buttons a {
        width: 100%;
    }

    .hshs-membership-page .hshs-membership-contact {
        border-radius: var(--hshs-radius-md);
    }
}

/* Keep every split-hero eyebrow aligned to the same top inset,
   regardless of how much text or how many actions the page contains. */
.hshs-ui-hero--split .hshs-ui-hero__copy {
    justify-content: flex-start;
}

/* =========================================================
   EVENTS MIGRATION
   HSHS Events Manager remains the functional source.
   Site UI supplies the shared page shell + presentation.
   ========================================================= */

.hshs-ui-hero__media--events {
    background-image: url('../images/hshs_events_hero.jpg');
    background-position: center center;
}

.hshs-calendar-page {
    width: 100% !important;
    max-width: var(--hshs-content-width) !important;
    margin: 0 auto 50px !important;
    padding: 0 !important;
    color: var(--hshs-text);
    font-family: var(--hshs-font-ui);
}

.hshs-calendar-page .hshs-event-admin-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: -8px 0 22px;
}

.hshs-calendar-page .hshs-event-admin-buttons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 9px 15px;
    border: 1px solid var(--hshs-gold-500);
    border-radius: var(--hshs-radius-sm);
    background: var(--hshs-gold-500);
    color: var(--hshs-navy-900) !important;
    font-family: var(--hshs-font-ui);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none !important;
    box-shadow: var(--hshs-shadow-xs);
    transition: transform var(--hshs-transition), background-color var(--hshs-transition), box-shadow var(--hshs-transition);
}

.hshs-calendar-page .hshs-event-admin-buttons a:hover {
    transform: translateY(-1px);
    background: #c89512;
    color: var(--hshs-navy-900) !important;
    box-shadow: var(--hshs-shadow-sm);
}

.hshs-calendar-page .hshs-calendar-shell,
.hshs-calendar-page .hshs-upcoming-section {
    overflow: hidden;
    border: 1px solid var(--hshs-border);
    border-radius: var(--hshs-radius-md) !important;
    background: #fff;
    box-shadow: var(--hshs-shadow-sm);
}

.hshs-calendar-page .hshs-calendar-toolbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--hshs-border);
    background: linear-gradient(135deg, #f8fcff 0%, var(--hshs-surface-blue) 100%);
}

.hshs-calendar-page .hshs-calendar-toolbar h2 {
    margin: 0;
    color: var(--hshs-navy-900);
    font-family: var(--hshs-font-ui);
    font-size: 22px;
    font-weight: 750;
    letter-spacing: -.015em;
    text-align: center;
}

.hshs-calendar-page .hshs-month-nav {
    display: flex;
    gap: 8px;
}

.hshs-calendar-page .hshs-calendar-toolbar > .hshs-month-nav:last-child {
    justify-content: flex-end;
}

.hshs-calendar-page .hshs-month-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 12px;
    border: 1px solid var(--hshs-navy-800);
    border-radius: var(--hshs-radius-sm);
    background: var(--hshs-navy-900);
    color: #fff !important;
    font-family: var(--hshs-font-ui);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none !important;
    transition: background-color var(--hshs-transition), transform var(--hshs-transition);
}

.hshs-calendar-page .hshs-month-nav a:hover {
    transform: translateY(-1px);
    background: var(--hshs-navy-800);
    color: #fff !important;
}

.hshs-calendar-page .hshs-calendar-weekdays {
    background: var(--hshs-navy-950);
}

.hshs-calendar-page .hshs-calendar-weekdays div {
    padding: 11px 10px;
    font-family: var(--hshs-font-ui);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .10em;
}

.hshs-calendar-page .hshs-cal-cell {
    min-height: 138px;
    padding: 10px;
    border-right: 1px solid #e6eef5;
    border-bottom: 1px solid #e6eef5;
    background: #fff;
}

.hshs-calendar-page .hshs-cal-cell.empty {
    background: #fafcfe;
}

.hshs-calendar-page .hshs-cal-cell.today {
    background: #fffaf0;
    box-shadow: inset 0 0 0 2px var(--hshs-gold-500);
}

.hshs-calendar-page .hshs-cal-day-number {
    margin-bottom: 7px;
    color: var(--hshs-navy-900);
    font-family: var(--hshs-font-ui);
    font-size: 13px;
    font-weight: 800;
}

.hshs-calendar-page .hshs-cal-event {
    gap: 7px;
    margin-bottom: 6px;
    padding: 7px 8px;
    border: 1px solid #dbeaf5;
    border-left: 3px solid var(--hshs-navy-800);
    border-radius: var(--hshs-radius-sm);
    background: #eef6fc;
    color: var(--hshs-navy-900) !important;
    box-shadow: none;
    transition: transform var(--hshs-transition), background-color var(--hshs-transition), border-color var(--hshs-transition);
}

.hshs-calendar-page .hshs-cal-event:hover {
    transform: translateY(-1px);
    border-color: #c6dfef;
    background: #e5f1f9;
    color: var(--hshs-navy-900) !important;
    text-decoration: none !important;
}

.hshs-calendar-page .hshs-cal-event-icon {
    color: var(--hshs-gold-600);
}

.hshs-calendar-page .hshs-cal-event-main strong {
    color: var(--hshs-navy-900);
    font-family: var(--hshs-font-ui);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
}

.hshs-calendar-page .hshs-cal-event-main small {
    margin-top: 3px;
    color: var(--hshs-text-muted);
    font-size: 10px;
    line-height: 1.3;
}

.hshs-calendar-page .hshs-upcoming-section {
    margin-top: 24px;
    padding: 20px 22px;
}

.hshs-calendar-page .hshs-upcoming-section h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 11px;
    color: var(--hshs-navy-900);
    font-family: var(--hshs-font-ui);
    font-size: 19px;
    font-weight: 750;
}

.hshs-calendar-page .hshs-upcoming-section h2 i {
    color: var(--hshs-blue-600);
    font-size: 16px;
}

.hshs-calendar-page .hshs-upcoming-list-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid #e7eef4;
}

.hshs-calendar-page .hshs-upcoming-list-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: var(--hshs-radius-sm);
    background: var(--hshs-navy-900);
    color: #fff;
    font-size: 17px;
}

.hshs-calendar-page .hshs-upcoming-list-item h3 {
    margin: 0 0 4px;
    color: var(--hshs-navy-900);
    font-family: var(--hshs-font-ui);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
}

.hshs-calendar-page .hshs-upcoming-list-item p {
    margin: 0;
    color: var(--hshs-text-muted);
    font-size: 11px;
    line-height: 1.5;
}

.hshs-calendar-page .hshs-upcoming-list-item > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid var(--hshs-navy-900);
    border-radius: var(--hshs-radius-sm);
    background: var(--hshs-navy-900);
    color: #fff !important;
    font-family: var(--hshs-font-ui);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
}

.hshs-calendar-page .hshs-upcoming-list-item > a:hover {
    background: var(--hshs-navy-800);
    color: #fff !important;
}

.hshs-calendar-page .hshs-calendar-empty {
    padding: 46px 24px;
    border-radius: var(--hshs-radius-md) !important;
    background: var(--hshs-surface-soft);
}

.hshs-calendar-page .hshs-calendar-empty i {
    color: var(--hshs-blue-600);
    font-size: 44px;
}

/* Event detail */
.hshs-ui-event-detail {
    margin-top: 0 !important;
    padding: 30px !important;
    border: 1px solid var(--hshs-border) !important;
    border-radius: var(--hshs-radius-md) !important;
    background: #fff !important;
    box-shadow: var(--hshs-shadow-sm) !important;
    font-family: var(--hshs-font-ui);
}

.hshs-ui-event-detail h1 {
    color: var(--hshs-navy-900) !important;
    font-family: var(--hshs-font-ui) !important;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.hshs-ui-event-detail .hshs-event-icon-large {
    width: 52px;
    height: 52px;
    border-radius: var(--hshs-radius-sm) !important;
    background: var(--hshs-navy-900);
    font-size: 22px;
}

.hshs-ui-event-detail .hshs-event-meta {
    gap: 12px;
}

.hshs-ui-event-detail .hshs-event-meta div {
    padding: 13px 14px;
    border: 1px solid var(--hshs-border);
    border-left: 3px solid var(--hshs-gold-500);
    border-radius: var(--hshs-radius-sm) !important;
    background: var(--hshs-surface-soft);
}

.hshs-ui-event-detail .hshs-event-actions a {
    border-radius: var(--hshs-radius-sm) !important;
    background: var(--hshs-navy-900);
    font-family: var(--hshs-font-ui);
}

/* Add/Edit event form */
.hshs-ui-events-form {
    margin-top: 0 !important;
    padding: 28px !important;
    border: 1px solid var(--hshs-border) !important;
    border-radius: var(--hshs-radius-md) !important;
    background: #fff !important;
    box-shadow: var(--hshs-shadow-sm) !important;
    font-family: var(--hshs-font-ui);
}

.hshs-ui-events-form h1,
.hshs-ui-events-manage h1 {
    color: var(--hshs-navy-900) !important;
    font-family: var(--hshs-font-ui) !important;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.hshs-ui-events-form .hshs-form-row label {
    color: var(--hshs-navy-900);
    font-size: 12px;
    font-weight: 700;
}

.hshs-ui-events-form .hshs-form-row input,
.hshs-ui-events-form .hshs-form-row select,
.hshs-ui-events-form .hshs-form-row textarea {
    padding: 10px 11px;
    border: 1px solid #cbd8e4;
    border-radius: var(--hshs-radius-sm) !important;
    background: #fff;
    color: var(--hshs-text);
    font-family: var(--hshs-font-ui);
}

.hshs-ui-events-form .hshs-icon-preview-badge {
    border-radius: var(--hshs-radius-sm) !important;
    background: var(--hshs-navy-900);
}

.hshs-ui-events-form .hshs-submit,
.hshs-ui-events-manage .hshs-admin-actions a {
    border-radius: var(--hshs-radius-sm) !important;
    background: var(--hshs-navy-900) !important;
    color: #fff !important;
    font-family: var(--hshs-font-ui);
}

/* Manage Events */
.hshs-ui-events-manage {
    margin-top: 0 !important;
    padding: 28px !important;
    border: 1px solid var(--hshs-border) !important;
    border-radius: var(--hshs-radius-md) !important;
    background: #fff !important;
    box-shadow: var(--hshs-shadow-sm) !important;
    font-family: var(--hshs-font-ui);
}

.hshs-ui-events-manage .hshs-events-table th {
    background: var(--hshs-navy-900);
    color: #fff;
    font-family: var(--hshs-font-ui);
    font-size: 11px;
    letter-spacing: .02em;
}

.hshs-ui-events-manage .hshs-events-table td {
    border-bottom-color: #e5edf4;
    color: var(--hshs-text);
}

.hshs-ui-events-manage .hshs-events-table a {
    color: var(--hshs-blue-600) !important;
}

@media (max-width: 900px) {
    .hshs-calendar-page .hshs-calendar-toolbar {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hshs-calendar-page .hshs-calendar-toolbar > .hshs-month-nav,
    .hshs-calendar-page .hshs-calendar-toolbar > .hshs-month-nav:last-child {
        justify-content: center;
    }

    .hshs-calendar-page .hshs-upcoming-list-item {
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .hshs-calendar-page .hshs-upcoming-list-item > a {
        margin-left: 56px;
    }
}

@media (max-width: 620px) {
    .hshs-calendar-page .hshs-upcoming-list-item {
        display: grid;
        grid-template-columns: 42px minmax(0,1fr);
    }

    .hshs-calendar-page .hshs-upcoming-list-item > a {
        grid-column: 2;
        justify-self: start;
        margin-left: 0;
    }

    .hshs-ui-event-detail,
    .hshs-ui-events-form,
    .hshs-ui-events-manage {
        padding: 20px !important;
    }
}



/* =========================================================
   BLOG MIGRATION — v1.4.0
   Publishing Suite remains the functional source.
   Site UI supplies shared presentation for Blog index,
   standard article pages, contributor dashboard, and editor.
   ========================================================= */

.hshs-ui-hero--blog {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 24px;
    max-width: var(--hshs-content-width);
}

.hshs-ui-hero__media--blog {
    overflow: hidden;
    background: linear-gradient(135deg, #eaf6fb 0%, #d8eef5 45%, #0c7185 100%);
}

.hshs-ui-hero__media--blog .hshs-ui-hero__media-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.hshs-ui-blog-media-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255,255,255,.92);
    background:
        radial-gradient(circle at 72% 34%, rgba(255,255,255,.18), transparent 24%),
        linear-gradient(135deg, #0b4167 0%, #0a7483 58%, #0a8e91 100%);
    font-size: 74px;
}

.hshs-ui-blog-toolbar,
.hshs-ui-blog-controls,
.hshs-ui-blog-grid {
    width: 100%;
    max-width: var(--hshs-content-width);
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
    font-family: var(--hshs-font-ui);
}

.hshs-ui-blog-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    padding: 11px 14px;
    border: 1px solid var(--hshs-border);
    border-radius: var(--hshs-radius-sm);
    background: #f8fbfd;
    color: var(--hshs-text-muted);
    box-shadow: var(--hshs-shadow-xs);
    font-size: 12px;
}

.hshs-ui-blog-toolbar strong {
    color: var(--hshs-text-strong);
    font-weight: 800;
}

.hshs-ui-blog-toolbar a {
    color: var(--hshs-blue-700) !important;
    font-weight: 700;
    text-decoration: none !important;
}

.hshs-ui-blog-controls {
    align-items: center !important;
    gap: 14px !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    padding: 12px 14px !important;
    border: 1px solid var(--hshs-border) !important;
    border-radius: var(--hshs-radius-md) !important;
    background: #fff !important;
    box-shadow: var(--hshs-shadow-xs);
}

.hshs-ui-blog-controls .hshs-blog-filters {
    gap: 7px;
}

.hshs-ui-blog-controls .hshs-blog-filter {
    min-height: 34px;
    box-sizing: border-box;
    padding: 7px 11px !important;
    border: 1px solid #bfd3e2 !important;
    border-radius: var(--hshs-radius-pill) !important;
    background: #fff !important;
    color: #35536e !important;
    font-family: var(--hshs-font-ui);
    font-size: 11px;
    font-weight: 700;
    box-shadow: none !important;
}

.hshs-ui-blog-controls .hshs-blog-filter:hover {
    border-color: #6caee0 !important;
    background: #f1f8fd !important;
    color: var(--hshs-blue-700) !important;
}

.hshs-ui-blog-controls .hshs-blog-filter.is-active {
    border-color: var(--hshs-blue-600) !important;
    background: var(--hshs-blue-600) !important;
    color: #fff !important;
}

.hshs-ui-blog-controls .hshs-blog-sort {
    font-family: var(--hshs-font-ui);
    font-size: 11px;
}

.hshs-ui-blog-controls .hshs-blog-sort label {
    color: var(--hshs-text-muted);
    font-weight: 700;
}

.hshs-ui-blog-controls .hshs-blog-sort select {
    min-height: 36px;
    padding: 7px 31px 7px 10px !important;
    border: 1px solid #bfd0df !important;
    border-radius: var(--hshs-radius-sm) !important;
    background-color: #fff !important;
    color: var(--hshs-text);
    font-family: var(--hshs-font-ui);
    font-size: 11px;
}

.hshs-ui-blog-grid {
    gap: 18px !important;
    margin-bottom: 28px !important;
}

.hshs-ui-blog-grid .hshs-blog-card {
    border: 1px solid var(--hshs-border) !important;
    border-radius: var(--hshs-radius-md) !important;
    background: #fff !important;
    box-shadow: var(--hshs-shadow-sm);
    transition: transform var(--hshs-transition), box-shadow var(--hshs-transition), border-color var(--hshs-transition);
}

.hshs-ui-blog-grid .hshs-blog-card:hover {
    transform: translateY(-2px);
    border-color: #c5d9e8 !important;
    box-shadow: var(--hshs-shadow-md);
}

.hshs-ui-blog-grid .hshs-blog-card-image {
    background: linear-gradient(135deg, #0b4167, #0a7483) !important;
}

.hshs-ui-blog-grid .hshs-blog-card-body {
    padding: 18px !important;
    font-family: var(--hshs-font-ui);
}

.hshs-ui-blog-grid .hshs-blog-category {
    color: #087f83 !important;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
}

.hshs-ui-blog-grid .hshs-blog-card h2 {
    margin: 2px 0 8px !important;
    color: var(--hshs-text-strong);
    font-family: var(--hshs-font-ui) !important;
    font-size: 19px !important;
    font-weight: 800;
    line-height: 1.28;
    letter-spacing: -.01em;
}

.hshs-ui-blog-grid .hshs-blog-card h2 a {
    color: var(--hshs-text-strong) !important;
    text-decoration: none !important;
}

.hshs-ui-blog-grid .hshs-blog-card h2 a:hover {
    color: var(--hshs-blue-700) !important;
}

.hshs-ui-blog-grid .hshs-blog-byline {
    color: #718296 !important;
    font-size: 11px !important;
}

.hshs-ui-blog-grid .hshs-blog-excerpt {
    color: #4c6175 !important;
    font-size: 13px;
    line-height: 1.58 !important;
}

.hshs-ui-blog-grid .hshs-blog-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    margin-top: auto;
    padding: 8px 14px !important;
    border-radius: var(--hshs-radius-sm) !important;
    background: var(--hshs-blue-700) !important;
    color: #fff !important;
    font-family: var(--hshs-font-ui);
    font-size: 11px;
    font-weight: 800;
    text-decoration: none !important;
    box-shadow: 0 5px 12px rgba(12,95,167,.12);
}

.hshs-ui-blog-grid .hshs-blog-button:hover {
    background: var(--hshs-blue-800) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

.hshs-ui-blog-grid .hshs-blog-featured {
    overflow: hidden;
}

.hshs-ui-blog-grid .hshs-publication-badge {
    font-family: var(--hshs-font-ui);
    font-size: 10px;
}

.hshs-ui-blog-grid .hshs-newsletter-card-mark,
.hshs-ui-blog-grid .hshs-newsletter-card-copy strong {
    font-family: var(--hshs-font-ui) !important;
}

.hshs-ui-blog-article {
    box-sizing: border-box;
    width: calc(100% - 32px);
    max-width: 1080px !important;
    margin: 26px auto 50px !important;
    padding: 30px 34px 34px;
    border: 1px solid var(--hshs-border);
    border-radius: var(--hshs-radius-lg);
    background: #fff;
    color: var(--hshs-text);
    box-shadow: var(--hshs-shadow-sm);
    font-family: var(--hshs-font-ui);
}

.hshs-ui-blog-article .hshs-article-category {
    color: #087f83 !important;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
}

.hshs-ui-blog-article h1 {
    margin: 8px 0 10px !important;
    color: var(--hshs-text-strong);
    font-family: var(--hshs-font-ui) !important;
    font-size: clamp(30px, 4vw, 42px) !important;
    font-weight: 800;
    line-height: 1.1 !important;
    letter-spacing: -.025em;
}

.hshs-ui-blog-article .hshs-article-meta {
    margin-bottom: 22px !important;
    color: var(--hshs-text-muted) !important;
    font-size: 12px;
}

.hshs-ui-blog-article .hshs-article-image {
    border-radius: var(--hshs-radius-md) !important;
}

.hshs-ui-blog-article .hshs-article-body {
    color: #2d4356;
    font-size: 15px !important;
    line-height: 1.78 !important;
}

.hshs-ui-blog-article .hshs-reactions {
    border-color: var(--hshs-border) !important;
    border-radius: var(--hshs-radius-md) !important;
    background: #f8fbfd !important;
}

.hshs-ui-blog-article .hshs-discussion {
    margin: 28px 0 !important;
    padding: 18px 20px !important;
    border: 1px solid #cfe5e7 !important;
    border-left: 4px solid #087f83 !important;
    border-radius: var(--hshs-radius-md) !important;
    background: #f3fbfb !important;
}

.hshs-ui-blog-article .hshs-blog-button {
    border-radius: var(--hshs-radius-sm) !important;
    background: var(--hshs-blue-700) !important;
    color: #fff !important;
}

.hshs-ui-blog-dashboard,
.hshs-ui-blog-editor {
    font-family: var(--hshs-font-ui);
}

.hshs-ui-blog-dashboard {
    max-width: var(--hshs-content-width);
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 28px 30px !important;
    border-radius: var(--hshs-radius-lg) !important;
    background: linear-gradient(135deg, #08365f 0%, #0b6e80 100%) !important;
}

.hshs-ui-blog-editor {
    width: 100%;
    max-width: var(--hshs-content-width);
    margin-left: auto !important;
    margin-right: auto !important;
}

.hshs-ui-blog-editor .hshs-panel {
    border-color: var(--hshs-border) !important;
    border-radius: var(--hshs-radius-md) !important;
    background: #fff;
    box-shadow: var(--hshs-shadow-xs);
}

.hshs-ui-blog-editor input[type="text"],
.hshs-ui-blog-editor input[type="url"],
.hshs-ui-blog-editor select,
.hshs-ui-blog-editor textarea {
    border: 1px solid #bfd0df;
    border-radius: var(--hshs-radius-sm);
    font-family: var(--hshs-font-ui);
}

@media (max-width: 800px) {
    .hshs-ui-blog-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .hshs-ui-blog-controls {
        align-items: stretch !important;
        flex-direction: column;
    }

    .hshs-ui-blog-controls .hshs-blog-sort {
        justify-content: space-between;
    }

    .hshs-ui-blog-article {
        width: calc(100% - 20px);
        padding: 24px 22px;
    }
}


/* v1.4.2 — Blog CTA button correction
   The v1.4.1 rules referenced missing blue token values, which caused the
   button fill to disappear while its shadow remained visible. Keep the CTA
   compact and explicit so it renders consistently over Publishing Suite CSS. */
.hshs-ui-blog-grid .hshs-blog-button,
.hshs-ui-blog-grid .hshs-blog-button:link,
.hshs-ui-blog-grid .hshs-blog-button:visited {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: flex-start !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 34px !important;
    min-height: 34px !important;

    margin-top: auto !important;
    padding: 0 12px !important;

    border: 1px solid #0b5d93 !important;
    border-radius: 8px !important;

    background: #0b5d93 !important;
    background-color: #0b5d93 !important;
    background-image: none !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    font-family: var(--hshs-font-ui) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 32px !important;
    letter-spacing: 0 !important;

    text-decoration: none !important;
    text-indent: 0 !important;
    text-shadow: none !important;
    white-space: nowrap !important;

    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;

    box-shadow: none !important;
    box-sizing: border-box !important;
}

.hshs-ui-blog-grid .hshs-blog-button:hover,
.hshs-ui-blog-grid .hshs-blog-button:focus,
.hshs-ui-blog-grid .hshs-blog-button:active {
    border-color: #084a78 !important;
    background: #084a78 !important;
    background-color: #084a78 !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-decoration: none !important;
    transform: translateY(-1px);
}


/* =========================================================
   CONNECT MIGRATION — v1.5.0
   HSHS Connect remains the functional source for networking,
   profiles, requests, volunteer tools, privacy, and Leaflet.
   Site UI supplies the shared visual language.
   ========================================================= */

.hshs-ui-connect,
.hshs-ui-connect * {
    box-sizing: border-box;
}

.hshs-ui-connect {
    width: 100% !important;
    max-width: var(--hshs-content-width) !important;
    margin: 22px auto 50px !important;
    color: var(--hshs-text) !important;
    font-family: var(--hshs-font-ui) !important;
}

.hshs-ui-hero--connect {
    margin-bottom: 18px;
}

.hshs-ui-hero__media--connect {
    background-image: url('../images/hshs_connect_hero.png');
    background-position: center center;
}

/* Connect's internal navigation becomes a compact shared control row. */
.hshs-ui-connect .hc-nav,
.hshs-ui-connect-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    margin: 0 0 14px !important;
}

.hshs-ui-connect .hc-nav a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 36px !important;
    padding: 7px 11px !important;
    border: 1px solid var(--hshs-border) !important;
    border-radius: var(--hshs-radius-sm) !important;
    background: #fff !important;
    color: var(--hshs-navy-800) !important;
    font-family: var(--hshs-font-ui) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: background-color var(--hshs-transition), border-color var(--hshs-transition), color var(--hshs-transition), transform var(--hshs-transition) !important;
}

.hshs-ui-connect .hc-nav a:hover,
.hshs-ui-connect .hc-nav a:focus {
    border-color: #9ec9e7 !important;
    background: #f2f9fe !important;
    color: var(--hshs-blue-700) !important;
    transform: translateY(-1px);
}

.hshs-ui-connect .hc-nav a.hc-nav-pending {
    border-color: #e6c66b !important;
    background: #fff8e8 !important;
    color: #72520a !important;
}

.hshs-ui-connect .hc-nav-count {
    min-width: 17px !important;
    height: 17px !important;
    padding: 0 5px !important;
    font-size: 9px !important;
}

/* Community-style Connect statistics strip. */
.hshs-ui-connect .hc-statrow,
.hshs-ui-connect-stats {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    overflow: hidden !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    border: 1px solid #b9d7ec !important;
    border-radius: var(--hshs-radius-md) !important;
    background: linear-gradient(135deg, #eef7fd 0%, #e2f1fb 55%, #dceefa 100%) !important;
    box-shadow: var(--hshs-shadow-sm) !important;
}

.hshs-ui-connect .hc-stat {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 42px 1fr !important;
    grid-template-rows: auto auto !important;
    column-gap: 12px !important;
    align-items: center !important;
    min-width: 0 !important;
    padding: 16px 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.hshs-ui-connect .hc-stat + .hc-stat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 1px;
    background: #c7dfef;
}

.hshs-ui-connect .hc-stat .hc-iconbubble {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #0d79f2 !important;
    box-shadow: 0 5px 14px rgba(20,123,209,.10) !important;
}

.hshs-ui-connect .hc-stat strong {
    grid-column: 2 !important;
    margin: 0 !important;
    color: var(--hshs-navy-950) !important;
    font-family: var(--hshs-font-ui) !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

.hshs-ui-connect .hc-stat span {
    grid-column: 2 !important;
    margin-top: 3px !important;
    color: #60768b !important;
    font-family: var(--hshs-font-ui) !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
}

/* Shared card geometry. */
.hshs-ui-connect .hc-card,
.hshs-ui-connect .hc-connection-summary > div,
.hshs-ui-connect .hc-person,
.hshs-ui-connect .hc-opp,
.hshs-ui-connect .hc-request-attention {
    border-color: var(--hshs-border) !important;
    border-radius: var(--hshs-radius-md) !important;
    background: #fff !important;
    box-shadow: var(--hshs-shadow-sm) !important;
}

.hshs-ui-connect .hc-card {
    padding: 18px !important;
}

.hshs-ui-connect .hc-card h2,
.hshs-ui-connect .hc-card h3,
.hshs-ui-connect .hc-person h3,
.hshs-ui-connect .hc-opp h3 {
    color: var(--hshs-text-strong) !important;
    font-family: var(--hshs-font-ui) !important;
    font-weight: 750 !important;
    letter-spacing: -.01em !important;
}

.hshs-ui-connect .hc-card h2 {
    font-size: 18px !important;
    line-height: 1.25 !important;
}

.hshs-ui-connect .hc-card h3,
.hshs-ui-connect .hc-person h3,
.hshs-ui-connect .hc-opp h3 {
    font-size: 14px !important;
    line-height: 1.3 !important;
}

.hshs-ui-connect .hc-meta,
.hshs-ui-connect .hc-help {
    color: var(--hshs-text-muted) !important;
    font-family: var(--hshs-font-ui) !important;
}

/* Ways-to-Connect/member rows. */
.hshs-ui-connect .hc-list {
    gap: 10px !important;
}

.hshs-ui-connect .hc-person {
    gap: 12px !important;
    padding: 13px !important;
    transition: transform var(--hshs-transition), border-color var(--hshs-transition), box-shadow var(--hshs-transition) !important;
}

.hshs-ui-connect a.hc-person:hover {
    transform: translateY(-1px);
    border-color: #b8d5e8 !important;
    box-shadow: var(--hshs-shadow-md) !important;
}

.hshs-ui-connect .hc-person .hc-iconbubble {
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    border-radius: var(--hshs-radius-sm) !important;
    background: #eaf7fb !important;
    color: #087f83 !important;
}

/* Buttons across Connect adopt Site UI proportions without changing behavior. */
.hshs-ui-connect .hc-btn {
    min-height: 36px !important;
    padding: 8px 13px !important;
    border-radius: var(--hshs-radius-sm) !important;
    font-family: var(--hshs-font-ui) !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
}

.hshs-ui-connect .hc-btn-primary {
    background: var(--hshs-navy-800) !important;
    border-color: var(--hshs-navy-800) !important;
    color: #fff !important;
}

.hshs-ui-connect .hc-btn-primary:hover {
    background: var(--hshs-navy-950) !important;
    color: #fff !important;
}

.hshs-ui-connect .hc-btn-teal {
    background: #087f83 !important;
    border-color: #087f83 !important;
    color: #fff !important;
}

.hshs-ui-connect .hc-btn-outline {
    border-color: #b9cad9 !important;
    background: #fff !important;
    color: var(--hshs-navy-800) !important;
}

/* Form controls. */
.hshs-ui-connect .hc-input,
.hshs-ui-connect .hc-select,
.hshs-ui-connect .hc-textarea {
    border-color: #c6d5e2 !important;
    border-radius: var(--hshs-radius-sm) !important;
    background: #fff !important;
    color: var(--hshs-text) !important;
    font-family: var(--hshs-font-ui) !important;
}

.hshs-ui-connect .hc-chipcheck,
.hshs-ui-connect .hc-alert,
.hshs-ui-connect .hc-safety {
    border-radius: var(--hshs-radius-sm) !important;
}

.hshs-ui-connect .hc-safety {
    background: #fffaf0 !important;
    border-left-color: var(--hshs-gold-500) !important;
}

/* Map remains functionally controlled by Connect/Leaflet. Only shell geometry
   is standardized here. */
.hshs-ui-connect .hc-map-wrap,
.hshs-ui-connect #hshsConnectMap {
    border-radius: var(--hshs-radius-md) !important;
}

.hshs-ui-connect #hshsConnectMap {
    border-color: var(--hshs-border) !important;
}

.hshs-ui-connect .hc-map-zoom button {
    border-radius: var(--hshs-radius-sm) !important;
}

/* Non-home Connect heroes remain specialized functional subpage heroes, but
   adopt the same typography and professional 14px radius. */
.hshs-ui-connect .hc-hero {
    padding: 30px 34px !important;
    border: 1px solid rgba(0,169,206,.22) !important;
    border-radius: var(--hshs-radius-lg) !important;
    background: linear-gradient(135deg, #082b53 0%, #0b4167 58%, #087f83 100%) !important;
    box-shadow: var(--hshs-shadow-md) !important;
}

.hshs-ui-connect .hc-hero .hc-kicker {
    color: #aee7ec !important;
    font-family: var(--hshs-font-ui) !important;
    font-size: 10px !important;
    letter-spacing: .18em !important;
}

.hshs-ui-connect .hc-hero h1 {
    margin: 5px 0 8px !important;
    color: #fff !important;
    font-family: var(--hshs-font-ui) !important;
    font-size: clamp(28px, 3vw, 36px) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -.02em !important;
}

.hshs-ui-connect .hc-hero p {
    color: #dcebf3 !important;
    font-family: var(--hshs-font-ui) !important;
    font-size: 13px !important;
}

@media (max-width: 900px) {
    .hshs-ui-connect .hc-statrow,
    .hshs-ui-connect-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .hshs-ui-connect .hc-stat:nth-child(3)::before {
        display: none;
    }
}

@media (max-width: 560px) {
    .hshs-ui-connect {
        margin-top: 14px !important;
    }

    .hshs-ui-connect .hc-nav,
    .hshs-ui-connect-nav {
        gap: 6px !important;
    }

    .hshs-ui-connect .hc-nav a {
        min-height: 34px !important;
        padding: 7px 9px !important;
        font-size: 10px !important;
    }

    .hshs-ui-connect .hc-statrow,
    .hshs-ui-connect-stats {
        grid-template-columns: 1fr !important;
    }

    .hshs-ui-connect .hc-stat + .hc-stat::before {
        left: 14px;
        right: 14px;
        top: 0;
        bottom: auto;
        width: auto;
        height: 1px;
    }
}



/* =========================================================
   TRAINING CENTER MIGRATION — v1.6.0
   Training Center retains all learning, assessment, progress,
   enrollment, certificate, transcript, and access logic.
   Site UI supplies shared presentation only.
   ========================================================= */

.hshs-ui-training,
.hshs-ui-training * {
    box-sizing: border-box;
}

.hshs-ui-training {
    width: 100% !important;
    max-width: var(--hshs-content-width) !important;
    margin: 22px auto 50px !important;
    color: var(--hshs-text) !important;
    font-family: var(--hshs-font-ui) !important;
}

.hshs-ui-training.hshs-catalog-page {
    margin-top: 22px !important;
}

.hshs-ui-hero--training {
    margin-bottom: 12px;
}

.hshs-ui-hero__media--training {
    background-image: url('../images/hshs_training_hero_remote_learning.png?v=1.6.1');
    background-position: center center;
    background-size: cover;
}

/* Benefit strip: same visual role as the Community stats band. */
.hshs-ui-training .hshs-benefit-strip,
.hshs-ui-training-benefits {
    margin: 0 0 18px !important;
    overflow: hidden;
    border: 1px solid #b9d9ee !important;
    border-radius: var(--hshs-radius-md) !important;
    background: linear-gradient(135deg, #eef7fd 0%, #e2f1fb 55%, #dceefa 100%) !important;
    box-shadow: 0 5px 14px rgba(27, 91, 137, .07) !important;
}

.hshs-ui-training .hshs-benefit-strip > div {
    min-height: 78px;
    padding: 14px 18px !important;
    border-right-color: rgba(121, 171, 205, .28) !important;
}

.hshs-ui-training .hshs-benefit-strip .benefit-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #0d79f2 !important;
    box-shadow: 0 3px 10px rgba(21, 99, 154, .09);
}

.hshs-ui-training .hshs-benefit-strip b {
    color: #062d5d !important;
    font-family: var(--hshs-font-ui) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.hshs-ui-training .hshs-benefit-strip small {
    color: #536d83 !important;
    font-family: var(--hshs-font-ui) !important;
    font-size: 11px !important;
}

/* Catalog shell / tabs / filters. */
.hshs-ui-training .hshs-catalog-shell,
.hshs-ui-training-catalog {
    overflow: hidden;
    border: 1px solid var(--hshs-border) !important;
    border-radius: var(--hshs-radius-md) !important;
    background: #fff !important;
    box-shadow: var(--hshs-shadow-sm) !important;
}

.hshs-ui-training .hshs-catalog-tabs {
    padding: 0 14px !important;
    border-bottom: 1px solid var(--hshs-border) !important;
    background: #f8fbfd !important;
}

.hshs-ui-training .hshs-catalog-tab {
    min-height: 46px;
    padding: 13px 14px !important;
    color: #516b7b !important;
    font-family: var(--hshs-font-ui) !important;
    font-size: 12px !important;
    font-weight: 750 !important;
}

.hshs-ui-training .hshs-catalog-tab.active {
    color: #0b5f8f !important;
    border-bottom-color: #0d79f2 !important;
}

.hshs-ui-training .hshs-catalog-filters {
    background: #f7fafc !important;
    border-right: 1px solid var(--hshs-border) !important;
    padding: 20px !important;
}

.hshs-ui-training .hshs-catalog-filters h3 {
    color: #062d5d !important;
    font-family: var(--hshs-font-ui) !important;
    font-size: 18px !important;
    font-weight: 800 !important;
}

.hshs-ui-training .hshs-filter-group > span,
.hshs-ui-training .hshs-toolbar-actions label {
    color: #35546a !important;
    font-family: var(--hshs-font-ui) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}

.hshs-ui-training .hshs-filter-group input,
.hshs-ui-training .hshs-filter-group select,
.hshs-ui-training .hshs-toolbar-actions select {
    min-height: 36px;
    border: 1px solid #bdccd6 !important;
    border-radius: var(--hshs-radius-sm) !important;
    background: #fff !important;
    color: var(--hshs-text) !important;
    font-family: var(--hshs-font-ui) !important;
}

.hshs-ui-training .hshs-filter-reset,
.hshs-ui-training .hshs-view-button {
    border-radius: var(--hshs-radius-sm) !important;
}

/* Course / series cards. */
.hshs-ui-training .hshs-catalog-items {
    gap: 16px !important;
}

.hshs-ui-training .hshs-catalog-card,
.hshs-ui-training .hshs-series-card,
.hshs-ui-training .hshs-card,
.hshs-ui-training .hshs-question,
.hshs-ui-training .hshs-exam-intro,
.hshs-ui-training .hshs-interactive-module,
.hshs-ui-training .hshs-resource,
.hshs-ui-training .hshs-check,
.hshs-ui-training .hshs-scenario,
.hshs-ui-training .hshs-series-complete {
    border-radius: var(--hshs-radius-md) !important;
}

.hshs-ui-training .hshs-catalog-card {
    border: 1px solid var(--hshs-border) !important;
    box-shadow: var(--hshs-shadow-sm) !important;
}

.hshs-ui-training .hshs-catalog-card:hover {
    border-color: #bdd4e4 !important;
    box-shadow: var(--hshs-shadow-md) !important;
}

.hshs-ui-training .hshs-catalog-card-body {
    padding: 17px !important;
    font-family: var(--hshs-font-ui) !important;
}

.hshs-ui-training .hshs-catalog-card h2,
.hshs-ui-training .hshs-catalog-card h3,
.hshs-ui-training .hshs-series-card h3,
.hshs-ui-training .hshs-card h2,
.hshs-ui-training .hshs-card h3,
.hshs-ui-training .hshs-section-head h2 {
    color: #062d5d !important;
    font-family: var(--hshs-font-ui) !important;
    font-weight: 800 !important;
}

.hshs-ui-training .hshs-topic-tag {
    border-radius: var(--hshs-radius-pill) !important;
}

.hshs-ui-training .hshs-catalog-action,
.hshs-ui-training .hshs-card .button,
.hshs-ui-training .hshs-guided-button,
.hshs-ui-training .hshs-back-button,
.hshs-ui-training .hshs-transcript-action,
.hshs-ui-training .hshs-course-banner-button {
    border-radius: var(--hshs-radius-sm) !important;
    font-family: var(--hshs-font-ui) !important;
    font-weight: 800 !important;
}

/* Learner-facing course / lesson / exam shell. */
.hshs-ui-training .hshs-course-head,
.hshs-ui-training .hshs-guided-shell,
.hshs-ui-training .hshs-transcript-section,
.hshs-ui-training .hshs-transcript-hero,
.hshs-ui-training .hshs-name-form,
.hshs-ui-training .hshs-name-notice,
.hshs-ui-training .hshs-preview-banner {
    border-radius: var(--hshs-radius-lg) !important;
}

.hshs-ui-training .hshs-course-head {
    background: linear-gradient(135deg, #082b53 0%, #0a6598 100%) !important;
    box-shadow: var(--hshs-shadow-md) !important;
}

.hshs-ui-training .hshs-guided-shell {
    border: 1px solid var(--hshs-border) !important;
    box-shadow: var(--hshs-shadow-md) !important;
}

.hshs-ui-training .hshs-guided-top {
    background: #082f55 !important;
}

.hshs-ui-training .hshs-guided-reading,
.hshs-ui-training .hshs-guided-sidebar,
.hshs-ui-training .hshs-guided-main {
    font-family: var(--hshs-font-ui) !important;
}

.hshs-ui-training .hshs-guided-reading > h1,
.hshs-ui-training .hshs-guided-sidebar h3 {
    color: #062d5d !important;
    font-family: var(--hshs-font-ui) !important;
    font-weight: 800 !important;
}

@media (max-width: 900px) {
    .hshs-ui-training .hshs-benefit-strip > div {
        min-height: 70px;
    }
}

@media (max-width: 760px) {
    .hshs-ui-training {
        margin-top: 16px !important;
    }

    .hshs-ui-training .hshs-catalog-filters {
        border-right: 0 !important;
    }
}

/* =========================================================
   LEADERSHIP MIGRATION — v1.7.0
   ACP template remains the content source. Site UI supplies
   the shared hero, leadership image, cards, opportunities,
   button treatment, and responsive presentation.
   ========================================================= */

.hshs-leadership-page {
    font-family: var(--hshs-font-ui);
}

.hshs-ui-hero--leadership {
    margin-bottom: 34px;
}

.hshs-ui-hero__media--leadership {
    background-image: url('../images/hshs_leadership_hero.jpg?v=1.7.0');
    background-position: center center;
    background-size: cover;
}

.hshs-leadership-page .hshs-leadership-section {
    margin: 0 0 48px;
}

.hshs-leadership-page .hshs-section-heading,
.hshs-leadership-page .hshs-opportunities-intro {
    max-width: 820px;
    margin: 0 auto 26px;
    text-align: center;
}

.hshs-leadership-page .hshs-kicker {
    margin: 0 0 8px;
    color: #a87408;
    font-family: var(--hshs-font-ui);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
    line-height: 1.35;
    text-transform: uppercase;
}

.hshs-leadership-page .hshs-section-heading h2,
.hshs-leadership-page .hshs-opportunities-intro h2 {
    margin: 0 0 10px;
    color: var(--hshs-navy-900);
    font-family: var(--hshs-font-ui);
    font-size: clamp(29px, 2.7vw, 36px);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -.02em;
}

.hshs-leadership-page .hshs-section-heading h2::after,
.hshs-leadership-page .hshs-opportunities-intro h2::after {
    content: "";
    display: block;
    width: 68px;
    height: 3px;
    margin: 14px auto 0;
    border-radius: 99px;
    background: #d4a017;
}

.hshs-leadership-page .hshs-section-heading > p:last-child,
.hshs-leadership-page .hshs-opportunities-intro > p:last-child {
    margin: 0;
    color: var(--hshs-text-muted);
    font-size: 14px;
    line-height: 1.65;
}

.hshs-leadership-page .hshs-leadership-grid {
    display: grid;
    gap: 22px;
}

.hshs-leadership-page .hshs-board-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hshs-leadership-page .hshs-advisor-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 1120px;
    margin: 0 auto;
}

.hshs-leadership-page .hshs-advisors-section {
    padding: 34px 30px 38px;
    border: 1px solid var(--hshs-border-blue);
    border-radius: var(--hshs-radius-lg);
    background: linear-gradient(135deg, #f7fbff 0%, #ffffff 54%, #fffaf0 100%);
    box-shadow: var(--hshs-shadow-sm);
}

.hshs-leadership-page .hshs-leader-card {
    min-width: 0;
    overflow: hidden;
    padding-bottom: 26px;
    border: 1px solid #d8e5ef;
    border-radius: var(--hshs-radius-md);
    background: #fff;
    text-align: center;
    box-shadow: 0 8px 24px rgba(14, 55, 94, .09);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.hshs-leadership-page .hshs-leader-card:hover {
    transform: translateY(-4px);
    border-color: #c7a84a;
    box-shadow: 0 14px 30px rgba(14, 55, 94, .14);
}

.hshs-leadership-page .hshs-card-banner {
    height: 142px;
    border-bottom: 3px solid #d4a017;
    background-position: center;
    background-size: cover;
}

.hshs-leadership-page .hshs-card-banner01 {
    background-image: linear-gradient(rgba(7,29,56,.16), rgba(7,29,56,.16)), url('../images/profile/leadershipbg_01.png');
}
.hshs-leadership-page .hshs-card-banner02 {
    background-image: linear-gradient(rgba(7,29,56,.16), rgba(7,29,56,.16)), url('../images/profile/leadershipbg_02.png');
}
.hshs-leadership-page .hshs-card-banner03 {
    background-image: linear-gradient(rgba(7,29,56,.16), rgba(7,29,56,.16)), url('../images/profile/leadershipbg_03.png');
}
.hshs-leadership-page .hshs-card-banner04 {
    background-image: linear-gradient(rgba(7,29,56,.16), rgba(7,29,56,.16)), url('../images/profile/leadershipbg_04.png');
}

.hshs-leadership-page .hshs-leader-card img,
.hshs-leadership-page .hshs-profile-placeholder {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 142px;
    height: 142px;
    margin: -72px auto 0;
    object-fit: cover;
    border: 5px solid #d4a017;
    border-radius: 50%;
    background: #edf4f8;
    color: var(--hshs-navy-700);
    font-size: 54px;
    box-shadow: 0 7px 18px rgba(11,35,65,.20);
}

.hshs-leadership-page .hshs-leader-card h3 {
    margin: 17px 16px 10px;
    color: var(--hshs-navy-900);
    font-family: var(--hshs-font-ui);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.18;
}

.hshs-leadership-page .hshs-role-ribbon {
    position: relative;
    display: inline-block;
    max-width: calc(100% - 46px);
    margin-bottom: 16px;
    padding: 7px 18px;
    background: #d4a017;
    color: #071d38;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .055em;
    line-height: 1.25;
    text-transform: uppercase;
}

.hshs-leadership-page .hshs-role-ribbon::before,
.hshs-leadership-page .hshs-role-ribbon::after {
    content: "";
    position: absolute;
    top: 0;
    width: 14px;
    height: 100%;
    background: #b8840f;
}

.hshs-leadership-page .hshs-role-ribbon::before {
    left: -14px;
    clip-path: polygon(100% 0,100% 100%,0 75%,38% 50%,0 25%);
}

.hshs-leadership-page .hshs-role-ribbon::after {
    right: -14px;
    clip-path: polygon(0 0,100% 25%,62% 50%,100% 75%,0 100%);
}

.hshs-leadership-page .hshs-role-ribbon.long {
    padding: 8px 10px;
    font-size: 10px;
}

.hshs-leadership-page .hshs-advisor-card .hshs-role-ribbon {
    background: var(--hshs-navy-700);
    color: #fff;
}

.hshs-leadership-page .hshs-advisor-card .hshs-role-ribbon::before,
.hshs-leadership-page .hshs-advisor-card .hshs-role-ribbon::after {
    background: var(--hshs-navy-900);
}

.hshs-leadership-page .hshs-leader-card > p {
    max-width: 330px;
    margin: 0 auto;
    padding: 0 22px;
    color: #42566a;
    font-size: 13px;
    line-height: 1.62;
}

.hshs-leadership-page .hshs-placeholder-card {
    border-style: dashed;
}

.hshs-leadership-page .hshs-opportunities {
    padding: 36px 34px 32px;
    border: 1px solid #e5d6a6;
    border-radius: var(--hshs-radius-lg);
    background: linear-gradient(135deg, #fffaf0 0%, #ffffff 55%, #f4f9fd 100%);
    text-align: center;
    box-shadow: var(--hshs-shadow-sm);
}

.hshs-leadership-page .hshs-opportunities-intro {
    margin-bottom: 30px;
}

.hshs-leadership-page .hshs-opportunity-group + .hshs-opportunity-group {
    margin-top: 32px;
}

.hshs-leadership-page .hshs-opportunity-heading {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.hshs-leadership-page .hshs-opportunity-heading::before,
.hshs-leadership-page .hshs-opportunity-heading::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(180, 134, 25, .36);
}

.hshs-leadership-page .hshs-opportunity-label {
    color: var(--hshs-navy-900);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.hshs-leadership-page .hshs-opportunity-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.hshs-leadership-page .hshs-opportunity-grid-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 900px;
    margin: 0 auto;
}

.hshs-leadership-page .hshs-vacancy-card {
    padding: 24px 20px 22px;
    border: 1px solid #d7e4ed;
    border-radius: var(--hshs-radius-md);
    background: #fff;
    box-shadow: 0 6px 18px rgba(14,55,94,.07);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.hshs-leadership-page .hshs-vacancy-card:hover {
    transform: translateY(-3px);
    border-color: #b9d3e4;
    box-shadow: 0 10px 24px rgba(14,55,94,.12);
}

.hshs-leadership-page .vacancy-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin: 0 auto 15px;
    border: 2px solid #d4a017;
    border-radius: 50%;
    background: var(--hshs-navy-900);
    color: #e3b841;
    font-size: 24px;
}

.hshs-leadership-page .hshs-vacancy-card h3 {
    margin: 0 0 9px;
    color: var(--hshs-navy-900);
    font-family: var(--hshs-font-ui);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
}

.hshs-leadership-page .hshs-vacancy-card p {
    margin: 0;
    color: var(--hshs-text-muted);
    font-size: 13px;
    line-height: 1.58;
}

.hshs-leadership-page .hshs-button,
.hshs-leadership-page .hshs-button:link,
.hshs-leadership-page .hshs-button:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    margin-top: 30px;
    padding: 10px 19px;
    border: 1px solid #0d79f2;
    border-radius: var(--hshs-radius-sm);
    background: #0d79f2;
    color: #fff !important;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
    text-decoration: none !important;
    text-transform: none;
    box-shadow: 0 8px 18px rgba(13,121,242,.18);
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.hshs-leadership-page .hshs-button:hover,
.hshs-leadership-page .hshs-button:active {
    transform: translateY(-2px);
    border-color: #0869d6;
    background: #0869d6;
    color: #fff !important;
    box-shadow: 0 10px 20px rgba(13,121,242,.22);
}

@media (max-width: 1150px) {
    .hshs-leadership-page .hshs-board-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .hshs-leadership-page .hshs-advisor-grid,
    .hshs-leadership-page .hshs-opportunity-grid,
    .hshs-leadership-page .hshs-opportunity-grid-two {
        grid-template-columns: 1fr;
        max-width: 580px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 700px) {
    .hshs-ui-hero--leadership {
        margin-bottom: 28px;
    }

    .hshs-leadership-page .hshs-board-grid {
        grid-template-columns: 1fr;
    }

    .hshs-leadership-page .hshs-advisors-section,
    .hshs-leadership-page .hshs-opportunities {
        padding: 28px 18px;
    }

    .hshs-leadership-page .hshs-section-heading,
    .hshs-leadership-page .hshs-opportunities-intro {
        margin-bottom: 22px;
    }
}



/* =========================================================
   GRADUATE SHOWCASE — v1.8.0
   Shared presentation for the public Graduate Gallery landing
   page. Graduate Showcase retains ownership of data, banner
   selection, year filtering, cycle cards, profiles and slideshow.
   ========================================================= */

.hshs-ui-graduates.hshs-grad-page {
    margin: 0 !important;
    padding-bottom: 60px !important;
    font-family: var(--hshs-font-ui);
}

.hshs-ui-hero--graduates {
    margin-bottom: 12px;
    border-color: rgba(212, 160, 23, .34);
}

.hshs-ui-hero--graduates .hshs-ui-kicker {
    color: #9b741e;
}

.hshs-ui-hero--graduates .hshs-ui-hero__tagline {
    max-width: 620px;
    margin-top: 8px;
    color: #5d738f;
    font-size: clamp(18px, 1.65vw, 22px);
    line-height: 1.3;
}

.hshs-ui-hero__media--graduates {
    background-color: #edf3f8;
    background-position: center bottom;
    background-size: cover;
}

.hshs-ui-hero--graduates .hshs-ui-hero__media-fade {
    background: linear-gradient(
        90deg,
        rgba(249,252,255,1) 0%,
        rgba(249,252,255,.98) 10%,
        rgba(249,252,255,.91) 23%,
        rgba(249,252,255,.73) 35%,
        rgba(249,252,255,.46) 47%,
        rgba(249,252,255,.18) 59%,
        rgba(249,252,255,0) 72%
    );
}

.hshs-ui-graduates .hshs-grad-year-tabs {
    display: flex !important;
    gap: 8px !important;
    margin: 0 0 18px !important;
    padding: 10px 12px !important;
    overflow-x: auto;
    border: 1px solid var(--hshs-border-blue) !important;
    border-radius: var(--hshs-radius-md) !important;
    background: linear-gradient(135deg, #f7fbff 0%, #eef5fb 100%) !important;
    box-shadow: var(--hshs-shadow-xs);
}

.hshs-ui-graduates .hshs-grad-year-tab {
    min-width: 82px !important;
    padding: 9px 14px !important;
    border: 1px solid #d4e2ee !important;
    border-radius: var(--hshs-radius-sm) !important;
    background: #fff !important;
    color: #355b7f !important;
    font-family: var(--hshs-font-ui) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    transition: border-color var(--hshs-transition), background var(--hshs-transition), color var(--hshs-transition);
}

.hshs-ui-graduates .hshs-grad-year-tab:hover,
.hshs-ui-graduates .hshs-grad-year-tab:focus {
    border-color: #8fbce0 !important;
    background: #f4f9fd !important;
    color: #0b5f8f !important;
}

.hshs-ui-graduates .hshs-grad-year-tab.active {
    border-color: #0b3d70 !important;
    background: #0b3d70 !important;
    color: #fff !important;
    box-shadow: 0 5px 12px rgba(11,61,112,.14);
}

.hshs-ui-graduates .hshs-grad-cycle-card {
    border-radius: var(--hshs-radius-md) !important;
    border-color: #d8e5ef !important;
    box-shadow: var(--hshs-shadow-sm) !important;
}

.hshs-ui-graduates .hshs-grad-cycle-card:hover {
    border-color: #c7a84a !important;
    box-shadow: var(--hshs-shadow-md) !important;
}

.hshs-ui-graduates .hshs-grad-cycle-card .name {
    color: var(--hshs-navy-900) !important;
    font-family: var(--hshs-font-ui) !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    letter-spacing: -.01em;
}

.hshs-ui-graduates .hshs-grad-card-count {
    color: #314e68;
    font-family: var(--hshs-font-ui);
    font-size: 13px;
}

.hshs-ui-graduates .hshs-grad-card-meta {
    color: #71849b;
    font-family: var(--hshs-font-ui);
    font-size: 11px;
}

@media (max-width: 850px) {
    .hshs-ui-hero__media--graduates {
        background-position: center 72%;
    }

    .hshs-ui-hero--graduates .hshs-ui-hero__media-fade {
        background: linear-gradient(
            180deg,
            rgba(249,252,255,.95) 0%,
            rgba(249,252,255,.35) 18%,
            rgba(249,252,255,0) 42%
        );
    }
}


/* =========================================================
   ABOUT HSHS MIGRATION — v1.9.0
   ACP template remains the content source. Site UI supplies
   the shared split hero and presentation for the About page.
   ========================================================= */

.hshs-about-page,
.hshs-about-page * {
    box-sizing: border-box;
}

.hshs-about-page {
    font-family: var(--hshs-font-ui);
}

.hshs-ui-hero--about {
    margin-bottom: 34px;
}

.hshs-ui-hero__media--about {
    background-image: url('../images/hshs_about_hero.jpg?v=1.9.0');
    background-position: center center;
    background-size: cover;
}

.hshs-about-page .hshs-about-main {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin: 0 0 30px;
}

.hshs-about-page .hshs-about-card {
    overflow: hidden;
    min-width: 0;
    border: 1px solid var(--hshs-border-blue);
    border-radius: var(--hshs-radius-md);
    background: #fff;
    box-shadow: var(--hshs-shadow-sm);
}

.hshs-about-page .hshs-about-card.gold {
    border-color: var(--hshs-border-gold);
}

.hshs-about-page .hshs-about-card-head {
    display: flex;
    align-items: flex-start;
    gap: 19px;
    height: 100%;
    padding: 26px 27px;
    background: linear-gradient(135deg, #f4faff 0%, #ffffff 72%);
}

.hshs-about-page .hshs-about-card-head.gold {
    background: linear-gradient(135deg, #fff9eb 0%, #ffffff 72%);
}

.hshs-about-page .hshs-about-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 66px;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--hshs-navy-900), #0d6c9f);
    color: #fff;
    font-size: 25px;
    box-shadow: 0 7px 17px rgba(11, 55, 104, .14);
}

.hshs-about-page .hshs-about-icon.gold {
    background: linear-gradient(135deg, #d4a017, #f1c85b);
    color: var(--hshs-navy-900);
    box-shadow: 0 7px 17px rgba(180, 134, 25, .16);
}

.hshs-about-page .hshs-about-card-head span {
    display: block;
    margin: 0 0 6px;
    color: #0d6e9e;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.hshs-about-page .hshs-about-card-head.gold span {
    color: #a87408;
}

.hshs-about-page .hshs-about-card h2 {
    margin: 0 0 10px;
    color: var(--hshs-navy-900);
    font-family: var(--hshs-font-ui);
    font-size: clamp(22px, 2vw, 27px);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -.015em;
}

.hshs-about-page .hshs-about-card p {
    margin: 0;
    color: var(--hshs-text-muted);
    font-size: 13px;
    line-height: 1.65;
}

.hshs-about-page .hshs-about-values {
    margin: 0 0 30px;
    padding: 32px 30px 34px;
    border: 1px solid var(--hshs-border-blue);
    border-radius: var(--hshs-radius-lg);
    background: linear-gradient(135deg, #f7fbff 0%, #ffffff 52%, #f6fbfe 100%);
    text-align: center;
    box-shadow: var(--hshs-shadow-sm);
}

.hshs-about-page .hshs-about-values > p {
    margin: 0 0 22px;
    color: #a87408;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.hshs-about-page .hshs-about-values-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.hshs-about-page .hshs-about-values-grid > div {
    padding: 24px 22px 23px;
    border: 1px solid #d9e6ef;
    border-radius: var(--hshs-radius-md);
    background: #fff;
    box-shadow: 0 6px 16px rgba(14, 55, 94, .055);
}

.hshs-about-page .hshs-about-values-grid > div > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 14px;
    border: 2px solid #d4a017;
    border-radius: 50%;
    background: var(--hshs-navy-900);
    color: #e7bb45;
    font-size: 22px;
}

.hshs-about-page .hshs-about-values-grid h3 {
    margin: 0 0 8px;
    color: var(--hshs-navy-900);
    font-family: var(--hshs-font-ui);
    font-size: 21px;
    font-weight: 800;
}

.hshs-about-page .hshs-about-values-grid p {
    margin: 0;
    color: var(--hshs-text-muted);
    font-size: 13px;
    line-height: 1.62;
}

.hshs-about-page .hshs-about-mission {
    position: relative;
    overflow: hidden;
    padding: 38px 34px 40px;
    border: 1px solid #143f6f;
    border-radius: var(--hshs-radius-lg);
    background:
        radial-gradient(circle at 88% 20%, rgba(56, 164, 217, .20), transparent 28%),
        linear-gradient(135deg, #071d38 0%, #0b3768 58%, #0d5b86 100%);
    color: #fff;
    text-align: center;
    box-shadow: 0 12px 28px rgba(7, 29, 56, .15);
}

.hshs-about-page .hshs-about-mission::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -90px;
    width: 250px;
    height: 250px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 50%;
}

.hshs-about-page .hshs-about-mission > * {
    position: relative;
    z-index: 1;
}

.hshs-about-page .hshs-about-mission-kicker {
    margin: 0 0 8px;
    color: #f1c85b;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.hshs-about-page .hshs-about-mission h2 {
    margin: 0 0 12px;
    color: #fff;
    font-family: var(--hshs-font-ui);
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 800;
    letter-spacing: -.02em;
}

.hshs-about-page .hshs-about-mission h2 span {
    color: #e0ad2f;
}

.hshs-about-page .hshs-about-mission-text {
    max-width: 850px;
    margin: 0 auto;
    color: rgba(255,255,255,.87);
    font-size: 14px;
    line-height: 1.7;
}

@media (max-width: 900px) {
    .hshs-about-page .hshs-about-main {
        grid-template-columns: 1fr;
    }

    .hshs-about-page .hshs-about-values-grid {
        grid-template-columns: 1fr;
        max-width: 620px;
        margin: 0 auto;
    }
}

@media (max-width: 700px) {
    .hshs-ui-hero--about {
        margin-bottom: 28px;
    }

    .hshs-about-page .hshs-about-card-head {
        padding: 22px 18px;
    }

    .hshs-about-page .hshs-about-icon {
        flex-basis: 58px;
        width: 58px;
        height: 58px;
        font-size: 21px;
    }

    .hshs-about-page .hshs-about-values,
    .hshs-about-page .hshs-about-mission {
        padding: 28px 18px;
    }
}

@media (max-width: 500px) {
    .hshs-about-page .hshs-about-card-head {
        display: block;
    }

    .hshs-about-page .hshs-about-icon {
        margin-bottom: 15px;
    }
}