/**
 * SayWOW. Utility CSS — Foundation
 * ================================
 * Implementation of 00-SPEC-BRAND-DESIGN-SYSTEM.md v2.0
 * Enqueue in GeneratePress: Appearance → Customise → Additional CSS
 * or via child theme / GP Hooks as <link> stylesheet.
 *
 * Usage: Add class names to any element in GP Elements, blocks, or templates.
 * Example: <a href="#" class="sw-btn sw-btn-primary sw-btn-lg">Enter Now</a>
 *
 * Version: 1.0 · February 2026
 * Company: Say Wow Ltd (No. 16220850)
 */


/* ================================================================
   1. CSS CUSTOM PROPERTIES
   Spec reference: Section 8
   ================================================================ */

:root {
    /* Font */
    --sw-font: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Primary */
    --sw-blue: #0052CC;
    --sw-blue-dark: #003D99;
    --sw-blue-darkest: #002D73;
    --sw-red: #E63946;
    --sw-red-hover: #CF2F3C;
    --sw-red-active: #B82633;
    --sw-gold: #FFD700;
    --sw-gold-dark: #F0C800;
    --sw-green: #28A745;
    --sw-green-hover: #218838;
    --sw-green-active: #1E7E34;

    /* Neutrals */
    --sw-grey-900: #212529;
    --sw-grey-500: #6B7280;
    --sw-grey-300: #9CA3AF;
    --sw-grey-200: #E5E7EB;
    --sw-grey-100: #F8F9FA;
    --sw-white: #FFFFFF;

    /* Semantic */
    --sw-success-bg: #D4EDDA;
    --sw-success-text: #155724;
    --sw-error-bg: #FEE2E5;
    --sw-error-text: #E63946;
    --sw-info-bg: #E8F0FE;
    --sw-info-text: #0052CC;
    --sw-warning-bg: #FFF3CD;
    --sw-warning-text: #856404;

    /* Font Weights */
    --sw-fw-regular: 400;
    --sw-fw-medium: 500;
    --sw-fw-semibold: 600;
    --sw-fw-bold: 700;
    --sw-fw-extrabold: 800;

    /* Border Radius */
    --sw-radius-sm: 6px;
    --sw-radius-md: 10px;
    --sw-radius-lg: 12px;
    --sw-radius-xl: 16px;

    /* Transitions */
    --sw-transition: all 0.2s ease;
}


/* ================================================================
   2. TYPOGRAPHY
   Spec reference: Section 2.2
   Usage: <h1 class="sw-display"> or <p class="sw-body-sm">
   ================================================================ */

.sw-display {
    font-family: var(--sw-font);
    font-size: 3rem;          /* 48px */
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.1;
    color: var(--sw-grey-900);
}

.sw-h1 {
    font-family: var(--sw-font);
    font-size: 2rem;          /* 32px */
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.2;
    color: var(--sw-grey-900);
}

.sw-h2 {
    font-family: var(--sw-font);
    font-size: 1.5rem;        /* 24px */
    font-weight: 700;
    letter-spacing: -0.3px;
    line-height: 1.3;
    color: var(--sw-grey-900);
}

.sw-h3 {
    font-family: var(--sw-font);
    font-size: 1.125rem;      /* 18px */
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.4;
    color: var(--sw-grey-900);
}

.sw-h4 {
    font-family: var(--sw-font);
    font-size: 1rem;          /* 16px */
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.4;
    color: var(--sw-grey-900);
}

.sw-body {
    font-family: var(--sw-font);
    font-size: 1rem;          /* 16px */
    font-weight: 400;
    line-height: 1.6;
    color: var(--sw-grey-900);
}

.sw-body-medium {
    font-family: var(--sw-font);
    font-size: 1rem;          /* 16px */
    font-weight: 500;
    line-height: 1.5;
    color: var(--sw-grey-900);
}

.sw-body-sm {
    font-family: var(--sw-font);
    font-size: 0.875rem;      /* 14px */
    font-weight: 400;
    line-height: 1.5;
    color: #555;
}

.sw-caption {
    font-family: var(--sw-font);
    font-size: 0.75rem;       /* 12px */
    font-weight: 500;
    line-height: 1.4;
    color: #888;
}

