/* ============================================================================
   THEME — country store, Karns palette      proofing preview, 2026-09-10
   ----------------------------------------------------------------------------
   The design system from the style study: warm neutral grounds, a slab display
   face, generous radii, pill buttons. Karns blue and red do the brand work.

   The "bark" brown from the study is GONE. It had two jobs there — footer ground
   and body text. Karns red takes the footer; body text uses a neutral dark,
   because red text is not legible at body size.

   Linked from inc/header-nav.php, which header.php includes on every page, so it
   applies site-wide without touching inc/topscripts.php (CIPA-preserved).

   !important appears below only where custom.css already uses it — it sets
   body{font-family:'Roboto'!important} and h1..h6{font-family:'Oswald'!important},
   which cannot be overridden by cascade order alone.
   ========================================================================== */

:root {
    /* Karns brand — unchanged */
    --k-blue: #114a96;
    --k-blue-deep: #0d3a75;
    --k-blue-tint: #e7eefa;
    --k-red: #ad1f34;
    --k-red-deep: #8f1a2b;
    --k-red-tint: #fbeef0;

    /* warm grounds */
    --k-cream: #faf5ea;
    --k-oat: #f0e7d6;
    --k-oat-2: #e6dac3;

    /* ink — neutral dark, deliberately not brown */
    --k-ink: #2a2724;
    --k-ink-2: #5f5952;
    --k-ink-3: #8b847b;
    --k-rule: #e2d9c8;

    /* accent */
    --k-gold: #c98a2b;
    --k-gold-tint: #f7ecd6;

    --k-radius: 18px;
    --k-radius-sm: 12px;
    --k-shadow: 0 2px 8px rgba(42, 39, 36, .09);
    --k-lift: 0 6px 18px rgba(42, 39, 36, .13);

    --k-slab: "Zilla Slab", Georgia, "Times New Roman", serif;
    --k-sans: "Karla", "Roboto", system-ui, -apple-system, sans-serif;
}

/* ---------- ground and type ---------- */
body {
    background-color: var(--k-cream);
    font-family: var(--k-sans) !important;
    color: var(--k-ink);
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--k-slab) !important;
    letter-spacing: -.012em;
    color: var(--k-ink);
}
p { font-weight: 400; }

/* the homepage's white panel becomes transparent so the cream reads through and
   sections define their own bands */
.container.white-bkg { background-color: transparent; }

/* ---------- buttons ---------- */
/* Restyling Bootstrap's own classes rather than adding a parallel kit, so every
   existing button on the site becomes a pill with no markup change. */
.btn {
    border-radius: 999px;
    font-family: var(--k-sans);
    font-weight: 700;
    letter-spacing: .01em;
    padding: 11px 24px;
    border-width: 2px;
    line-height: 1.2;
    transition: background-color .15s, border-color .15s, color .15s;
}
.btn-sm, .btn-xs { padding: 8px 17px; font-size: 12.5px; }
.btn-lg { padding: 14px 32px; font-size: 17px; }

