/*
 * SheClicks brand system — ported to the Challenge site.
 *
 * Plain CSS (this theme has no SCSS build), so the design tokens from the brief
 * are expressed as CSS custom properties on :root. Loaded AFTER style.css so the
 * brand rules win where they overlap. The existing teal (#01a69e) hardcoded in
 * style.css is retinted to var(--sc-primary) separately.
 *
 * Font files: drop the 6 Poppins files into /fonts/ (see @font-face below).
 */

/* ── 1. Tokens ───────────────────────────────────────────── */
:root {
    /* Brand */
    --sc-burgundy:      #8A2A6B;
    --sc-burgundy-dark: #6E2256;

    /* Neutrals */
    --sc-charcoal:      #4F4D4E;
    --sc-smoke:         #979796;
    --sc-light-slate:   #DCDCDC;
    --sc-ice-white:     #F8F8F9;
    --sc-white:         #FFFFFF;
    --sc-black:         #222222;

    /* Semantic aliases */
    --sc-primary:       var(--sc-burgundy);
    --sc-secondary:     var(--sc-burgundy-dark);
    --sc-border:        var(--sc-light-slate);
    --sc-background:    var(--sc-ice-white);
    --sc-link-hover:    var(--sc-burgundy-dark);
    --sc-overlay:       rgba(79, 77, 78, 0.20);

    /* Soft burgundy wash */
    --sc-wash-bg:       rgba(138, 42, 107, 0.06);
    --sc-wash-border:   rgba(138, 42, 107, 0.30);

    /* Type */
    --font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

    /* Type scale (px, deliberately fixed) */
    --sc-fs-h1:        37px;   --sc-lh-h1: 48px;
    --sc-fs-h2:        28px;   --sc-lh-h2: 42px;
    --sc-fs-h3:        24px;   --sc-lh-h3: 32px;
    --sc-fs-content:   20px;   --sc-lh-content: 28px;
    --sc-fs-small:     18px;   --sc-lh-small: 24px;
    --sc-fs-xsmall:    16px;   --sc-lh-xsmall: 22px;
    --sc-fs-button:    15px;
    --sc-fs-xxsmall:   14px;   --sc-lh-xxsmall: 20px;
    --sc-fs-xxxsmall:  12px;

    /* Layout */
    --sc-container-max: 1216px;
}

/* ── 2. Poppins (self-hosted) ────────────────────────────── */
/* Add these files to /fonts/: Poppins-Regular / Poppins-Bold / Poppins-Black,
   each as .woff2 (preferred) and .ttf. Until then, body falls back to system-ui. */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/Poppins-Regular.woff2') format('woff2'),
         url('fonts/Poppins-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/Poppins-Bold.woff2') format('woff2'),
         url('fonts/Poppins-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('fonts/Poppins-Black.woff2') format('woff2'),
         url('fonts/Poppins-Black.ttf') format('truetype');
}

/* ── 3. Base / reset ─────────────────────────────────────── */
body {
    padding: 0;
    margin: 0;
    font-family: var(--font-sans);
    font-weight: 400;
    line-height: 1.6;
    color: var(--sc-black);
    background-color: #fafafa;
}

/* ── 4. Global type & links ──────────────────────────────── */
p { color: var(--sc-charcoal); }

h1, h2, h3, h4, h5, h6 {
    padding: 0;
    margin: 0 0 16px;
    color: var(--sc-primary);
    font-weight: 500;          /* restrained — medium-bold, not 700 */
}
h1 { font-size: var(--sc-fs-h1); line-height: var(--sc-lh-h1); }
h2 { font-size: var(--sc-fs-h2); line-height: var(--sc-lh-h2); }
h3 { font-size: var(--sc-fs-h3); line-height: var(--sc-lh-h3); }
h4 { font-size: var(--sc-fs-content); line-height: var(--sc-lh-content); }
h5 { font-size: var(--sc-fs-small); line-height: var(--sc-lh-small); }
h6 { font-size: var(--sc-fs-xsmall); line-height: var(--sc-lh-xsmall); }

/* Links pick up brand colour, but NEVER recolour Gutenberg buttons
   (would make white button text unreadable). */
a:not(.wp-block-button__link) {
    text-decoration: none;
    color: var(--sc-primary);
}
a:not(.wp-block-button__link):hover {
    color: var(--sc-link-hover);
}

/* ── 5. Generic button ───────────────────────────────────── */
.button, .sqs-block-button-element {
    display: inline-block;
    background-color: var(--sc-primary);
    font-weight: 500;
    line-height: 28px;
    font-size: var(--sc-fs-xxsmall);
    color: var(--sc-white);
    padding: 12px 22px;
    text-align: center;
    border: 1px solid var(--sc-primary);
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.button:hover, .button:focus,
.sqs-block-button-element:hover, .sqs-block-button-element:focus {
    background-color: var(--sc-secondary);
    border-color: var(--sc-secondary);
    color: var(--sc-white);
}

/* ── 6. Gutenberg core/button (full pill) ────────────────── */
.wp-block-button .wp-block-button__link {
    background-color: var(--sc-primary);
    color: var(--sc-white);
    border: 1px solid var(--sc-primary);
    border-radius: 999px;
    padding: 12px 26px;
    font-weight: 500;
    font-size: var(--sc-fs-xxsmall);
    line-height: 28px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus {
    background-color: var(--sc-secondary);
    border-color: var(--sc-secondary);
    color: var(--sc-white);
}
.wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent;
    color: var(--sc-primary);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus {
    background-color: var(--sc-primary);
    color: var(--sc-white);
}

/* ── 7. Block / spacing rhythm (opt-in) ──────────────────── */
.block {
    padding: 0 32px;
    margin: 100px 0;
}
.block:first-child {
    margin-top: 45px;
    margin-bottom: 45px;
}
.inner-block {
    margin: 0 auto;
    max-width: var(--sc-container-max);
    width: 100%;
}
@media (max-width: 1024px) {
    .block { padding: 0 16px; margin: 20px 0; }
    .block:first-child { margin-top: 20px; margin-bottom: 20px; }
}

/* ── 8. Cards ────────────────────────────────────────────── */
/* Note: .card also exists in Bootstrap; this restyles it to the brand.
   Never use full 999px radius on cards hosting round avatars. */
.card {
    display: flex;
    background-color: var(--sc-white);
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.card:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border-color: var(--sc-primary);
}

/* ── 9. Form fields ──────────────────────────────────────── */
input[type="text"], input[type="email"], input[type="url"],
input[type="tel"], input[type="number"], input[type="date"],
input[type="time"], input[type="password"], input[type="search"],
textarea, select {
    width: 100%;
    max-width: 480px;
    padding: 9px 12px;
    font-size: var(--sc-fs-xxsmall);
    line-height: 1.4;
    color: #1F2328;
    background-color: var(--sc-white);
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    box-shadow: none;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus,
input[type="tel"]:focus, input[type="number"]:focus, input[type="date"]:focus,
input[type="time"]:focus, input[type="password"]:focus, input[type="search"]:focus,
textarea:focus, select:focus {
    outline: none;
    border-color: var(--sc-primary);
    box-shadow: 0 0 0 3px rgba(138, 42, 107, 0.12);
}
input::placeholder, textarea::placeholder { color: #9CA3AF; }

label {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: #1F2328;
    margin-bottom: 6px;
}

/* ── 10. Image captions — italic site-wide ───────────────── */
.wp-element-caption,
.wp-block-image figcaption,
figure.wp-caption .wp-caption-text,
.wp-caption-text,
.gallery-caption {
    font-style: italic;
}