.sw-price {
    font-family: var(--sw-font);
    font-size: 1.25rem;       /* 20px */
    font-weight: 800;
    line-height: 1.2;
    color: var(--sw-red);
}

.sw-price-lg {
    font-family: var(--sw-font);
    font-size: 1.75rem;       /* 28px */
    font-weight: 800;
    line-height: 1.2;
    color: var(--sw-red);
}

.sw-price-sm {
    font-family: var(--sw-font);
    font-size: 1rem;          /* 16px */
    font-weight: 800;
    line-height: 1.2;
    color: var(--sw-red);
}


/* ================================================================
   3. BUTTON SYSTEM — BASE
   Spec reference: Sections 4.1, 4.2, 4.3
   Usage: <a class="sw-btn sw-btn-primary sw-btn-lg">Enter Now</a>
   Always combine: sw-btn + variant + size
   ================================================================ */

.sw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--sw-font);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: var(--sw-transition);
    white-space: nowrap;
    text-align: center;
    -webkit-appearance: none;
    appearance: none;
}

.sw-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.3);
}

.sw-btn:active {
    transform: translateY(0);
    box-shadow: none;
}


/* ── Button sizes ── */

.sw-btn-lg {
    height: 52px;
    padding: 0 32px;
    min-width: 180px;
    font-size: 1rem;          /* 16px */
    font-weight: 700;
    border-radius: var(--sw-radius-lg);
}

.sw-btn-md {
    height: 44px;
    padding: 0 24px;
    min-width: 140px;
    font-size: 0.875rem;      /* 14px */
    font-weight: 700;
    border-radius: var(--sw-radius-md);
}

.sw-btn-sm {
    height: 36px;
    padding: 0 16px;
    min-width: 100px;
    font-size: 0.8rem;        /* 12.8px */
    font-weight: 600;
    border-radius: var(--sw-radius-sm);
}

.sw-btn-xs {
    height: 28px;
    padding: 0 12px;
    min-width: 70px;
    font-size: 0.75rem;       /* 12px */
    font-weight: 600;
    border-radius: 6px;
}

.sw-btn-full {
    width: 100%;
}


/* ── Button variants ── */

/* Primary — Action Red */
.sw-btn-primary {
    background: var(--sw-red);
    color: var(--sw-white);
}
.sw-btn-primary:hover {
    background: var(--sw-red-hover);
    color: var(--sw-white);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(230, 57, 70, 0.35);
}
.sw-btn-primary:active {
    background: var(--sw-red-active);
    color: var(--sw-white);
}

/* Secondary — SayWOW Blue */
.sw-btn-secondary {
    background: var(--sw-blue);
    color: var(--sw-white);
}
.sw-btn-secondary:hover {
    background: var(--sw-blue-dark);
    color: var(--sw-white);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 82, 204, 0.35);
}
.sw-btn-secondary:active {
    background: var(--sw-blue-darkest);
    color: var(--sw-white);
}

/* Outline — Blue border */
.sw-btn-outline {
    background: transparent;
    color: var(--sw-blue);
    border: 2px solid var(--sw-blue);
}
.sw-btn-outline:hover {
    background: var(--sw-blue);
    color: var(--sw-white);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 82, 204, 0.35);
}
.sw-btn-outline:active {
    background: var(--sw-blue-dark);
    color: var(--sw-white);
}

/* Ghost — Transparent with blue text */
.sw-btn-ghost {
    background: transparent;
    color: var(--sw-blue);
}
.sw-btn-ghost:hover {
    background: rgba(0, 82, 204, 0.08);
    color: var(--sw-blue);
}
.sw-btn-ghost:active {
    background: rgba(0, 82, 204, 0.15);
    color: var(--sw-blue);
}

/* Success — Green */
.sw-btn-success {
    background: var(--sw-green);
    color: var(--sw-white);
}
.sw-btn-success:hover {
    background: var(--sw-green-hover);
    color: var(--sw-white);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.35);
}
.sw-btn-success:active {
    background: var(--sw-green-active);
    color: var(--sw-white);
}

/* Gold — Gradient, dark text */
.sw-btn-gold {
    background: linear-gradient(135deg, var(--sw-gold), var(--sw-gold-dark));
    color: var(--sw-grey-900);
}
.sw-btn-gold:hover {
    background: linear-gradient(135deg, #FFE033, var(--sw-gold));
    color: var(--sw-grey-900);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.35);
}
.sw-btn-gold:active {
    background: #E6C200;
    color: var(--sw-grey-900);
}

