/*
 Theme Name: bo basic
 Template: Divi
*/

/* =====================================================
   COLOR SYSTEM
===================================================== */

/* LIGHT MODE */
:root {
    --color-bg: #ffe8cf;
    --color-text: #00009e;
    --color-accent: #00d084;
}

/* AUTO DARK MODE
@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #00009e;
        --color-text: #ffe8cf;
        --color-accent: #00ff9c;
    }
} */

/* =====================================================
   DESIGN TOKENS
===================================================== */

:root {
    --space-side: 16px;
    --space-side-mobile: 16px;

    --space-section: 16px;
    --space-section-mobile: 8px;

    --list-marker-width: 2.4em;
    --list-gap: 0.6em;
}

/* =====================================================
   TEXT SELECTION
===================================================== */

::selection {
    background: var(--color-accent);
    color: #ffffff;
}

::-moz-selection {
    background: var(--color-accent);
    color: #ffffff;
}

html, body {
    -webkit-tap-highlight-color: var(--color-accent);
}

/* =====================================================
   FOCUS SYSTEM
===================================================== */

:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

/* =====================================================
   TYPO SCALE
===================================================== */

:root {
    --t-base: 1.25rem;
    --t-1: calc(var(--t-base) * 1.25);
    --t-2: calc(var(--t-1) * 1.25);
    --t-3: calc(var(--t-2) * 1.25);
    --t-4: calc(var(--t-3) * 1.25);
    --t-5: calc(var(--t-4) * 1.25);

    --t-base-m: 1rem;
    --t-1-m: calc(var(--t-base-m) * 1.2);
    --t-2-m: calc(var(--t-1-m) * 1.2);
    --t-3-m: calc(var(--t-2-m) * 1.2);
    --t-4-m: calc(var(--t-3-m) * 1.2);
    --t-5-m: calc(var(--t-4-m) * 1.2);
}

/* =====================================================
   FONT SYSTEM
===================================================== */

