/* Layer 1: company name bar */
.site-header {
    background-color: #082648;
}

/* Libre Baskerville: a traditional, professional serif for the company name. Stored in static/fonts. */
@font-face {
    font-family: "Libre Baskerville";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/libre-baskerville-latin-400-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Libre Baskerville";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/libre-baskerville-latin-500-normal.woff2") format("woff2");
}

.navbar-title {
    font-family: "Libre Baskerville", Georgia, "Times New Roman", serif;
    font-weight: 400;
    /* Scales with the screen, so it stays on one line on phones */
    font-size: clamp(1.55rem, 4.6vw, 3.25rem);
    /* A little extra space between letters for a more refined look */
    letter-spacing: 0.01em;
    /* Trim the empty space above capitals and below the baseline so the
       letters themselves sit in the vertical centre, not their line box */
    line-height: 1;
    text-box: trim-both cap alphabetic;
}

/* Logo sized relative to the title text, so it scales with it */
.navbar-logo {
    height: 1em;
    width: auto;
    vertical-align: -0.1em;
    margin-right: 0.3em;
}

/* Layer 2: links bar, with a faint line separating it from the name bar */
.site-nav {
    /* Slightly darker than the name bar (#082648) */
    background-color: #061c36;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    /* Thin green line along the bottom, like the green tops on the cards */
    border-bottom: 3px solid #7a9b76;
    box-shadow: 0 2px 10px rgba(8, 38, 72, 0.15);
}

.site-nav .nav-link {
    font-size: 1.25rem;
    letter-spacing: 0.03em;
    position: relative;
    transition: color 0.2s ease;
}

/* Green underline that grows in on hover and stays under the current page */
.site-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0.2rem;
    height: 2px;
    background-color: #7a9b76;
    transform: scaleX(0);
    transition: transform 0.25s ease;
}

.site-nav .nav-link:hover::after,
.site-nav .nav-link.active::after {
    transform: scaleX(1);
}

.site-nav .nav-link.active {
    color: white;
}

/* Logout gets a muted brick red underline instead of the green */
.site-nav .nav-logout::after {
    background-color: #c0675c;
}

/* Collapsed into the menu button (below lg): links have no side padding, so run the underline
   the full width of the text to keep it lined up on the left */
@media (max-width: 991.98px) {
    .site-nav .nav-link::after {
        left: 0;
        right: 0;
    }
}

/* Expanded (lg and up): space the links out in a row, each name kept on one line. Below lg they
   go into the menu button instead, because tablets don't have room for them all side by side. */
@media (min-width: 992px) {
    .site-nav .nav-link {
        margin-right: 1.5rem;
        white-space: nowrap;
    }
}

/* Small laptops: a little smaller, so the extra links when logged in (My Account, Admin) still fit */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .site-nav .nav-link {
        font-size: 1.1rem;
        margin-right: 0.9rem;
    }
}

/* Footer: same dark blue as the links bar */
.site-footer {
    background-color: #061c36;
    color: rgba(255, 255, 255, 0.75);
}

.footer-heading {
    color: white;
}

.footer-tagline {
    color: #7a9b76; /* green from the logo */
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.site-footer a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
}

.site-footer a:hover {
    color: white;
}

.site-footer li {
    margin-bottom: 0.4rem;
}

/* Copyright strip, darkest of the blues */
.footer-bottom {
    background-color: #04142a;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 0.875rem;
}

/* Short green line under a section heading */
.section-divider {
    width: 3.75rem;
    height: 2px;
    background-color: #7a9b76;
}

/* Home page: hero */
.hero {
    /* White, like the logo's background, so the logo doesn't show as a box */
    background-color: white;
    padding: 4.5rem 0 5rem;
    border-bottom: 1px solid rgba(8, 38, 72, 0.06);
    /* Fill the rest of the screen below the name and links bar, so the next section only appears
       once you scroll. --hero-top is that bar's height, measured in site.js (9.5rem is a close guess
       for before it runs). svh is the screen height with a phone's address bar showing. */
    display: flex;
    align-items: center;
    min-height: calc(100vh - var(--hero-top, 9.5rem));
    min-height: calc(100svh - var(--hero-top, 9.5rem));
}