/* White Outline — For use on dark/blue backgrounds */
.sw-btn-white-outline {
    background: transparent;
    color: var(--sw-white);
    border: 2px solid var(--sw-white);
}
.sw-btn-white-outline:hover {
    background: var(--sw-white);
    color: var(--sw-blue);
    transform: translateY(-1px);
}
.sw-btn-white-outline:active {
    background: var(--sw-white);
    color: var(--sw-blue-dark);
}

/* Disabled — Greyed out, no interaction */
.sw-btn-disabled,
.sw-btn[disabled],
.sw-btn.disabled {
    background: var(--sw-grey-200);
    color: var(--sw-grey-300);
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
    transform: none;
}


/* ================================================================
   4. COLOUR UTILITIES
   Usage: <span class="sw-text-blue"> or <div class="sw-bg-blue">
   ================================================================ */

/* Text colours */
.sw-text-blue      { color: var(--sw-blue); }
.sw-text-red       { color: var(--sw-red); }
.sw-text-gold      { color: var(--sw-gold); }
.sw-text-green     { color: var(--sw-green); }
.sw-text-dark      { color: var(--sw-grey-900); }
.sw-text-secondary { color: var(--sw-grey-500); }
.sw-text-muted     { color: var(--sw-grey-300); }
.sw-text-white     { color: var(--sw-white); }

/* Background colours */
.sw-bg-blue        { background-color: var(--sw-blue); }
.sw-bg-blue-dark   { background-color: var(--sw-blue-dark); }
.sw-bg-red         { background-color: var(--sw-red); }
.sw-bg-gold        { background-color: var(--sw-gold); }
.sw-bg-green       { background-color: var(--sw-green); }
.sw-bg-dark        { background-color: var(--sw-grey-900); }
.sw-bg-light       { background-color: var(--sw-grey-100); }
.sw-bg-white       { background-color: var(--sw-white); }


/* ================================================================
   5. LAYOUT
   Usage: <div class="sw-container"> or <div class="sw-card">
   ================================================================ */

.sw-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.sw-container-narrow {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.sw-card {
    background: var(--sw-white);
    border-radius: var(--sw-radius-lg);
    border: 1px solid var(--sw-grey-200);
    overflow: hidden;
}

.sw-card-padded {
    background: var(--sw-white);
    border-radius: var(--sw-radius-lg);
    border: 1px solid var(--sw-grey-200);
    padding: 24px;
    overflow: hidden;
}

.sw-card-body {
    padding: 16px 20px;
}

.sw-card-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--sw-grey-200);
}

.sw-divider {
    border: none;
    border-top: 1px solid var(--sw-grey-200);
    margin: 16px 0;
}


/* ================================================================
   6. STATUS BADGES
   Spec reference: Section 7 — UI Quick Reference
   Usage: <span class="sw-badge sw-badge-live">Live</span>
   ================================================================ */

.sw-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sw-font);
    font-size: 0.75rem;       /* 12px */
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    line-height: 1;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.sw-badge-live {
    background: var(--sw-green);
    color: var(--sw-white);
}

.sw-badge-closing {
    background: var(--sw-red);
    color: var(--sw-white);
}

.sw-badge-coming-soon {
    background: var(--sw-blue);
    color: var(--sw-white);
}

.sw-badge-sold-out {
    background: var(--sw-grey-200);
    color: var(--sw-grey-500);
}

.sw-badge-winner {
    background: var(--sw-gold);
    color: var(--sw-grey-900);
}

/* Pill variant — rounded ends */
.sw-badge-pill {
    border-radius: 100px;
}


/* ================================================================
   7. SEMANTIC ALERTS
   Spec reference: Section 1.3
   Usage: <div class="sw-alert sw-alert-success">Saved!</div>
   ================================================================ */

.sw-alert {
    font-family: var(--sw-font);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 12px 16px;
    border-radius: var(--sw-radius-sm);
    line-height: 1.5;
}

.sw-alert-success {
    background: var(--sw-success-bg);
    color: var(--sw-success-text);
}

