/* =========================================================
   HSE ELEMENTS — GLOBAL DESIGN SYSTEM
   Version: 1.1
   ========================================================= */


/* =========================================================
   01. DESIGN TOKENS
   ========================================================= */

:root {

    /* -----------------------------------------------------
       COLOUR
       ----------------------------------------------------- */

    /* Primary brand yellow */
    --hse-yellow: #F1D51B;

    /* Supporting yellow family */
    --hse-deep-yellow: #E8C100;
    --hse-bright-yellow: #FFEA5C;
    --hse-soft-yellow: #F9EFA6;
    --hse-wash-yellow: #F3EFD8;
    --hse-porcelain-tint: #F8F6ED;

    /* Neutral system */
    --hse-black: #000000;
    --hse-graphite: #111111;
    --hse-charcoal: #242424;
    --hse-dark-grey: #4A4A48;
    --hse-steel-grey: #5C5C58;
    --hse-mid-grey: #7E7E7A;
    --hse-light-grey: #B8B8B4;
    --hse-pale-grey: #ECECE9;
    --hse-off-white: #F7F7F5;
    --hse-white: #FFFFFF;

    /* Semantic brand roles */
    --hse-accent: var(--hse-yellow);
    --hse-accent-hover: var(--hse-bright-yellow);
    --hse-accent-deep: var(--hse-deep-yellow);


    /* -----------------------------------------------------
       GRADIENTS
       ----------------------------------------------------- */

    /* Primary HSE yellow gradient */
    --hse-gradient-yellow:
        linear-gradient(
            135deg,
            #F1D51B 0%,
            #FFEA5C 50%,
            #F9EFA6 100%
        );

    /* Soft editorial / callout gradient */
    --hse-gradient-yellow-light:
        linear-gradient(
            135deg,
            #FFEA5C 0%,
            #F9EFA6 50%,
            #F3EFD8 100%
        );

    --hse-gradient-grey:
        linear-gradient(
            135deg,
            #F7F7F5 0%,
            #ECECE9 33%,
            #D7D7D3 66%,
            #B8B8B4 100%
        );

    --hse-gradient-black:
        linear-gradient(
            135deg,
            #000000 0%,
            #0B0B0B 33%,
            #171717 66%,
            #242424 100%
        );


    /* -----------------------------------------------------
       GEOMETRY
       ----------------------------------------------------- */

    --hse-radius: 2px;


    /* -----------------------------------------------------
       SPACING
       ----------------------------------------------------- */

    --hse-space-xs: 0.25rem;   /* 4px */
    --hse-space-s: 0.5rem;     /* 8px */
    --hse-space-m: 1rem;       /* 16px */
    --hse-space-l: 1.5rem;     /* 24px */
    --hse-space-xl: 2rem;      /* 32px */
    --hse-space-2xl: 3rem;     /* 48px */
    --hse-space-3xl: 4rem;     /* 64px */
    --hse-space-4xl: 6rem;     /* 96px */
    --hse-space-5xl: 8rem;     /* 128px */


    /* -----------------------------------------------------
       ELEVATION
       ----------------------------------------------------- */

    --hse-shadow-1:
        0 6px 18px #00000014;

    --hse-shadow-2:
        0 12px 32px #00000024;

    --hse-shadow-3:
        0 20px 56px #00000033;

    --hse-shadow-dark:
        0 18px 50px #00000057;


    /* -----------------------------------------------------
       GLASS
       ----------------------------------------------------- */

    --hse-glass-background:
        rgba(17, 17, 17, 0.72);

    --hse-glass-background-scrolled:
        rgba(17, 17, 17, 0.88);

    --hse-glass-border:
        rgba(255, 255, 255, 0.10);

    --hse-glass-blur:
        18px;


    /* -----------------------------------------------------
       MOTION
       ----------------------------------------------------- */

    --hse-motion-fast: 220ms;
    --hse-motion-standard: 280ms;
    --hse-motion-slow: 500ms;

    --hse-ease:
        cubic-bezier(0.2, 0, 0, 1);


    /* -----------------------------------------------------
       RESPONSIVE LAYOUT
       Mobile baseline
       ----------------------------------------------------- */

    --hse-page-gutter: 1.5rem;
    --hse-section-spacing: 4rem;

    --hse-content-max: 110rem;  /* 1760px */
    --hse-reading-max: 50rem;   /* 800px */
}


