@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

:root {
    --navy: #09265d;
    --navy2: #061b45;
    --gold: #dca126;
    --ink: #1b2940;
    --muted: #667085;
    --pale: #f4f7fb;
    --line: #e5eaf1
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    color: var(--ink);
    font: 15px/1.7 'DM Sans', Arial, sans-serif
}

a {
    color: inherit;
    text-decoration: none
}

.container {
    width: min(1180px, 92%);
    margin: auto
}

.topbar {
    background: var(--navy2);
    color: #e9eef8;
    font-size: 12px
}

.topbar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 42px
}

.topbar-inner span {
    margin-right: 24px
}

.portal-btn {
    background: var(--gold);
    color: #13264a;
    padding: 9px 17px;
    font-weight: 700;
    border-radius: 3px
}

.site-header {
    background: white;
    box-shadow: 0 4px 22px #0b25500d;
    position: relative;
    z-index: 5
}

.nav-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 100px
}

.brand img {
    width: 170px;
    height: 82px;
    object-fit: contain
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 21px;
    font-size: 13px;
    font-weight: 700;
    color: #172c52
}

.main-nav>a,
.nav-drop>a {
    padding: 35px 0;
    display: block
}

.main-nav a:hover {
    color: #b98113
}

.nav-drop {
    position: relative
}

.drop-menu {
    display: none;
    position: absolute;
    top: 76px;
    left: -15px;
    min-width: 220px;
    background: white;
    box-shadow: 0 12px 30px #12264a20;
    border-top: 3px solid var(--gold);
    padding: 9px
}

.drop-menu a {
    display: block;
    padding: 9px 12px;
    font-weight: 500
}

.nav-drop:hover .drop-menu {
    display: block
}

.menu-toggle {
    display: none;
    background: none;
    border: 0;
    font-size: 25px;
    color: var(--navy)
}

.hero {
    background: linear-gradient(90deg, rgba(5, 26, 67, .96), rgba(8, 39, 89, .78)), url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1900&q=85') center/cover;
    color: white;
    padding: 88px 0 82px
}

.hero-content {
    max-width: 720px
}

.eyebrow {
    color: var(--gold);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px
}

.hero h1 {
    font: 700 clamp(34px, 5vw, 56px)/1.12 'Playfair Display', serif;
    margin: 16px 0
}

.hero p {
    font-size: 17px;
    color: #e2e9f5;
    max-width: 650px
}

.btn {
    display: inline-block;
    padding: 13px 22px;
    background: var(--gold);
    color: #13264a;
    font-weight: 700;
    border-radius: 3px;
    margin: 12px 9px 0 0
}

.btn-outline {
    background: transparent;
    border: 1px solid #ffffff80;
    color: white
}

.section {
    padding: 68px 0
}

.section.pale {
    background: var(--pale)
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 25px;
    margin-bottom: 28px
}

.section h2,
.page-hero h1 {
    font: 700 34px/1.2 'Playfair Display', serif;
    color: var(--navy);
    margin: 8px 0 12px
}

.section-head p {
    color: var(--muted);
    margin: 0;
    max-width: 630px
}

.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px
}

.card {
    background: white;
    border: 1px solid var(--line);
    padding: 25px;
    border-radius: 5px;
    box-shadow: 0 7px 24px #0a28500a
}

.card .icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff4dc;
    color: #9b690e;
    display: grid;
    place-items: center;
    font-size: 21px
}

.card h3 {
    font: 700 20px 'Playfair Display', serif;
    color: var(--navy);
    margin: 16px 0 8px
}

.card p {
    color: var(--muted);
    margin: 0 0 14px
}

.text-link {
    font-weight: 700;
    color: #a36f10;
    font-size: 13px
}

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 55px;
    align-items: center
}

.act-panel {
    background: var(--navy);
    color: white;
    padding: 35px;
    border-radius: 5px
}

.act-panel h3 {
    font: 700 25px 'Playfair Display';
    margin-top: 0
}

.act-panel p {
    color: #d9e2f1
}

.stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 26px
}

.stat {
    border-left: 3px solid var(--gold);
    padding: 7px 12px
}

.stat strong {
    display: block;
    font-size: 23px;
    color: var(--navy)
}

.page-hero {
    background: var(--pale);
    padding: 52px 0;
    border-bottom: 1px solid var(--line)
}

.page-hero p {
    color: var(--muted);
    max-width: 720px;
    margin: 0
}

.content {
    padding: 45px 0 75px;
    min-height: 400px
}

.content h2,
.content h3 {
    font-family: 'Playfair Display';
    color: var(--navy)
}

.content p,
.content li {
    color: #4f5d72
}

.item-list {
    display: grid;
    gap: 14px
}

.item {
    background: white;
    border: 1px solid var(--line);
    padding: 20px 23px;
    border-radius: 4px
}

.item h3 {
    margin: 0 0 5px;
    font: 700 19px 'Playfair Display';
    color: var(--navy)
}

.meta {
    font-size: 12px;
    color: #8a94a5
}

.item p {
    margin: 10px 0;
    color: #596579
}

.searchbar {
    display: flex;
    gap: 10px;
    margin: 0 0 24px
}

.searchbar input,
.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #d9e0ea;
    border-radius: 3px;
    font: inherit
}

