/*
Theme Name: Futurio Learning
Theme URI: https://futuriolearning.com
Description: Custom theme for Futurio Learning — Maryland K-8 student enrichment programs
Version: 1.0.0
Author: Futurio Learning
Text Domain: futurio-learning
*/

/* ==========================================================================
   Header / footer logo — larger than design-system default (36px)
   ========================================================================== */

.fl-nav__logo img,
.fl-nav__logo .custom-logo {
    height: 56px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
}

@media (min-width: 1024px) {
    .fl-nav__logo img,
    .fl-nav__logo .custom-logo {
        height: 64px;
        max-width: 260px;
    }
}

.fl-nav__inner {
    height: auto;
    min-height: 84px;
}

/* Footer logo — show full-colour brand on the dark teal background, sized
   to be a visible anchor. Override design-system's 36px height + white
   silhouette filter. White rounded backdrop ensures all colours read. */
.fl-footer__logo {
    height: auto !important;
    margin-bottom: var(--fl-sp-4);
    filter: none !important;
    opacity: 1 !important;
    display: inline-flex;
    align-items: center;
    background: var(--fl-white);
    padding: var(--fl-sp-2) var(--fl-sp-3);
    border-radius: var(--fl-radius-lg);
}

.fl-footer__logo img,
.fl-footer__logo .custom-logo {
    height: 64px;
    width: auto;
    max-width: 240px;
    object-fit: contain;
    display: block;
}

/* "Powered by nwados.com" link in footer copyright */
.fl-footer__poweredby {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--fl-transition);
}
.fl-footer__poweredby:hover,
.fl-footer__poweredby:focus {
    color: var(--fl-gold);
}

/* ==========================================================================
   Header navigation — even spacing across the desktop nav bar
   ========================================================================== */

@media (min-width: 1024px) {
    /* Make the link list expand into the middle zone so items distribute
       across the full width between logo and CTA. */
    .fl-nav__links {
        flex: 1;
        justify-content: space-evenly;
        gap: var(--fl-sp-5);
        margin: 0 var(--fl-sp-8);
    }

    .fl-nav__link {
        white-space: nowrap;
        padding-left:  var(--fl-sp-3);
        padding-right: var(--fl-sp-3);
        letter-spacing: var(--fl-ls-wide);
    }
}

@media (min-width: 1280px) {
    /* On wider screens, give items even more breathing room. */
    .fl-nav__links {
        gap: var(--fl-sp-6);
    }
}

/* ==========================================================================
   Mobile drawer — uses its own .fl-nav__mobile-list class. Maximum
   specificity rules below using .fl-nav .fl-nav__mobile X to beat any
   other CSS source. !important on display because we have no idea what
   the browser cache or any CDN-injected CSS is doing.
   ========================================================================== */

.fl-nav .fl-nav__mobile {
    flex-direction: column;
    overflow: visible;
}

.fl-nav .fl-nav__mobile.is-open {
    display: flex !important;
}

.fl-nav .fl-nav__mobile .fl-nav__mobile-list,
.fl-nav__mobile-list {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: var(--fl-sp-1);
    width: 100%;
}

.fl-nav .fl-nav__mobile .fl-nav__mobile-list li,
.fl-nav__mobile-list > li {
    display: list-item !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    visibility: visible !important;
    opacity: 1 !important;
}

.fl-nav .fl-nav__mobile .fl-nav__mobile-list .fl-nav__link,
.fl-nav__mobile-list .fl-nav__link {
    display: block !important;
    width: 100%;
    padding: var(--fl-sp-3) var(--fl-sp-4);
    font-size: var(--fl-text-base);
    color: var(--fl-gray-700);
    text-decoration: none;
    border-radius: var(--fl-radius-md);
    visibility: visible !important;
    opacity: 1 !important;
}

.fl-nav__mobile-list .fl-nav__link:hover,
.fl-nav__mobile-list .fl-nav__link--active {
    color: var(--fl-teal-dark);
    background: var(--fl-gray-50);
}

