/*
Theme Name: Kalium Child
Theme URI: https://laborator.co/themes/kalium/
Description: Kalium Child Theme
Author: Shawn Nelson
Author URI: www.cmsbeach.com
Template: kalium
Version: 1.0
*/

:root {
    --max-width: 1200px;
    --section-padding: 80px 24px;
    /* Brand Colors */
    --primary: #A8B5A5; /* Matcha green */
    --primary-dark: #899684; /* Darker matcha */
    --accent: #DFC8B4; /* Warm sand */
    --contribute: #CDA994;     /* Warm amber — voluntary support CTAs only */    
    /* Gray Scale */
    --gray-50: #F7F6F4; /* Cream white */
    --gray-100: #F0EFE9; /* Soft sand */
    --gray-200: #E6E4DD; /* Warm gray */
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #4D4B45; /* Muted brown */
    --gray-800: #363430; /* Soft charcoal */
    --gray-900: #252321; /* Warm black */
    /* Bootstrap standard colors */
    --secondary: var(--gray-600);
    --success: #A8B5A5;
    --info: #90A2B5;
    --warning: #D1C5A5;
    --danger: #CDA994;
    --danger-dark: #c8a58d;
    --light: var(--gray-100);
    --dark: var(--gray-900);
    /* Link colors (Kalium style) */
    --k-link-color: var(--primary-dark); /* Default link color */
    --k-link-hover-color: var(--primary); /* Link hover color */
    --k-link-visited-color: var(--primary-dark); /* Visited link color */
    --k-link-active-color: var(--primary); /* Active link color */
    /* Bootstrap theme colors */
    --bs-body-color: var(--gray-900);
    --bs-body-bg: #fff;
    --bs-border-color: var(--gray-200);
    --bs-link-color: var(--k-link-color);
    --bs-link-hover-color: var(--k-link-hover-color);
    /* Component specific */
    --bs-navbar-color: var(--gray-700);
    --bs-navbar-hover-color: var(--primary);
    --bs-btn-color: var(--gray-700);
    --bs-btn-hover-color: var(--gray-900);
    /* check boxes */
    --k-input-bg: transparent !important;
    --k-checkbox-checked-color: var(--primary-dark) !important;
    --k-input-border-color: var(--k-checkbox-checked-color) !important;
    /* Message box colors */
    --messagebox-green-bg: #F7F6F4;
    --messagebox-green-text: #899684;
    --messagebox-yellow-bg: #D1C5A5;
    --messagebox-yellow-text: #856404;
    --messagebox-red-bg: #FFB8B8;
    --messagebox-red-text: #B08F8E;
}

/* footer */

#footer.site-footer {
    padding-top: 1em;
    margin-top: 1em;
    background: linear-gradient(to bottom, var(--gray-50), white) !important;
}

    #footer.site-footer .lb-element-footer-container-row-1,
    #footer.site-footer .container {
        background: transparent !important;
        margin: 0 auto;
        width: 100%;
    }

/* for copyright */
.lb-element-footer-container-row.copyright {
    font-size: 13px;
    color: var(--gray-600) !important;
}

.stat-callout {
    display: inline-block;
    background: var(--accent);
    color: var(--gray-800);
    padding: 6px 14px;
    border-radius: 255px 25px 225px 25px/25px 225px 25px 255px;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    transform: rotate(-1deg);
}

/* Ensure links are primary (green) everywhere; link buttons can then specify own style below */
body a,
.form-links a {
    color: var(--primary-dark);
    text-decoration: none;
    position: relative;
}

    body a:hover,
    .form-links a:hover {
        color: var(--primary-dark);
    }

/* submit buttons set by bootstrap (not href link); override here */
.btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: white !important;
    padding: 12px 28px !important;
    border-radius: 12px !important;
    font-weight: 500 !important;
    border: 1px solid var(--gray-200) !important;
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active {
        background-color: var(--primary-dark) !important;
        border-color: var(--primary-dark) !important;
        color: white !important;
    }

/* href link buttons (not submit) */
.ref-link-button-primary {
    display: inline-block;
    background: var(--primary);
    color: white;
    padding: 12px 28px;
    border-radius: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    margin: 0 12px;
}

    .ref-link-button-primary:hover {
        color: white;
        background: var(--primary-dark);
        transform: translateY(-1px);
    }

.ref-link-button-secondary {
    display: inline-block;
    background: var(--gray-50);
    color: var(--gray-800);
    padding: 12px 28px;
    border-radius: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid var(--gray-200);
    margin: 0 12px;
}

    .ref-link-button-secondary:hover {
        background: white;
        border-color: var(--primary);
    }

/* Exclude buttons from link styles */
.btn-primary,
.ref-link-button-primary,
.ref-link-button-secondary {
    text-decoration: none !important;
}

    .btn-primary::after,
    .ref-link-button-primary::after,
    .ref-link-button-secondary::after {
        display: none !important;
    }

/* Share utility link — quieter than a button so it does not read as a
   primary next action. Used on report and coaching growth card. */
