/* ==========================================================
   Westphal Solutions - Global Styles
   One file: tokens, typography, branding elements, layout,
   and dark mode. Loaded by functions.php (already enqueued).
   ========================================================== */

/* ==========================================================
   1. Tokens
   Raw palette, then semantic roles. Dark mode overrides only
   the semantic roles. Everything below reads from these.
   ========================================================== */
/* ==========================================================
   0. Fonts - self-hosted Lato (files in /custom-fonts/)
   ========================================================== */
@font-face {
    font-family: 'Lato'; font-style: normal; font-weight: 100; font-display: optional;
    src: url('../fonts/lato-100.woff2') format('woff2');
}
@font-face {
    font-family: 'Lato'; font-style: italic; font-weight: 100; font-display: optional;
    src: url('../fonts/lato-100-italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Lato'; font-style: normal; font-weight: 300; font-display: optional;
    src: url('../fonts/lato-300.woff2') format('woff2');
}
@font-face {
    font-family: 'Lato'; font-style: italic; font-weight: 300; font-display: optional;
    src: url('../fonts/lato-300-italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: optional;
    src: url('../fonts/lato-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Lato'; font-style: italic; font-weight: 400; font-display: optional;
    src: url('../fonts/lato-400-italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: optional;
    src: url('../fonts/lato-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Lato'; font-style: italic; font-weight: 700; font-display: optional;
    src: url('../fonts/lato-700-italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Lato'; font-style: normal; font-weight: 900; font-display: optional;
    src: url('../fonts/lato-900.woff2') format('woff2');
}
@font-face {
    font-family: 'Lato'; font-style: italic; font-weight: 900; font-display: optional;
    src: url('../fonts/lato-900-italic.woff2') format('woff2');
}

:root {
    /* Raw palette */
    --ws-lime:       #C3DD22;
    --ws-slate:      #496D89;
    --ws-black:      #000000;
    --ws-charcoal:   #1C1C1E;
    --ws-charcoal-elevated: #26262A; /* one step lighter than charcoal: dark-mode card/surface lift */
    --ws-dark-grey:  #52585B;
    --ws-grey:       #A2AAAD;
    --ws-light-grey: #E5E5EA;
    --ws-white:      #FFFFFF;

    /* Semantic roles (light mode) */
    --ws-bg:      var(--ws-white);
    --ws-surface: var(--ws-white);
    --ws-text:    var(--ws-black);
    --ws-heading: var(--ws-black);
    --ws-accent:  var(--ws-lime);
    --ws-border:  var(--ws-light-grey);
    --ws-muted:   var(--ws-dark-grey);
    --ws-btn-shadow: rgba(82, 88, 91, 0.12); /* Elementor: Dark Grey #52585B @ 12% */

    /* Radius scale - echoes the circular logo. Small controls, boxes, full pill. */
    --ws-radius-sm:   8px;
    --ws-radius:      12px;
    --ws-radius-pill: 999px;

    /* One easing curve for the whole site, so every motion feels related. */
    --ws-ease: cubic-bezier(0.4, 0, 0.2, 1);

    /* Feedback */
    --ws-error: #C0392B; /* form validation, readable on white */

    /* Type */
    --ws-font: 'Lato', Arial, sans-serif;
    --ws-fs-h1: 3.5rem;
    --ws-fs-h2: 3rem;
    --ws-fs-h3: 2.5rem;
    --ws-fs-h4: 2rem;
    --ws-fs-h5: 1.75rem;
    --ws-fs-h6: 1.25rem;
    --ws-fs-body: 1rem;
    --ws-lh-head: 1.2;
    --ws-lh-body: 1.5;
}

/* Dark mode: flip the semantic roles only. Lime stays lime. */
[data-theme="dark"] {
    --ws-bg:      var(--ws-charcoal);
    --ws-surface: var(--ws-charcoal-elevated);
    --ws-text:    var(--ws-light-grey);
    --ws-heading: var(--ws-white);
    --ws-border:  var(--ws-dark-grey);
    --ws-muted:   var(--ws-grey);
    --ws-error:   #FF6B6B; /* lighter red for contrast on charcoal */
}

/* ==========================================================
   2. Base typography
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: var(--ws-font);
    font-size: var(--ws-fs-body);
    font-weight: 400;
    line-height: var(--ws-lh-body);
    color: var(--ws-text);
    background: var(--ws-bg);
    /* Match the Elementor site's rendering: grayscale, not the heavier
       subpixel antialiasing the browser uses by default on macOS. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ws-font);
    line-height: var(--ws-lh-head);
    color: var(--ws-heading);
    margin: 0 0 0.5em;
}

h1 { font-size: var(--ws-fs-h1); font-weight: 900; }
h2 { font-size: var(--ws-fs-h2); font-weight: 900; }
h3 { font-size: var(--ws-fs-h3); font-weight: 900; }
h4 { font-size: var(--ws-fs-h4); font-weight: 700; }
h5 { font-size: var(--ws-fs-h5); font-weight: 700; }
h6 { font-size: var(--ws-fs-h6); font-weight: 700; }

/* Heading variants for the Elements page.
   Default = the level's natural weight (no class needed).
   Accent  = italic. Bold = heaviest (Lato Black). */
.ws-accent { font-style: italic; }
.ws-bold   { font-weight: 900; }

/* Section label: uppercase 900 eyebrow with an accent rule beneath.
   Use as a class on its own or on an <h6>, e.g. <h6 class="ws-section-label">.
   The box shrinks to its text (width: fit-content) so the rule matches the
   text length, and it fills in left-to-right when scrolled into view. */
.ws-section-label {
    display: block;
    width: fit-content;
    font-family: var(--ws-font);
    font-weight: 900;
    font-size: 0.95rem;
    letter-spacing: 1px;
    line-height: var(--ws-lh-head);
    text-transform: uppercase;
    color: var(--ws-heading);
    margin: 56px 0 24px;
}
.ws-section-label::after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    margin-top: 14px;
    background: var(--ws-accent);
    transform: scaleX(1);
    transform-origin: left center;
    transition: transform 0.5s var(--ws-ease);
}
/* With JS, start collapsed and reveal on scroll. Without JS, the line just shows. */
.js .ws-section-label::after { transform: scaleX(0); }
.js .ws-section-label.is-revealed::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
    .ws-section-label::after,
    .js .ws-section-label::after { transition: none; transform: scaleX(1); }
}

/* Body size utilities */
.ws-text-lg { font-size: 1.25rem; }
.ws-text-sm { font-size: 0.8rem; }

/* Optional fluid headings. Uncomment to scale down on small
   screens without separate mobile sizes. Max = desktop size. */
/*
h1 { font-size: clamp(2.5rem, 6vw, 3.5rem); }
h2 { font-size: clamp(2.25rem, 5.2vw, 3rem); }
h3 { font-size: clamp(1.9rem, 4.4vw, 2.5rem); }
h4 { font-size: clamp(1.6rem, 3.4vw, 2rem); }
h5 { font-size: clamp(1.4rem, 2.8vw, 1.75rem); }
h6 { font-size: clamp(1.15rem, 2.2vw, 1.25rem); }
*/

/* ==========================================================
   3. Links - green bar grows up on hover. Site-wide, footer
   included. Excludes buttons and image links.
   ========================================================== */
a:not([class*="button"]):not(.ws-skip-link):not(:has(img)) {
    color: var(--ws-text);
    text-decoration: none;
    font-weight: 500;
    background: linear-gradient(to bottom, var(--ws-accent) 0%, var(--ws-accent) 100%);
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 4px 4px;
    transition: background-size 0.2s ease-in-out, color 0.2s ease-in-out;
}

a:not([class*="button"]):not(.ws-skip-link):not(:has(img)):hover {
    background-size: 4px 50px;
    color: var(--ws-black); /* lime fill is the same in both themes, so black keeps ~14:1 contrast */
}

/* Touch devices have no hover, so drop the animated bar (it sits on the
   descenders) for a clean, thin underline offset below the text. */
@media (hover: none) {
    a:not([class*="button"]):not(.ws-skip-link):not(:has(img)),
    a:not([class*="button"]):not(.ws-skip-link):not(:has(img)):hover {
        background: none;
        color: var(--ws-text);
        text-decoration: underline;
        text-decoration-color: var(--ws-accent);
        text-decoration-thickness: 2px;
        text-underline-offset: 3px;
    }
}

/* ==========================================================
   4. Lists and divider
   ========================================================== */
ul, ol {
    line-height: var(--ws-lh-body);
    padding-left: 2.5em;
    padding-bottom: 1.5em;
    margin: 1.5em 0;
}

hr {
    border: none;
    border-top: 1px solid var(--ws-border);
    margin: 2em 0;
}

/* ==========================================================
   5. Blockquotes
   ========================================================== */
blockquote {
    font-size: 1.4em;
    width: 90%;
    margin: 50px auto;
    font-style: italic;
    padding: 1.2em 30px 1.2em 75px;
    border-left: 8px solid var(--ws-accent);
    line-height: 1.6;
    position: relative;
}
blockquote::before {
    font-family: "Lato", serif;
    content: "\201C";
    color: var(--ws-accent);
    font-size: 4em;
    position: absolute;
    left: 10px;
    top: -10px;
}
blockquote span {
    display: block;
    color: var(--ws-muted);
    font-style: normal;
    font-weight: bold;
    margin-top: 1em;
}

/* ==========================================================
   6. Code blocks (intentionally dark in both themes)
   ========================================================== */
pre {
    background: var(--ws-charcoal);
    color: var(--ws-light-grey);
    padding: 24px;
    border-radius: var(--ws-radius);
    border-left: 4px solid var(--ws-accent);
    overflow-x: auto;
    font-family: monospace;
    font-size: 14px;
    line-height: 1.6;
    margin: 1.5em 0;
    box-shadow: 0 6px 24px rgba(82, 88, 91, 0.12);
    white-space: pre;
}
pre code {
    background: none;
    padding: 0;
    color: inherit;
    font-family: inherit;
}
pre * {
    all: unset;
    font-family: monospace;
}

/* ==========================================================
   7. Buttons - white box, lime border, black caps. Fills lime
   on hover. Stays a white box in dark mode so it reads clearly.
   ========================================================== */
.ws-button {
    display: inline-block;
    font-family: var(--ws-font);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 4.2px;
    line-height: 18px;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    color: var(--ws-black);
    background-color: var(--ws-white);
    border: 1px solid var(--ws-accent);
    border-radius: var(--ws-radius);
    padding: 16px 24px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease,
                border-color 0.3s ease, box-shadow 0.3s ease;
}
.ws-button:hover,
.ws-button:focus {
    background-color: var(--ws-accent);
    border-color: var(--ws-accent);
    color: var(--ws-black);
    outline: none;
}

/* Variants (placed after the base so equal-specificity hovers win) */
.ws-button--solid {
    background-color: var(--ws-accent);
    color: var(--ws-black);
}
.ws-button--solid:hover,
.ws-button--solid:focus {
    background-color: var(--ws-white);
    color: var(--ws-black);
}
.ws-button--secondary {
    background-color: transparent;
    border-color: var(--ws-border);
    color: var(--ws-text);
}
.ws-button--secondary:hover,
.ws-button--secondary:focus {
    background-color: transparent;
    border-color: var(--ws-accent);
    color: var(--ws-text);
}
.ws-button--ghost {
    position: relative;
    background-color: transparent;
    border-color: transparent;
    color: var(--ws-text);
}
.ws-button--ghost::after {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 12px;
    height: 2px;
    background: var(--ws-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.28s var(--ws-ease);
}
.ws-button--ghost:hover,
.ws-button--ghost:focus {
    background-color: transparent;
    border-color: transparent;
    color: var(--ws-text);
}
.ws-button--ghost:hover::after,
.ws-button--ghost:focus::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
    .ws-button--ghost::after { transition: none; }
}
.ws-button--sm {
    padding: 10px 18px;
    font-size: 12px;
    letter-spacing: 3px;
}
.ws-button:disabled,
.ws-button.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Lay out a set of buttons with consistent spacing. */
.ws-button-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin: 1.5em 0;
}

/* Home buttons: drop shadow + staggered fade-in (1, 2, 3).
   Shadow geometry translated from Elementor. */
.ws-home-buttons .ws-button {
    box-shadow: 15px 18px 24px -5px var(--ws-btn-shadow);
    opacity: 0;
    animation: wsFadeIn 0.7s var(--ws-ease) forwards;
}
.ws-home-buttons .ws-button:hover,
.ws-home-buttons .ws-button:focus {
    box-shadow: 0 0 4px 0 var(--ws-btn-shadow);
}
.ws-home-buttons .ws-button:nth-child(1) { animation-delay: 0.08s; }
.ws-home-buttons .ws-button:nth-child(2) { animation-delay: 0.18s; }
.ws-home-buttons .ws-button:nth-child(3) { animation-delay: 0.28s; }

@keyframes wsFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .ws-home-buttons .ws-button { opacity: 1; animation: none; }
}

/* ==========================================================
   8. Layout: site wrapper, header, home hero, pages, footer
   ========================================================== */
.ws-site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
}
.ws-home,
.ws-page { flex: 1 0 auto; }

/* Logo: show the right version per theme */
.ws-logo { display: block; height: auto; max-width: 100%; }
.ws-logo--dark { display: none; }
[data-theme="dark"] .ws-logo--light { display: none; }
[data-theme="dark"] .ws-logo--dark  { display: block; }

/* Header */
.ws-site-header { padding: 20px 0; }
.ws-site-header__inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ws-site-header__logo { display: inline-flex; }
.ws-site-header__logo .ws-logo { height: 48px; }

/* Theme switch - segmented Light | Dark pill with a sliding thumb */
.ws-theme-switch {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    flex: 0 0 auto;
    background: var(--ws-surface);
    border: 1px solid var(--ws-border);
    border-radius: var(--ws-radius-pill);
    padding: 3px;
}
.ws-theme-switch__thumb {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(50% - 3px);
    border-radius: var(--ws-radius-pill);
    background: var(--ws-accent);
    transition: transform 0.28s var(--ws-ease);
    pointer-events: none;
}
.ws-theme-switch[data-active="dark"] .ws-theme-switch__thumb { transform: translateX(100%); }
.ws-theme-switch__option {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1 0 auto;
    min-width: 78px;
    margin: 0;
    padding: 7px 16px;
    background: transparent;
    border: 0;
    border-radius: var(--ws-radius-pill);
    cursor: pointer;
    font-family: var(--ws-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ws-muted);
    transition: color 0.28s ease;
}
.ws-theme-switch__option:focus-visible {
    outline: 2px solid var(--ws-accent);
    outline-offset: 2px;
}
.ws-theme-switch__option[aria-pressed="true"] { color: var(--ws-black); }
.ws-theme-switch__option .ws-icon { width: 15px; height: 15px; }

@media (prefers-reduced-motion: reduce) {
    .ws-theme-switch__thumb,
    .ws-theme-switch__option { transition: none; }
}

/* Home hero */
.ws-home {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}
.ws-home__inner { width: 100%; max-width: 900px; text-align: center; }
.ws-home__logo { display: inline-block; margin-bottom: 48px; }
.ws-home__logo .ws-logo { width: clamp(260px, 40vw, 420px); margin: 0 auto; }
.ws-home-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
}