.fl-nav__mobile-cta {
    margin-top: var(--fl-sp-4);
    text-align: center;
    width: 100%;
}

@media (min-width: 1024px) {
    /* On desktop the drawer should never appear at all. */
    .fl-nav__mobile,
    .fl-nav__mobile.is-open {
        display: none !important;
    }
}

/* ==========================================================================
   Legal pages & long-form prose
   .fl-prose wraps the_content() on Privacy Policy, Terms of Use, Accessibility
   Statement, and single blog posts. Uses design-system tokens only.
   ========================================================================== */

.fl-prose {
    color: var(--fl-color-text);
    font-family: var(--fl-font-body);
    font-size: var(--fl-text-base);
    line-height: var(--fl-lh-relaxed);
}

.fl-prose > * + * {
    margin-top: var(--fl-sp-4);
}

.fl-prose h1,
.fl-prose h2,
.fl-prose h3,
.fl-prose h4 {
    font-family: var(--fl-font-heading);
    color: var(--fl-color-primary);
    line-height: var(--fl-lh-tight);
}

.fl-prose h2 {
    font-size: var(--fl-text-2xl);
    margin-top: var(--fl-sp-10);
    margin-bottom: var(--fl-sp-3);
    padding-top: var(--fl-sp-2);
    border-top: 1px solid var(--fl-color-border);
}

.fl-prose h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.fl-prose h3 {
    font-size: var(--fl-text-xl);
    margin-top: var(--fl-sp-8);
    margin-bottom: var(--fl-sp-2);
}

.fl-prose h4 {
    font-size: var(--fl-text-lg);
    margin-top: var(--fl-sp-6);
    margin-bottom: var(--fl-sp-2);
}

.fl-prose p {
    margin: 0 0 var(--fl-sp-4);
}

.fl-prose strong { font-weight: 700; }
.fl-prose em     { font-style: italic; }

.fl-prose a {
    color: var(--fl-teal-vivid);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--fl-transition);
}
.fl-prose a:hover,
.fl-prose a:focus {
    color: var(--fl-teal-dark);
}

.fl-prose ul,
.fl-prose ol {
    margin: 0 0 var(--fl-sp-4);
    padding-left: var(--fl-sp-6);
}
.fl-prose ul { list-style: disc; }
.fl-prose ol { list-style: decimal; }
.fl-prose li {
    margin-bottom: var(--fl-sp-2);
}
.fl-prose li > ul,
.fl-prose li > ol {
    margin-top: var(--fl-sp-2);
    margin-bottom: 0;
}

.fl-prose blockquote {
    margin: var(--fl-sp-6) 0;
    padding: var(--fl-sp-4) var(--fl-sp-6);
    border-left: 4px solid var(--fl-teal-vivid);
    background: var(--fl-gray-50);
    border-radius: var(--fl-radius-md);
    color: var(--fl-color-text-muted);
    font-style: italic;
}

.fl-prose hr {
    margin: var(--fl-sp-8) 0;
    border: 0;
    border-top: 1px solid var(--fl-color-border);
}

.fl-prose code {
    background: var(--fl-gray-100);
    padding: 2px 6px;
    border-radius: var(--fl-radius-sm);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9em;
}

.fl-prose pre {
    background: var(--fl-gray-100);
    padding: var(--fl-sp-4);
    border-radius: var(--fl-radius-md);
    overflow-x: auto;
    margin: var(--fl-sp-4) 0;
}
.fl-prose pre code {
    background: transparent;
    padding: 0;
}

.fl-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--fl-sp-4) 0;
}
.fl-prose th,
.fl-prose td {
    padding: var(--fl-sp-2) var(--fl-sp-3);
    border-bottom: 1px solid var(--fl-color-border);
    text-align: left;
}
.fl-prose th {
    background: var(--fl-gray-50);
    font-weight: 700;
}

.fl-prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--fl-radius-md);
    margin: var(--fl-sp-4) 0;
}