.share-utility-link {
    text-align: center;
}
.btn-share-link {
    color: var(--primary-dark);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s ease;
}
    .btn-share-link:hover {
        color: var(--primary);
    }
    .btn-share-link .btn-add-icon {
        width: 14px;
        height: 14px;
        vertical-align: -2px;
        margin-right: 4px;
    }
    .btn-share-link::after {
        display: none !important;
    }

/* Generic Form Containers */
.form-container {
    max-width: 400px;
    margin: 0px auto;
    padding: 0 20px;
}

.form-box {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

    .form-box h2 {
        text-align: center;
        margin-bottom: 30px;
    }

/* Form Fields */
.form-field {
    margin-bottom: 15px;
}

    .form-field label {
        display: block;
        margin-bottom: 5px;
        color: #333;
        font-weight: 500;
    }

    .form-field .input,
    .form-field input[type="text"],
    .form-field input[type="email"],
    .form-field input[type="password"] {
        width: 100%;
        padding: 12px;
        margin: 8px 0;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 16px;
    }

/* Checkbox styling */
.form-checkbox {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

    .form-checkbox input[type="checkbox"] {
        margin: 0;
        margin-right: 8px;
    }

    .form-checkbox label {
        font-size: .9em;
        margin: 0;
        line-height: 1;
    }

/* Submit section */
.form-submit {
    margin: 20px 0;
    text-align: center;
}

    .form-submit input[type="submit"] {
        width: 100%;
    }

/* Error Messages */
.form-error {
    background-color: #fff2f2;
    border: 1px solid #ffb8b8;
    color: #B08F8E;
    padding: 12px;
    margin-bottom: 20px;
    border-radius: 4px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

    .form-error p {
        margin: 5px 0;
    }

.form-error-message {
    color: #B08F8E;
    font-size: 14px;
    margin-top: 5px;
    display: block;
}

/* Success Message */
.form-success {
    background-color: var(--messagebox-green-bg);
    border: 1px solid #c3e6cb;
    color: var(--messagebox-green-text);
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 4px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

    .form-success p {
        margin: 0 0 10px 0; /* Add bottom margin to paragraphs */
    }

        .form-success p:last-child {
            margin-bottom: 0; /* Remove margin from last paragraph */
        }

/* simple error message */

    .error-message {
        text-align: center;
        padding: 40px 20px;
        color: #B08F8E;
        background: #fff2f2;
        border-radius: 8px;
        margin: 20px;
    }

/* Additional classes for success page */
.form-message {
    text-align: center;
}

    .form-message h2 {
        margin-bottom: 20px;
    }

.form-instructions {
    margin: 30px 0;
    text-align: left;
}

    .form-instructions h3 {
        margin-bottom: 15px;
    }

    .form-instructions ol {
        padding-left: 20px;
        margin-bottom: 30px;
    }

    .form-instructions li {
        margin-bottom: 10px;
    }

/* Style for the login button container */
.form-message > div:last-child {
    text-align: center;
    margin-top: 20px;
}

/* Form Links */
.form-links {
    margin-top: 20px;
    text-align: center;
}

.cf-turnstile {
    margin: 20px 0;
}

/* for menus ---> */

/* handle link color in menus */
.standard-menu .menu-item a .link,
.standard-menu .menu-item a:hover .link,
.mobile-menu__content .menu-item a .link,
.mobile-menu__content .menu-item a:hover .link {
    color: var(--gray-900) !important;
}

/* ==== Desktop menu styles (normal order) ==== */
.standard-menu .menu > li {
    margin-right: 22px;
    position: relative;
}
@media (min-width: 769px) {
    .menu-always-open {
        order: 999; /* Push to end if needed, only for profile/user menu if desired */
    }
}

/* ==== General Container for always-open dropdowns (user, Menu, About) ==== */
.menu-always-open {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    position: relative;
}

.menu-always-open i {
    font-size: 16px;
    color: #666;
    display: inline-block;
    margin-right: 8px;
    text-decoration: none !important;
}

.menu-always-open > a .link {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    background: none !important;
    font-weight: 500;
    color: var(--gray-900) !important;
    font-size: 16px;
    transition: color 0.2s;
}

/* ==== Dropdown styling for ALL always-open menus ==== */
.menu-always-open .sub-menu {
    background: #fff !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08) !important;
    border-radius: 12px !important;
    border: 1px solid var(--primary) !important;
    min-width: 220px !important;
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    z-index: 1000 !important;
    margin-top: 10px !important;
}

.menu-always-open .sub-menu a {
    color: var(--gray-900) !important;
    font-size: 1em !important;
    font-weight: 500 !important;
    padding: 10px 18px !important;
    line-height: .9em !important;
    background: #fff !important;
    border-radius: 0 !important;
    transition: background 0.2s, color 0.2s !important;
    display: block !important;
    box-shadow: none !important;
    border-bottom: none !important;
    text-decoration: none !important;
    position: relative;
}

/* Custom hover/focus style: underline color black or green */
/* Hover & focus styles */
.menu-always-open .sub-menu a:hover,
.menu-always-open .sub-menu a:focus {
    background: var(--gray-100) !important;
    color: var(--primary-dark) !important;
    box-shadow: none !important;
}

/* Turn off Kalium animated underline inside always-open submenus */
.menu-always-open .sub-menu .link {
    background-image: none !important;
}

/* Current submenu item = primary color */
.menu-always-open .sub-menu .current-menu-item > a .link,
.menu-always-open .sub-menu .current_page_item > a .link {
    color: var(--primary) !important;
    font-weight: bold !important;
}

/* ==== MOBILE: always-expanded dropdown (user, Menu, About) ==== */
@media (max-width: 768px) {
  .menu-always-open {
    flex-direction: column;
    align-items: flex-start;
    width: 240px;
    margin-bottom: 0em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid var(--gray-200);
  }
  /* Root menu items: visible, not clickable, not underlined */
  .menu-always-open > a,
  .menu-always-open > a .link {
    color: var(--gray-900) !important;
    font-weight: 700;
    font-size: 1em;
    line-height: 1.2;
    display: block;
    margin-bottom: 0.2em;
    margin-left: -10px;
    padding: 0.1em 0 0.1em 0.3em;
    text-decoration: none !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
    cursor: default !important;
    opacity: 1 !important;
  }
  /* Sub-menu container: visible, open, no background */
  .menu-always-open .sub-menu {
    position: static !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: none !important;
    border: none !important;
    width: 100% !important;
    min-width: 100% !important;
    padding-left: 0 !important;
    margin: 0 !important;
    padding-top: 0 !important;
    background: none !important;
    border-radius: 0 !important;
  }
  /* Sub-menu link: indented, normal font, visible */
  .menu-always-open .sub-menu a {
    color: var(--gray-900) !important;
    font-size: 1em;
    font-weight: 500;
    padding: 0.3em 0 0.3em 0.8em;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    display: block;
    width: 100%;
    line-height: 1.2 !important;
    text-decoration: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .menu-always-open .sub-menu a:hover {
    color: var(--primary-dark) !important;
    background: var(--gray-100) !important;
    text-decoration: underline !important;
  }
  /* Remove underline/bold for active items */
  .menu-always-open .sub-menu .current-menu-item > a,
  .menu-always-open .sub-menu .current_page_item > a {
    text-decoration: none !important;
    font-weight: 500 !important;
    color: var(--gray-900) !important;
    background: none !important;
  }
  .menu-always-open .dropdown-toggle { display: none !important; }
  .menu-always-open .sub-menu li { margin: 0 !important; padding: 0 !important; }

  .menu-always-open > a,
  .menu-always-open > a .link {
    padding-left: 7px;
  }

  /* Login item needs special care */
  .menu > li > a[href*="login"], 
  .menu > li > a[href*="Login"] {
    padding: 0.3em 0 0.3em 0.8em;
    color: var(--gray-900) !important;
    font-size: 1em;
    font-weight: 500;
    display: block;
    text-decoration: none !important;
    line-height: 1.2;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    width: 100%;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .menu > li > a[href*="login"]:hover, 
  .menu > li > a[href*="Login"]:hover {
    color: var(--primary-dark) !important;
    background: var(--gray-100) !important;
    text-decoration: underline !important;
  }

}

/* ==== user icon style (if present) ==== */
.user-icon {
    width: 22px;
    height: 22px;
    margin-right: 1px;
    vertical-align: middle;
    margin-top: -4px;
}

/* <--- for menus */

/* for footer ---> */
.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

    .footer-menu li {
        margin: 5px 0;
        font-size: 14px;
    }

        .footer-menu li a {
            color: var(--primary-dark);
            text-decoration: none;
            display: inline-block;
            position: relative;
            transition: color 0.2s ease;
        }

/* Footer Blurb Styles */
#footer-blurb {
    text-align: center;
    padding: 20px;
    max-width: 400px;
    margin: 0 auto;
}

    #footer-blurb .footer-heading {
        font-family: 'Prata', serif;
        font-size: 23px;
        font-weight: bold;
        margin: 0;
        color: var(--primary);
        line-height: 1.8em;
    }

    #footer-blurb .footer-description {
        font-size: 14px;
        margin: 10px auto;
        color: var(--gray-700);
    }

.footer-benefits {
    margin-top: 15px;
    color: var(--gray-700);
}

    .footer-benefits p {
        margin: 5px auto !important;
        font-size: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }

    .footer-benefits img {
        width: 16px;
        height: 16px;
        /* Fallback for older browsers */
        filter: brightness(0.4);
        /* Modern browsers get this enhanced version */
        @supports (mix-blend-mode: multiply) {
            opacity: 1;
            filter: contrast(1.5) brightness(0.5);
            mix-blend-mode: multiply;
        }
    }

        /* Target specifically the connections/people icon */
        .footer-benefits img[src*="people.svg"] {
            width: 23px;
            height: 23px;
        }

        .footer-benefits img[src*="sandals.svg"] {
            width: 15px;
            height: 15px;
        }

/* Optional: Adjusting for Responsive Design */
@media (max-width: 600px) {
    #footer-blurb {
        max-width: 100%;
    }

        #footer-blurb .footer-heading {
            font-size: 1.1em;
        }

        #footer-blurb .footer-description {
            font-size: 13px;
        }
}