/* Standard pages (Privacy, Terms, Contact) */
.ws-page { padding: 48px 24px 80px; }
.ws-page__inner { max-width: 800px; margin: 0 auto; }
.ws-page__title { text-align: center; margin: 0 0 1.2em; }
.ws-contact__form { margin-top: 32px; }

/* Footer */
.ws-site-footer {
    padding: 28px 0;
    margin-top: 60px;
}
/* Centered ~50% divider at the top of the footer (replaces the full-width border). */
.ws-site-footer::before {
    content: "";
    display: block;
    width: 50%;
    max-width: 760px;
    height: 1px;
    margin: 0 auto 28px;
    background: var(--ws-border);
}
/* Home is a single-screen launchpad: no gap above the footer. */
body.home .ws-site-footer { margin-top: 0; }
.ws-site-footer__inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.ws-site-footer__legal { font-size: 0.875rem; margin: 0; text-align: left; }
.ws-site-footer__sep { margin: 0 6px; color: var(--ws-grey); }

/* Screen-reader-only text (visually hidden, still announced). */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    position: absolute !important;
    word-wrap: normal !important;
}

/* Skip link */
.ws-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    padding: 10px 16px;
    background: var(--ws-accent);
    color: var(--ws-black);
    font-weight: 700;
    text-decoration: none;
}
.ws-skip-link:focus { left: 8px; top: 8px; }