.hero-eyebrow {
    color: #7a9b76;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-size: 0.9rem;
    font-weight: 600;
}

.hero-title {
    font-family: "Libre Baskerville", Georgia, "Times New Roman", serif;
    color: #082648;
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    line-height: 1.2;
}

.hero-lead {
    color: #4a5568;
    font-size: 1.15rem;
    line-height: 1.8;
    max-width: 34rem;
}

@media (max-width: 991.98px) {
    .hero-lead {
        margin-left: auto;
        margin-right: auto;
    }
}

.hero-logo {
    max-height: 28.75rem;
}

/* Wide screens: let the logo spill into the space around its column. The image has a wide white
   border, so only that border overlaps the gutters - the logo itself stays clear of the text. */
@media (min-width: 992px) {
    .hero-logo {
        max-height: none;
        width: 120%;
        max-width: none;
        margin: -1.5rem -10%;
    }
}

/* Home page: sections */
.home-section {
    padding: 4.5rem 0;
}

.home-section-alt {
    background-color: #f4f6f3;
}

.section-title {
    color: #082648;
    letter-spacing: 0.05em;
}

.section-intro {
    max-width: 40rem;
    color: #4a5568;
}

/* Service cards: same card look as the rest of the site */
.service-card {
    background-color: white;
    border-top: 3px solid #7a9b76;
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgba(8, 38, 72, 0.08);
    padding: 2rem 1.75rem;
    color: #4a5568;
    line-height: 1.7;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.service-card:hover {
    box-shadow: 0 8px 24px rgba(8, 38, 72, 0.14);
    transform: translateY(-3px);
}

.service-card h3 {
    color: #082648;
    min-height: 2.6em; /* titles line up even when one wraps */
}

.service-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background-color: rgba(122, 155, 118, 0.15);
    color: #7a9b76;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.service-list {
    padding-left: 1.1rem;
}

.service-list li {
    margin-bottom: 0.25rem;
}

.service-list li::marker {
    color: #7a9b76;
}

/* "Why work with us": white cards, icon beside the text */
.why-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgba(8, 38, 72, 0.06);
    padding: 1.5rem;
    color: #4a5568;
}

.why-item h3 {
    color: #082648;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.why-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background-color: rgba(122, 155, 118, 0.15);
    color: #7a9b76;
    font-size: 1.3rem;
}

/* "How it works": numbered timeline, kept narrow so it reads top to bottom */
.steps {
    max-width: 40rem;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.step {
    position: relative;
    display: flex;
    gap: 1.5rem;
    padding-bottom: 2.5rem;
    color: #4a5568;
}

.step:last-child {
    padding-bottom: 0;
}

/* Line joining each number to the next */
.step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 1.5rem;
    top: 3.5rem;
    bottom: 0.5rem;
    width: 2px;
    transform: translateX(-50%);
    background-color: rgba(122, 155, 118, 0.4);
}

.step h3 {
    color: #082648;
    margin-top: 0.65rem;
}

.step-number {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: #082648;
    color: white;
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: 1.25rem;
    box-shadow: 0 0 0 6px rgba(122, 155, 118, 0.25);
}

/* "Sound familiar?": problems list and navy "We can help" panel */
.problem {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.25rem 0;
    border-bottom: 1px solid rgba(8, 38, 72, 0.08);
    color: #4a5568;
}

.problem:first-child {
    padding-top: 0;
}

.problem:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.problem h3 {
    color: #082648;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.problem-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background-color: rgba(192, 103, 92, 0.12); /* brick red, as on Logout - these are the problems */
    color: #c0675c;
    font-size: 1.25rem;
}

.help-panel {
    background-color: #082648;
    color: rgba(255, 255, 255, 0.8);
    border-radius: 0.5rem;
    padding: 2rem;
}

.help-panel h3 {
    color: white;
}

.help-panel li {
    margin-bottom: 0.5rem;
}

.help-panel li i {
    color: #7a9b76;
}

/* Questions: Bootstrap accordion restyled to match the cards */
.faq {
    max-width: 47.5rem;
}

