/* ==========================================================
   BLKXCNCT Brand Layer for HTML5 UP Editorial
   — Palette + Typography only. No layout or sizing overrides.
========================================================== */
/* --- Color Tokens --- */
:root {
    --blue: #326BB3;

    /* Brand Blue */
    --copper: #B36B3E;

    /* Accent Copper / Clay */
    --plum: #5A3E72;

    /* Accent Plum / Aubergine */
    --ink: #111318;

    /* Body / Text */
    --cloud: #F7F8FA;

    /* Light BG */
    --paper: #FFFFFF;

    /* Surface */
    --steel: #D9DEE5;

    /* Lines */
}

html,
body {
    background-color: var(--cloud) !important;
}

/* --- Typography (family only) --- */
body,
input,
select,
textarea {
    font-family: "Work Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    color: var(--ink);
}

/* --- Links --- */
a {
    color: var(--blue);
    text-decoration: none;
}

a:hover {
    color: var(--copper);
    text-decoration: underline;
}

/* --- Accent utilities (optional, small helpers) --- */
.text-blue {
    color: var(--blue);
}

.text-copper {
    color: var(--copper);
}

.text-plum {
    color: var(--plum);
}

.bg-cloud {
    background-color: var(--cloud);
}

.bg-paper {
    background-color: var(--paper);
}

.border-steel {
    border-color: var(--steel);
}

/* --- Pronunciation styling (for subtle tone under headings) --- */
.pronunciation {
    font-style: italic;
    font-size: 0.9em;
    color: rgba(17,19,24,0.65);
}

/* ---------------------------------------------
   Typography Override — Apply Work Sans to all headings
---------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Work Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    font-weight: 700;
    letter-spacing: 0.015em;
    color: var(--ink);
}

/* === BLKXCNCT x Editorial — type cleanups === */
/* 1) Header logo (top-left “BLKXCNCT”) */
#header .logo,
#header .logo strong {
    font-family: "Work Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--ink);
}

/* 2) Banner subhead (stop the forced ALL-CAPS + wide tracking) */
#banner .content > header p {
    font-family: "Work Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    font-weight: 600;

    /* your approved weight for subheads */
    text-transform: none;

    /* kill Editorial’s uppercase */
    letter-spacing: 0.01em;

    /* bring tracking back down */
    color: var(--ink);
}

/* 3) Buttons (use Work Sans, no forced caps, tighter tracking) */
.button,
.button.big,
.button.small {
    font-family: "Work Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* =======================================================
   BLKXCNCT x Editorial — Color Map (no spacing changes)
   Primary: Blue   Secondary: Copper   Lines: Steel
======================================================= */
/* 0) Global accent lines (those thin red rules in Editorial) */
hr,
.major:after,
.major > :last-child:after {
    border-color: var(--steel) !important;
}

.major:after {
    background-color: var(--steel) !important;
}

/* 1) Buttons */
.button {
    background-color: transparent;
    border-color: var(--steel);
    color: var(--ink);
}

.button:hover {
    border-color: var(--blue);
    color: var(--blue);
}

/* Primary (use .button.primary on important CTAs) */
.button.primary {
    background-color: var(--blue);
    border-color: var(--blue);
    color: #fff !important;
}

.button.primary:hover {
    background-color: #275995;

    /* slightly darker blue */
    border-color: #275995;
}

/* Outline variant in Copper (e.g., “Donate”, “Open”) */
.button.copper {
    background-color: transparent;
    border-color: var(--copper);
    color: var(--copper);
}

.button.copper:hover {
    background-color: var(--copper);
    color: #fff;
}

/* Small/Big inherit colors correctly */
.button.small,
.button.big {
    color: inherit;
}

/* 2) Links (already set, keep for clarity) */
a {
    color: var(--blue);
}

a:hover {
    color: var(--copper);
    text-decoration: underline;
}

/* 3) “Quick Links” diamonds & feature icons */
.features article > .icon {
    border-color: var(--steel);

    /* outer diamond */
    color: var(--blue);

    /* icon glyph */
}

.features article:hover > .icon {
    border-color: var(--blue);
}

/* 4) Section headings & tiny caps */
header.major h2 {
    color: var(--ink);
}

header.major .icon {
    color: var(--plum);
}

/* optional accent */
/* 5) Sidebar menu hover/active */
#menu ul a:hover {
    color: var(--blue);
}

