/**
 * Deelux site-wide typography.
 *
 * Mirrors the homepage type system (Cormorant Garamond display + Roboto body,
 * navy #20314D, gold #b79268) so every template — single, archive, taxonomy,
 * SEO landing pages, 404, and custom page templates — picks up the same look
 * without each one having to ship its own copy.
 *
 * Loaded after style.min.css so it overrides the legacy _typography.scss rules
 * (Roboto-only, weight 900 navy h1 etc.) and the older .content-block /
 * .masthead / .panel-content heading sizing.
 */

:root {
    --dlx-navy: #20314D;
    --dlx-navy-deep: #18243a;
    --dlx-cream: #f6f3ee;
    --dlx-cream-deep: #eee8de;
    --dlx-gold: #b79268;
    --dlx-gold-deep: #8e7148;
    --dlx-ink: #1e1e1e;
    --dlx-line: #e5dfd3;
    --dlx-serif: 'Cormorant Garamond', 'EB Garamond', Georgia, 'Times New Roman', serif;
    --dlx-sans: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body,
p,
li,
a,
span,
address,
input,
textarea,
select,
button {
    font-family: var(--dlx-sans);
}

body {
    color: var(--dlx-ink);
}

/* Display headings — Cormorant Garamond, navy, refined letter-spacing.
   Scoped headings inside .dlx-* containers already declare these values
   themselves; this rule sets the same look for everything else. */
h1, h2, h3, h4,
.h1, .h2, .h3, .h4 {
    font-family: var(--dlx-serif);
    color: var(--dlx-navy);
    letter-spacing: -0.005em;
    line-height: 1.15;
}

h1, .h1 {
    font-size: clamp(30px, 4.4vw, 48px);
    font-weight: 600;
    margin: 0 0 18px;
}

h2, .h2 {
    font-size: clamp(26px, 3.2vw, 36px);
    font-weight: 600;
    margin: 0 0 14px;
}

h3, .h3 {
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 600;
    margin: 0 0 12px;
}

h4, .h4 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 10px;
}

/* h5 / h6 stay Roboto — used as small uppercase eyebrows in places. */
h5, h6 {
    font-family: var(--dlx-sans);
    color: var(--dlx-navy);
}

p {
    font-size: 16px;
    line-height: 1.6;
    font-weight: 300;
}

p + h1, p + h2, p + h3, p + h4 {
    margin-top: 32px;
}

strong { font-weight: 700; }

p a, .deelux-page-wrapper a {
    color: var(--dlx-navy);
    text-underline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Legacy overrides
 *
 * The older theme set bold sans-serif heading sizes inside .content-block,
 * .masthead, .panel-content and #deelux-offer. Those rules predate the
 * Cormorant system and create a visible mismatch on the SEO page templates
 * and generic post pages. The overrides below bring them in line with the
 * homepage type system.
 * ------------------------------------------------------------------------- */

.content-block h1,
.content-block h3,
.content-block h5 {
    font-family: var(--dlx-serif);
    color: var(--dlx-navy);
    font-weight: 600;
    font-size: clamp(30px, 4vw, 48px);
    letter-spacing: -0.005em;
    line-height: 1.15;
    margin-bottom: 14px;
}

.content-block h2,
.content-block h4,
.content-block h6 {
    font-family: var(--dlx-serif);
    color: var(--dlx-navy);
    font-weight: 500;
    font-size: clamp(22px, 2.6vw, 28px);
    letter-spacing: -0.005em;
    line-height: 1.2;
    margin-bottom: 18px;
}

.content-block p {
    font-family: var(--dlx-sans);
    font-weight: 300;
    line-height: 1.65;
}

.masthead-content h1 {
    font-family: var(--dlx-serif);
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.05;
}

.panel-content h5 {
    font-family: var(--dlx-serif);
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.1;
}

.panel-content h6 {
    font-family: var(--dlx-sans);
    font-weight: 400;
    line-height: 1.4;
}

#deelux-offer h3 {
    font-family: var(--dlx-serif);
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.1;
}

#home-credits h5 {
    font-family: var(--dlx-sans);
    color: var(--dlx-navy);
    font-weight: 700;
    letter-spacing: 0.06em;
}

/* Generic post + page wrappers (single.php, page.php, archive.php, 404.php,
   taxonomy-*.php, search.php) — make their bare h1/h2 inherit the system. */
.post--container .post--content h1,
.post--container .post--content h2,
.post--container .post--content h3,
.deelux-page-wrapper h1,
.deelux-page-wrapper h2,
.deelux-page-wrapper h3,
.page-404 h1,
.page-404 h2 {
    font-family: var(--dlx-serif);
    color: var(--dlx-navy);
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.15;
}

.page-404 h1 { font-size: clamp(34px, 5vw, 56px); }
.page-404 h2 { font-size: clamp(18px, 2vw, 22px); font-weight: 500; color: #555; }

/* Kitchen card titles fallback — keep the old typography on .h5 a anchors,
   but use the serif look for the title rather than the heavy 900 weight. */
.kitchens-card-deck h5 a {
    font-family: var(--dlx-serif);
    font-weight: 600;
    color: var(--dlx-navy);
    letter-spacing: -0.005em;
}

/* Buttons stay sans-serif and uppercase to match the homepage CTAs. */
.btn,
button,
.btn-primary,
.btn-secondary {
    font-family: var(--dlx-sans);
}

/* Tables — match the deelux typography system. Used on the comparison
   tables in the Why Deelux / Cabinetry Guarantee templates. */
.table {
    font-family: var(--dlx-sans);
    color: var(--dlx-ink);
    width: 100%;
    margin: 0 0 24px;
    border-collapse: collapse;
}

.table th,
.table td {
    font-size: 16px;
    line-height: 1.5;
    font-weight: 300;
    padding: 12px 14px;
    vertical-align: top;
    text-align: left;
    border-bottom: 1px solid #e5e1d6;
}

.table thead th {
    font-weight: 700;
    color: var(--dlx-navy);
    background: #fafafa;
    border-bottom: 2px solid var(--dlx-navy);
}

.table tbody th {
    font-weight: 600;
    color: var(--dlx-navy);
}

.table-bordered,
.table-bordered th,
.table-bordered td {
    border: 1px solid #e5e1d6;
}