/* ==========================================================
   9. Contact form (self-hosted, no third-party service)
   Markup comes from the WS Contact Form plugin; styled here
   because it reads the brand tokens. Submit reuses .ws-button.
   ========================================================== */
.ws-form { max-width: 640px; }
.ws-form__row { margin-bottom: 24px; }

.ws-form__label {
    display: block;
    margin-bottom: 8px;
    font-family: var(--ws-font);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ws-heading);
}
.ws-form__req { color: var(--ws-accent); margin-left: 2px; }

.ws-form__control {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-family: var(--ws-font);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ws-text);
    background-color: var(--ws-surface);
    border: 1px solid var(--ws-border);
    border-radius: var(--ws-radius-sm);
    padding: 12px 16px;
    transition: border-color 0.2s var(--ws-ease), box-shadow 0.2s var(--ws-ease);
}
.ws-form__control:focus {
    outline: none;
    border-color: var(--ws-accent);
    box-shadow: 0 0 0 3px rgba(195, 221, 34, 0.25); /* --ws-lime at 25% */
}
.ws-form__control::placeholder { color: var(--ws-muted); }
textarea.ws-form__control { resize: vertical; min-height: 140px; }

/* Validation error state */
.ws-form__row.has-error .ws-form__control { border-color: var(--ws-error); }
.ws-form__row.has-error .ws-form__control:focus {
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.2);
}
.ws-form__error {
    display: block;
    margin-top: 6px;
    font-size: 0.85rem;
    color: var(--ws-error);
}

