/*!
Theme Name: GUIDED FUTURES THEME
Theme URI: https://knickdesigns.com
Description: Child theme of KNICK BASE.
Author: Knick Designs
Author URI: https://knickdesigns.com
Template: knick_base
Version: 1.1.0
Tested up to: 6.9
Requires PHP: 8.2
License: GPL v2 or later
Tags: block-editor-styles, full-site-editing, custom-colors, custom-menu, featured-images
Text Domain: knick_child
*/

:root {
    /* Fallbacks if theme.json fails or plugin overrides occur */
    --kb-width-content: 960px;
    --kb-width-wide: 1200px;
    --kb-font-body: system-ui, -apple-system, sans-serif;
    
    /* Spacing Scale (Matches standard block spacing) */
    --kb-spacing-sm: 1rem;
    --kb-spacing-md: 2rem;
    --kb-spacing-lg: 4rem;
}

body {
    background-image: linear-gradient(to bottom, #00395a 20%, #4d76b9);
    font-size:1rem;
}

/************ Editor Fixes ************/
:root :where(.is-layout-flex) {
    gap:20px;
}
@media screen and (min-width: 768px) {
    :root :where(.is-layout-flex) {
        gap:42px;
    }
}
/************ Header ************/

/************ Header ************/
.site-header {
    background-color:transparent;
    padding:0.6rem 0 0;
    border:none;
    z-index:2;
    width:100%;
    max-width:var(--kb-width-content);
    margin:0 auto;
}
.header-inner {
    flex-direction:column;
    position:relative;
}
.custom-logo-link img {
    max-width:200px;
}
.main-navigation {
    margin:0 auto;
    padding:0 1rem;
    text-align:center;
    width:100%;
    font-size:1.25rem;
    position:relative;
}
.menu-main-menu-container {
    border-bottom:none;
}
.main-navigation ul {
    justify-content:center;
    border:none;
    margin:0;
    
}
.main-navigation li a {
    padding:0.5rem 1.2rem;
    color:var(--wp--preset--color--primary);
    transition: all 0.2s ease;
    border-radius:0;
}
.main-navigation li a:hover, .main-navigation li a[aria-current="page"] {
    background-color:var(--wp--preset--color--accent);
    color:#fff;
}
.main-navigation.toggled .menu-main-menu-container {
    position:absolute;
    background:#fff;
    width:calc(100% - 2rem);
    border:none;
    box-shadow:0px 0px 10px rgba(0, 0, 0, 0.2);
    border-radius:0 0 6px 6px;
}
.menu-toggle, .menu-toggle:hover {
    border:2px solid var(--wp--preset--color--accent);
    font-size:1.2rem;
    color:var(--wp--preset--color--accent);
    background-color:#fff;
}
.menu-toggle .menu-icon {font-size:1.6rem;}
@media screen and (min-width: 768px) {
    .custom-logo-link img {
        max-width:280px;
    }
    .site-header {
        padding:1.2rem 0 0;
    }
    .main-navigation {
        padding:0 3rem;
        font-size:1.25rem;
    }
    .menu-main-menu-container {
        border-bottom: 2px solid var(--wp--preset--color--accent);
    }
    .main-navigation li a {border-radius:6px 6px 0 0;}
}

/************ Content ************/
#page .site-main {
    margin:0 auto;
    position:relative;
    top: -186px;
    margin-bottom:-86px;
    z-index:1;
    background-color:#fff;
    border:none;
    border-top:4px solid var(--wp--preset--color--secondary);
    border-radius:0;
    width:100%;
    max-width:var(--kb-width-content);
}
#page article {width:100%;}
#page .entry-content, #page .entry-wrapper, #page .site-main .wrapper {
    margin-top:186px;
    padding:1.4rem;
    width:100%;
}
#page .entry-wrapper .entry-content {margin-top:0; padding:0;}
@media screen and (min-width: 768px) {
    #page .site-main {
        top:-209px;
        margin-bottom:-72px;
        border:4px solid var(--wp--preset--color--secondary);
        border-radius:12px;
    }
    #page .entry-content, #page .entry-wrapper, #page .site-main .wrapper {
        margin-top:209px;
        padding:2rem 3rem;
    }
    #page .entry-wrapper .entry-content {margin-top:0; padding:0}
}

/************ Footer ************/
.site-footer {
    background-color: var(--wp--preset--color--primary);
}
.footer-inner {
    justify-content:center;
    flex-direction:column;
}
a.footer-brand {
    opacity:1;
    position:relative;
    top:-92px;
    margin-bottom:-92px;
}
.footer-brand img {
    width:120px; height:auto;
}
#footer-menu.menu {
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    gap:1.5rem;
    margin:0; padding:0;
}
#footer-menu.menu li {

}
@media screen and (min-width: 768px) {
    .footer-brand img {
        width:200px; height:auto;
    }
    a.footer-brand {
        top:-132px;
        margin-bottom:-132px;
    }
}