/**
 * Fonts, tokens, reset and typography — loaded on the front end AND in the editor canvas,
 * so editor-built content is set in the same type as the published page.
 */
/* ===== @font-face: Nantes (self-hosted serif) ===== */
@font-face {
    font-family: 'Nantes';
    font-display: swap;
    src: url('../fonts/nantes/Nantes-Regular.woff2') format('woff2'),
         url('../fonts/nantes/Nantes-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Nantes';
    font-display: swap;
    src: url('../fonts/nantes/Nantes-RegularItalic.woff2') format('woff2'),
         url('../fonts/nantes/Nantes-RegularItalic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

/* ===== CSS Custom Properties ===== */
:root {
    /* Colors — from Gatsby variables.scss */
    --color-primary: #000000;
    --color-primary-dark: #333333;
    --color-orange: hsl(14, 100%, 67%);
    --color-orange-dark: hsl(14, 57%, 54%);
    --color-yellow: hsl(44, 100%, 50%);
    --color-green: hsl(167, 100%, 31%);
    --color-blue: hsl(199, 100%, 35%);
    --color-red: hsl(343, 90%, 49%);
    --color-turquoise: hsl(171, 100%, 41%);
    --color-purple: hsl(271, 100%, 71%);
    --color-black: #000;
    --color-white: #fff;
    /* #777 lands at 4.48:1 on white — a hair under the 4.5:1 AA floor for body
       text, and it is the colour behind every muted paragraph on the site.
       #6f6f6f reads identically and clears the bar at 5.0:1. */
    --color-grey: #6f6f6f;
    --color-light-grey: hsl(0, 0%, 91%);
    --color-subtle-grey: hsl(0, 0%, 98%);
    --color-border-grey: #e8e8e8;

    /* Typography */
    --family-sans: 'Public Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    --family-serif: 'Nantes', 'Georgia', 'Times', 'Times New Roman', serif;

    /* Font sizes (16px base; Gatsby equiv in comments) */
    --fs-tiny: 0.625rem;    /* 10px — Gatsby 1.0rem */
    --fs-small: 0.75rem;    /* 12px — Gatsby 1.2rem */
    --fs-base: 0.875rem;    /* 14px — Gatsby 1.4rem */
    --fs-medium: 1rem;       /* 16px — Gatsby 1.6rem */
    --fs-large: 1.125rem;   /* 18px — Gatsby 1.8rem */
    --fs-h6: 1rem;           /* 16px */
    --fs-h5: 1.3125rem;     /* 21px */
    --fs-h4: 1.375rem;      /* 22px */
    --fs-h3: 1.725rem;      /* 27.6px */
    --fs-h2: 2.3rem;        /* 36.8px */
    --fs-h1: 3rem;           /* 48px */
    --fs-title: 2.875rem;   /* 46px */

    /* Font weights — from Gatsby */
    --fw-lighter: 100;
    --fw-light: 200;
    --fw-normal: 300;
    --fw-medium: 400;
    --fw-bold: 600;
    --fw-bolder: 700;
    --fw-link: 600;

    /* Spacing — from Gatsby unit system (converted) */
    --sp-pico: 2px;
    --sp-nano: 4px;
    --sp-tiny: 10px;
    --sp-small: 20px;
    --sp-base: 40px;
    --sp-large: 80px;
    --sp-huge: 120px;
    --sp-section: 35px;
    --sp-item: 20px;
    --sp-text: 15px;

    /* Shadows — from Gatsby */
    --shadow: 0 1.5px 6px rgba(0, 0, 0, 0.3);
    --shadow-card: 0 1.5px 8px rgba(0, 0, 0, 0.2);
    --shadow-light: 0 1.5px 10px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 1px 10px rgba(0, 0, 0, 0.4);

    /* Borders */
    --radius-small: 4px;
    --radius-card: 20px;
    --radius-pill: 999px;
    --radius-input: 5px;

    /* Layout */
    --width-content: 850px;       /* Post container — Gatsby $width-medium */
    --width-content-text: 670px;  /* Text blocks within posts — Gatsby $width-narrow */
    --width-wide: 1430px;

    /* Z-index */
    --z-base: 10;
    --z-float: 20;
    --z-over: 100;
    --z-top: 99999;
    --z-top-absolute: 99999999;
}

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

body {
    margin: 0;
    position: relative;
    font-family: var(--family-sans);
    font-size: var(--fs-medium);
    font-weight: var(--fw-normal);
    line-height: 1.6;
    color: var(--color-black);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ===== Typography — from Gatsby type.scss ===== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--family-serif);
    font-weight: var(--fw-normal);
    margin-top: 0;
    margin-bottom: var(--sp-small);
}

h1 {
    font-size: calc(var(--fs-h1) * 0.8);
    line-height: 1.2;
}
@media (min-width: 1088px) {
    h1 { font-size: var(--fs-h1); }
}

h2 {
    font-size: var(--fs-h2);
    line-height: 1.25;
}

h3 {
    font-size: var(--fs-h3);
    line-height: 1.3;
}

h4 {
    font-size: var(--fs-h4);
    line-height: 1.35;
}

h5 {
    font-size: var(--fs-h5);
    line-height: 1.6;
}

h6 {
    font-size: var(--fs-h6);
    line-height: 1.6;
}

p, li {
    font-weight: var(--fw-normal);
    font-size: var(--fs-medium);
    margin-top: 0;
    margin-bottom: var(--sp-item);
    line-height: 1.6;
}

/* Links — default: no decoration. Only inline text links get underlines. */
a:not(.button):not(.wp-element-button) {
    color: var(--color-black);
    text-decoration: none;
    transition: text-decoration-color 0.2s ease;
}

/* Inline text links inside prose content get the Gatsby underline style */
p a:not(.button):not(.wp-element-button),
li a:not(.button):not(.wp-element-button),
.wp-block-post-content a:not(.button):not(.wp-element-button),
.vibemap-text-with-image__text a:not(.button):not(.wp-element-button),
.impact-area-body a:not(.button):not(.wp-element-button),
.entry-content a:not(.button):not(.wp-element-button) {
    font-weight: var(--fw-link);
    text-decoration: underline;
    text-decoration-color: #666;
}

p a:not(.button):not(.wp-element-button):hover,
li a:not(.button):not(.wp-element-button):hover,
.wp-block-post-content a:not(.button):not(.wp-element-button):hover,
.entry-content a:not(.button):not(.wp-element-button):hover {
    text-decoration-color: var(--color-black);
}

/* Code — from Gatsby */
code {
    background: #f1f1f1;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.875em;
}

pre code {
    display: block;
    padding: var(--sp-small);
    overflow-x: auto;
}

/* Blockquote */
blockquote {
    font-family: var(--family-serif);
    font-size: var(--fs-h3);
    font-weight: var(--fw-light);
    margin: 0 0 var(--sp-item);
    padding: 0;
    border: none;
}

/* Lists */
ul { list-style-type: disc; }
ol { list-style-type: decimal; }

ul ul, ol ol, ul ol, ol ul {
    margin: var(--sp-text) 0;
}

li {
    margin-bottom: var(--sp-tiny);
}

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 12px;
    border-bottom: 1px solid var(--color-light-grey);
    text-align: left;
}

/* Core palette colours still used by legacy posts 20500 and 39827 (defaultPalette is off). */
.has-vivid-cyan-blue-color { color: #0693e3 !important; }
.has-pale-cyan-blue-color { color: #8ed1fc !important; }
.has-pale-cyan-blue-background-color { background-color: #8ed1fc !important; }

/* Testimonial style: core's ".wp-block-quote cite" outranks the variation's :where() rules. */
.wp-block-quote.is-style-testimonial cite {
    display: block;
    margin-top: var(--wp--preset--spacing--30);
    font-family: var(--wp--preset--font-family--sans-serif);
    font-size: var(--wp--preset--font-size--medium);
    font-style: normal;
    font-weight: 400;
    color: var(--wp--preset--color--grey);
}