@font-face {
    font-family: 'GeistMono';
    src: url('./fonts/GeistMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'GeistMono';
    src: url('./fonts/GeistMono-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'GeistMono';
    src: url('./fonts/GeistMono-Italic.woff2') format('woff2');
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'GeistPixel';
    src: url('./fonts/GeistPixel-Line.woff2') format('woff2');
    font-display: swap;
}

/* =====================================================
   BASE
===================================================== */

* { box-sizing: border-box; }

body,
body.error404,
body.error404 #main-content,
body.error404 #main-content .container,
body.error404 .et_pb_section {
    margin: 0;
    font-family: 'GeistMono', monospace;
    background: var(--color-bg);
    color: var(--color-text);
}

/* =====================================================
   DIVI RESET
===================================================== */

#main-header,
#top-header,
#main-footer {
    display: none !important;
}

#page-container,
#et-main-area,
.et_builder_inner_content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* =====================================================
   TOP FIX
===================================================== */

body,
#page-container,
#et-main-area,
.et_builder_inner_content,
.et_pb_section:first-of-type,
.et_pb_section:first-of-type * {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* =====================================================
   LAYOUT
===================================================== */

.et_pb_section {
    margin: 0 !important;
    padding-top: var(--space-section) !important;
    padding-bottom: var(--space-section) !important;
}

.et_pb_row {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: var(--space-side) !important;
    padding-right: var(--space-side) !important;
}

/* =====================================================
   MODULE RESET
===================================================== */

.et_pb_module,
.et_pb_section,
.et_pb_row,
.et_pb_column,
.et_pb_text,
.et_pb_image {
    background: transparent !important;
}

.et_pb_module {
    margin-bottom: 0 !important;
}

/* =====================================================
   TYPOGRAPHY
===================================================== */

.et_pb_text_inner p,
.et_pb_text_inner li,
.et_pb_text p,
.et_pb_text li {
    font-size: var(--t-base);
    line-height: 1.6;
    color: var(--color-text);
}

/* Headings */
.et_pb_text_inner h1 { font-size: var(--t-5); }
.et_pb_text_inner h2 { font-size: var(--t-4); }
.et_pb_text_inner h3 { font-size: var(--t-3); }
.et_pb_text_inner h4 { font-size: var(--t-2); }
.et_pb_text_inner h5 { font-size: var(--t-1); }
.et_pb_text_inner h6 { font-size: var(--t-base); }

.et_pb_text_inner h1,
.et_pb_text_inner h2,
.et_pb_text_inner h3,
.et_pb_text_inner h4,
.et_pb_text_inner h5,
.et_pb_text_inner h6 {
    line-height: 1.15;
    margin-top: 1.1em;
    margin-bottom: 0.2em;
    color: var(--color-text);
}

/* =====================================================
   FLOW
===================================================== */

.et_pb_text_inner > * + * {
    margin-top: 0.7em;
}

.et_pb_text_inner h1 + *,
.et_pb_text_inner h2 + *,
.et_pb_text_inner h3 + *,
.et_pb_text_inner h4 + *,
.et_pb_text_inner h5 + *,
.et_pb_text_inner h6 + * {
    margin-top: 0.35em;
}

.et_pb_text {
    margin-bottom: 1rem !important;
}

/* =====================================================
   LIST SYSTEM (AUTO SCALE)
===================================================== */

.et_pb_text_inner ul,
.et_pb_text_inner ol {
    list-style: none;
    padding: 0;
    margin: 0 0 1em 0;
}

.et_pb_text_inner li {
    position: relative;
    padding-left: calc(var(--list-marker-width) + var(--list-gap));
    margin-bottom: 0.4em;
}

.et_pb_text_inner ul li::before {
    content: "•";
    position: absolute;
    left: 0;
    width: var(--list-marker-width);
    text-align: right;
}

.et_pb_text_inner ol {
    counter-reset: item;
}

.et_pb_text_inner ol li::before {
    counter-increment: item;
    content: counter(item) ".";
    position: absolute;
    left: 0;
    width: var(--list-marker-width);
    text-align: right;
}

/* =====================================================
   LINKS
===================================================== */

a {
    transition: color 0.2s ease;
}

.et_pb_text_inner a {
    font-family: 'GeistPixel', monospace;
    color: var(--color-text);
    text-decoration: none;
}

.et_pb_text_inner a:hover,
.et_pb_text_inner a:active {
    color: var(--color-accent);
}

/* =====================================================
   NAVIGATION (STACK)
===================================================== */

.custom-stack-nav {
    position: fixed !important;
    bottom: calc(var(--space-side) - 2px) !important;
    right: calc(var(--space-side) - 6px) !important; 
    z-index: 99999 !important;
    text-align: right;
    pointer-events: none;
}

.custom-stack-nav ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
}

.custom-stack-nav li {
    display: block;
    margin: 0;
    padding: 0;
}

.custom-stack-nav a {
    font-size: var(--t-base);
    color: var(--color-text);
    font-family: 'GeistMono', monospace;
    text-decoration: none;
    display: inline-block;
    padding: 2px 6px;
    pointer-events: auto;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.custom-stack-nav a:hover,
.custom-stack-nav .current-menu-item a {
    color: var(--color-accent);
}

.custom-stack-nav a:focus-visible {
    outline: 2px solid var(--color-accent) !important;
    outline-offset: 2px !important;
}

@media (max-width: 767px) {
    .custom-stack-nav {
        bottom: calc(var(--space-side-mobile) - 2px) !important;
        right: calc(var(--space-side-mobile) - 6px) !important;
    }
}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767px) {

    .et_pb_section {
        padding-top: var(--space-section-mobile) !important;
        padding-bottom: var(--space-section-mobile) !important;
    }

    .et_pb_row {
        padding-left: var(--space-side-mobile) !important;
        padding-right: var(--space-side-mobile) !important;
    }

    .et_pb_text_inner p,
    .et_pb_text_inner li,
    .et_pb_text p,
    .et_pb_text li {
        font-size: var(--t-base-m);
    }

    .et_pb_text_inner h1 { font-size: var(--t-5-m); }
    .et_pb_text_inner h2 { font-size: var(--t-4-m); }
    .et_pb_text_inner h3 { font-size: var(--t-3-m); }
    .et_pb_text_inner h4 { font-size: var(--t-2-m); }
    .et_pb_text_inner h5 { font-size: var(--t-1-m); }
    .et_pb_text_inner h6 { font-size: var(--t-base-m); }
}

/* =====================================================
   CONTACT FORM
===================================================== */

.et_pb_section, .et_pb_row, .et_pb_column {
    transition: none !important;
    animation: none !important;
}

.et_pb_contact_form .input, 
.et_pb_contact_form textarea,
.et_pb_contact_form select,
.et_pb_contact_select select,
.et_pb_contact_form .et_pb_contact_select,
.et_pb_contact_form input.et_pb_contact_captcha,
.et_pb_contact_captcha {
    background-color: transparent !important;
    color: var(--color-text) !important;
    font-family: 'GeistMono', monospace !important;
    border: 0.125rem solid var(--color-text) !important;
    box-sizing: border-box !important;
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
    outline: none !important;
    box-shadow: none !important;
}

.et_pb_contact_form .input::placeholder,
.et_pb_contact_form textarea::placeholder {
    color: var(--color-text) !important;
    opacity: 0.7;
}

.et_pb_contact_form .et_pb_contact_field_error,
.et_pb_contact_form .et_pb_contact_field_error .input,
.et_pb_contact_form .et_pb_contact_field_error textarea,
.et_pb_contact_form input.error,
.et_pb_contact_form textarea.error {
    border-color: #ff0000 !important;
}

.et_pb_contact_form input.input:focus,
.et_pb_contact_form textarea:focus,
.et_pb_contact_form select:focus,
.et_pb_contact_select select:focus,
.et_pb_contact_form input.et_pb_contact_captcha:focus,
.et_pb_contact_form .input:focus,
.et_pb_contact_form textarea:focus,
.et_pb_contact_form .et_pb_contact_field_error input:focus,
.et_pb_contact_form .et_pb_contact_field_error textarea:focus,
.et_pb_contact_form input.error:focus,
.et_pb_contact_form textarea.error:focus,
.et_pb_contact_field_error:focus-within input,
.et_pb_contact_field_error:focus-within textarea,
.et_pb_contact_field_error:focus-within {
    border-color: var(--color-accent) !important;
    background-color: color-mix(in srgb, var(--color-accent) 20%, transparent) !important;
    outline: none !important;
    box-shadow: 0 0 0 0 transparent !important;
    -webkit-box-shadow: 0 0 0 0 transparent !important;
}

.et_pb_contact_form input:-webkit-autofill,
.et_pb_contact_form input:-webkit-autofill:hover, 
.et_pb_contact_form input:-webkit-autofill:focus,
.et_pb_contact_form textarea:-webkit-autofill,
.et_pb_contact_form textarea:-webkit-autofill:hover,
.et_pb_contact_form textarea:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--color-text) !important;
    -webkit-box-shadow: 0 0 0px 1000px color-mix(in srgb, var(--color-accent) 15%, transparent) inset !important;
    border-color: var(--color-accent) !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