/* <--- for footer */

/* Hide header and footer when loading spinner is present or on assessment */
body:has(.loading-overlay) .site-footer,
body:has(.loading-overlay) footer#footer,
body:has(.assessment-container) footer#footer, /* on assessment page */
body:has(.loading-overlay) #progress-tracker
{
    display: none !important;
    visibility: hidden !important;
}

/* Purchase Callout Styles */
.purchase-callout {
    background: #f8f9fa;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    padding: 24px;
    margin: 32px 0;
    text-align: center;
}

.purchase-callout-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2em;
  text-align: center;
  margin-top: 0px !important;
}
.purchase-lock-icon {
  display: block;
  margin-bottom: 0.25em;
  margin-right: 0 !important;
  text-align: center;
}

.purchase-lock-icon img {
    display: block;
    width: 2.9rem;
    height: 2.9rem;
    margin-top: -5px;
}

.purchase-callout-text {
    color: #6c757d;
    font-size: 1rem;
    line-height: 1.6;
    margin: 16px 0;
}

.purchase-features {
    list-style: none;
    padding: 0;
    margin: 16px 0;
    color: #495057;
    font-size: 15px;
}

.purchase-features {
    max-width: 300px !important;
    margin: 16px auto;
    box-sizing: border-box;
    text-align: center;
}