#menu ul a.active {
    color: var(--blue);
}

/* 6) Cards/posts buttons */
.posts .actions .button {
    border-color: var(--steel);
}

.posts .actions .button:hover {
    border-color: var(--blue);
    color: var(--blue);
}

/* 7) Contact icons in sidebar */
ul.contact li:before,
ul.contact li .icon {
    color: var(--plum);
}

/* subtle accent */
/* ======================================================
   BLKXCNCT x Editorial — Specificity Patch (colors+type)
   Ensures our palette + Work Sans win over theme defaults
====================================================== */
/* 0) Make sure our brand font wins everywhere (incl. sidebar) */
#header .logo,
#header .logo strong,
#banner .content > header p,
h1,
h2,
h3,
h4,
h5,
h6,
#sidebar,
#sidebar * ,
.button,
.button.small,
.button.big {
    font-family: "Work Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
    color: var(--ink);
}

/* 1) Global accents (kill Editorial coral) */
hr,
header.major:after,
header.major > :last-child:after {
    border-color: var(--steel) !important;
    background-color: var(--steel) !important;
}

/* 2) Buttons — default, primary (Blue), outline (Copper) */
.button {
    background: transparent !important;
    border-color: var(--steel) !important;
    color: var(--ink) !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
}

.button:hover {
    border-color: var(--blue) !important;
    color: var(--blue) !important;
}

.button.primary {
    background: var(--blue) !important;
    border-color: var(--blue) !important;
    color: #fff !important;
}

.button.primary:hover {
    background: #275995 !important;
    border-color: #275995 !important;
}

.button.copper {
    background: transparent !important;
    border-color: var(--copper) !important;
    color: var(--copper) !important;
}

.button.copper:hover {
    background: var(--copper) !important;
    color: #fff !important;
}

/* 3) Sidebar typography + links */
#sidebar .inner {
    color: var(--ink) !important;
}

#sidebar a {
    color: var(--blue) !important;
}

#sidebar a:hover {
    color: var(--copper) !important;
}

/* 4) Quick Links diamonds + icons */
.features article > .icon {
    border-color: var(--steel) !important;

    /* diamond outline */
    color: var(--blue) !important;

    /* icon glyph */
}

.features article > .icon:before,
.features article > .icon:after {
    border-color: var(--steel) !important;

    /* inner strokes */
}

.features article:hover > .icon {
    border-color: var(--blue) !important;
}

/* 5) Posts/grid action buttons */
.posts .actions .button {
    border-color: var(--steel) !important;
    color: var(--ink) !important;
}

.posts .actions .button:hover {
    border-color: var(--blue) !important;
    color: var(--blue) !important;
}

/* 6) Contact icons (subtle Plum accent) */
ul.contact li:before,
ul.contact li .icon {
    color: var(--plum) !important;
}

/* =====================================================
   Kill Editorial coral + map accents to BLKXCNCT palette
   (strong specificity + variables + !important where needed)
===================================================== */
/* 0) Override Editorial's accent variable everywhere */
:root {
    /* Editorial uses --accent for coral; remap it to Brand Blue */
    --accent: var(--blue);
}

/* 1) Global accent rules (thin red lines, etc.) */
header.major:after,
header.major > :last-child:after,
hr {
    background-color: var(--steel) !important;
    border-color: var(--steel) !important;
}

/* 2) Buttons */
.button,
.posts .actions .button,
.features .actions .button,
#sidebar .actions .button {
    /* default outline */
    background: transparent !important;
    border-color: var(--steel) !important;
    color: var(--ink) !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
}

