/* ==========================================================================
   Lander Employer Themes
   --------------------------------------------------------------------------
   Usage: Add data-theme="employer-slug" to the lander wrapper element.
   The employer slug is derived from the featured_employer JSON in lander copy.
   
   To add a new theme, copy one of the existing blocks and update the colors.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Theme-aware component overrides
   -------------------------------------------------------------------------- */
[data-theme] .bg-primary-601 {
    background-color: var(--theme-cta-bg) !important;
}

[data-theme] .secondary-btn {
    background-color: var(--theme-cta-bg) !important;
    color: var(--theme-cta-text) !important;
}

[data-theme] .secondary-btn:hover {
    background-color: var(--theme-cta-bg) !important;
    filter: brightness(0.9);
}

[data-theme] .text-primary-601 {
    color: var(--theme-cta-bg) !important;
}

[data-theme] .border-primary-601 {
    border-color: var(--theme-accent) !important;
}

/* --------------------------------------------------------------------------
   Terms toggle: show on desktop too (collapsed by default)
   -------------------------------------------------------------------------- */
[data-theme] .above-fold-form .post-form {
    max-height: 5.8em;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

[data-theme] .above-fold-form .post-form.expanded {
    max-height: 100rem;
}

/* --------------------------------------------------------------------------
   Lander header: ensure visible on mobile
   -------------------------------------------------------------------------- */
header:has(.lander-header) {
    height: auto !important;
    overflow: visible !important;
}

/* --------------------------------------------------------------------------
   Lander mobile: left column (headline) first, form second
   -------------------------------------------------------------------------- */

@media (max-width: 1190px) {
    [data-theme] > .container > .flex {
        overflow: visible;
    }
}

[data-theme] .terms-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 0.4rem;
}

[data-theme] .terms-toggle .caret {
    font-size: 1.2rem;
    line-height: 1;
}

/* --------------------------------------------------------------------------
   Theme utility classes
   Use these in blade templates instead of inline styles.
   -------------------------------------------------------------------------- */
[data-theme] .theme-text-primary { color: var(--theme-primary); }
[data-theme] .theme-text-accent { color: var(--theme-accent); }
[data-theme] .theme-text-cta { color: var(--theme-cta-bg); }
[data-theme] .theme-bg-card { background-color: var(--theme-card-bg); }

@media (max-width: 1190px) {
    [data-theme] .theme-bg-card {
        background-color: transparent !important;
        padding: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;
        margin: 0;
    }

    [data-theme] .theme-bg-card > .bg-white {
        box-shadow: 0 0 17px rgba(0, 0, 0, 0.12);
        border-radius: 1.2rem;
        padding: 1.6rem !important;
        width: calc(100% - 1.6rem);
        margin: 0 auto;
    }
}
[data-theme] .theme-bg-accent-light { background-color: var(--theme-tag-bg); }
[data-theme] .theme-bg-icon-1 { background-color: var(--theme-icon-1-bg); }
[data-theme] .theme-bg-icon-2 { background-color: var(--theme-icon-2-bg); }
[data-theme] .theme-bg-icon-3 { background-color: var(--theme-icon-3-bg); }
[data-theme] .theme-bg-icon-4 { background-color: var(--theme-icon-4-bg); }
[data-theme] .theme-border-accent { border-color: var(--theme-accent); }
[data-theme] .theme-bg-about { background-color: var(--theme-about-bg); }
[data-theme] .theme-border-about { border-color: var(--theme-about-border); }
[data-theme] .theme-border-left-accent { border-left-color: var(--theme-accent); }
[data-theme] .theme-border-left-icon-1 { border-left-color: var(--theme-icon-1-stroke); }
[data-theme] .theme-border-left-icon-2 { border-left-color: var(--theme-icon-2-stroke); }
[data-theme] .theme-border-left-icon-3 { border-left-color: var(--theme-icon-3-stroke); }
[data-theme] .theme-border-left-icon-4 { border-left-color: var(--theme-icon-4-stroke); }

/* --------------------------------------------------------------------------
   Default / Base theme (no employer or unknown employer)
   -------------------------------------------------------------------------- */
[data-theme],
[data-theme=""] {
    --theme-primary: #1F3075;
    --theme-accent: #2970FF;
    --theme-cta-bg: #2970FF;
    --theme-cta-text: #FFFFFF;
    --theme-card-bg: #A2BEFE;
    --theme-card-border: transparent;
    --theme-about-bg: #F8FAFC;
    --theme-about-border: #D1D1D1;
    --theme-tag-bg: #E2E8F0;
    --theme-tag-text: #334155;
    --theme-icon-1-bg: #D4E7FD;
    --theme-icon-1-stroke: #256CE7;
    --theme-icon-2-bg: #FFF1C2;
    --theme-icon-2-stroke: #DC7122;
    --theme-icon-3-bg: #EAE6FD;
    --theme-icon-3-stroke: #723BDE;
    --theme-icon-4-bg: #D4FCE4;
    --theme-icon-4-stroke: #28AC65;
}

/* --------------------------------------------------------------------------
   Amazon theme
   -------------------------------------------------------------------------- */