.purchase-features li {
    line-height: 1.2em;
    margin-bottom: 0.8em;
    text-align: center;
    list-style-position: inside; /* Keeps checkmark inside for centered look */
}

.btn-purchase {
    display: inline-block;
    background: var(--primary);
    color: white;
    padding: 12px 32px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    margin-top: 16px;
    transition: all 0.2s ease;
}

.btn-purchase:hover,
.btn-purchase:focus {
  background: var(--primary-dark) !important;
  color: #fff !important;
  opacity: 1 !important;
}

@media (max-width: 600px) {
  .purchase-callout {
    padding: 1.2em 0.6em; /* keep these equal for the outer card */
  }
  .purchase-callout-title {
    font-size: 1.3rem;
    text-align: center;
  }
 .purchase-callout-text {
    font-size: 0.92rem !important;
  }
  .purchase-features {
    padding-left: 0;
    padding-right: 0;
    
  }  
}

/* Begin formidable forms styles ---> */

.frm_section_heading > .frm_form_field, .frm_fields_container > .frm_submit, .frm_grid_container > .frm_form_field, .frm_fields_container > .frm_form_field {
    border-top: 1px solid var(--gray-200) !important;
}

/* Fixing the progress bar lines */
.frm_form_field.frm_section_heading.hide-paragraph-border {
    border-top: none !important;
}

.frm_style_formidable-style-2.with_frm_style .frm-show-form .frm_section_heading h3[class*="frm_pos_"] {
    border-top: 1px solid var(--gray-200);
}

/* add a little more space before each question */
.frm_primary_label {
    margin-top: 1em !important;
    padding-top: 10px !important;
    padding-bottom: 4px !important;
    color: var(--gray-800);
}

/* for error text */
.has-error .checkbox, .has-error .checkbox-inline, .has-error .control-label, .has-error .help-block, .has-error .radio, .has-error .radio-inline, .has-error.checkbox label, .has-error.checkbox-inline label, .has-error.radio label, .has-error.radio-inline label {
    color: var(--gray-800);
}

.has-error .control-label {
    color: var(--primary-dark) !important;
}

.frm_error {
    color: var(--primary-dark) !important;
    margin-top: 5px;
}

h3.frm_form_title {
    font-size: clamp(2rem, 4vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--gray-800);
}

.help-block {
    color: var(--gray-700);
}

/* buttons */
.btn.btn-default, .frm_button_submit {
    background: var(--primary);
    color: #fff;
    min-width: 150px;
    font-weight: bold;
    margin-top: 1em;
    line-height: 2em !important;
    border-radius: 12px;
    transition: all 0.2s ease;
}

    .btn.btn-default:hover, .frm_button_submit:hover {
        background: var(--primary-dark);
        transform: translateY(-1px);
    }

.frm_style_formidable-style.with_frm_style .frm_submit button {
    line-height: 2em;
}

.form-group {
    margin-top: 20px;
}

.frm_form_fields .frm_fields_container {
    margin-bottom: 200px;
}

/* for radio buttons */
.frm_radio input[type="radio"], .frm_checkbox input[type="checkbox"] {
    opacity: 0;
    position: fixed;
    width: 0;
}

