/* ════════════════════════════════════
   LUSHCLAYCO — GLOBAL CSS
   Theme: Kadence
   ════════════════════════════════════ */
/* ── Colour Tokens ── */
:root {
    --warm-white: #FAF2E8;
    --off-white: #FAF0E0;
    --linen: #E8E1D5;
    --lime: #ECECE4;
    --charcoal: #2C2B28;
    --sage-dark: #5A6455;
    --sage-mid: #5C7A57;
    --sage-light: #A8B5A2;
    --sage-muted: #88937B;
    --warm-gold: #C4975A;
    --blush: #E8D5C4;
    --blush-bright: #DB9475;
    --blush-dark: #DB9475;
    --ink: #1E1D1A;
    --white: #FDFDFD;
    --light-grey: #999999;
    /* #9a8f85 was 3.16 contrast on warm white — below the 4.5 minimum
     for body text, and it is used as a text colour 28 times across
     four stylesheets. #6B655D is 5.76. Every use is a colour on a
     light background, never a fill or a border, so darkening it only
     ever raises contrast. This is the value the product mockup was
     built against. */
    --stone: #6B655D;
    --terracotta: #D4784F;
}

/* ── Base ── */
/*
 * 18 Oct: weight 300 -> 400 and size 13px -> 16px, to match the
 * approved product mockup.
 *
 * The mockup sets no weight and no size on body, so it renders at the
 * browser defaults — Jost 400 at 16px. Your site was running Jost 300
 * at 13px, which is why every page reads thinner and smaller than the
 * thing you signed off on. The 13px came from Kadence's typography
 * settings, not from this file; the rule below overrides it because
 * your stylesheets load after the theme's.
 *
 * Anything with its own px size is unaffected. What moves is the text
 * that inherits — theme text, and anything sized in em or %.
 */
body {
    font-family: 'Jost', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: var(--charcoal);
    background: var(--warm-white);
    line-height: 1.7;
}

/* ── Headings ── */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    line-height: 1.15;
}

h1 em,
h2 em,
h3 em {
    font-style: italic;
}

h6 {
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ── Body Text ── */
/* 300 -> 400 for the same reason as body above: the mockup's
   paragraphs carry no weight, so they render at 400. */
p {
    font-family: 'Jost', sans-serif !important;
    font-weight: 400;
    line-height: 1.85;
}

/* ── Links ── */
a {
    color: var(--sage-dark);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: var(--charcoal);
}

/* ── Dividers ── */
hr {
    border: none;
    border-top: 1px solid var(--blush);
    margin: 40px 0;
}

/* ── Reusable Label ── */
.label-upper {
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--sage-dark);
    margin-bottom: 10px;
}

/* ── Reusable Section Eyebrow ── */
.eyebrow {
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--sage-light);
    margin-bottom: 14px;
}

/* ── Blockquote ── */
blockquote {
    border-left: 2px solid var(--blush);
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 20px;
}

/* ── Dark Section Utility ── */
.dark-section {
    background: var(--charcoal);
    color: var(--warm-white);
}

.dark-section h1,
.dark-section h2,
.dark-section h3,
.dark-section h4,
.dark-section h5,
.dark-section h6 {
    color: var(--warm-white);
}

.dark-section p {
    color: rgba(250, 248, 244, 0.65);
}

.dark-section a {
    color: var(--sage-light);
}

/* ── Licence Notice (Product Pages) ── */
.licence-required {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    color: var(--sage-dark);
    border-top: 1px solid rgba(212, 120, 79, 0.35);
    border-bottom: 1px solid rgba(212, 120, 79, 0.35);
    padding: 10px 0;
    margin: 16px 0;
}

.licence-required a {
    color: var(--terracotta);
}

.wp-site-blocks {
    overflow: unset !important;
}

/* ════════════════════════════════════

  BUTTONS
   ════════════════════════════════════*/
/* Solid Terracotta */
.btn-solid-orange,
.btn-solid-orange .wp-block-button__link {
    background: var(--terracotta);
    color: var(--warm-white);
    border: none;
    border-radius: 0;
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 14px 40px;
    display: inline-block;
    text-decoration: none;
    transition: background 0.2s;
    cursor: pointer;
    text-align: center;
}

.btn-solid-orange:hover,
.btn-solid-orange .wp-block-button__link:hover {
    background: var(--sage-dark);
    color: var(--warm-white);
    text-decoration: none;
}

/* Solid Sage */
.btn-solid-sage {
    background: var(--sage-dark);
    color: var(--warm-white);
    border: none;
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 14px 40px;
    display: inline-block;
    text-decoration: none;
    transition: background 0.2s;
    cursor: pointer;
}

.btn-solid-sage:hover {
    background: var(--charcoal);
    color: var(--warm-white);
}

/* Solid Charcoal */
.btn-solid-charcoal,
.btn-solid-charcoal .wp-block-button__link {
    background: var(--charcoal);
    color: var(--warm-white);
    border: none;
    border-radius: 0;
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 14px 40px;
    display: inline-block;
    text-decoration: none !important;
    transition: background 0.2s;
    cursor: pointer;
    text-align: center;
}

.btn-solid-charcoal:hover,
.btn-solid-charcoal .wp-block-button__link:hover {
    background: var(--sage-dark);
    color: var(--warm-white);
}

/* Outline Terracotta */
.btn-outline,
.btn-outline .wp-block-button__link {
    background: transparent;
    color: var(--terracotta);
    border: 1px solid var(--terracotta);
    border-radius: 0;
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 13px 40px;
    display: inline-block;
    text-decoration: none !important;
    transition: all 0.2s;
    cursor: pointer;
    text-align: center;
}

.btn-outline:hover,
.btn-outline .wp-block-button__link:hover {
    background: var(--terracotta);
    color: var(--warm-white);
}

/* Outline Sage */
.btn-outline-sage,
.btn-outline-sage .wp-block-button__link {
    background: transparent;
    color: var(--sage-dark);
    border: 1px solid var(--sage-dark);
    border-radius: 0;
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 13px 40px;
    display: inline-block;
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
    text-align: center;
}

.btn-outline-sage:hover,
.btn-outline-sage .wp-block-button__link:hover {
    background: var(--sage-dark);
    color: var(--warm-white);
    text-decoration: none;
}

/* End Global */