[data-theme="amazon"] {
    --theme-primary: #1F2A36;
    --theme-accent: #FF8C1B;
    --theme-cta-bg: #FF8C1B;
    --theme-cta-text: #FFFFFF;
    --theme-card-bg: #0F172A;
    --theme-card-border: transparent;
    --theme-about-bg: #FFEEE2;
    --theme-about-border: #D1D1D1;
    --theme-tag-bg: #FFF3E0;
    --theme-tag-text: #E65100;
    --theme-icon-1-bg: #D4E7FD;
    --theme-icon-1-stroke: #256CE7;
    --theme-icon-2-bg: #FFF1C2;
    --theme-icon-2-stroke: #DC7122;
    --theme-icon-3-bg: #EAE6FD;
    --theme-icon-3-stroke: #723BDE;
    --theme-icon-4-bg: #D4FCE4;
    --theme-icon-4-stroke: #28AC65;
}

/* --------------------------------------------------------------------------
   Costco theme
   -------------------------------------------------------------------------- */
[data-theme="costco"] {
    --theme-primary: #1F3075;
    --theme-accent: #E31837;
    --theme-cta-bg: #E31837;
    --theme-cta-text: #FFFFFF;
    --theme-card-bg: #1E5C9F;
    --theme-card-border: transparent;
    --theme-about-bg: #EFF6FF;
    --theme-about-border: #98A2B3;
    --theme-tag-bg: #F1F5F9;
    --theme-tag-text: #334155;
    --theme-icon-1-bg: #D4E7FD;
    --theme-icon-1-stroke: #256CE7;
    --theme-icon-2-bg: #FFE0E6;
    --theme-icon-2-stroke: #E31837;
    --theme-icon-3-bg: #FFE0E6;
    --theme-icon-3-stroke: #E31837;
    --theme-icon-4-bg: #D4FCE4;
    --theme-icon-4-stroke: #28AC65;
}

/* --------------------------------------------------------------------------
   FedEx theme
   -------------------------------------------------------------------------- */
[data-theme="fedex"] {
    --theme-primary: #1F2A36;
    --theme-accent: #FF6600;
    --theme-cta-bg: #FF6600;
    --theme-cta-text: #FFFFFF;
    --theme-card-bg: #4B0082;
    --theme-card-border: transparent;
    --theme-about-bg: #F3E8FF;
    --theme-about-border: #D1D1D1;
    --theme-tag-bg: #F1F5F9;
    --theme-tag-text: #334155;
    --theme-icon-1-bg: #D4E7FD;
    --theme-icon-1-stroke: #256CE7;
    --theme-icon-2-bg: #FFE0CC;
    --theme-icon-2-stroke: #FF6600;
    --theme-icon-3-bg: #EAE6FD;
    --theme-icon-3-stroke: #723BDE;
    --theme-icon-4-bg: #D4FCE4;
    --theme-icon-4-stroke: #28AC65;
}

/* --------------------------------------------------------------------------
   Kelly Services theme
   -------------------------------------------------------------------------- */
[data-theme="kelly-services"] {
    --theme-primary: #1F3075;
    --theme-accent: #22857C;
    --theme-cta-bg: #22857C;
    --theme-cta-text: #FFFFFF;
    --theme-card-bg: #22857C;
    --theme-card-border: transparent;
    --theme-about-bg: #F0FDFA;
    --theme-about-border: #D1D1D1;
    --theme-tag-bg: #F0FDFA;
    --theme-tag-text: #334155;
    --theme-icon-1-bg: #D4E7FD;
    --theme-icon-1-stroke: #256CE7;
    --theme-icon-2-bg: #FFF1C2;
    --theme-icon-2-stroke: #DC7122;
    --theme-icon-3-bg: #EAE6FD;
    --theme-icon-3-stroke: #723BDE;
    --theme-icon-4-bg: #D4FCE4;
    --theme-icon-4-stroke: #28AC65;
}

/* --------------------------------------------------------------------------
   FEMA theme
   -------------------------------------------------------------------------- */
[data-theme="fema"] {
    --theme-primary: #1F3075;
    --theme-accent: #1E40AF;
    --theme-cta-bg: #1F3075;
    --theme-cta-text: #FFFFFF;
    --theme-card-bg: #1E40AF;
    --theme-card-border: transparent;
    --theme-about-bg: #F8FAFC;
    --theme-about-border: #D1D1D1;
    --theme-tag-bg: #F1F5F9;
    --theme-tag-text: #334155;
    --theme-icon-1-bg: #D4E7FD;
    --theme-icon-1-stroke: #256CE7;
    --theme-icon-2-bg: #FFF1C2;
    --theme-icon-2-stroke: #DC7122;
    --theme-icon-3-bg: #FFE0E6;
    --theme-icon-3-stroke: #E31837;
    --theme-icon-4-bg: #D4FCE4;
    --theme-icon-4-stroke: #28AC65;
}

/* --------------------------------------------------------------------------
   Walmart theme
   -------------------------------------------------------------------------- */
[data-theme="walmart"] {
    --theme-primary: #1D2939;
    --theme-accent: #2471DC;
    --theme-cta-bg: #EDBD35;
    --theme-cta-text: #101828;
    --theme-card-bg: #1D6FE0;
    --theme-card-border: transparent;
    --theme-about-bg: #F8FAFC;
    --theme-about-border: #D1D1D1;
    --theme-tag-bg: #F1F5F9;
    --theme-tag-text: #334155;
    --theme-icon-1-bg: #D4E7FD;
    --theme-icon-1-stroke: #256CE7;
    --theme-icon-2-bg: #FFF1C2;
    --theme-icon-2-stroke: #DC7122;
    --theme-icon-3-bg: #EAE6FD;
    --theme-icon-3-stroke: #723BDE;
    --theme-icon-4-bg: #D4FCE4;
    --theme-icon-4-stroke: #28AC65;
}