/* Medora Education - Moodle login / auth pages (simple centred card).
   Loaded via Site administration > Appearance > Additional HTML (within HEAD).
   Scoped to body.pagelayout-login so the rest of Moodle is untouched. */

:root {
    --mh-navy: #142f4b;
    --mh-mid: #1e4a73;
    --mh-teal: #2e7f93;
    --mh-teal-light: #7bb5c3;
    --mh-pale: #edf2f5;
    --mh-line: #dce4e8;
    --mh-ink: #10222f;
    --mh-muted: #4c6072;
}

/* ---- background ---- */
body.pagelayout-login {
    font-family: 'Public Sans', system-ui, sans-serif;
    color: var(--mh-ink);
    min-height: 100vh;
    background:
        radial-gradient(900px 520px at 85% 110%, rgba(46, 127, 147, .55), rgba(46, 127, 147, 0) 70%),
        radial-gradient(700px 420px at 5% -10%, rgba(123, 181, 195, .22), rgba(123, 181, 195, 0) 70%),
        linear-gradient(160deg, var(--mh-navy) 0%, var(--mh-mid) 100%);
    background-attachment: fixed;
}
body.pagelayout-login #page-wrapper,
body.pagelayout-login #page,
body.pagelayout-login #page-content { background: transparent; }
body.pagelayout-login h1, body.pagelayout-login h2, body.pagelayout-login h3 {
    font-family: 'Archivo', system-ui, sans-serif;
    color: var(--mh-navy);
    letter-spacing: -.01em;
}

/* ---- single centred column ---- */
body.pagelayout-login .login-layout-left { display: none !important; }
body.pagelayout-login #page-content { min-height: 100vh; }
body.pagelayout-login .login-layout-right {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    padding: 2rem 1rem;
}
body.pagelayout-login .login-layout-right-content { width: 100%; display: flex; justify-content: center; }