.frm_radio label, .frm_checkbox label {
    display: inline-block;
    background-color: var(--gray-50);
    padding: 10px 20px;
    font-size: 1em !important;
    font-weight: 500;
    border: 1px solid var(--gray-200);
    border-radius: 3px; /* make the options less rounded; to differ from buttons */
    transition: all 0.2s ease;
}

.frm_radio input[type="radio"]:focus + label {
    border: 2px dashed var(--gray-700);
}

.frm_radio input[type="radio"]:checked + label {
    background-color: var(--primary);
    border-color: var(--primary-dark);
    color: #fff;
}

.checked {
    /*for darker; snelson*/
    /*background-color: var(--primary-dark) !important;*/
    background-color: var(--primary) !important;
    color: #fff !important;
}

.checkbox label, .radio label {
    display: block;
    min-width: 200px;
    margin-top: 2px;
}

/* reduce space between radio button options */
.with_frm_style .vertical_radio .frm_radio {
    margin-bottom: -3px !important;
}

.frm_forms .frm_progress_line input.frm_page_back {
    background-color: var(--primary) !important;
}

.frm_forms .frm_progress_line input, .frm_forms .frm_progress_line input:disabled {
    width: 100%;
    border: none;
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
    margin: 5px 0;
    padding: 6px 0;
    border-radius: 0;
    font-size: 0;
    line-height: 15px;
}

.frm_forms .frm_progress_line.frm_show_lines input {
    border-left-color: var(--gray-200) !important;
    border-right-color: var(--gray-200) !important;
    border-left-width: 1px !important;
    border-right-width: 1px !important;
}

.frm_forms .frm_page_bar input, .frm_forms .frm_page_bar input:disabled {
    transition: background-color 0.1s ease;
    background-color: var(--gray-100) !important;
}

/* 11/29/24 darken the current cell in the progress bar */
.frm_rootline_single.frm_current_page input[type="button"] {
    background-color: var(--gray-700) !important;
}

/* for progress bar */
.frm_progress_line input[type="button"]:disabled {
    background: var(--gray-700) !important;
}

/* for textboxes */
input[type=text], input[type=number], input[type=email], input[type=password], input[type=url], input[type=tel], textarea {
    color: var(--gray-900);
    font-weight: 500;
    background-color: var(--gray-50);
    box-shadow: none;
    padding: 10px 10px !important;
    outline: 0;
    border-radius: 12px;
    font-size: 20px;
    border: 1px solid var(--gray-200) !important;
    transition: all 0.2s ease;
}

    input[type=text]:focus, input[type=number]:focus, input[type=email]:focus,
    input[type=password]:focus, input[type=url]:focus, input[type=tel]:focus,
    textarea:focus {
        border-color: var(--primary) !important;
        background-color: white;
    }

/* for lookup control - snelson custom */
.chosen-container {
    background: var(--gray-50);
    padding: 10px 20px;
    border-radius: 12px;
    border: 1px solid var(--gray-200);
}

a.chosen-single, a.chosen-single-with-deselect {
    color: var(--gray-900);
    font-weight: bold !important;
}

/* for "other" option with radio buttons */
input.frm_other_input {
    color: var(--gray-900);
    font-weight: 500;
    background-color: var(--gray-50);
    box-shadow: none;
    padding: 5px 10px !important;
    outline: 0;
    border-radius: 12px;
    font-size: 20px;
    border: 1px solid var(--gray-200) !important;
    margin-top: 2px;
    width: 50%;
}

/* accordian for grid */
.accordion {
    cursor: pointer;
    padding: 8px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
}

button.accordion.even {
    background-color: #ffffff;
}

button.accordion.odd {
    background-color: var(--gray-50);
}

.accordionactive {
    text-transform: uppercase !important;
    font-family: 'Function Pro';
    font-weight: bold;
}

.accordionheader {
    padding: 8px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    text-transform: uppercase !important;
    margin-left: 20px;
}

    .accordionheader > span {
        vertical-align: bottom;
    }

.accordionvalue {
    display: inline-grid;
    width: 10%;
}

.accordionitem {
    display: inline-grid;
    width: 75%;
    padding-right: 5px;
}

.accordion:before {
    content: "\25BC \FE0E";
    color: var(--gray-900);
    font-size: 13px;
    display: inline-grid;
    width: 20px;
    padding: 0px 0px;
}

.accordionactive:before {
    content: "\25B6 \FE0E";
    color: var(--gray-900);
    font-size: 13px;
    display: inline-grid;
    width: 20px;
    padding: 0px 0px;
    position: relative;
    top: -3px;
}

.panel {
    padding: 0 28px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    border-left: 1px solid var(--gray-200);
    border-right: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
}

/* snelson 4/10/22 after formidable upgrade */
.with_frm_style .frm_radio label, .with_frm_style .frm_checkbox label {
    line-height: 1.0;
    font-size: 16px !important; /* reduce radio button font size */
}

.with_frm_style legend + h3, .with_frm_style h3.frm_form_title {
    font-weight: bold;
    margin: 0px;
}