.button:hover,
.posts .actions .button:hover,
.features .actions .button:hover,
#sidebar .actions .button:hover {
    border-color: var(--blue) !important;
    color: var(--blue) !important;
}

/* Primary filled (use class="button primary") */
.button.primary {
    background: var(--blue) !important;
    border-color: var(--blue) !important;
    color: #fff !important;
}

.button.primary:hover {
    background: #275995 !important;
    border-color: #275995 !important;
}

/* Copper outline (use class="button copper") */
.button.copper {
    border-color: var(--copper) !important;
    color: var(--copper) !important;
}

.button.copper:hover {
    background: var(--copper) !important;
    color: #fff !important;
}

/* 3) Quick Links diamonds + icons (those coral strokes) */
.features article > .icon,
.features article > .icon:before,
.features article > .icon:after {
    border-color: var(--steel) !important;

    /* diamond outline & inner strokes */
}

.features article > .icon {
    color: var(--blue) !important;
}

/* icon glyph */
.features article:hover > .icon {
    border-color: var(--blue) !important;
}

/* 4) Sidebar typography + links (ensure Work Sans + colors) */
#sidebar,
#sidebar * {
    font-family: "Work Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
    color: var(--ink) !important;
}

#sidebar a {
    color: var(--blue) !important;
}

#sidebar a:hover {
    color: var(--copper) !important;
}

/* 5) Contact icons accent (optional Plum) */
ul.contact li:before,
ul.contact li .icon {
    color: var(--plum) !important;
}

/* ===== Kill remaining Editorial coral & lock BLKXCNCT palette ===== */
/* Links: color + underline color */
a {
    color: var(--blue) !important;
    border-bottom-color: var(--blue) !important;
}

a:hover {
    color: var(--copper) !important;
    border-bottom-color: var(--copper) !important;
}

/* Header bottom rule */
#header {
    border-bottom-color: var(--steel) !important;
}

/* Buttons: remove coral box-shadow and map to palette */
.button,
input[type="submit"],
input[type="reset"],
input[type="button"],
button {
    font-family: "Work Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
    color: var(--ink) !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;

    /* replace the theme's coral outline */
    box-shadow: inset 0 0 0 2px var(--steel) !important;
}

.button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover {
    box-shadow: inset 0 0 0 2px var(--blue) !important;
    color: var(--blue) !important;
    background-color: transparent !important;
}

/* Filled primary button */
.button.primary,
input[type="submit"].primary,
input[type="button"].primary,
button.primary {
    background: var(--blue) !important;
    box-shadow: none !important;
    color: #fff !important;
}

.button.primary:hover,
input[type="submit"].primary:hover,
input[type="button"].primary:hover,
button.primary:hover {
    background: #275995 !important;
}

/* Copper outline variant (e.g., small “Open/Donate” chips) */
.button.copper {
    box-shadow: inset 0 0 0 2px var(--copper) !important;
    color: var(--copper) !important;
}

.button.copper:hover {
    background: var(--copper) !important;
    color: #fff !important;
}

/* Feature diamonds & any icon glyphs still coral */
.features article .icon:before,
ul.contact li:before,
ul.contact li .icon {
    color: var(--plum) !important;

    /* or var(--blue) if you prefer */
}

.features article .icon:after {
    border-color: var(--steel) !important;
}

/* Sidebar link hover (menu) */
#menu ul a:hover,
#menu ul span:hover {
    color: var(--blue) !important;
}

/* === Final coral cleanup: section underlines (main + sidebar) === */
/* Main content section headers (e.g., “Quick Links”, “News & Notes”) */
header.major,
header.major * {
    border-color: var(--steel) !important;
}

header.major:after,
header.major h2:after,
header.major > :last-child:after {
    background-color: var(--steel) !important;
    border-color: var(--steel) !important;
}