/* ---- the card ---- */
body.pagelayout-login .login-container {
    width: 100%;
    max-width: 25rem;
    background: #fff;
    border: 0;
    border-radius: 16px;
    padding: 2.5rem 2.25rem 2rem;
    box-shadow: 0 24px 60px rgba(8, 20, 34, .35);
}
/* wordmark at the top of the card */
body.pagelayout-login .login-container::before {
    content: 'MEDORA   EDUCATION';
    display: block;
    white-space: pre;
    height: 2.5rem;
    margin-bottom: 1.5rem;
    padding-left: 3.1rem;
    font: 700 .95rem/2.5rem 'Archivo', sans-serif;
    letter-spacing: .16em;
    color: var(--mh-navy);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M10 3c0 12 20 12 20 24s-20 12-20 10' stroke='%23142f4b'/%3E%3Cpath d='M30 3c0 12-20 12-20 24s20 12 20 10' stroke='%232e7f93'/%3E%3C/g%3E%3Cg stroke='%237bb5c3' stroke-width='2'%3E%3Cpath d='M13 10h14M13 20h14M13 30h14'/%3E%3C/g%3E%3C/svg%3E") no-repeat left center / 2.5rem 2.5rem;
}
body.pagelayout-login .loginform h1 { font-size: 1.55rem; font-weight: 700; margin-bottom: .3rem; }
body.pagelayout-login .loginform .text-muted { color: var(--mh-muted) !important; }
body.pagelayout-login .form-label { font-weight: 600; font-size: .88rem; color: var(--mh-ink); }
body.pagelayout-login .form-control {
    border: 1px solid var(--mh-line);
    border-radius: 8px;
    padding-top: .65rem;
    padding-bottom: .65rem;
}
body.pagelayout-login .form-control:focus {
    border-color: var(--mh-teal);
    box-shadow: 0 0 0 3px rgba(46, 127, 147, .2);
}
/* password field + show/hide (eye) button: one continuous field */
body.pagelayout-login .toggle-sensitive-wrapper > .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
}
body.pagelayout-login .toggle-sensitive-wrapper > .toggle-sensitive-btn {
    background-color: var(--bs-body-bg, #fff);
    color: var(--mh-muted);
    border: 1px solid var(--mh-line);
    border-left: 0;
    border-radius: 0 8px 8px 0;
    box-shadow: none;
}
body.pagelayout-login .toggle-sensitive-wrapper > .toggle-sensitive-btn:hover { color: var(--mh-navy); background-color: var(--mh-pale); }
body.pagelayout-login .toggle-sensitive-wrapper:focus-within > .form-control,
body.pagelayout-login .toggle-sensitive-wrapper:focus-within > .toggle-sensitive-btn { border-color: var(--mh-teal); }
body.pagelayout-login .toggle-sensitive-wrapper > .form-control:focus { box-shadow: none; }
body.pagelayout-login .toggle-sensitive-wrapper:focus-within { border-radius: 8px; box-shadow: 0 0 0 3px rgba(46, 127, 147, .2); }
body.pagelayout-login .login-input-icon { color: var(--mh-muted); }
body.pagelayout-login .login-container a { color: var(--mh-mid); }
body.pagelayout-login .login-container a:hover { color: var(--mh-teal); }

body.pagelayout-login .btn-primary {
    background: var(--mh-navy);
    border-color: var(--mh-navy);
    border-radius: 8px;
    font: 600 .95rem/1.2 'Archivo', sans-serif;
    padding: .75rem 1rem;
}
body.pagelayout-login .btn-primary:hover,
body.pagelayout-login .btn-primary:focus { background: var(--mh-mid); border-color: var(--mh-mid); }
body.pagelayout-login .btn-outline-secondary {
    color: var(--mh-navy);
    border-color: var(--mh-line);
    border-radius: 8px;
    background: #fff;
    font-weight: 600;
}
body.pagelayout-login .btn-outline-secondary:hover { background: var(--mh-pale); color: var(--mh-navy); border-color: var(--mh-navy); }
body.pagelayout-login .login-separator { color: var(--mh-muted); }

/* ---- registration / longer forms (Moodle "mform") ---- */
body.pagelayout-login .login-container:has(.mform) { max-width: 34rem; }
body.pagelayout-login .mform .fitem.row { margin-left: 0; margin-right: 0; flex-direction: column; }
body.pagelayout-login .mform .fitem > [class*="col-"] {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}
body.pagelayout-login .mform .fitem > .col-form-label { padding-bottom: .3rem; }
/* line fields up with the heading (Moodle adds gutter padding to rows and their wrappers) */
body.pagelayout-login .mform,
body.pagelayout-login .mform .fitem,
body.pagelayout-login .mform fieldset,
body.pagelayout-login .mform .fcontainer { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; }
body.pagelayout-login .mform .fitem > .felement { margin-left: 0; }
body.pagelayout-login .mform .fitem .form-control,
body.pagelayout-login .mform .fitem .form-select { width: 100%; }
body.pagelayout-login .mform .fitem.femptylabel > .col-form-label { display: none; }
body.pagelayout-login .mform .form-control-static { color: var(--mh-muted); font-size: .85rem; }
body.pagelayout-login .login-heading,
body.pagelayout-login .signupform h1 { font-size: 1.55rem; font-weight: 700; margin-bottom: 1rem; }
body.pagelayout-login .mform .form-select,
body.pagelayout-login .mform select.custom-select {
    width: 100%;
    border: 1px solid var(--mh-line);
    border-radius: 8px;
    padding: .65rem .75rem;
    background-color: var(--bs-tertiary-bg, #f8f9fa);
}
body.pagelayout-login .mform .form-select:focus {
    border-color: var(--mh-teal);
    box-shadow: 0 0 0 3px rgba(46, 127, 147, .2);
}
body.pagelayout-login .mform legend, body.pagelayout-login .mform .fheader {
    font: 700 1.05rem/1.3 'Archivo', sans-serif;
    color: var(--mh-navy);
}
body.pagelayout-login .mform fieldset { border: 0; padding: 0; }
body.pagelayout-login .mform .btn-secondary,
body.pagelayout-login .mform .btn-cancel {
    background: #fff;
    color: var(--mh-navy);
    border: 1px solid var(--mh-line);
    border-radius: 8px;
    font-weight: 600;
}
body.pagelayout-login .mform .btn-secondary:hover { background: var(--mh-pale); border-color: var(--mh-navy); }
body.pagelayout-login .mform .text-danger { color: #b3261e !important; }

/* ---- back / home links (inserted by medora.js) ---- */
.mh-topnav { display: none; }
body.pagelayout-login .mh-topnav {
    display: flex;
    gap: .6rem;
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 1030;
}
.mh-topnav a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .9rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff !important;
    font: 600 .85rem/1 'Archivo', sans-serif;
    text-decoration: none;
    backdrop-filter: blur(6px);
}
.mh-topnav a:hover { background: rgba(255, 255, 255, .26); }
/* "back to log in" is only useful off the main login page */
body#page-login-index .mh-topnav .mh-to-login { display: none; }

@media (max-width: 480px) {
    body.pagelayout-login .login-container { padding: 2rem 1.35rem 1.5rem; }
}
/* =====================================================================
   Student dashboard (/my/) - scoped to body#page-my-index
   Appended to medora.css by deploy_css.sh
   ===================================================================== */
body#page-my-index {
    font-family: 'Public Sans', system-ui, sans-serif;
    color: var(--mh-ink);
    background: #f6f8fa;
}
body#page-my-index h1, body#page-my-index h2, body#page-my-index h3, body#page-my-index h4,
body#page-my-index .card-title { font-family: 'Archivo', system-ui, sans-serif; color: var(--mh-navy); letter-spacing: -.01em; }
body#page-my-index #page { background: transparent; }

/* navbar: white, thin line, brand wordmark instead of the site short name */
body#page-my-index nav.navbar.fixed-top { background: #fff !important; border-bottom: 1px solid var(--mh-line); box-shadow: none; }
body#page-my-index .navbar-brand {
    font-size: 0 !important;
    color: transparent;
    padding-left: 0 !important;
    gap: .5rem;
    margin-right: 1rem;
    height: 2rem;
    display: flex;
    align-items: center;
    position: relative;
}
body#page-my-index .navbar-brand::after {
    content: 'MEDORA';
    font: 700 1rem/1 'Archivo', sans-serif;
    letter-spacing: .14em;
    color: var(--mh-navy);
}
body#page-my-index .primary-navigation .nav-link.active,
body#page-my-index .primary-navigation .nav-link:hover { color: var(--mh-teal); border-color: var(--mh-teal); }

