/*
 * Xavier theme - the steve-shead.com look on top of Bootstrap 5.3.
 *
 * Everything shared lives here as CSS variables: fonts, colours, radius, shadows. Bootstrap reads
 * its --bs-* variables, so changing a value here restyles every page. app.css (site) and
 * admin.css (Admin Panel) add layout on top.
 *
 * Contrast: the yellow is a background colour (charcoal text on it is about 12:1) and an accent
 * for underlines and markers - never text on white, where it's unreadable. Body text uses a darker
 * grey than the old steveshead.io's #828282, which is below the 4.5:1 WCAG minimum on white.
 */

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../vendor/fonts/poppins/poppins-latin-300-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../vendor/fonts/poppins/poppins-latin-400-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../vendor/fonts/poppins/poppins-latin-500-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../vendor/fonts/poppins/poppins-latin-600-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../vendor/fonts/poppins/poppins-latin-700-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The site name beside the logo */
@font-face {
    font-family: 'Dancing Script';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../vendor/fonts/dancing-script/dancing-script-latin-700-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root,
[data-bs-theme="light"] {
    /* Brand */
    --x-yellow: #ffcc2e;
    --x-yellow-strong: #f5b800;
    --x-yellow-soft: #fff4cc;
    --x-charcoal: #232323;
    --x-charcoal-2: #2e2e2e;
    --x-grey: #5c5c5c;
    --x-grey-light: #f7f7f7;
    --x-line: #ececec;
    --x-shadow: 0 1px 2px rgba(35, 35, 35, .06), 0 4px 16px rgba(35, 35, 35, .06);
    --x-radius: 10px;
    --x-script-font: 'Dancing Script', 'Brush Script MT', cursive;

    /* Bootstrap */
    --bs-body-font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --bs-body-font-size: .95rem;
    --bs-body-line-height: 1.65;
    --bs-body-color: var(--x-grey);
    --bs-body-color-rgb: 92, 92, 92;
    --bs-body-bg: #fff;
    --bs-emphasis-color: var(--x-charcoal);
    --bs-heading-color: var(--x-charcoal);
    --bs-secondary-color: #6b6b6b;
    --bs-secondary-bg: var(--x-grey-light);
    --bs-tertiary-bg: #fbfbfb;
    --bs-border-color: var(--x-line);
    --bs-border-radius: 8px;
    --bs-border-radius-lg: var(--x-radius);
    --bs-link-color: var(--x-charcoal);
    --bs-link-color-rgb: 35, 35, 35;
    --bs-link-hover-color: #000;
    --bs-link-hover-color-rgb: 0, 0, 0;
    --bs-focus-ring-color: rgba(245, 184, 0, .45);
    --bs-primary: var(--x-charcoal);
    --bs-primary-rgb: 35, 35, 35;
}

[data-bs-theme="dark"] {
    --x-charcoal: #f2f2f2;
    --x-grey: #b9b9b9;
    --x-grey-light: #1b1b1b;
    --x-line: #333;
    --x-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .3);
    --x-yellow-soft: #3a3214;

    --bs-body-color: var(--x-grey);
    --bs-body-color-rgb: 185, 185, 185;
    --bs-body-bg: #141414;
    --bs-emphasis-color: #fff;
    --bs-heading-color: #f2f2f2;
    --bs-secondary-color: #9a9a9a;
    --bs-secondary-bg: #1e1e1e;
    --bs-tertiary-bg: #1a1a1a;
    --bs-border-color: var(--x-line);
    --bs-link-color: #f2f2f2;
    --bs-link-color-rgb: 242, 242, 242;
    --bs-link-hover-color: #fff;
    --bs-link-hover-color-rgb: 255, 255, 255;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
    letter-spacing: -.01em;
}

a {
    text-decoration-color: var(--x-yellow-strong);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* Visible keyboard focus everywhere */
:focus-visible {
    outline: 3px solid var(--x-yellow-strong);
    outline-offset: 2px;
}

/* Buttons: yellow is the main action, charcoal the strong one */
.btn {
    --bs-btn-font-weight: 500;
    --bs-btn-border-radius: 999px;
    --bs-btn-padding-x: 1.25rem;
}

.btn-sm {
    --bs-btn-padding-x: .85rem;
}

.btn-primary {
    --bs-btn-color: #232323;
    --bs-btn-bg: var(--x-yellow);
    --bs-btn-border-color: var(--x-yellow);
    --bs-btn-hover-color: #232323;
    --bs-btn-hover-bg: var(--x-yellow-strong);
    --bs-btn-hover-border-color: var(--x-yellow-strong);
    --bs-btn-active-color: #232323;
    --bs-btn-active-bg: var(--x-yellow-strong);
    --bs-btn-active-border-color: var(--x-yellow-strong);
    --bs-btn-disabled-color: #232323;
    --bs-btn-disabled-bg: var(--x-yellow);
    --bs-btn-disabled-border-color: var(--x-yellow);
    --bs-btn-focus-shadow-rgb: 245, 184, 0;
}

.btn-dark {
    --bs-btn-bg: #232323;
    --bs-btn-border-color: #232323;
    --bs-btn-hover-bg: #000;
    --bs-btn-hover-border-color: #000;
}

.btn-outline-secondary {
    --bs-btn-color: var(--x-charcoal);
    --bs-btn-border-color: var(--x-line);
    --bs-btn-hover-color: var(--x-charcoal);
    --bs-btn-hover-bg: var(--x-grey-light);
    --bs-btn-hover-border-color: #d6d6d6;
    --bs-btn-active-color: var(--x-charcoal);
    --bs-btn-active-bg: var(--x-grey-light);
    --bs-btn-active-border-color: #d6d6d6;
}

.form-control,
.form-select {
    padding: .6rem .9rem;
    border-color: #dedede;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    border-color: #3a3a3a;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--x-yellow-strong);
    box-shadow: 0 0 0 .2rem rgba(245, 184, 0, .3);
}

.form-check-input:checked {
    background-color: #232323;
    border-color: #232323;
}

.form-label {
    font-weight: 500;
    color: var(--x-charcoal);
}

.alert {
    border: 0;
    border-left: 4px solid currentColor;
    border-radius: 6px;
}

.card {
    --bs-card-border-color: var(--x-line);
    --bs-card-border-radius: var(--x-radius);
}

.badge {
    font-weight: 500;
}

/* Underline a word with the brand yellow: <span class="x-mark">word</span> */
.x-mark {
    background: linear-gradient(transparent 62%, var(--x-yellow) 62%);
    padding: 0 .1em;
}