/* ==========================================================================
   LAYOUT UTILITIES (Minimal Set)
   Essential Grid & Flexbox utilities for component layouts
   All styling done via semantic component classes
   ========================================================================== */

/* Container - Max width with auto margins */
.container {
    max-width: var(--container-max-width, 1280px);
    margin-left: auto;
    margin-right: auto;
    padding-inline: 100px;
}

/* Nested containers reset padding so only the outermost one applies the inset */
.container .container {
    padding-inline: 0;
}

/* Breakout blocks (block-width-full / ultrawide) visually escape their parent
   container, so their inner .container needs padding re-applied */
:is(.block-width-full, .block-width-ultrawide) .container {
    padding-inline: 100px;
}

/* But containers nested *within* a breakout block's container still reset */
:is(.block-width-full, .block-width-ultrawide) .container .container {
    padding-inline: 0;
}

@media (max-width: 1024px) {
    .container {
        padding-inline: var(--space-8); /* 32px */
    }

    .container .container {
        padding-inline: 0;
    }

    :is(.block-width-full, .block-width-ultrawide) .container {
        padding-inline: var(--space-8);
    }

    :is(.block-width-full, .block-width-ultrawide) .container .container {
        padding-inline: 0;
    }
}

@media (max-width: 768px) {
    .container {
        padding-inline: var(--space-4); /* 16px */
    }

    .container .container {
        padding-inline: 0;
    }

    :is(.block-width-full, .block-width-ultrawide) .container {
        padding-inline: var(--space-4);
    }

    :is(.block-width-full, .block-width-ultrawide) .container .container {
        padding-inline: 0;
    }
}

/* Full Width Background — extends background color to viewport width
   Uses a pseudo-element so the element's own dimensions (and children
   using percentage widths like width: 85%) are unaffected. */
.full-width-bg {
    position: relative;
    z-index: 0;
}

.full-width-bg::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background-color: inherit;
    z-index: -1;
}