.with_frm_style .frm-show-form .frm_section_heading h3 {
    font-weight: bold;
    font-size: 23px;
}

.frm_style_formidable-style.with_frm_style .frm_blank_field label,
.frm_style_formidable-style.with_frm_style .frm_error {
    color: var(--gray-900);
}

.frm_style_formidable-style.with_frm_style .frm_error {
    font-size: 19px;
}

.h1, h1, .h2, h2 {
    font-weight: 700 !important;
}

.frm_style_formidable-style.with_frm_style .frm-show-form .frm_section_heading h3 {
    font-size: 23px;
    margin: 0px;
}

.frm_style_formidable-style.with_frm_style p.description,
.frm_style_formidable-style.with_frm_style div.description,
.frm_style_formidable-style.with_frm_style div.frm_description,
.frm_style_formidable-style.with_frm_style .frm-show-form > div.frm_description,
.frm_style_formidable-style.with_frm_style .frm_error {
    font-size: 19px;
    color: var(--gray-700);
}

.frm_style_formidable-style.with_frm_style .frm-show-form .frm_section_heading h3 {
    border-top: 0px;
}

.frm_description {
    margin: 0px;
}

.with_frm_style .frm-show-form .frm_section_heading h3 {
    padding: 0px;
}

.frm_style_formidable-style.with_frm_style .frm-show-form .frm_section_heading .frm_section_spacing,
.menu-edit #post-body-content .frm_style_formidable-style.with_frm_style .frm-show-form .frm_section_heading .frm_section_spacing {
    margin-bottom: 0px;
}

.post-formatting ol, .post-formatting ul,
.widget.widget_media_gallery ol, .widget.widget_media_gallery ul {
    margin-top: .4em;
}

.with_frm_style .vertical_radio .frm_checkbox label,
.with_frm_style .vertical_radio .frm_radio label {
    text-indent: -28px;
}

.with_frm_style input[type=text],
.with_frm_style input[type=password],
.with_frm_style input[type=email],
.with_frm_style input[type=number],
.with_frm_style input[type=url],
.with_frm_style input[type=tel],
.with_frm_style input[type=file],
.with_frm_style input[type=search],
.with_frm_style select,
.with_frm_style .frm-card-element.StripeElement {
    font-size: 18px;
    font-weight: bold;
    color: var(--gray-900);
}

.frm_style_formidable-style.with_frm_style .form-field input:not([type=file]):focus,
.frm_style_formidable-style.with_frm_style select:focus,
.frm_style_formidable-style.with_frm_style textarea:focus,
.frm_style_formidable-style.with_frm_style .frm_focus_field input[type=text],
.frm_style_formidable-style.with_frm_style .frm_focus_field input[type=password],
.frm_style_formidable-style.with_frm_style .frm_focus_field input[type=email],
.frm_style_formidable-style.with_frm_style .frm_focus_field input[type=number],
.frm_style_formidable-style.with_frm_style .frm_focus_field input[type=url],
.frm_style_formidable-style.with_frm_style .frm_focus_field input[type=tel],
.frm_style_formidable-style.with_frm_style .frm_focus_field input[type=search],
.frm_form_fields_active_style,
.frm_style_formidable-style.with_frm_style .frm_focus_field .frm-card-element.StripeElement,
.frm_style_formidable-style.with_frm_style .chosen-container-single.chosen-container-active .chosen-single,
.frm_style_formidable-style.with_frm_style .chosen-container-active .chosen-choices {
    background-color: #ffffff;
    border-color: var(--primary);
    color: var(--gray-900);
    box-shadow: 0 0 0 1px var(--primary-dark);
}

.frm_style_formidable-style.with_frm_style .form-field {
    margin-bottom: 2px;
}

.frm_forms.frm_style_formidable-style.with_frm_style {
    line-height: 1.8em;
}

/* fix the top and bottom spacing for the progress bar */
.frm_rootline_group {
    margin: 0px !important;
}

/* Fix spacing of paragraphs */
.frm_style_formidable-style-2.with_frm_style .frm-show-form .frm_section_heading .frm_section_spacing,
.menu-edit #post-body-content .frm_style_formidable-style-2.with_frm_style .frm-show-form .frm_section_heading .frm_section_spacing {
    margin-bottom: 10px;
}

/* parchment */
:root {
    --button-next: #CDAA94;
    --button-next-hover: #C8A58D;
}

/* Next button */
.frm_style_formidable-style-2.with_frm_style .frm_submit input[type=submit],
.frm_style_formidable-style-2.with_frm_style .frm_submit input[type=button],
.frm_style_formidable-style-2.with_frm_style .frm_submit button {
    display: inline-block !important;
    background: var(--button-next) !important;
    color: #fff !important;
    padding: 12px 28px !important;
    border-radius: 12px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    border: none !important;
    margin: 0 12px !important;
}

/* Previous button */
.frm_style_formidable-style-2.with_frm_style .frm_submit .frm_prev_page {
    display: none !important;
}