/* the plain "Dashboard" h1 is replaced by the greeting built in medora.js */
body#page-my-index #page-header .page-header-headings,
body#page-my-index #page-header h1 { display: none; }
body#page-my-index #region-main { background: transparent; border: 0; padding: 0; }

/* greeting + resume banner (inserted by medora.js) */
.mh-dash-hero { margin: 1.25rem 1rem 1.5rem; }
.mh-dash-hello { font: 700 clamp(1.5rem, 2.6vw, 2rem)/1.2 'Archivo', sans-serif; color: var(--mh-navy); margin: 0 0 .25rem; }
.mh-dash-sub { color: var(--mh-muted); margin: 0 0 1.25rem; }
.mh-resume {
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
    background: var(--mh-navy); color: #fff; border-radius: 14px; padding: 1.5rem 1.75rem;
}
.mh-resume small { display: block; font: 600 .7rem/1 'Archivo', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--mh-teal-light); margin-bottom: .6rem; }
body#page-my-index .mh-resume h2 { font: 700 1.35rem/1.25 'Archivo', sans-serif; color: #fff; margin: 0; }
.mh-resume p { margin: .35rem 0 0; color: rgba(255,255,255,.75); font-size: .92rem; }
.mh-resume a.mh-resume-btn {
    background: #fff; color: var(--mh-navy); font: 600 .95rem/1 'Archivo', sans-serif;
    padding: .8rem 1.3rem; border-radius: 8px; text-decoration: none; white-space: nowrap;
}
.mh-resume a.mh-resume-btn:hover { background: var(--mh-pale); }
.mh-resume a.mh-resume-btn-dark { background: var(--mh-navy); color: #fff; }
.mh-resume a.mh-resume-btn-dark:hover { background: var(--mh-mid); color: #fff; }
.mh-resume-empty { background: #fff; color: var(--mh-ink); border: 1px solid var(--mh-line); }
body#page-my-index .mh-resume-empty h2 { color: var(--mh-navy); }
.mh-resume-empty p { color: var(--mh-muted); }
.mh-resume-empty small { color: var(--mh-teal); }

/* blocks as clean cards */
body#page-my-index section.block.card {
    border: 1px solid var(--mh-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: none;
}
body#page-my-index section.block .card-title,
body#page-my-index section.block .h5 { font-size: 1.15rem; font-weight: 700; }

/* Moodle reserves a tall minimum height for the course list; with 1-3 courses it just leaves a gap */
body#page-my-index .block_myoverview .paged-content-page-container,
body#page-my-index .block_myoverview .card-text.content,
body#page-my-index .block_myoverview [data-region="paged-content-container"] { min-height: 0 !important; }

/* wider dashboard: Moodle caps the main column at 830px */
body#page-my-index #topofscroll.main-inner { max-width: 1000px; }

/* two course cards per row on wide screens (Moodle default is three) */
@media (min-width: 992px) {
    body#page-my-index .block_myoverview .card-grid > .col { width: 50%; }
}

/* course cards: course image on top, category as small label, progress */
body#page-my-index .course-card {
    border: 1px solid var(--mh-line);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
}
body#page-my-index .course-card:hover { border-color: var(--mh-teal); box-shadow: 0 8px 20px rgba(20, 47, 75, .08); }
/* the course image is the element's own background-image (set by Moodle); do not override it */
body#page-my-index .course-card .card-img-top {
    height: 12rem;
    background-color: var(--mh-navy);
    background-size: cover;
    background-position: center;
    border-bottom: 3px solid var(--mh-teal);
}
body#page-my-index .course-card .coursename { font: 700 1.05rem/1.3 'Archivo', sans-serif; color: var(--mh-navy); }
body#page-my-index .course-card .coursename:hover { color: var(--mh-teal); }
body#page-my-index .course-card .categoryname {
    font: 600 .68rem/1.3 'Archivo', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--mh-teal);
}
body#page-my-index .course-card .progress { height: 6px; border-radius: 99px; background: var(--mh-pale); }
body#page-my-index .course-card .progress-bar { background: var(--mh-teal); }
body#page-my-index .course-card .card-footer { background: transparent !important; }