/* =========================================================
   02. BASE / ACCESSIBILITY
   ========================================================= */

html {
    scroll-behavior: smooth;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
video,
iframe {
    max-width: 100%;
}

img,
video {
    height: auto;
}


/*
 * Universal focus treatment:
 * white inner ring remains visible on dark surfaces;
 * graphite outer ring remains visible on light surfaces.
 */

:focus-visible {
    outline: 2px solid var(--hse-white);
    outline-offset: 2px;
    box-shadow:
        0 0 0 4px var(--hse-graphite);
}

::selection {
    background: var(--hse-yellow);
    color: var(--hse-black);
}


/* =========================================================
   03. LAYOUT UTILITIES
   ========================================================= */

/*
 * Use these classes deliberately when building pages.
 * They do not automatically alter every WordPress Group.
 */

.hse-content-frame {
    width: 90%;
    max-width: var(--hse-content-max);
    margin-inline: auto;
}

.hse-reading-width {
    width: 100%;
    max-width: var(--hse-reading-max);
}

.hse-section {
    padding-block: var(--hse-section-spacing);
}

.hse-page-gutter {
    padding-inline: var(--hse-page-gutter);
}


/* =========================================================
   04. LINKS
   ========================================================= */

a {
    transition:
        color var(--hse-motion-fast) var(--hse-ease),
        text-decoration-color var(--hse-motion-fast) var(--hse-ease);
}

/*
 * Keep normal text links readable on white/light surfaces.
 * Yellow is used as the recognition detail rather than
 * as low-contrast body text.
 */

p a,
li a:not(.wp-block-navigation-item__content) {
    color: inherit;
    text-decoration-color: var(--hse-deep-yellow);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

p a:hover,
li a:not(.wp-block-navigation-item__content):hover {
    color: var(--hse-black);
    text-decoration-color: var(--hse-yellow);
    text-decoration-thickness: 2px;
}


/* =========================================================
   05. BUTTONS
   ========================================================= */

/*
 * Global WordPress button foundation.
 * Primary treatment = HSE Yellow + Graphite.
 */

.wp-element-button,
.wp-block-button__link {
    background: var(--hse-yellow);
    color: var(--hse-graphite);
    border: 1px solid transparent;
    border-radius: var(--hse-radius);
    text-decoration: none;

    transition:
        background-color var(--hse-motion-fast) var(--hse-ease),
        background-position var(--hse-motion-standard) var(--hse-ease),
        color var(--hse-motion-fast) var(--hse-ease),
        border-color var(--hse-motion-fast) var(--hse-ease),
        box-shadow var(--hse-motion-fast) var(--hse-ease),
        transform var(--hse-motion-fast) var(--hse-ease);
}

.wp-element-button:hover,
.wp-block-button__link:hover {
    background: var(--hse-bright-yellow);
    color: var(--hse-graphite);
    transform: translateY(-2px);
    box-shadow: var(--hse-shadow-1);
}

.wp-element-button:active,
.wp-block-button__link:active {
    transform: translateY(0);
    box-shadow: none;
}

.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
    outline: 2px solid var(--hse-white);
    outline-offset: 2px;
    box-shadow:
        0 0 0 4px var(--hse-graphite);
}


/*
 * PRIMARY BUTTON
 *
 * Default:
 * HSE Yellow #F1D51B
 *
 * Hover:
 * Bright Yellow #FFEA5C
 */

.hse-button-primary .wp-block-button__link,
.wp-block-button__link.hse-button-primary {
    background: var(--hse-yellow);
    color: var(--hse-graphite);
    border-color: transparent;
}

.hse-button-primary .wp-block-button__link:hover,
.wp-block-button__link.hse-button-primary:hover {
    background: var(--hse-bright-yellow);
    color: var(--hse-graphite);
}


/*
 * PRIMARY GRADIENT BUTTON
 *
 * Optional treatment for selected high-value CTAs.
 * Uses the approved HSE gradient without introducing
 * additional colours.
 */

.hse-button-gradient .wp-block-button__link,
.wp-block-button__link.hse-button-gradient {
    background:
        linear-gradient(
            90deg,
            #F1D51B 0%,
            #FFEA5C 50%,
            #F9EFA6 100%
        );

    background-size: 200% 100%;
    background-position: 0 0;

    color: var(--hse-graphite);
    border-color: transparent;
}

.hse-button-gradient .wp-block-button__link:hover,
.wp-block-button__link.hse-button-gradient:hover {
    background-position: 100% 0;
    color: var(--hse-graphite);
}


/*
 * DARK BUTTON
 *
 * Useful on yellow, pale or light surfaces.
 */

.hse-button-dark .wp-block-button__link,
.wp-block-button__link.hse-button-dark {
    background: var(--hse-graphite);
    color: var(--hse-white);
    border-color: var(--hse-graphite);
}

.hse-button-dark .wp-block-button__link:hover,
.wp-block-button__link.hse-button-dark:hover {
    background: var(--hse-charcoal);
    color: var(--hse-white);
    border-color: var(--hse-charcoal);
}


/*
 * OUTLINE BUTTON — LIGHT BACKGROUND
 *
 * Graphite border/text on white or pale backgrounds.
 */

.hse-button-outline-light .wp-block-button__link,
.wp-block-button__link.hse-button-outline-light {
    background: transparent;
    color: var(--hse-graphite);
    border-color: var(--hse-graphite);
}

.hse-button-outline-light .wp-block-button__link:hover,
.wp-block-button__link.hse-button-outline-light:hover {
    background: var(--hse-graphite);
    color: var(--hse-white);
    border-color: var(--hse-graphite);
}


/*
 * OUTLINE BUTTON — DARK BACKGROUND
 *
 * HSE Yellow is highly visible against dark surfaces.
 */

.hse-button-outline-dark .wp-block-button__link,
.wp-block-button__link.hse-button-outline-dark {
    background: transparent;
    color: var(--hse-yellow);
    border-color: var(--hse-yellow);
}

.hse-button-outline-dark .wp-block-button__link:hover,
.wp-block-button__link.hse-button-outline-dark:hover {
    background: var(--hse-yellow);
    color: var(--hse-graphite);
    border-color: var(--hse-yellow);
}


/* =========================================================
   06. BUTTON GROUPS
   ========================================================= */

.wp-block-buttons {
    gap: 1rem;
}


/* =========================================================
   07. FORM / SEARCH CONTROL FOUNDATION
   ========================================================= */

/*
 * These rules provide a common HSE baseline.
 * Plugin-specific form styling can be added once the
 * final WordPress form solution is selected.
 */

.wp-block-search__input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea {
    border-radius: var(--hse-radius);

    transition:
        border-color var(--hse-motion-fast) var(--hse-ease),
        box-shadow var(--hse-motion-fast) var(--hse-ease),
        background-color var(--hse-motion-fast) var(--hse-ease);
}

.wp-block-search__input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select {
    min-height: 52px;
}

.wp-block-search__input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--hse-graphite);

    box-shadow:
        0 0 0 3px rgba(241, 213, 27, 0.45);
}