.et_pb_contact_field { 
    margin-bottom: 0.75rem !important; 
}

.et_pb_contact_form input.input,
.et_pb_contact_field input,
.et_pb_contact_form select,
.et_pb_contact_select select,
.et_pb_contact_form .et_pb_contact_select { 
    border-radius: 99rem !important; 
    padding: 0.8em 1.5rem !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    cursor: pointer !important;
    width: 100% !important;
}

.et_pb_contact_form select,
.et_pb_contact_select select,
.et_pb_contact_form .et_pb_contact_select {
    background-repeat: no-repeat !important;
    background-position: calc(100% - 1.5rem) center !important;
    background-size: 0.65em auto !important;
    padding-right: 3rem !important;
}

.et_pb_contact_select::after {
    display: none !important;
    content: none !important;
}

.et_pb_contact_form select option,
.et_pb_contact_select option {
    background-color: var(--color-bg) !important;
    color: var(--color-text) !important;
}

.et_pb_contact textarea.input,
.et_pb_contact_form textarea { 
    border-radius: 1.25rem !important; 
    resize: none !important; 
    padding: 1.2em 1.5rem !important;
}

.et_pb_contact_field_checkbox,
.et_pb_contact_field_radio {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    min-height: 1.5rem !important;
    margin-bottom: 0.5rem !important;
}

.et_pb_contact_field_checkbox input,
.et_pb_contact_field_radio input {
    display: inline-block !important;
    position: absolute !important;
    opacity: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    cursor: pointer !important;
    z-index: 10 !important;
    left: 0 !important;
    top: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.et_pb_contact_field_checkbox label,
.et_pb_contact_field_radio label {
    padding-left: 2.5rem !important;
    margin: 0 !important;
    cursor: pointer !important;
    color: var(--color-text) !important;
}

.et_pb_contact_field_checkbox label i,
.et_pb_contact_field_radio label i {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    border-radius: 50% !important;
    border: 0.125rem solid var(--color-text) !important;
    width: 1.4rem !important;
    height: 1.4rem !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

.et_pb_contact_field_checkbox input:focus + label i,
.et_pb_contact_field_checkbox input:focus-visible + label i,
.et_pb_contact_field_radio input:focus + label i,
.et_pb_contact_field_radio input:focus-visible + label i,
.et_pb_contact_field_checkbox:focus-within label i,
.et_pb_contact_field_radio:focus-within label i,
.et_pb_contact_field_checkbox input:active + label i,
.et_pb_contact_field_radio input:active + label i {
    border-color: var(--color-accent) !important;
    background-color: color-mix(in srgb, var(--color-accent) 20%, transparent) !important;
}

.et_pb_contact_field_checkbox input:checked + label i,
.et_pb_contact_field_radio input:checked + label i {
    background-color: transparent !important;
    border-color: var(--color-text) !important;
}

.et_pb_contact_field_checkbox input:checked + label i::before {
    content: "✓" !important;
    font-family: system-ui, -apple-system, sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: var(--color-text) !important;
    background: none !important;
}

.et_pb_contact_field_radio input:checked + label i::before {
    content: "" !important;
    position: absolute !important;
    top: calc(50% - 0px) !important;
    left: calc(50% - 0px) !important;
    transform: translate(-50%, -50%) !important;
    width: 0.55rem !important;
    height: 0.55rem !important;
    border-radius: 50% !important;
    background-color: var(--color-text) !important;
    display: block !important;
}

.et_pb_contact_form input.et_pb_contact_captcha,
.et_pb_contact_captcha {
    width: 3.2em !important;
    height: 3.2em !important;
    min-width: 3.2em !important;
    min-height: 3.2em !important;
    max-width: 3.2em !important;
    max-height: 3.2em !important;
    border-radius: 50% !important;
    text-align: center !important;
    padding: 0 !important; 
    line-height: 3.2em !important; 
    display: inline-block !important;
}

.et_contact_bottom_container {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 1.5rem auto 0 !important;
    gap: 1.5rem !important;
    text-align: center !important;
}

.et_pb_contact_right {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 !important;
    gap: 1rem !important;
}

/* =====================================================
   BUTTONS
===================================================== */

/* 1. COMPREHENSIVE OVERRIDE FOR ALL DIVI BUTTONS */
body .et_pb_button, 
body .et_pb_contact_submit,
body .et_pb_module .et_pb_button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    font-family: 'GeistPixel', monospace !important;
    font-size: var(--t-base) !important;
    line-height: 1 !important;
    text-align: center !important;
    
    background-color: var(--color-accent) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-accent) !important;
    border-radius: 99rem !important;
    
    padding: 0.5em 2em !important;
    margin: 0 !important;
    
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
    
    transition: all 0.2s ease-in-out !important;
    transform: none !important;
}