.faq .accordion-item {
    border: none;
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 4px 16px rgba(8, 38, 72, 0.06);
    overflow: hidden;
}

.faq .accordion-button {
    color: #082648;
    font-weight: 500;
    background-color: white;
}

.faq .accordion-button:not(.collapsed) {
    color: #082648;
    background-color: white;
    box-shadow: inset 0 -1px 0 rgba(8, 38, 72, 0.08);
}

.faq .accordion-button:focus {
    box-shadow: none;
}

.faq .accordion-button:focus-visible {
    outline: 2px solid #7a9b76;
    outline-offset: -2px;
}

.faq .accordion-body {
    color: #4a5568;
    line-height: 1.7;
}

.faq .accordion-body a {
    color: #082648;
    text-decoration-color: #7a9b76;
    text-underline-offset: 3px;
}

/* Navy call-to-action band at the bottom of the home page */
.cta-band {
    background-color: #082648;
    padding: 4rem 0;
    /* Sit flush against the footer (which has a top margin) */
    margin-bottom: -3rem;
}

.cta-band-title {
    font-family: "Libre Baskerville", Georgia, serif;
    color: white;
}

.cta-band-text {
    color: rgba(255, 255, 255, 0.8);
    max-width: 35rem;
}

.cta-btn-light {
    background-color: #7a9b76;
    color: white;
    border-radius: 2rem;
    padding: 0.6rem 2rem;
}

.cta-btn-light:hover,
.cta-btn-light:focus {
    background-color: #6a8a66;
    color: white;
}

.cta-btn-ghost {
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 2rem;
    padding: 0.6rem 2rem;
}

.cta-btn-ghost:hover,
.cta-btn-ghost:focus {
    background-color: white;
    color: #082648;
}

/* Smooth scroll for "Explore our services" */
html {
    scroll-behavior: smooth;
}

/* Trim anything that pokes past the side of the screen (like the hero logo, which spills a little past
   its column on purpose), so the page never scrolls sideways. "clip" rather than "hidden", because
   hidden would stop the links bar from sticking to the top. */
body {
    overflow-x: clip;
}

#services {
    scroll-margin-top: 4rem; /* clear the sticky links bar */
}

/* About page */
.about-title {
    color: #082648;
    letter-spacing: 0.05em;
}

/* Light band at the top of the page, like the home page hero */
.page-intro {
    background: linear-gradient(180deg, #fafaf8 0%, #f1f3ef 100%);
    padding: 4.5rem 0;
    border-bottom: 1px solid rgba(8, 38, 72, 0.06);
}

.about-lead {
    max-width: 47.5rem;
    color: #4a5568;
    line-height: 1.8;
}

.about-text {
    color: #4a5568;
    font-size: 1.05rem;
    line-height: 1.85;
}

/* Navy "We go the extra mile" panel beside the story */
.promise-panel {
    background-color: #082648;
    color: rgba(255, 255, 255, 0.8);
    border-radius: 0.5rem;
    border-left: 4px solid #7a9b76;
    padding: 2.5rem 2rem;
}

.promise-quote {
    color: #7a9b76;
    font-size: 3rem;
    line-height: 1;
}

.promise-text {
    font-family: "Libre Baskerville", Georgia, serif;
    color: white;
    font-size: 1.6rem;
    margin: 0.5rem 0 1rem;
}

/* "Our approach": large faint numbers above each principle */
.approach-item {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgba(8, 38, 72, 0.06);
    padding: 2rem;
    color: #4a5568;
    line-height: 1.7;
}

.approach-item h3 {
    color: #082648;
}

.approach-number {
    display: block;
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: 2.5rem;
    line-height: 1;
    color: rgba(122, 155, 118, 0.55);
    margin-bottom: 0.75rem;
}

/* "What you can expect": rows with a faint line between them */
.expect-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.25rem 0;
    border-bottom: 1px solid rgba(8, 38, 72, 0.08);
    color: #4a5568;
}

.expect-item:first-child {
    padding-top: 0;
}