/*
 * WordPress Search Button
 */

.wp-block-search__button {
    min-height: 52px;
    border-radius: var(--hse-radius);
    background: var(--hse-yellow);
    color: var(--hse-graphite);
    border: 1px solid transparent;

    transition:
        background-color var(--hse-motion-fast) var(--hse-ease),
        color var(--hse-motion-fast) var(--hse-ease),
        box-shadow var(--hse-motion-fast) var(--hse-ease),
        transform var(--hse-motion-fast) var(--hse-ease);
}

.wp-block-search__button:hover {
    background: var(--hse-bright-yellow);
    color: var(--hse-graphite);
    transform: translateY(-2px);
    box-shadow: var(--hse-shadow-1);
}

.wp-block-search__button:active {
    transform: translateY(0);
    box-shadow: none;
}


/* =========================================================
   08. MEDIA
   ========================================================= */

.wp-block-image img {
    transition:
        transform var(--hse-motion-standard) var(--hse-ease),
        box-shadow var(--hse-motion-standard) var(--hse-ease);
}


/* =========================================================
   09. OPTIONAL CARD INTERACTION HOOK
   ========================================================= */

/*
 * Add the class "hse-card-interactive" only to cards that
 * are actually clickable / interactive.
 *
 * Structural Group blocks should not lift on hover.
 */