/* filters, timeline, buttons */
body#page-my-index .btn-outline-secondary { border-color: var(--mh-line); color: var(--mh-navy); border-radius: 8px; background: #fff; }
body#page-my-index .btn-outline-secondary:hover { background: var(--mh-pale); border-color: var(--mh-navy); color: var(--mh-navy); }
body#page-my-index .form-control { border-color: var(--mh-line); border-radius: 8px; }
body#page-my-index .form-control:focus { border-color: var(--mh-teal); box-shadow: 0 0 0 3px rgba(46,127,147,.2); }
body#page-my-index .block-timeline a,
body#page-my-index .block_recentlyaccesseditems a { color: var(--mh-mid); }
body#page-my-index .list-group-item { border-color: var(--mh-line); }
/* =====================================================================
   Course page + activity (lesson) pages - body.path-course / body.path-mod
   Appended to medora.css by deploy_css.sh
   ===================================================================== */
:is(body.path-course, body.path-mod) {
    font-family: 'Public Sans', system-ui, sans-serif;
    color: var(--mh-ink);
    background: #f6f8fa;
}
:is(body.path-course, body.path-mod) #page { background: transparent; }
:is(body.path-course, body.path-mod) :is(h1, h2, h3, h4, h5, .card-title, .sectionname) {
    font-family: 'Archivo', system-ui, sans-serif;
    color: var(--mh-navy);
    letter-spacing: -.01em;
}
:is(body.path-course, body.path-mod) a { color: var(--mh-mid); }
:is(body.path-course, body.path-mod) a:hover { color: var(--mh-teal); }

