/* ============================================
   SLC GLOBAL DESIGN TOKENS & STYLES
   Sovereign Ledger Capital — Brand System
   Source: WPCode Snippet #30 "SLC Global Styles"
   Version: 1.0.0
   ============================================ */

:root {
    --slc-copper:          #CB822C;
    --slc-copper-deep:     #A06820;
    --slc-charcoal:        #2C2C2C;
    --slc-warm-white:      #F5F0E8;
    --slc-parchment:       #EDE7DB;
    --slc-stone:           #E3DCD0;
    --slc-text-secondary:  #5A5A5A;
    --slc-white:           #FFFFFF;
}

/* ---- Global body background ---- */
body {
    background-color: #F5F0E8 !important;
}

/* ---- Copper accent bar — under nav header ---- */
.site-header, #masthead {
    border-bottom: 2px solid #CB822C !important;
    background-color: #F5F0E8 !important;
}

/* ---- Copper accent bar — above site footer ---- */
.site-footer, #colophon {
    border-top: 2px solid #CB822C !important;
    background-color: #FFFFFF !important;
}

/* ---- Footer text & links ---- */
.site-footer, .site-footer p, .site-footer span,
#colophon, #colophon p, #colophon span {
    color: #5A5A5A !important;
}
.site-footer a, #colophon a {
    color: #5A5A5A !important;
    text-decoration: none !important;
}
.site-footer a:hover, #colophon a:hover {
    color: #CB822C !important;
}