.hse-card-interactive {
    transition:
        transform var(--hse-motion-standard) var(--hse-ease),
        box-shadow var(--hse-motion-standard) var(--hse-ease),
        border-color var(--hse-motion-standard) var(--hse-ease);
}

.hse-card-interactive:hover {
    transform: translateY(-4px);
    box-shadow: var(--hse-shadow-2);
}


/* =========================================================
   10. MOTION / REVEALS
   ========================================================= */

/*
 * The hse-js class is added by hse-site.js.
 * This prevents content from being hidden if JavaScript
 * fails or is unavailable.
 */

.hse-js .hse-reveal {
    opacity: 0;
    transform: translateY(16px);

    transition:
        opacity 600ms var(--hse-ease),
        transform 600ms var(--hse-ease);
}

.hse-js .hse-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   11. RESPONSIVE RULES
   ========================================================= */


/* ---------------------------------------------------------
   MOBILE
   360px–479px
   --------------------------------------------------------- */

@media (max-width: 29.9375rem) {

    :root {
        --hse-page-gutter: 1.5rem;
        --hse-section-spacing: 4rem;
    }


    /* Stack CTA groups on narrow phones */

    .wp-block-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .wp-block-buttons > .wp-block-button {
        width: 100%;
    }

    .wp-block-buttons > .wp-block-button .wp-block-button__link {
        width: 100%;
        text-align: center;
    }


    /* Search becomes stacked where necessary */

    .wp-block-search__inside-wrapper {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .wp-block-search__input,
    .wp-block-search__button {
        width: 100%;
        min-height: 52px;
        margin: 0;
    }
}


/* ---------------------------------------------------------
   LARGE MOBILE
   480px–767px
   --------------------------------------------------------- */

@media (min-width: 30rem) {

    :root {
        --hse-page-gutter: 1.5rem;
        --hse-section-spacing: 4rem;
    }
}


/* ---------------------------------------------------------
   TABLET
   768px–1023px
   --------------------------------------------------------- */

@media (min-width: 48rem) {

    :root {
        --hse-page-gutter: 2rem;
        --hse-section-spacing: 5rem;
    }
}


/* ---------------------------------------------------------
   COMPACT DESKTOP
   1024px–1199px
   --------------------------------------------------------- */

@media (min-width: 64rem) {

    :root {
        --hse-page-gutter: 2rem;
        --hse-section-spacing: 5rem;
    }
}


/* ---------------------------------------------------------
   DESKTOP
   1200px–1439px
   --------------------------------------------------------- */

@media (min-width: 75rem) {

    :root {
        --hse-page-gutter: 2.5rem;
        --hse-section-spacing: 6rem;
    }
}


/* ---------------------------------------------------------
   LARGE DESKTOP
   1440px–1919px
   --------------------------------------------------------- */

@media (min-width: 90rem) {

    :root {
        --hse-page-gutter: 3rem;
        --hse-section-spacing: 6rem;
    }
}


/* ---------------------------------------------------------
   EXTRA-LARGE DESKTOP
   1920px–2559px
   --------------------------------------------------------- */

@media (min-width: 120rem) {

    :root {
        --hse-page-gutter: 4rem;
        --hse-section-spacing: 7rem;
    }
}


/* ---------------------------------------------------------
   ULTRA-WIDE
   2560px+
   --------------------------------------------------------- */

@media (min-width: 160rem) {

    :root {
        --hse-page-gutter: 6rem;
        --hse-section-spacing: 8rem;
    }
}


/* =========================================================
   12. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .hse-js .hse-reveal {
        opacity: 1;
        transform: none;
    }
}