.btn-primary { background-color: var(--k-blue); border-color: var(--k-blue); color: #fff; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--k-blue-deep); border-color: var(--k-blue-deep); color: #fff;
}
.btn-danger { background-color: var(--k-red); border-color: var(--k-red); color: #fff; }
.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
    background-color: var(--k-red-deep); border-color: var(--k-red-deep); color: #fff;
}
.btn-default {
    background-color: transparent; border-color: var(--k-blue); color: var(--k-blue);
}
.btn-default:hover, .btn-default:focus, .btn-default:active {
    background-color: var(--k-blue-tint); border-color: var(--k-blue); color: var(--k-blue-deep);
}
.btn-warning { background-color: var(--k-gold); border-color: var(--k-gold); color: #2a2724; }
.btn-warning:hover, .btn-warning:focus { background-color: #b2781f; border-color: #b2781f; color: #2a2724; }
.btn-success { background-color: var(--k-blue); border-color: var(--k-blue); color: #fff; }
.btn-success:hover, .btn-success:focus { background-color: var(--k-blue-deep); border-color: var(--k-blue-deep); color: #fff; }

.btn:focus-visible { outline: 3px solid var(--k-blue-deep); outline-offset: 2px; }

/* ---------- shared section shell ---------- */
/* .k-band breaks out of the centred .container to run a colour edge to edge;
   .k-band-in puts the content back on the page measure. */
.k-band {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 46px 0;
}
.k-band-in { max-width: var(--page-max, 1320px); margin: 0 auto; padding: 0 22px; }
.k-band--cream { background: var(--k-cream); }
.k-band--oat   { background: var(--k-oat); }
.k-band--white { background: #fff; }
.k-band--blue  { background: var(--k-blue); color: #fff; }
.k-band--blue h1, .k-band--blue h2, .k-band--blue h3 { color: #fff; }

.k-eyebrow {
    font-family: var(--k-sans);
    font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: var(--k-gold); margin: 0 0 12px;
}

/* ---------- cards, the shared shape ---------- */
.k-card {
    background: #fff;
    border: 1px solid #eee3d0;
    border-radius: var(--k-radius);
    box-shadow: var(--k-shadow);
    overflow: hidden;
}

@media (max-width: 767px) {
    .k-band { padding: 32px 0; }
    .k-band-in { padding: 0 14px; }
    .btn { padding: 10px 20px; }
}

/* ---------- homepage bands ---------- */
/* Store hours: was an image of text, now real type on the blue band. */
.kh-hours { padding: 15px 0; }
.kh-hours-line {
    margin: 0;
    text-align: center;
    font-family: var(--k-slab);
    font-size: clamp(18px, 2.3vw, 26px);
    font-weight: 500;
    line-height: 1.25;
    color: #fff;
}
.kh-hours-line strong { font-weight: 700; }

/* Slideshow runs edge to edge. Same break-out as the Top 10 band. */
.kh-slider {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: #fff;
}
.kh-slider-in { position: relative; }
.kh-slider .carousel-inner img { width: 100%; height: auto; display: block; }
.kh-slider .carousel-titles { max-width: var(--page-max, 1320px); margin: 0 auto; padding: 0 22px; }

@media (max-width: 767px) {
    .kh-hours { padding: 11px 0; }
}

/* ---------- weekly ad promo ---------- */
.kw-ad { padding: 44px 0; }
.kw-ad-in {
    display: flex;
    align-items: center;
    gap: 40px;
}
/* decorative: the copy beside it carries the same link, so the cover is
   aria-hidden with an empty alt rather than repeating the destination */
.kw-ad-cover {
    flex: none;
    width: 220px;
    display: block;
    border-radius: var(--k-radius-sm);
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(42, 39, 36, .22);
    border: 1px solid var(--k-rule);
    background: #fff;
    transition: transform .18s ease, box-shadow .18s ease;
}
.kw-ad-cover:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(42, 39, 36, .28); }
.kw-ad-cover img { display: block; width: 100%; height: auto; }

.kw-ad-copy { flex: 1 1 auto; min-width: 0; }
.kw-ad-title {
    font-family: var(--k-slab) !important;
    font-size: clamp(26px, 3.4vw, 40px);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -.015em;
    margin: 0 0 12px;
    color: var(--k-ink);
}
.kw-ad-title em { font-style: italic; color: var(--k-blue); }
.kw-ad-sub {
    font-size: 16px;
    color: var(--k-ink-2);
    max-width: 52ch;
    margin: 0 0 22px;
}
.kw-ad-btns { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 767px) {
    .kw-ad { padding: 30px 0; }
    .kw-ad-in { flex-direction: column; align-items: flex-start; gap: 22px; }
    .kw-ad-cover { width: 150px; align-self: center; }
    .kw-ad-sub { font-size: 15px; margin-bottom: 18px; }
    .kw-ad-btns .btn { width: 100%; }
}