/* Container variants for specific widths */
.container-narrow {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

.container-medium {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

.container-wide {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

/* Full width - no max-width constraint */
.container-full {
    width: 100%;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

/* Block Width Breakout — allows a block to escape the .container
   Uses left + transform to center relative to the viewport */
.block-width-ultrawide,
.block-width-full {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* Narrower block widths — constrain within the container */
.block-width-narrow {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.block-width-medium {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.block-width-wide {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.block-width-ultrawide {
    width: min(2560px, 100vw);
}

.block-width-full {
    width: 100vw;
}

/* ==========================================================================
   TEXT WIDTH CONSTRAINTS
   Applied via TinyMCE Style Formats > Content Width dropdown.
   Constrains block-level elements (headings, paragraphs) to a percentage
   of their parent and centers them. Useful inside layout block headings.
   ========================================================================== */
.text-width-50 {
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
}

.text-width-66 {
    max-width: 66%;
    margin-left: auto;
    margin-right: auto;
}

.text-width-75 {
    max-width: 75%;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    .text-width-50,
    .text-width-66,
    .text-width-75 {
        max-width: 100%;
    }
}

/* Flexbox Layout */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }

/* Grid Layout */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* Asymmetric 2-Column Ratios */
.grid-cols-1-2 { grid-template-columns: 1fr 2fr; }
.grid-cols-2-1 { grid-template-columns: 2fr 1fr; }
.grid-cols-1-3 { grid-template-columns: 1fr 3fr; }
.grid-cols-3-1 { grid-template-columns: 3fr 1fr; }

/* Gap Spacing */
.gap-0 { gap: 0; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }

/* Responsive Grid */
@media (min-width: 40rem) {
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 48rem) {
    .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    /* Asymmetric 2-Column Ratios (stack on mobile, split on tablet+) */
    .md\:grid-cols-1-2 { grid-template-columns: 1fr 2fr; }
    .md\:grid-cols-2-1 { grid-template-columns: 2fr 1fr; }
    .md\:grid-cols-1-3 { grid-template-columns: 1fr 3fr; }
    .md\:grid-cols-3-1 { grid-template-columns: 3fr 1fr; }
}

@media (min-width: 64rem) {
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Mobile Gap — override desktop gap on mobile when MobileColumnGap is set */
@media (max-width: 768px) {
    .mobile-gap-0 { gap: 0; }
    .mobile-gap-2 { gap: 0.5rem; }
    .mobile-gap-3 { gap: 0.75rem; }
    .mobile-gap-4 { gap: 1rem; }
    .mobile-gap-5 { gap: 1.25rem; }
    .mobile-gap-6 { gap: 1.5rem; }
    .mobile-gap-8 { gap: 2rem; }
}

/* ==========================================================================
   SPACING UTILITIES
   Vertical and Horizontal padding for blocks (used via BaseBlockData)
   ========================================================================== */

/* Vertical Padding (py = padding-top + padding-bottom)
   Values aligned with SpacerSizeSelectionFactory: 24 / 48 / 96 / 144 px
   Desktop-only — on mobile, blocks fall back to their :where() default padding. */
@media (min-width: 769px) {
    .py-0 { padding-top: 0; padding-bottom: 0; }
    .py-small { padding-top: var(--space-6); padding-bottom: var(--space-6); }   /* 24px */
    .py-medium { padding-top: var(--space-12); padding-bottom: var(--space-12); } /* 48px */
    .py-large { padding-top: 6rem; padding-bottom: 6rem; }                       /* 96px */
    .py-xl { padding-top: 9rem; padding-bottom: 9rem; }                          /* 144px */

    /* Custom pixel override set via --py-override CSS variable */
    .desktop-py-override {
        padding-top: var(--py-override);
        padding-bottom: var(--py-override);
    }
}

/* Horizontal Padding (px = padding-left + padding-right) */
.px-0 { padding-left: 0; padding-right: 0; }
.px-small { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-medium { padding-left: var(--space-6); padding-right: var(--space-6); }
.px-large { padding-left: var(--space-8); padding-right: var(--space-8); }

/* ==========================================================================
   COLOR UTILITIES - Brand Palette
   Text and background colors mapped to CSS custom properties in theme.css
   Values match SelectionFactory options (TextColorSelectionFactory,
   BackgroundColorSelectionFactory) so blocks can apply them via CSS class.
   ========================================================================== */

/* Text / Font Colors */
.color-black { color: var(--color-black); }
.color-white { color: var(--color-white); }
.color-dark-blue { color: var(--color-dark-blue); }
.color-medium-cyan { color: var(--color-medium-cyan); }
.color-light-cyan { color: var(--color-light-cyan); }
.color-orange { color: var(--color-orange); }
.color-corp-blue { color: var(--color-corp-blue); }

/* When a text color utility is applied, force <p> and <a> descendants to
   inherit so the global p/a { color: var(--color-text-body) } in
   theme.css don't override the intended block color. */
[class*="color-"] p,
[class*="color-"] a:not(.btn):not(.btn-link-arrow):not(.btn-link-arrow-secondary):not([class*="btn-"]) {
    color: inherit;
}

/* Edit-mode: when TinyMCE inline editing is active inside a white-text block,
   add a contrasting background so the text remains visible.
   .mce-content-body is only present during on-page editing — no frontend impact. */
.color-white .mce-content-body {
    background-color: #54C7FF;
    border-radius: 4px;
}

/* Background Colors */
.bg-transparent { background-color: transparent; }
.bg-white { background-color: var(--color-white); }
.bg-black { background-color: var(--color-black); }
.bg-dark-blue { background-color: var(--color-dark-blue); }
.bg-medium-cyan { background-color: var(--color-medium-cyan); }
.bg-light-cyan { background-color: var(--color-light-cyan); }
.bg-orange { background-color: var(--color-orange); }
.bg-corp-blue { background-color: var(--color-corp-blue); }
.bg-light-blue { background-color: var(--color-bg-light-blue); }
.bg-light-orange { background-color: var(--color-bg-light-orange); }
.bg-light-gray { background-color: #F4F4F4; }
.bg-dark-gray { background-color: #363636; }

/* ==========================================================================
   ICON UTILITIES
   Placeholder sizing for Lucide [data-lucide] elements before createIcons()
   runs, preventing flash of unstyled content / layout shift.
   ========================================================================== */

[data-lucide] {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
}

/* ==========================================================================
   LIST STYLES - Custom list bullets for rich text content
   Applied via TinyMCE Style Formats dropdown in the CMS editor.
   ========================================================================== */

/* Checkmark List */
.list-check {
    list-style: none;
    padding-left: 1.75rem;
}

.list-check li {
    position: relative;
    padding-left: 0;
    margin-bottom: 0.5rem;
}

.list-check li::before {
    content: "\2713";
    position: absolute;
    left: -1.5rem;
    color: var(--color-primary, #003B97);
    font-weight: 700;
}

/* Arrow List */
.list-arrow {
    list-style: none;
    padding-left: 1.75rem;
}

.list-arrow li {
    position: relative;
    padding-left: 0;
    margin-bottom: 0.5rem;
}

.list-arrow li::before {
    content: "\203A";
    position: absolute;
    left: -1.25rem;
    color: var(--color-primary, #003B97);
    font-weight: 700;
    font-size: 1.25em;
    line-height: 1;
}

/* ==========================================================================
   SUBHEADING WIDTH UTILITIES
   ========================================================================== */

.subheading-width-narrow { max-width: 700px; }
.subheading-width-medium { max-width: 900px; }
.subheading-width-wide   { max-width: 1200px; }
.subheading-width-full   { max-width: none; }

/* ==========================================================================
   SUBHEADING STYLE PRESETS
   All presets use font-weight: 300. Only font-size and line-height differ.
   Hero:   20px / 30px
   Layout: 18px / 28px
   Card:   16px / 24px
   ========================================================================== */

.subheading-style-hero,
.subheading-style-layout,
.subheading-style-card {
    font-weight: 300;
}

.subheading-style-hero {
    font-size: 1.25rem;       /* 20px */
    line-height: 1.875rem;    /* 30px */
}

.subheading-style-layout {
    font-size: 1.125rem;      /* 18px */
    line-height: 1.75rem;     /* 28px */
}

.subheading-style-card {
    font-size: 1rem;          /* 16px */
    line-height: 1.5rem;      /* 24px */
}