/* Top-of-form notices */
.ws-form__notice {
    padding: 16px 20px;
    margin-bottom: 28px;
    border-radius: var(--ws-radius-sm);
    background-color: var(--ws-surface);
    color: var(--ws-heading);
}
.ws-form__notice--success { border: 1px solid var(--ws-accent); border-left: 4px solid var(--ws-accent); }
.ws-form__notice--error   { border: 1px solid var(--ws-error);  border-left: 4px solid var(--ws-error); }

.ws-form__actions { margin-top: 8px; }

/* Honeypot: hidden from people (the plugin also inlines this as a fallback) */
.ws-form__hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ==========================================================
   10. Brand palette cards (elements page)
   ========================================================== */
.ws-color-palette {
    display: grid;
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    gap: 20px;
    max-width: 900px;
    margin: 20px auto;
}
.ws-color-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px;
    background: var(--ws-surface);
    border: 1px solid var(--ws-border);
    border-radius: var(--ws-radius);
    box-shadow: 0 6px 24px rgba(82, 88, 91, 0.12);
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
    box-sizing: border-box;
}
.ws-color-card:hover,
.ws-color-card:focus-within {
    box-shadow: 0 8px 32px rgba(82, 88, 91, 0.16);
    transform: translateY(-2px);
}
.ws-swatch {
    width: 72px;
    height: 72px;
    min-width: 72px;
    border-radius: var(--ws-radius-sm);
    border: 1px solid var(--ws-border);
    box-sizing: border-box;
}
.ws-color-content { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ws-color-label {
    font-family: var(--ws-font);
    font-size: 1.25rem;
    line-height: 1.2;
    font-weight: 700;
    color: var(--ws-heading);
    margin: 0;
}
.ws-color-row { display: flex; align-items: center; }
.ws-color-hex { margin: 0; text-transform: uppercase; color: var(--ws-muted); }

@media (max-width: 767px) {
    .ws-color-palette { grid-template-columns: 1fr; gap: 16px; }
    .ws-color-card { padding: 20px; gap: 16px; }
    .ws-swatch { width: 60px; height: 60px; min-width: 60px; }
}

/* ==========================================================
   11. Responsive + misc
   ========================================================== */
@media (max-width: 600px) {
    .ws-home-buttons {
        flex-direction: column;
        align-items: stretch;
        width: fit-content;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .ws-site-header__logo .ws-logo { height: 36px; }

    /* Footer stacks: pill first, then copyright, then links. */
    .ws-site-footer__inner { flex-direction: column; gap: 16px; }
    .ws-theme-switch { order: 1; }
    .ws-site-footer__legal { order: 2; text-align: center; }
    .ws-site-footer__links { display: block; margin-top: 8px; }
}

input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}