/* Remove left margin from Next button */
.frm_style_formidable-style-2.with_frm_style .frm_submit .frm_button_submit {
    margin-left: 0 !important;
}

/* Next button */
.frm_style_formidable-style-2.with_frm_style .frm_submit input[type=submit],
.frm_style_formidable-style-2.with_frm_style .frm_submit input[type=button],
.frm_style_formidable-style-2.with_frm_style .frm_submit button {
    padding: 7px 28px !important; /* Reduced from 12px to 7px */
}

/* auto save */
/*.frm_submit #frm-auto-save-time {
    font-size: 11px !important;
    color: #a6a5a2;
    font-weight: 400;
    margin: 0;
    padding: 12px 0 !important;
    display: inline-flex;
    align-items: center;
    height: 52px;
}*/
.frm_submit #frm-auto-save-time {
    display: none;
}

/* Hover states */
.frm_style_formidable-style-2.with_frm_style .frm_submit input[type=submit]:hover,
.frm_style_formidable-style-2.with_frm_style .frm_submit input[type=button]:hover,
.frm_style_formidable-style-2.with_frm_style .frm_submit button:hover {
    background: var(--button-next-hover) !important;
}

/* Add spacing above buttons */
.frm_style_formidable-style-2.with_frm_style .frm_submit {
    padding-top: 1.5em !important;
}

/* Arrow for page button */
.frm_style_formidable-style-2.with_frm_style .frm_button_submit:after {
    content: " →" !important;
}

/* Non-selected hover state */
.with_frm_style .frm_radio label:hover:not(:has(input:checked)) {
    background-color: var(--gray-50) !important;
    color: inherit !important;
    cursor: pointer;
    border: 1px solid var(--gray-200) !important;
}

/* Selected state */
.with_frm_style .frm_radio input[type="radio"]:checked + label,
.with_frm_style .frm_radio input[type="radio"]:checked + label:hover {
    background-color: #8B9685 !important;
    color: #fff !important;
    border-color: #8B9685 !important;
}

/* formidable error color */

.frm_style_formidable-style-2.with_frm_style .frm_error,
.frm_style_formidable-style-2.with_frm_style .frm_limit_error {
    font-weight: normal;
    color: #CDA994 !important;
}

/* progress bar has thin border for already visited pages; hide */
.frm_style_formidable-style-2.with_frm_style .frm_progress_line input.frm_page_back {
    border-color: #E6E4DE !important;
}

/* change text area glow */
.with_frm_style textarea:focus,
.with_frm_style .frm_focus_field textarea {
    box-shadow: 0 0 0 1px #A8B5A5 !important;
    outline: none !important;
}

/* Writing Prompt Styles */
.WritingPrompt {
    font-size: 0.92em;
    font-style: italic;
    line-height: 1.5;
    margin-bottom: 10px;
    list-style: none;
    padding-left: 34px; /* space for pencil */
    padding-top: 3px;
    padding-bottom: 3px; 
    background-image: url('/wp-content/themes/kalium-child/images/pencil-thick.svg');
    background-repeat: no-repeat;
    background-position: left 0px top 5px;  /* pencil slightly lower */
    background-size: 22px 22px;
    text-indent: 0;
    margin-left: 0;
    cursor: pointer;
    border-radius: 4px;
    /* Remove background color for clean look */
    background-color: transparent;
    transition: background 0.16s, box-shadow 0.16s;
}
.WritingPrompt:hover {
    background-color: var(--gray-100);
    box-shadow: 0 2px 8px #cbe7ff33;
}