/* Sidebar section headers (e.g., “Menu”, “Why BLKXCNCT Exists”) */
#sidebar header.major,
#sidebar header.major * {
    border-color: var(--steel) !important;
}

#sidebar header.major:after,
#sidebar header.major h2:after,
#sidebar header.major > :last-child:after {
    background-color: var(--steel) !important;
    border-color: var(--steel) !important;
}

/* Hero logo: right-aligned, fixed width */
#banner .logo-wrap {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 14rem;

    /* keeps the hero balanced */
}

#banner .logo-hero {
    width: 240px;

    /* adjust to taste: 220–260 is the sweet spot */
    height: auto;
    display: block;
    max-width: 100%;
}

/* (optional) smaller on phones */
@media (max-width: 736px){
    #banner .logo-wrap {
        justify-content: center;
    }

    #banner .logo-hero {
        width: 180px;
    }
}

/* Make the main content a size container so children can scale to it */
#main .inner {
    container-type: inline-size;
}

/* Logo scales with the content column, not the viewport */
#banner .logo-hero {
    /* Container-query driven width with sensible bounds */
    width: clamp(180px, 26cqi, 340px);
    height: auto;
    display: block;
    max-width: 100%;
}

/* Fallback for browsers without container queries */
@supports not (width: 1cqi) {
    #banner .logo-hero {
        width: clamp(180px, 22vw, 340px);
    }
}

/* =========================
   Compact-Lite (safe trim)
   — no size/grid changes
========================= */
/* 1) Section padding (–15% approx) */
#main .inner > section {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
}

/* 2) Section headers */
header.major {
    margin-bottom: 1rem;
}

header.major h2 {
    margin-bottom: 0.35rem;
}

/* 3) Hero spacing only (don’t touch logo or layout) */
#banner {
    padding-top: 1.75rem;
    padding-bottom: 1.25rem;
}

#banner .content header {
    margin-bottom: 0.5rem;
}

#banner .content p {
    margin-bottom: 0.75rem;
}

/* 4) Quick Links grid: reduce row gaps only */
.features {
    row-gap: 1.25rem;
}

/* 5) News/posts: reduce vertical gaps */
.posts {
    row-gap: 1.25rem;
}

.posts article .actions {
    margin-top: 0.75rem;
}

/* 6) Sidebar blocks: stack a bit tighter */
#sidebar .inner section {
    margin-bottom: 1rem;
}

/* 7) Rules between bands */
hr {
    margin: 1rem 0;
}

/* ===== Quick Links — visual tighten only (no grid changes) ===== */
/* A) Reduce vertical spacing between rows */
.features {
    row-gap: 1rem;
}

/* default is roomier */
/* B) Keep icon + text aligned, slightly closer */
.features article {
    align-items: center;
    gap: 0.9rem;
}

/* C) Smaller diamond + lighter stroke + smaller inner glyph */
.features article > .icon {
    width: 5rem;

    /* stock ~6rem */
    height: 5rem;
    line-height: 5rem;
    font-size: 1.15rem;

    /* icon inside */
    border-width: 1.5px;

    /* lighter outline */
}

.features article > .icon:before,
.features article > .icon:after {
    border-width: 1.5px;

    /* match outline weight */
}

/* D) Tighter text stack */
.features article .content h3 {
    margin-bottom: 0.25rem;
}

.features article .content p {
    margin-bottom: 0.35rem;
}

/* Quick Links — remove Editorial's connector lines between items */
.features article:before,
.features article:after {
    content: none !important;

    /* disable grid connectors */
}

/* Keep our mild tighten from earlier (safe values) */
.features {
    row-gap: 1.25rem;
}

/* breathing room so nothing touches */
.features article {
    align-items: center;
    gap: 0.9rem;
}

.features article > .icon {
    width: 5rem;
    height: 5rem;
    line-height: 5rem;
    font-size: 1.15rem;
    border-width: 1.5px;
}