.searchbar button,
.submit {
    border: 0;
    background: var(--navy);
    color: white;
    padding: 12px 20px;
    font-weight: 700;
    border-radius: 3px;
    cursor: pointer
}

.footer {
    background: #071b43;
    color: #d5deec;
    padding: 48px 0 0
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1.3fr;
    gap: 55px;
    padding-bottom: 35px
}

.footer-logo {
    width: 145px;
    height: 85px;
    object-fit: contain;
    background: white;
    padding: 4px
}

.footer h4 {
    color: white;
    margin: 0 0 13px
}

.footer a {
    display: block;
    margin: 7px 0;
    color: #d5deec;
    font-size: 13px
}

.footer p {
    font-size: 13px;
    color: #c0cadd
}

.copyright {
    border-top: 1px solid #ffffff20;
    padding: 16px 0;
    font-size: 12px
}

.copyright .container {
    display: flex;
    justify-content: space-between
}

.faq {
    border-bottom: 1px solid var(--line);
    padding: 16px 0
}

.faq summary {
    font-weight: 700;
    color: var(--navy);
    cursor: pointer
}

.notice {
    padding: 14px;
    background: #fff7e6;
    border-left: 4px solid var(--gold);
    color: #66501e;
    margin: 20px 0
}

.admin-body {
    background: #f3f6fa
}

.admin-shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh
}

.sidebar {
    background: var(--navy2);
    color: white;
    padding: 25px 18px
}

.sidebar h2 {
    font: 700 22px 'Playfair Display';
    margin: 5px 10px 28px
}

.sidebar a {
    display: block;
    padding: 11px 13px;
    border-radius: 4px;
    color: #dce5f4;
    font-size: 14px
}

.sidebar a:hover {
    background: #ffffff16
}

.admin-main {
    padding: 35px;
    min-width: 0
}

.admin-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px
}

.admin-main h1 {
    font: 700 30px 'Playfair Display';
    color: var(--navy);
    margin: 0
}

.admin-card {
    background: white;
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 23px;
    margin-bottom: 22px
}

.admin-table {
    width: 100%;
    border-collapse: collapse
}

.admin-table th,
.admin-table td {
    text-align: left;
    padding: 12px;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    vertical-align: top
}

.admin-table th {
    background: #f7f9fc;
    color: #506078
}

.field {
    margin: 0 0 16px
}

.field label {
    display: block;
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 6px
}

.field textarea {
    min-height: 140px
}

.field small {
    color: var(--muted)
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px
}

.admin-actions a,
.admin-actions button {
    margin-right: 8px;
    color: #9a680c;
    background: none;
    border: 0;
    cursor: pointer;
    font-weight: 700
}

.danger {
    color: #b42318 !important
}

.login-wrap {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: linear-gradient(130deg, #071b43, #173d79)
}

.login-card {
    width: min(430px, 92%);
    background: white;
    padding: 35px;
    border-radius: 7px
}

.login-card img {
    width: 145px;
    height: 80px;
    object-fit: contain
}

.login-card h1 {
    font: 700 26px 'Playfair Display';
    color: var(--navy)
}

.alert {
    padding: 12px;
    background: #feeceb;
    color: #9f2822;
    margin-bottom: 15px
}

.status {
    padding: 4px 8px;
    border-radius: 20px;
    background: #e8f5ed;
    color: #247446;
    font-size: 11px
}

.status.draft {
    background: #fff4dc;
    color: #93640d
}

@media(max-width:1000px) {
    .main-nav {
        gap: 12px;
        font-size: 12px
    }

    .brand img {
        width: 135px
    }

    .cards {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:760px) {
    .topbar-inner {
        padding: 8px 0;
        gap: 10px;
        align-items: flex-start
    }

    .topbar-inner span {
        display: block;
        margin: 0 0 3px
    }

    .portal-btn {
        white-space: nowrap
    }

    .nav-wrap {
        min-height: 82px
    }

    .brand img {
        height: 68px;
        width: 130px
    }

    .menu-toggle {
        display: block
    }

    .main-nav {
        display: none;
        position: absolute;
        top: 82px;
        left: 0;
        right: 0;
        background: white;
        padding: 12px 5%;
        box-shadow: 0 12px 20px #0002;
        align-items: stretch;
        flex-direction: column;
        gap: 0
    }

    .main-nav.open {
        display: flex
    }

    .main-nav>a,
    .nav-drop>a {
        padding: 11px 0
    }

    .drop-menu {
        display: block;
        position: static;
        box-shadow: none;
        border: 0;
        padding: 0 0 5px 14px
    }

    .drop-menu a {
        padding: 7px
    }

    .hero {
        padding: 65px 0
    }

    .cards,
    .split,
    .footer-grid,
    .form-grid {
        grid-template-columns: 1fr
    }

    .section {
        padding: 48px 0
    }

    .section-head {
        display: block
    }

    .admin-shell {
        grid-template-columns: 1fr
    }

    .sidebar {
        padding: 14px;
        display: flex;
        flex-wrap: wrap;
        gap: 4px
    }

    .sidebar h2 {
        width: 100%;
        margin: 4px 8px
    }

    .sidebar a {
        padding: 8px
    }

    .admin-main {
        padding: 20px 4%
    }

    .admin-table {
        display: block;
        overflow-x: auto
    }

    .copyright .container {
        display: block
    }

    .stat-row {
        grid-template-columns: 1fr
    }
}