/* 2. REMOVE DIVI ICON PADDING & PSEUDO ELEMENTS */
body .et_pb_button::after,
body .et_pb_button::before,
body .et_pb_contact_submit::after,
body .et_pb_contact_submit::before {
    display: none !important;
    content: "" !important;
    width: 0 !important;
    margin: 0 !important;
}

body .et_pb_button:hover {
    padding-right: 2em !important;
}

/* 3. HOVER & ACTIVE */
body .et_pb_button:hover, 
body .et_pb_contact_submit:hover,
body .et_pb_button:active, 
body .et_pb_contact_submit:active {
    background-color: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(10px) brightness(1.1) !important;
    -webkit-backdrop-filter: blur(10px) brightness(1.1) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    transform: none !important;
    color: var(--color-text) !important;
}

/* 4. BUTTON WRAPPER */
.et_pb_button_module_wrapper,
.et_pb_button_wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    text-align: center !important;
}

.et_contact_bottom_container .et_pb_contact_submit {
    margin-left: 0 !important;
    margin-right: 0 !important;
    align-self: flex-end !important;
}

/* =====================================================
    LOW-CONTRAST SLIM SCROLLBAR
===================================================== */

html {
    scrollbar-gutter: auto !important;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--color-bg), var(--color-text) 15%) transparent;
}

::-webkit-scrollbar {
    width: 10px; 
}

::-webkit-scrollbar-track {
    background: transparent !important;
}

::-webkit-scrollbar-thumb {
    background-color: color-mix(in srgb, var(--color-bg), var(--color-text) 15%) !important;
    border-radius: 20px;
    
    border: 3px solid transparent; 
    background-clip: padding-box;
    
    transition: background-color 0.2s ease !important;
}

::-webkit-scrollbar-thumb:hover {
    background-color: color-mix(in srgb, var(--color-bg), var(--color-text) 25%) !important;
}

/* =====================================================
   O N L Y  T H I S  S I T E
===================================================== */

/* =====================================================
   BO SECTION GAP TOP 404
===================================================== */

.bo-section-gap-top,
#bo-section-gap-top {
    padding-top: clamp(80px, 12vh, 160px) !important;
}

.bo-section-top-vp,
#bo-section-top-vp {
    padding-top: clamp(100px, 16vh, 200px) !important;
}

@media only screen and (min-width: 981px) {
    
    .bo-section-gap-top,
    #bo-section-gap-top {
        padding-top: clamp(95px, 14.25vh, 190px) !important;
    }

    .bo-section-top-vp,
    #bo-section-top-vp {
        padding-top: clamp(120px, 19vh, 240px) !important;
    }
}

/* =====================================================
   ALL-LOWERCASE FOR CONTACT FORMS
===================================================== */
.et_pb_contact_form .et-pb-contact-message, 
.et_pb_contact_form .et_pb_contact_message,
.et_pb_contact_form .input,
.et_pb_contact_form textarea,
.et_pb_contact_form label:not(.et_pb_contact_field_checkbox label),
.et_pb_contact_form .et_pb_contact_submit {
    text-transform: lowercase !important;
}