/* ---- top bar: MEDORA wordmark ---- */
:is(body.path-course, body.path-mod) nav.navbar.fixed-top { background: #fff !important; border-bottom: 1px solid var(--mh-line); box-shadow: none; }
:is(body.path-course, body.path-mod) .navbar-brand {
    font-size: 0 !important;
    color: transparent;
    padding-left: 0 !important;
    gap: .5rem;
    margin-right: 1rem;
    height: 2rem;
    display: flex;
    align-items: center;
    position: relative;
}
:is(body.path-course, body.path-mod) .navbar-brand::after {
    content: 'MEDORA';
    font: 700 1rem/1 'Archivo', sans-serif;
    letter-spacing: .14em;
    color: var(--mh-navy);
}
:is(body.path-course, body.path-mod) .primary-navigation .nav-link.active,
:is(body.path-course, body.path-mod) .primary-navigation .nav-link:hover { color: var(--mh-teal); border-color: var(--mh-teal); }

/* ---- page title + Course / Grades / Activities tabs ---- */
:is(body.path-course, body.path-mod) #page-header h1 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 700; }
:is(body.path-course, body.path-mod) .secondary-navigation .nav-link { color: var(--mh-muted); border-radius: 8px; font-weight: 500; }
:is(body.path-course, body.path-mod) .secondary-navigation .nav-link:hover { color: var(--mh-navy); background: var(--mh-pale); }
:is(body.path-course, body.path-mod) .secondary-navigation .nav-link.active {
    background: var(--mh-pale);
    color: var(--mh-navy);
    font-weight: 600;
}
:is(body.path-course, body.path-mod) .secondary-navigation .nav-link.active::before,
:is(body.path-course, body.path-mod) .secondary-navigation .nav-link.active::after { background-color: var(--mh-teal); border-color: var(--mh-teal); }

/* ---- course outline drawer (left) ---- */
:is(body.path-course, body.path-mod) .drawer.drawer-left {
    background: #fff;
    border: 1px solid var(--mh-line);
    border-radius: 14px;
    box-shadow: none;
}
:is(body.path-course, body.path-mod) .drawer .drawerheader { border-bottom-color: var(--mh-line); }
:is(body.path-course, body.path-mod) .courseindex .courseindex-section-title,
:is(body.path-course, body.path-mod) .courseindex .courseindex-sectionname { font-family: 'Archivo', sans-serif; color: var(--mh-navy); }
:is(body.path-course, body.path-mod) .courseindex .courseindex-link { color: var(--mh-ink); border-radius: 8px; }
:is(body.path-course, body.path-mod) .courseindex .courseindex-link:hover { background: var(--mh-pale); color: var(--mh-navy); }
:is(body.path-course, body.path-mod) .courseindex .courseindex-item.pageitem {
    background: var(--mh-navy);
    border-radius: 8px;
}
:is(body.path-course, body.path-mod) .courseindex .courseindex-item.pageitem .courseindex-link,
:is(body.path-course, body.path-mod) .courseindex .courseindex-item.pageitem a { color: #fff !important; }

/* ---- sections as cards ---- */
:is(body.path-course, body.path-mod) li.course-section.main {
    background: #fff;
    border: 1px solid var(--mh-line);
    border-radius: 14px;
    box-shadow: none;
}
:is(body.path-course, body.path-mod) li.course-section .sectionname { font-size: 1.15rem; font-weight: 700; }
:is(body.path-course, body.path-mod) li.course-section .course-section-header { border-bottom-color: var(--mh-line); }
/* Section expand buttons in the main content only. The outline drawer's small chevrons
   (.courseindex-chevron) share the .icons-collapse-expand class, so they must NOT get the box. */
:is(body.path-course, body.path-mod) #region-main a.btn.btn-icon.icons-collapse-expand {
    border: 1px solid var(--mh-line);
    border-radius: 8px;
    color: var(--mh-mid);
    background: #fff;
}
:is(body.path-course, body.path-mod) #region-main a.btn.btn-icon.icons-collapse-expand:hover { border-color: var(--mh-teal); color: var(--mh-teal); }
:is(body.path-course, body.path-mod) .courseindex .courseindex-chevron {
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--mh-muted);
}
:is(body.path-course, body.path-mod) .courseindex .courseindex-chevron:hover { color: var(--mh-teal); }

/* ---- activities ---- */
:is(body.path-course, body.path-mod) li.activity .activity-item {
    border: 1px solid var(--mh-line);
    border-radius: 10px;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
:is(body.path-course, body.path-mod) li.activity .activity-item:hover { border-color: var(--mh-teal); box-shadow: 0 6px 16px rgba(20, 47, 75, .07); }
:is(body.path-course, body.path-mod) li.activity .activityname a,
:is(body.path-course, body.path-mod) li.activity .instancename { font-weight: 600; color: var(--mh-navy); }

/* ---- activity ("lesson") page: content in a card, clear prev/next ---- */
body.path-mod #region-main {
    background: #fff;
    border: 1px solid var(--mh-line);
    border-radius: 14px;
    padding: 1.5rem 1.75rem;
    box-shadow: none;
}
body.path-mod #region-main > h2:first-child { margin-top: 0; }
body.path-mod .activity-navigation .btn,
body.path-mod #prev-activity-link,
body.path-mod #next-activity-link {
    border-radius: 8px;
}
body.path-mod .activity-description, body.path-mod .box.py-3.generalbox { color: var(--mh-ink); }