.sw-alert-error {
    background: var(--sw-error-bg);
    color: var(--sw-error-text);
}

.sw-alert-info {
    background: var(--sw-info-bg);
    color: var(--sw-info-text);
}

.sw-alert-warning {
    background: var(--sw-warning-bg);
    color: var(--sw-warning-text);
}


/* ================================================================
   8. DYNAMIC CONTENT BARS
   Spec reference: Section 6
   Usage: <div class="sw-bar sw-bar-winner-dark">🎉 Sarah won!</div>
   ================================================================ */

.sw-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: var(--sw-font);
    font-size: 0.85rem;
    font-weight: 600;
    min-height: 40px;
    padding: 10px 20px;
    position: relative;
    z-index: 1001;
    animation: sw-bar-slide-in 0.3s ease;
}

@keyframes sw-bar-slide-in {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.sw-bar-close {
    position: absolute;
    right: 14px;
    background: none;
    border: none;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    font-size: 1rem;
    padding: 4px;
    line-height: 1;
}
.sw-bar-close:hover { opacity: 1; }

.sw-bar-cta {
    display: inline-flex;
    align-items: center;
    font-family: var(--sw-font);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 4px;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--sw-transition);
}

/* Bar variants */
.sw-bar-winner-dark {
    background: var(--sw-grey-900);
    color: var(--sw-gold);
}
.sw-bar-winner-dark .sw-bar-cta {
    background: var(--sw-gold);
    color: var(--sw-grey-900);
}

.sw-bar-winner-gold {
    background: linear-gradient(135deg, var(--sw-gold), var(--sw-gold-dark));
    color: var(--sw-grey-900);
}
.sw-bar-winner-gold .sw-bar-cta {
    background: var(--sw-grey-900);
    color: var(--sw-gold);
}

.sw-bar-urgency-red {
    background: var(--sw-red);
    color: var(--sw-white);
}
.sw-bar-urgency-red .sw-bar-cta {
    background: var(--sw-white);
    color: var(--sw-red);
}

.sw-bar-urgency-dark {
    background: var(--sw-red-active);
    color: var(--sw-white);
}
.sw-bar-urgency-dark .sw-bar-cta {
    background: var(--sw-white);
    color: var(--sw-red-active);
}

.sw-bar-promo-blue {
    background: var(--sw-blue-dark);
    color: var(--sw-white);
}
.sw-bar-promo-blue .sw-bar-cta {
    background: var(--sw-white);
    color: var(--sw-blue-dark);
}

.sw-bar-promo-light {
    background: var(--sw-info-bg);
    color: var(--sw-blue);
}
.sw-bar-promo-light .sw-bar-cta {
    background: var(--sw-blue);
    color: var(--sw-white);
}

.sw-bar-info {
    background: var(--sw-grey-100);
    color: var(--sw-grey-900);
}
.sw-bar-info .sw-bar-cta {
    background: var(--sw-blue);
    color: var(--sw-white);
}

.sw-bar-success {
    background: var(--sw-success-bg);
    color: var(--sw-success-text);
}
.sw-bar-success .sw-bar-cta {
    background: var(--sw-green);
    color: var(--sw-white);
}

/* Countdown text — tabular figures */
.sw-countdown {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Mobile bar adjustments */
@media (max-width: 768px) {
    .sw-bar {
        min-height: 36px;
        padding: 8px 14px;
        font-size: 0.75rem;
    }
    .sw-bar-cta {
        font-size: 0.65rem;
        padding: 3px 10px;
    }
}


/* ================================================================
   9. FORM ELEMENTS
   Spec reference: Section 7 — Form Focus
   Usage: <input class="sw-input"> or <select class="sw-select">
   ================================================================ */

.sw-input,
.sw-select,
.sw-textarea {
    font-family: var(--sw-font);
    font-size: 1rem;
    font-weight: 400;
    color: var(--sw-grey-900);
    background: var(--sw-white);
    border: 1px solid var(--sw-grey-200);
    border-radius: var(--sw-radius-sm);
    padding: 10px 14px;
    width: 100%;
    transition: var(--sw-transition);
    -webkit-appearance: none;
    appearance: none;
}

.sw-input:focus,
.sw-select:focus,
.sw-textarea:focus {
    outline: none;
    border-color: var(--sw-blue);
    box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.15);
}