/* ---- Global link color ---- */
a { color: #CB822C; }
a:hover { color: #A06820; }

/* ---- Nav link hover ---- */
.primary-navigation a:hover,
.main-navigation a:hover,
.site-header-row .header-navigation a:hover,
.kadence-navigation a:hover {
    color: #CB822C !important;
}

/* ---- Heading color ---- */
h1, h2, h3, h4, h5, h6 {
    color: #2C2C2C;
}

/* ---- Buttons — primary ---- */
.wp-element-button, .wp-block-button__link, .button,
button[type="submit"], input[type="submit"] {
    background-color: #CB822C !important;
    border-color:     #CB822C !important;
    color:            #FFFFFF !important;
}
.wp-element-button:hover, .wp-block-button__link:hover, .button:hover,
button[type="submit"]:hover, input[type="submit"]:hover {
    background-color: #A06820 !important;
    border-color:     #A06820 !important;
    color:            #FFFFFF !important;
}

/* ---- Content area background ---- */
.content-area, .site-content, .entry-content, main#primary {
    background-color: #F5F0E8;
}


/* ============================================
   DOUBLE FOOTER FIX
   Hide old inline dark footer block until homepage rebuild.
   .slc-footer and .slc-final-cta are legacy inline blocks —
   the Kadence footer bar below is the canonical footer.
   ============================================ */
.slc-footer { display: none !important; }


/* ============================================
   HOMEPAGE FULL-WIDTH & TITLE FIXES
   Hide Kadence page title banner on homepage.
   Make content area full-width so sections can bleed edge-to-edge.
   ============================================ */

/* Hide Kadence page title / hero header on homepage */
.home .entry-header,
.page-id-10 .entry-header,
.home .kadence-page-title-section,
.page-id-10 .kadence-page-title-section,
.home .hero-section,
.page-id-10 .hero-section,
body.home .wp-block-post-title,
body.page-id-10 .wp-block-post-title {
    display: none !important;
}

/* Remove Kadence content max-width constraint on homepage */
.home .entry-content,
.page-id-10 .entry-content,
.home .site-content .content-area article .entry-content,
.page-id-10 .site-content .content-area article .entry-content {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Remove Kadence main content area padding on homepage */
.home #primary,
.page-id-10 #primary,
.home .content-area,
.page-id-10 .content-area,
.home .site-content,
.page-id-10 .site-content {
    padding: 0 !important;
    max-width: none !important;
}

/* Remove any container width limits inside the homepage div */
.slc-homepage {
    width: 100%;
    max-width: none;
}

/* Remove paragraph/block auto-margins inside homepage sections */
.slc-homepage p,
.slc-homepage section {
    margin-top: 0;
    margin-bottom: 0;
}


/* ============================================
   HOMEPAGE FULL-WIDTH — CONTAINER OVERRIDES
   Target the exact Kadence wrappers identified via DOM inspection:
   .content-container.site-container (max-width:1290px, padding:24px)
   .entry-content-wrap (padding:32px each side)
   ============================================ */
.home .content-container.site-container,
.page-id-10 .content-container.site-container {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
}
.home .entry-content-wrap,
.page-id-10 .entry-content-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Also kill any top padding/margin that creates gap before hero */
.home .site-main,
.page-id-10 .site-main,
.home .content-wrap,
.page-id-10 .content-wrap {
    padding-top: 0 !important;
    margin-top: 0 !important;
}


/* ============================================
   HOMEPAGE GAP FIX
   .content-area has margin-top:80px (Kadence default)
   .entry-content-wrap has padding-top/bottom:32px
   Both eliminated on homepage for zero-gap sections.
   ============================================ */
.home .content-area,
.page-id-10 .content-area {
    margin-top: 0 !important;
}
.home .entry-content-wrap,
.page-id-10 .entry-content-wrap {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


/* ==========================================
   CONSULTATION PAGE (ID 15) — Layout Fixes
   ========================================== */

/* Hide Kadence page title banner on consultation page */
.page-id-15 .entry-header,
.page-id-15 .kadence-page-title-section {
    display: none !important;
}

/* Remove top gap */
.page-id-15 .content-area {
    margin-top: 0 !important;
}

/* Remove container width constraints */
.page-id-15 .content-container.site-container {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
}

/* Remove content padding */
.page-id-15 .entry-content-wrap {
    padding: 0 !important;
}

/* Consultation form card — ensure Fluent Forms inherits cleanly */
.slc-form-card .ff-el-input--label { color: #2C2C2C; }
.slc-form-card .ff-el-form-control { border-color: #D0C9BE; }
.slc-form-card .ff-el-form-control:focus {
    border-color: #CB822C;
    outline: none;
}
.slc-form-card .ff_submit_btn_wrapper .ff-btn {
    background-color: #CB822C !important;
    border-color:     #CB822C !important;
    color:            #FFFFFF !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.8rem;
}

/* Responsive: stack columns on mobile */
@media (max-width: 860px) {
    .slc-consult-grid {
        grid-template-columns: 1fr !important;
    }
    .slc-expect {
        position: static !important;
    }
}

/* Mobile form & button optimization */
@media (max-width: 768px) {
    .slc-form-card {
        padding: 24px 16px !important;
    }
    .slc-form-card .ff-el-form-control {
        min-height: 48px;
        padding: 14px 16px;
        font-size: 16px; /* Prevent iOS auto-zoom */
    }
    .slc-form-card .ff_submit_btn_wrapper .ff-btn {
        min-height: 48px;
        padding: 14px 32px;
        width: 100%;
    }
    /* Global buttons touch target */
    .wp-element-button, .wp-block-button__link, .button,
    button[type="submit"], input[type="submit"] {
        min-height: 48px;
        padding: 14px 28px;
    }
    /* Kadence nav mobile fix */
    .site-header, #masthead {
        padding: 0 16px !important;
    }
}

@media (max-width: 480px) {
    .slc-form-card {
        padding: 20px 14px !important;
    }
    .slc-form-card .ff-el-form-control {
        min-height: 50px;
        padding: 16px 14px;
    }
    .slc-form-card .ff_submit_btn_wrapper .ff-btn {
        min-height: 50px;
        padding: 16px 24px;
        width: 100%;
    }
}


/* ============================================
   SLATE DIAGRAM — Mobile Responsive
   ============================================ */
@media (max-width: 480px) {
    .slate-diagram-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .slate-diagram-wrapper svg {
        min-width: 480px;
    }
}


/* ============================================
   REDACTED EXCERPT — Black Bar Effect
   ============================================ */
.redacted {
    background: #2A2A2A;
    color: #2A2A2A;
    padding: 2px 24px;
    border-radius: 2px;
    display: inline;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}


/* ============================================
   NOT FOR EVERYONE — 2-column grid (desktop)
   ============================================ */

/* Force 2 columns on all viewports wider than mobile */
.slc-not-for div[style*="grid-template-columns"] {
    grid-template-columns: repeat(2, 1fr) !important;
}

/* Single column on mobile */
@media (max-width: 600px) {
    .slc-not-for div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
}


/* ============================================
   SCROLLBAR (F47)
   ============================================ */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #F5F0E8; }
::-webkit-scrollbar-thumb { background: #EDE7DB; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(203,130,44,0.3); }


/* ============================================
   MOBILE TOUCH UX (F51)
   ============================================ */
a,button,input,select,textarea,.wp-element-button,.wp-block-button__link{touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.wp-element-button:focus-visible,.wp-block-button__link:focus-visible,.button:focus-visible,
button[type="submit"]:focus-visible,input[type="submit"]:focus-visible,a:focus-visible{outline:2px solid var(--slc-copper,#CB822C);outline-offset:2px;}
:focus:not(:focus-visible){outline:none;}
.wp-element-button:active,.wp-block-button__link:active,.button:active,
button[type="submit"]:active,input[type="submit"]:active{transform:scale(0.97);opacity:0.9;}

/* ============================================
   REDUCED MOTION (F50)
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .slate-diagram-wrapper svg,
    .mode-btn,
    .persona-card,
    .slate-cell {
        transition: none !important;
        animation: none !important;
    }
    .mode-btn:hover,
    .mode-btn.active {
        transform: none !important;
    }
}