.features article > .icon:before,
.features article > .icon:after {
    border-width: 1.5px;
}

/* --- Quick Links: stop the connector nub and add a hair more row space --- */
/* 1) Editorial draws a small connector on the diamond itself */
.features article > .icon:after {
    content: none !important;

    /* kills the little nub between diamonds */
}

/* (Some theme variants also use :before on the icon) */
.features article > .icon:before {
    /* keep the outline but ensure it isn't acting as a connector */
    transform: rotate(45deg);

    /* normal */
}

/* 2) Give rows just a bit more room so rotated borders never touch */
.features {
    row-gap: 1.6rem !important;
}

/* was ~1.0–1.25rem after our trims */
/* 3) Ensure diamonds don't add extra bottom offset that could collide */
.features article > .icon {
    margin-bottom: 0 !important;
}

/* ===== Quick Links — fix rotated glyphs + clean diamond ===== */
/* 0) Remove Editorial's cross-item connectors/nubs */
.features article:before,
.features article:after,
.features article > .icon:after {
    content: none !important;
}

/* 1) Reset any rotation on the icon glyph itself */
.features article > .icon,
.features article > .icon:before {
    transform: none !important;
}

/* 2) Size the icon (glyph) and build our own diamond border */
.features article > .icon {
    position: relative;
    width: 4.9rem;

    /* adjust 4.7–5.2 to taste */
    height: 4.9rem;
    line-height: 4.9rem;
    font-size: 1.2rem;

    /* glyph size inside */
}

/* Our diamond border (independent of the glyph) */
.features article > .icon::after {
    content: "";
    position: absolute;
    inset: -10px;

    /* diamond size around the icon */
    border: 1.5px solid var(--steel);
    transform: rotate(45deg);
    border-radius: 6px;

    /* softer corners; adjust 0–8px */
    pointer-events: none;
}

/* 3) Ensure comfortable row spacing so diamonds never touch */
.features {
    row-gap: 1.6rem !important;
}

.features article {
    align-items: center;
    gap: 0.9rem;
}

/* ===== Quick Links (scoped): tighten vertical rhythm safely ===== */
section.qlinks {
    padding-top: 1.25rem;

    /* down from the airy default */
    padding-bottom: 1.25rem;
}

section.qlinks header.major {
    margin-bottom: 0.75rem;

    /* bring header closer to grid */
}

section.qlinks .features {
    row-gap: 0.9rem;

    /* tighter rows, keep layout intact */
    column-gap: 1.75rem;

    /* mild horizontal tighten */
    margin-top: 0.5rem;

    /* reduce extra top separation */
    margin-bottom: 0;

    /* reduce extra bottom separation */
}

section.qlinks .features article {
    align-items: center;

    /* keep icon/text aligned */
    gap: 0.75rem;

    /* bring text closer to icon */
}

section.qlinks .features article .content h3 {
    margin-bottom: 0.25rem;

    /* compact title */
}

section.qlinks .features article .content p {
    margin-bottom: 0.35rem;

    /* compact description */
}

/* ===== Quick Links (scoped) — restore 2×2 grid + safe tighten ===== */
/* 1) Restore the grid on desktop, 1-col on small screens */
section.qlinks .features {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 2rem;

    /* space between the two columns */
    row-gap: 1.1rem;

    /* slightly tighter rows */
    margin: 0;

    /* prevent stray margins from pushing things */
}

@media (max-width: 980px){
    section.qlinks .features {
        grid-template-columns: 1fr !important;
    }
}

/* 2) Keep each item’s internal layout tidy (don’t alter the grid) */
section.qlinks .features article {
    align-items: center;
    gap: 2rem;

    /* icon ↔ text */
}

/* 3) Compact the text stack a touch */
section.qlinks .features article .content h3 {
    margin-bottom: 0.25rem;
}

section.qlinks .features article .content p {
    margin-bottom: 0.35rem;
}

#sidebar .inner {
    padding-top: 1.5em !important;
}