/* ----------------------------------------------------------
   Global layout helpers
---------------------------------------------------------- */

:root {
    --site-padding: var(--wp--preset--spacing--spacing-md);
    --top-nav-button-size: 48px;
    --site-max-width: 2560px;

    /* Vertical Section Padding Variables */
    --section-padding-full: var(--wp--preset--spacing--spacing-xxxbig);
    --section-padding-half: var(--wp--preset--spacing--spacing-md);

    /* Heading Ingress CTA block Responsive Padding - Mobile */
    --heading-ingress-cta-has-padding: var(--wp--preset--spacing--spacing-md);
}

@media (min-width: 481px) {
    :root {
        --site-padding: var(--wp--preset--spacing--spacing-xbig);
        --heading-ingress-cta-has-padding: var(--wp--preset--spacing--spacing-lg);
    }
}

@media (min-width: 960px) {
    :root {
        --site-padding: var(--wp--preset--spacing--spacing-lg);

        /* Desktop scales up */
        --section-padding-full: var(--wp--preset--spacing--spacing-xxlg);
        --section-padding-half: var(--wp--preset--spacing--spacing-xxxbig);
    }
}

/* Scroll behavior */
html {
    scroll-behavior: smooth;
}

[id] {
    scroll-margin-top: 155px;
}

@media (max-width: 960px) {
    [id] {
        scroll-margin-top: 75px;
    }
}

.oomi-block-inner {
    width: 100%;
    max-width: calc(var(--wp--style--global--content-size) + (var(--site-padding) * 2));
    margin-inline: auto;
    padding-inline: var(--site-padding);
    box-sizing: border-box;
}

.is-reading-width {
    width: 100%;
    max-width: 700px;
    margin-inline: auto;
    padding-inline: var(--site-padding);
    box-sizing: border-box;
}

body {
    max-width: var(--site-max-width);
    margin-inline: auto;
    overflow-wrap: anywhere;
    word-break: auto-phrase;
    hyphens: none;
}

p,
li {
    hyphens: auto;
}

/* ----------------------------------------------------------
   Breakpoints (variables cannot be used in media queries so these are
   just for documentation)
---------------------------------------------------------- */

/*
  xsmall (mobile): < 480px
  small (tablet):  480px – 959px
  medium (laptop): 960px – 1279px
  large (desktop):  1280px – 1919px
  xlarge: 1920px+
*/

:root {
    --breakpoint-xs: 480px;
    --breakpoint-sm: 960px;
    --breakpoint-md: 1280px;
    --breakpoint-lg: 1920px;
}

/* ----------------------------------------------------------
   Administrator Visibility Helpers
   Descriptive classes for the Site Editor Additional CSS field
---------------------------------------------------------- */

/* Hides elements completely on mobile phones and tablets (< 960px) */
@media (max-width: 959px) {
    .hide-on-mobile-and-tablet {
        display: none !important;
    }

    .editor-styles-wrapper .hide-on-mobile-and-tablet {
        display: revert !important;
        opacity: 0.5 !important;
        outline: 2px dashed var(--wp--preset--color--border-default, #afafaf) !important;
        position: relative !important;
    }

    .editor-styles-wrapper .hide-on-mobile-and-tablet::before {
        content: 'Hidden on Mobile & Tablet (< 960px)';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        background: var(--wp--preset--color--brand-primary-navy, #092651);
        color: #fff;
        padding: 4px 8px;
        font-family: monospace;
        font-size: 12px;
        font-weight: 600;
        z-index: 9999;
        pointer-events: none;
        border-bottom-right-radius: 4px;
    }
}

/* Hides elements completely on laptop and desktop monitors (>= 960px) */
@media (min-width: 960px) {
    .hide-on-desktop {
        display: none !important;
    }

    .editor-styles-wrapper .hide-on-desktop {
        display: revert !important;
        opacity: 0.5 !important;
        outline: 2px dashed var(--wp--preset--color--border-default, #afafaf) !important;
        position: relative !important;
    }

    .editor-styles-wrapper .hide-on-desktop::before {
        content: 'Hidden on Desktop (>= 960px)';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        background: var(--wp--preset--color--brand-primary-navy, #092651);
        color: #fff;
        padding: 4px 8px;
        font-family: monospace;
        font-size: 12px;
        font-weight: 600;
        z-index: 9999;
        pointer-events: none;
        border-bottom-right-radius: 4px;
    }
}

/* ----------------------------------------------------------
   Headings
   Kept in CSS because theme.json does not provide breakpoint-based
   heading size changes in a straightforward way.
---------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: 0;
    color: var(--wp--preset--color--brand-primary-navy);
    font-family: var(--wp--preset--font-family--gelion);
    font-weight: 500;
    line-height: 1;
}

h1 {
    font-size: 40px;
}

h2 {
    font-size: 32px;
}

h3 {
    font-size: 28px;
}

h4 {
    font-size: 24px;
}

h5 {
    font-size: 20px;
}

h6 {
    font-size: 18px;
}

body .has-heading-xxl-font-size,
body .wp-block-heading.has-heading-xxl-font-size {
    font-size: 40px !important;
}
body .has-heading-xl-font-size,
body .wp-block-heading.has-heading-xl-font-size {
    font-size: 32px !important;
}
body .has-heading-l-font-size,
body .wp-block-heading.has-heading-l-font-size {
    font-size: 28px !important;
}
body .has-heading-m-font-size,
body .wp-block-heading.has-heading-m-font-size {
    font-size: 24px !important;
}
body .has-heading-s-font-size,
body .wp-block-heading.has-heading-s-font-size {
    font-size: 20px !important;
}
body .has-heading-xs-font-size,
body .wp-block-heading.has-heading-xs-font-size {
    font-size: 18px !important;
}

@media (min-width: 480px) {
    h1 {
        font-size: 48px;
    }

    h2 {
        font-size: 40px;
    }

    h3 {
        font-size: 32px;
    }

    h4 {
        font-size: 28px;
    }

    h5 {
        font-size: 24px;
    }

    h6 {
        font-size: 20px;
    }

    body .has-heading-xxl-font-size,
    body .wp-block-heading.has-heading-xxl-font-size {
        font-size: 48px !important;
    }
    body .has-heading-xl-font-size,
    body .wp-block-heading.has-heading-xl-font-size {
        font-size: 40px !important;
    }
    body .has-heading-l-font-size,
    body .wp-block-heading.has-heading-l-font-size {
        font-size: 32px !important;
    }
    body .has-heading-m-font-size,
    body .wp-block-heading.has-heading-m-font-size {
        font-size: 28px !important;
    }
    body .has-heading-s-font-size,
    body .wp-block-heading.has-heading-s-font-size {
        font-size: 24px !important;
    }
    body .has-heading-xs-font-size,
    body .wp-block-heading.has-heading-xs-font-size {
        font-size: 20px !important;
    }
}

/* ----------------------------------------------------------
   Focus styles
---------------------------------------------------------- */

/* Double-ring focus state for universal accessibility */
:where(a, button, input, select, textarea, summary, [role='button'], .wp-block-button__link):focus-visible {
    outline: 2px solid var(--wp--preset--color--brand-primary-navy);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--wp--preset--color--text-light);
    border-radius: 4px;
}

.wp-block-button__link:focus-visible {
    border-radius: 24px;
}

/* Custom focus ring for the icon-only search block button */
.wp-block-search__icon-button .wp-block-search__button:focus-visible {
    outline-offset: -2px;
}