/* --- Design System (Fluid & Adaptive) --- */
:root {
    /* Colors */
    --color-background: #f6f8ed;
    --color-primary: #29abe2;
    --color-navy: #001f3e;
    --color-neutral: #e5e5e5;
    --color-accent: #dbe64c;
    --color-green: #98cc5d;
    --color-white: #ffffff;
    --color-black: #1a1a1a;

    /* Fluid Typography - Scales between 320px and 1440px viewport */
    --font-main: 'Montserrat', sans-serif;
    --font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --font-size-h1: clamp(2.5rem, 1.5rem + 5vw, 4.5rem);
    --font-size-h2: clamp(2rem, 1.2rem + 4vw, 3.5rem);
    --font-size-h3: clamp(1.5rem, 1rem + 2.5vw, 2.25rem);
    --font-size-h4: clamp(1.125rem, 1rem + 0.6vw, 1.25rem);

    /* Fluid Spacing */
    --space-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);
    --space-sm: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
    --space-md: clamp(1.5rem, 1rem + 2vw, 3rem);
    --space-lg: clamp(3rem, 2rem + 5vw, 6rem);
    --space-xl: clamp(5rem, 3rem + 10vw, 10rem);

    /* Shadows */
    --shadow-soft: 0 4px 20px rgba(0, 31, 62, 0.08);
    --shadow-bold: 0 10px 40px rgba(0, 31, 62, 0.15);

    /* Transitions */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Adaptive Resets --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

/* --- Global Spacing & Layout Shield --- */
/* Ensures content never touches the screen edges while allowing alignfull backgrounds 
   to remain 100% flush. Padding is targeted at constrained containers and content elements. */

/* 1. Standard constrained containers */
.alignwide,
.wp-block-columns,
.has-global-padding {
    padding-left: var(--space-md) !important;
    padding-right: var(--space-md) !important;
    box-sizing: border-box !important;
}

/* 2. Ensure alignfull blocks themselves have NO horizontal padding (keeps backgrounds flush) */
.alignfull {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 3. Apply padding to any direct content inside alignfull that is NOT another full-width block.
      This protects text/headings inside colored sections without insetting the background. */
.alignfull > :not(.alignfull):not(.alignwide):not(.wp-block-columns):not(.wp-block-group) {
    padding-left: var(--space-md) !important;
    padding-right: var(--space-md) !important;
}

/* 4. Individual columns get a consistent small gutter */
.wp-block-column {
    padding-left: var(--space-sm) !important;
    padding-right: var(--space-sm) !important;
    box-sizing: border-box !important;
}

/* 5. Prevent double-padding on nested columns. 
      We avoid resetting groups here because they are often used as "cards" 
      with their own specific internal padding (like Vision/Mission or Perks). */
.wp-block-columns .wp-block-columns {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body {
    font-family: var(--font-main);
    background-color: var(--color-background);
    color: var(--color-navy);
    font-size: var(--font-size-base);
    line-height: 1.6;
    overflow-x: hidden;
    width: 100%;
}

h1 {
    font-size: var(--font-size-h1);
}

h2 {
    font-size: var(--font-size-h2);
}

h3 {
    font-size: var(--font-size-h3);
}

h4 {
    font-size: var(--font-size-h4);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    width: 92%;
    max-width: 1600px;
    margin: 0 auto;
}

section {
    padding: var(--space-lg) var(--space-md);
}

/* --- Content Components --- */
ul, ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

li {
    margin-bottom: 0.5rem;
}

/* --- List Styles --- */
.is-style-checkmark {
    list-style: none !important;
    padding-left: 0 !important;
}

.is-style-checkmark li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0.75rem;
}

.is-style-checkmark li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: 800;
}

.btn {
    display: inline-block;
    padding: clamp(0.75rem, 0.5rem + 1vw, 1rem) clamp(1.5rem, 1rem + 2vw, 2.5rem);
    border-radius: 100px;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
}

/* --- FAQ Accordion --- */
.faq-accordion {
    margin-top: 3rem;
}

.faq-item {
    border-bottom: 1px solid var(--color-neutral);
    padding: 2rem 0;
}

.faq-item summary {
    list-style: none;
    cursor: pointer;
    font-weight: 700;
    font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
    color: var(--color-navy);
    position: relative;
    padding-right: 3rem;
    user-select: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    color: var(--color-primary);
    transition: var(--transition);
}

.faq-item[open] summary::after {
    content: "−";
    transform: translateY(-50%) rotate(180deg);
}

.faq-item .faq-content {
    margin-top: 1.5rem;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #4a4a4a;
    max-width: 90%;
}

/* --- Footer Link Styles --- */
footer a {
    color: var(--color-neutral) !important;
    transition: var(--transition);
}

footer a:hover {
    color: var(--color-primary) !important;
    text-decoration: underline !important;
}

.wp-block-query {
    margin-bottom: 4rem !important;
}

/* --- Header & Footer Layout Safety --- */
/* (Handled by the refined Global Spacing & Layout Shield above) */

/* --- Ultra-Adaptive Header & Button Shield --- */
@media (max-width: 900px) {

    /* 0. Content padding is now handled globally by the Layout Shield.
       We only need to ensure specific overrides if necessary. */

    /* Ensure FAQ has padding even if nested */
    .faq-accordion {
        padding-left: 25px !important;
        padding-right: 25px !important;
    }

    /* 1. Layout: Force Stack & Center */
    .wp-block-group.alignwide,
    .wp-block-group.alignfull>.wp-block-group,
    .wp-block-columns {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1.5rem !important;
    }

    /* 3. Column Specifics — includes horizontal padding for all columns */
    .wp-block-column {
        flex-basis: 100% !important;
        text-align: center !important;
        padding-left: 25px !important;
        padding-right: 25px !important;
        box-sizing: border-box !important;
        margin-bottom: 2.5rem;
    }

    /* 4. Text & Content alignment */
    .wp-block-group p,
    .wp-block-group .wp-block-heading {
        text-align: center !important;
        max-width: 100%;
    }

    /* 5. Navigation & Button Fixes */
    .wp-block-navigation__container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 1rem !important;
    }

    .wp-block-button__link {
        width: auto !important;
        min-width: 180px !important;
        white-space: nowrap !important;
        display: inline-block !important;
        text-align: center !important;
    }

    .wp-block-buttons {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .wp-block-buttons > .wp-block-button {
        margin-left: auto !important;
        margin-right: auto !important;
        width: fit-content !important;
    }

    /* 6. Logo Force Center */
    .wp-block-image img {
        margin: 0 auto !important;
        max-width: 160px !important;
    }

    /* 7. Specific Component Overrides */
    .career-perks-card {
        padding: 1.5rem !important;
    }

    /* 8. Vacancy Job Board Mobile Fixes */
    .vacancy-selector-bar div {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .vacancy-selector-bar a {
        width: 100% !important;
        max-width: 350px !important;
    }

    .vacancy-detail-container {
        padding: 4rem 1.5rem !important;
        text-align: center !important;
    }

    .vacancy-content-grid {
        flex-direction: column !important;
        align-items: center !important;
        gap: 3rem !important;
    }

    .vacancy-main-column, 
    .vacancy-sidebar-column {
        flex: 1 1 100% !important;
        width: 100% !important;
        text-align: center !important;
    }

    .vacancy-main-column section h3 {
        text-align: center !important;
    }

    .vacancy-main-column ul {
        text-align: left !important; /* Keep lists readable but center the container */
        display: inline-block;
        max-width: 100%;
    }
    
    .vacancy-sidebar-column div {
        position: relative !important; /* Unstick on mobile */
        top: 0 !important;
    }
}