.expect-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.expect-item h3 {
    color: #082648;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

/* Full-width navy section (the confidentiality panel on the About page sits on it) */
.section-navy {
    background-color: #082648;
}

/* Confidentiality: navy panel */
.trust-panel {
    background-color: #082648;
    color: rgba(255, 255, 255, 0.8);
    border-radius: 0.5rem;
    padding: 2.5rem;
}

.trust-panel h2 {
    font-family: "Libre Baskerville", Georgia, serif;
    color: white;
}

.trust-icon {
    color: #7a9b76;
    font-size: 2.75rem;
}

.trust-list li {
    margin-bottom: 0.6rem;
}

.trust-list i {
    color: #7a9b76;
}

.trust-link {
    color: white;
    text-decoration-color: #7a9b76;
    text-underline-offset: 3px;
}

.trust-link:hover {
    color: #7a9b76;
}

@media (max-width: 575.98px) {
    .trust-panel {
        padding: 1.75rem 1.25rem;
    }
}

/* "Who we work with" */
.fit-item {
    color: #4a5568;
}

.fit-item h3 {
    color: #082648;
    font-weight: 600;
    margin-top: 1rem;
}

.fit-item .why-icon {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.6rem;
}

/* Same card look as the "What we do" section */
.about-card {
    background-color: white;
    border-top: 3px solid #7a9b76;
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgba(8, 38, 72, 0.08);
    padding: 2rem 1.5rem;
    color: #4a5568;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.about-card:hover {
    box-shadow: 0 8px 24px rgba(8, 38, 72, 0.14);
    transform: translateY(-2px);
}

.about-card h3 {
    color: #082648;
}

.about-card-icon {
    display: block;
    color: #7a9b76;
    font-size: 2rem;
    margin-bottom: 0.75rem;
}

/* "Get in touch" call to action (home and about pages) */
.cta-text {
    color: #082648;
    font-size: 1.15rem;
}

.cta-btn {
    background-color: #082648;
    color: white;
    border-radius: 2rem;
    padding: 0.6rem 2rem;
}

.cta-btn:hover,
.cta-btn:focus {
    background-color: #061c36;
    color: white;
}

/* Contact page */
.contact-title {
    color: #082648;
    letter-spacing: 0.05em;
}

.contact-subtitle {
    color: #4a5568;
}

/* Navy info panel beside the form */
.contact-info {
    background-color: #082648;
    color: rgba(255, 255, 255, 0.8);
    border-radius: 0.5rem;
    padding: 2rem;
}

.contact-info h2 {
    color: white;
}

.contact-info-heading {
    color: #7a9b76; /* green from the logo */
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.contact-info li {
    margin-bottom: 0.6rem;
}

.contact-info i {
    color: #7a9b76;
}

/* Form card, same look as the other cards on the site */
.contact-form {
    background-color: white;
    border-top: 3px solid #7a9b76;
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgba(8, 38, 72, 0.08);
    padding: 2rem;
}

.contact-form .form-label {
    color: #082648;
    font-weight: 500;
}

/* Green focus ring instead of Bootstrap's blue one */
.contact-form .form-control:focus {
    border-color: #7a9b76;
    box-shadow: 0 0 0 0.2rem rgba(122, 155, 118, 0.25);
}

/* Privacy page */
.privacy-title {
    color: #082648;
    letter-spacing: 0.05em;
}

.privacy-updated {
    color: #7a9b76; /* green from the logo */
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.875rem;
}

/* Same card look as the other cards, kept to a comfortable reading width */
.privacy-card {
    max-width: 51.25rem;
    background-color: white;
    border-top: 3px solid #7a9b76;
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgba(8, 38, 72, 0.08);
    padding: 2.5rem;
    color: #4a5568;
    line-height: 1.8;
}

.privacy-card .lead {
    color: #082648;
    margin-bottom: 2rem;
}

/* Faint line between sections */
.privacy-card h2 {
    color: #082648;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(8, 38, 72, 0.08);
}

.privacy-card .lead + h2 {
    margin-top: 0;
}

.privacy-icon {
    color: #7a9b76;
    margin-right: 0.6rem;
}

.privacy-card a {
    color: #082648;
    text-decoration-color: #7a9b76;
    text-underline-offset: 3px;
}

.privacy-card a:hover {
    color: #7a9b76;
}

@media (max-width: 575.98px) {
    .privacy-card {
        padding: 1.5rem;
    }
}

/* Privacy link in the copyright strip */
.footer-bottom a {
    margin-left: 0.5rem;
}

.privacy-card ul {
    padding-left: 1.25rem;
}

.privacy-card li::marker {
    color: #7a9b76;
}

.privacy-card strong {
    color: #082648;
    font-weight: 600;
}

/* Turnstile's frame can't be restyled; just round its corners like the form inputs */
.cf-turnstile iframe {
    border-radius: 0.25rem;
}

/* Meeting length toggle on the schedule page */
.duration-choice .btn {
    border: 1px solid #7a9b76;
    color: #082648;
    font-weight: 500;
    padding: 0.4rem 1.25rem;
}

.duration-choice .btn:hover {
    background-color: rgba(122, 155, 118, 0.15);
}

.duration-choice .btn-check:checked + .btn {
    background-color: #082648;
    border-color: #082648;
    color: white;
}

.duration-choice .btn-check:focus-visible + .btn {
    outline: 2px solid #7a9b76;
    outline-offset: 2px;
}

/* Booking calendar on the schedule page */
.booking-picker {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1.25rem;
}

.cal-month {
    color: #082648;
}

.cal-nav {
    color: #082648;
    border: none;
}

.cal-nav:hover:not(:disabled) {
    background-color: rgba(122, 155, 118, 0.15);
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.25rem;
    text-align: center;
}

.cal-weekdays {
    color: #4a5568;
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
}

.cal-day {
    aspect-ratio: 1;
    border: none;
    border-radius: 50%;
    background: none;
    color: #adb5bd;
    font-size: 0.95rem;
}

/* Days with free times: green tint so they stand out */
.cal-day.available {
    background-color: rgba(122, 155, 118, 0.15);
    color: #082648;
    font-weight: 600;
}

.cal-day.available:hover {
    background-color: rgba(122, 155, 118, 0.35);
}

.cal-day.selected,
.cal-day.selected:hover {
    background-color: #082648;
    color: white;
}

.cal-times-heading {
    color: #082648;
}

/* Scrolls so a full day of times doesn't make the box taller than the calendar */
.cal-times {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    max-height: 18rem;
    overflow-y: auto;
}

.cal-time {
    border: 1px solid #7a9b76;
    border-radius: 0.25rem;
    background: white;
    color: #082648;
    padding: 0.4rem;
    font-weight: 500;
}

.cal-time:hover {
    background-color: rgba(122, 155, 118, 0.15);
}

.cal-time.selected {
    background-color: #082648;
    border-color: #082648;
    color: white;
}

.cal-day:focus-visible,
.cal-time:focus-visible,
.cal-nav:focus-visible {
    outline: 2px solid #7a9b76;
    outline-offset: 2px;
}

/* Outlook connection box on the admin Meetings page */
.outlook-panel {
    max-width: 60rem;
    border: 1px solid #dee2e6;
    border-left: 4px solid #7a9b76;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
}

/* Big "404" above the title on the page-not-found page */
.not-found-code {
    color: #7a9b76; /* green from the logo */
    letter-spacing: 0.1em;
}

/* Second, lighter button next to a .cta-btn (same shape, navy outline) */
.cta-btn-outline {
    color: #082648;
    border: 1px solid #082648;
    border-radius: 2rem;
    padding: 0.6rem 2rem;
}

.cta-btn-outline:hover,
.cta-btn-outline:focus {
    background-color: #082648;
    color: white;
}

/* Line under the admin table headings (Bootstrap 5.1 drew it; 5.3 doesn't, so it's kept here) */
.admin-table > tbody {
    border-top: 2px solid currentColor;
}

/* Small copy of the name in the links bar - hidden (no width) until the big name has scrolled
   off the top of the screen, then it slides in. site.js adds .is-stuck to the bar, plus .brand-fits
   when there's room for the name without the links wrapping onto a second line. */
.site-nav .nav-brand {
    font-family: "Libre Baskerville", Georgia, "Times New Roman", serif;
    font-weight: 400;
    font-size: 1.15rem;
    line-height: 1.4;  /* room for the tails of letters like "g" */
    letter-spacing: 0.01em;
    color: white;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    max-width: 0;
    opacity: 0;
    transform: translateX(-0.75rem);  /* starts a little to the left, then slides into place */
    pointer-events: none;
    transition: max-width 0.4s ease, opacity 0.35s ease, margin 0.4s ease, transform 0.4s ease;
}

.site-nav.is-stuck.brand-fits .nav-brand {
    max-width: var(--brand-width, 22rem);  /* the name's real width, measured by site.js */
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

/* site.js briefly gives the name its full width (invisibly) to check whether it fits */
.site-nav.brand-test .nav-brand {
    transition: none;
    max-width: none;
}

/* Phones and tablets: name to the right of the menu button */
@media (max-width: 991.98px) {
    .site-nav .nav-brand {
        margin-right: auto;
    }

    .site-nav.is-stuck.brand-fits .nav-brand,
    .site-nav.brand-test .nav-brand {
        margin-left: 0.75rem;
    }
}

@media (min-width: 992px) {
    .site-nav.is-stuck.brand-fits .nav-brand,
    .site-nav.brand-test .nav-brand {
        margin-left: 0.5rem;
        margin-right: 1rem;
    }
}

/* Admin password popups */
.admin-modal {
    border: none;
    border-radius: 0.5rem;
    overflow: hidden;
}

.admin-modal .modal-header {
    background-color: #082648;
    color: white;
    border-bottom: 3px solid #7a9b76;
}

.admin-modal .modal-body {
    color: #4a5568;
}

.admin-modal .form-label {
    color: #082648;
    font-weight: 500;
}

.admin-modal .form-control:focus {
    border-color: #7a9b76;
    box-shadow: 0 0 0 0.2rem rgba(122, 155, 118, 0.25);
}

/* Admin home: a clickable card for each admin page */
.admin-card {
    display: block;
    background-color: white;
    border-top: 3px solid #7a9b76;
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgba(8, 38, 72, 0.08);
    padding: 2rem 1.75rem;
    color: #4a5568;
    text-decoration: none;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.admin-card:hover,
.admin-card:focus-visible {
    color: #4a5568;
    box-shadow: 0 8px 24px rgba(8, 38, 72, 0.14);
    transform: translateY(-3px);
}

.admin-card h2,
.admin-card h3,
.admin-card-stats strong {
    color: #082648;
}

/* A card that's for reading only, so it doesn't lift on hover like the link cards */
.admin-card-static:hover {
    box-shadow: 0 4px 16px rgba(8, 38, 72, 0.08);
    transform: none;
}

.view-count {
    color: #082648;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.1;
}

.view-count-label {
    font-size: 0.85rem;
}

.admin-home-link {
    color: #4a5568;
    font-size: 0.9rem;
    text-decoration: none;
}

.admin-home-link:hover {
    color: #082648;
}

.admin-locked-icon {
    color: #7a9b76;
    font-size: 3.5rem;
}

/* Live password checklist under new-password boxes (sign up, reset password) */
.password-rules,
.password-match {
    font-size: 0.875rem;
    color: #6c757d;
}

.password-rules li {
    margin-bottom: 0.15rem;
}

.password-rules i,
.password-match i {
    margin-right: 0.45rem;
}

.password-rules .met,
.password-match.met {
    color: #4f7a4a; /* darker than the logo green so it's easy to read */
}

.password-match:not(.met):not([hidden]) {
    color: #b0483c;
}

/* Big screens: everything a little larger, so the site looks like it does zoomed to 125% in the browser
   instead of small text floating in a lot of empty space. Sizes are in rem, so raising the base text
   size scales text, spacing and buttons together; the page containers are widened to match. */
@media (min-width: 1400px) {
    html {
        font-size: 112.5%;
    }

    .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
        max-width: 1485px;
    }
}

@media (min-width: 2000px) {
    html {
        font-size: 125%;
    }

    .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
        max-width: 1650px;
    }
}