.sw-input::placeholder,
.sw-textarea::placeholder {
    color: var(--sw-grey-300);
}

.sw-input-error {
    border-color: var(--sw-red);
}
.sw-input-error:focus {
    box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.15);
}

.sw-label {
    display: block;
    font-family: var(--sw-font);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sw-grey-900);
    margin-bottom: 6px;
}

.sw-help-text {
    font-family: var(--sw-font);
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--sw-grey-500);
    margin-top: 4px;
}

.sw-error-text {
    font-family: var(--sw-font);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--sw-red);
    margin-top: 4px;
}


/* ================================================================
   10. LINKS
   Spec reference: Section 7 — Links
   Usage: <a href="#" class="sw-link">View details</a>
   ================================================================ */

.sw-link {
    color: var(--sw-blue);
    text-decoration: none;
    transition: var(--sw-transition);
}
.sw-link:hover {
    color: var(--sw-blue-dark);
    text-decoration: underline;
}

/* On dark backgrounds */
.sw-link-light {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: var(--sw-transition);
}
.sw-link-light:hover {
    color: var(--sw-white);
    text-decoration: underline;
}


/* ================================================================
   11. LOGO (SVG-based — Figma path exports)
   Spec reference: Section 3
   Header: inline SVG in saywow-gp-header-element.php
   Footer: <img> referencing saywow-logo-white-1.svg
   ================================================================ */

/* Footer logo image */

.sw-footer-logo-img {
    height: 36px;
    width: auto;
    display: block;

}

/* Legacy text classes — deprecated, kept for backward compat */
.sw-logo {
    font-family: var(--sw-font);
    font-weight: 800;
    letter-spacing: -2px;
    line-height: 1;
    color: var(--sw-white);
}

.sw-logo-blue {
    color: var(--sw-blue);
}

.sw-logo-dot {
    color: var(--sw-gold);
}


/* ================================================================
   12. WEIGHT & SPACING UTILITIES
   Quick helpers — use sparingly, prefer semantic classes above
   ================================================================ */

/* Font weights */
.sw-fw-400 { font-weight: 400; }
.sw-fw-500 { font-weight: 500; }
.sw-fw-600 { font-weight: 600; }
.sw-fw-700 { font-weight: 700; }
.sw-fw-800 { font-weight: 800; }

/* Text alignment */
.sw-text-left   { text-align: left; }
.sw-text-center { text-align: center; }
.sw-text-right  { text-align: right; }

/* Flex helpers */
.sw-flex        { display: flex; }
.sw-flex-col    { display: flex; flex-direction: column; }
.sw-flex-center { display: flex; align-items: center; justify-content: center; }
.sw-flex-between { display: flex; align-items: center; justify-content: space-between; }
.sw-gap-sm      { gap: 8px; }
.sw-gap-md      { gap: 16px; }
.sw-gap-lg      { gap: 24px; }

/* Spacing — vertical rhythm */
.sw-mt-0  { margin-top: 0; }
.sw-mt-sm { margin-top: 8px; }
.sw-mt-md { margin-top: 16px; }
.sw-mt-lg { margin-top: 24px; }
.sw-mt-xl { margin-top: 40px; }
.sw-mb-0  { margin-bottom: 0; }
.sw-mb-sm { margin-bottom: 8px; }
.sw-mb-md { margin-bottom: 16px; }
.sw-mb-lg { margin-bottom: 24px; }
.sw-mb-xl { margin-bottom: 40px; }

/* Padding */
.sw-p-0   { padding: 0; }
.sw-p-sm  { padding: 8px; }
.sw-p-md  { padding: 16px; }
.sw-p-lg  { padding: 24px; }
.sw-p-xl  { padding: 40px; }

/* Border radius */
.sw-rounded-sm { border-radius: var(--sw-radius-sm); }
.sw-rounded-md { border-radius: var(--sw-radius-md); }
.sw-rounded-lg { border-radius: var(--sw-radius-lg); }
.sw-rounded-xl { border-radius: var(--sw-radius-xl); }
.sw-rounded-full { border-radius: 100px; }

/* Visibility */
.sw-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Responsive hide/show */
@media (max-width: 768px) {
    .sw-hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
    .sw-hide-desktop { display: none !important; }
}