.WritingPrompt.selected {
    background-color: #f1f4fe;
    box-shadow: 0 2px 8px #cbe7ff33;
}
.assessment-container ul {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Text Length Meter Styles */
.form-answer-length {
  height: 6px;
  background: #CDA994;
  margin: 8px 0 2px 0;
  border-radius: 2px;
  transition: width 0.3s, background 0.3s;
  width: 0%;
}
.form-answer-length.red    { background: #CDA994; }
.form-answer-length.orange { background: #CDA994; }
.form-answer-length.yellow { background: #D1C5A5; }
.form-answer-length.green  { background: #A8B5A5; }

.length-label {
    font-size: 13px;
    margin-bottom: 6px;
    display: block;
    color: #888;
    min-height: 18px;
}
.form-answer-length.red + .length-label    { color: #CDA994; }
.form-answer-length.orange + .length-label { color: #CDA994; }
.form-answer-length.yellow + .length-label { color: #D1C5A5; }
.form-answer-length.green + .length-label  { color: #A8B5A5; }


/* <---- End formidable forms styles */

/* ================================================
   MODERN MODAL DIALOG - Reusable Component
   ================================================ */

/* Modal Styles */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

.modal-overlay.show {
    display: flex;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-dialog {
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    max-width: 500px;
    width: 90%;
    padding: 50px;
    animation: slideUp 0.3s ease;
}

.modal-header h3 {
    margin: 0 0 16px 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--gray-900);
}

.modal-body {
    margin-bottom: 24px;
    line-height: 1.2em;
}

.modal-body p {
    margin: 8px 0;
    color: var(--gray-700);
}

.modal-body p:last-child {
    margin-bottom: 0;
}

.modal-body strong {
    color: var(--gray-900);
    font-weight: 600;
}

.modal-warning {
    color: var(--danger) !important;
    font-weight: 500;
}

.share-privacy-note {
    margin-top: 16px !important;
    padding-top: 12px;
    border-top: 1px solid var(--gray-100, #eee);
    font-size: 0.85em !important;
    color: var(--gray-500, #777) !important;
    line-height: 1.4;
}

.modal-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.btn-cancel,
.btn-confirm-delete {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel {
    background: var(--gray-200);
    color: var(--gray-700);
}

.btn-cancel:hover {
    background: var(--gray-300);
}

.btn-confirm-delete {
    background: var(--danger);
    color: white;
}

.btn-confirm-delete:hover {
    background: var(--danger-dark);
    color: white;
}

.btn-confirm-delete:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Responsive modal */
@media (max-width: 768px) {
    .modal-dialog {
        margin: 20px;
        padding: 30px;
    }
}

@media (max-width: 768px) {
    :root {
        --section-padding: 48px 20px;
    }
    .front-page-container                   { padding: 0 20px; }
    .front-page-container .hero-content     { padding: 28px 0; }
    .front-page-container .section-heading  { margin-bottom: 32px; }
    .hero-buttons {
        display: flex;
        flex-direction: column;
        gap: 16px;
        max-width: 300px;
        margin: 0 auto;
    }
    .ref-link-button-primary,
    .ref-link-button-secondary {
        margin: 0;
        width: 100%;
        text-align: center;
    }
}

/* External link icon for markdown-converted links */
.external-link-icon {
    display: inline-block;
    width: 13px;
    height: 13px;
    vertical-align: middle;
    margin-left: 2px;
    position: relative;
    top: -1px;
    -webkit-mask-image: url('/wp-content/themes/kalium-child/images/external-link.svg');
    mask-image: url('/wp-content/themes/kalium-child/images/external-link.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-color: var(--primary-dark);
    opacity: 0.8;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

a:hover .external-link-icon {
    background-color: #2d4a2d;
    opacity: 1;
}

/* Social share buttons (in share modals).
   Label on its own line above the row of circles so all icons fit
   horizontally even on narrow screens. */
.bt-share-row {
    display: block;
    margin-top: 14px;
}

.bt-share-row .bt-share-label {
    display: block;
    font-size: 0.9em;
    color: var(--gray-700, #555);
    margin-bottom: 6px;
}

.bt-share-row .bt-share-btns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* Hide the Facebook share button on phones and tablets.
   The FB mobile app intercepts facebook.com/sharer links but won't
   pre-fill a post from them, so the button appears broken. The
   native share button + other services cover the mobile case.
   Desktop/laptop users still see it normally. */
@media (hover: none) and (pointer: coarse) {
    .bt-share-row a.bt-share-btn.bt-share-facebook {
        display: none !important;
    }
}

.bt-share-row a.bt-share-btn,
.bt-share-row button.bt-share-btn {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    background-color: #e8e8e8 !important;
    background-image: none !important;
    color: #222 !important;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none !important;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.bt-share-row a.bt-share-btn:hover,
.bt-share-row a.bt-share-btn:focus,
.bt-share-row button.bt-share-btn:hover,
.bt-share-row button.bt-share-btn:focus {
    background-color: #d4d4d4 !important;
    color: #000 !important;
    transform: translateY(-1px);
}

.bt-share-row .bt-share-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    display: block;
}

/* URL field + Copy button row */
.share-link-input-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    gap: 8px;
    width: 100%;
}

.share-link-input-row .share-link-field {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* Override Bootstrap .btn base styles (font-size/weight/padding/radius).
   Fixed width so the button doesn't reflow between "Copy" and "Copied".
   Extra !importants + -webkit-appearance reset for iOS Safari. */
.share-link-copy-btn,
button.share-link-copy-btn,
.share-link-input-row .share-link-copy-btn {
    -webkit-appearance: none !important;
    appearance: none !important;
    flex: 0 0 auto !important;
    width: 74px !important;
    min-width: 74px !important;
    max-width: 74px !important;
    height: auto !important;
    padding: 10px 6px !important;
    margin: 0 !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.6 !important;
    color: #fff !important;
    background-color: var(--primary, #4a6f4a) !important;
    background-image: none !important;
    border: none !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.share-link-copy-btn:hover,
.share-link-copy-btn:focus,
button.share-link-copy-btn:hover,
button.share-link-copy-btn:focus {
    background-color: var(--primary-dark, #2d4a2d) !important;
    color: #fff !important;
}

.share-link-copy-btn.copied,
.share-link-copy-btn.copied:hover,
.share-link-copy-btn.copied:focus {
    background-color: var(--primary-dark, #2d4a2d) !important;
}