/* ---- buttons / inputs / completion ---- */
:is(body.path-course, body.path-mod) .btn-primary { background: var(--mh-navy); border-color: var(--mh-navy); border-radius: 8px; }
:is(body.path-course, body.path-mod) .btn-primary:hover,
:is(body.path-course, body.path-mod) .btn-primary:focus { background: var(--mh-mid); border-color: var(--mh-mid); }
:is(body.path-course, body.path-mod) :is(.btn-secondary, .btn-outline-secondary) { border-radius: 8px; border-color: var(--mh-line); background: #fff; color: var(--mh-navy); }
:is(body.path-course, body.path-mod) :is(.btn-secondary, .btn-outline-secondary):hover { background: var(--mh-pale); border-color: var(--mh-navy); }
:is(body.path-course, body.path-mod) .form-control { border-color: var(--mh-line); border-radius: 8px; }
:is(body.path-course, body.path-mod) .form-control:focus { border-color: var(--mh-teal); box-shadow: 0 0 0 3px rgba(46, 127, 147, .2); }
:is(body.path-course, body.path-mod) .progress { height: 6px; border-radius: 99px; background: var(--mh-pale); }
:is(body.path-course, body.path-mod) .progress-bar { background: var(--mh-teal); }
:is(body.path-course, body.path-mod) .completion_complete,
:is(body.path-course, body.path-mod) .btn-success { background-color: var(--mh-teal); border-color: var(--mh-teal); }

/* ---- logged-in navbar: no "Home" item (Dashboard is the student home; logo -> /my/ via medora.js) ---- */
body.uses-drawers:not(.pagelayout-login) .primary-navigation li.nav-item:has(> a[href$="/?redirect=0"], > a[href$="/"]:not([href$="/my/"])) { display: none !important; }
/* =====================================================================
   Feedback pop-up (built by medora.js). Appended to medora.css by deploy_css.sh
   ===================================================================== */
.mh-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(16, 34, 47, .55);
    backdrop-filter: blur(2px);
}
.mh-modal {
    width: 100%;
    max-width: 28rem;
    background: #fff;
    border-radius: 16px;
    padding: 1.75rem 1.75rem 1.5rem;
    box-shadow: 0 24px 60px rgba(8, 20, 34, .35);
    font-family: 'Public Sans', system-ui, sans-serif;
    color: var(--mh-ink, #10222f);
}
.mh-modal-eyebrow {
    display: block;
    font: 600 .7rem/1 'Archivo', sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mh-teal, #2e7f93);
    margin-bottom: .7rem;
}
.mh-modal .mh-modal-title {
    font: 700 1.35rem/1.25 'Archivo', sans-serif;
    color: var(--mh-navy, #142f4b);
    margin: 0 0 .6rem;
}
.mh-modal-text { color: var(--mh-muted, #4c6072); margin: 0 0 1.25rem; font-size: .95rem; }
.mh-modal-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.mh-modal a.mh-btn-go {
    background: var(--mh-navy, #142f4b);
    color: #fff;
    font: 600 .95rem/1 'Archivo', sans-serif;
    padding: .8rem 1.2rem;
    border-radius: 8px;
    text-decoration: none;
}
.mh-modal a.mh-btn-go:hover { background: var(--mh-mid, #1e4a73); color: #fff; }
.mh-modal button.mh-btn-later {
    background: #fff;
    color: var(--mh-navy, #142f4b);
    border: 1px solid var(--mh-line, #dce4e8);
    font: 600 .95rem/1 'Archivo', sans-serif;
    padding: .8rem 1.2rem;
    border-radius: 8px;
    cursor: pointer;
}
.mh-modal button.mh-btn-later:hover { background: var(--mh-pale, #edf2f5); border-color: var(--mh-navy, #142f4b); }