/* =========================================================
   KIMBER DAYS PAGE
   Scoped to #kimber-days so it doesn't wreck Bootstrap 3 header/footer
   Look follows the designer's 2026 Kimber Days flyer:
   brushed gray (dark top, light bottom), bronze/brown, heavy wide type.
========================================================= */
#kimber-days {
    /* Colors sampled from the flyer - swap for the designer's hex values if provided */
    --kd-brown: #5b3b22;          /* "NOVEMBER 20TH - 21ST" / "MEET THE KIMBER REP" */
    --kd-brown-dark: #3e2716;
    --kd-bronze: #b47a45;         /* scope ring / gun slide */
    --kd-bronze-light: #d9a571;
    --kd-red: #b51f24;            /* Kimber red for the range event box (kimberamerica.com uses #7c2629) */
    --kd-ink: #232323;
    --kd-text-soft: #3a3a3a;
    --kd-text-muted: #6a6a6a;
    --kd-rule: rgba(0,0,0,0.18);
    --kd-display: 'Krona One', 'Arial Black', Arial, Helvetica, sans-serif;
    --kd-body: 'Barlow', Arial, Helvetica, sans-serif;
    background: #f2f2f2;
    color: var(--kd-ink);
    font-family: var(--kd-body);
    overflow: hidden;
}
#kimber-days * { box-sizing: border-box; }

#kimber-days .kd-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
#kimber-days .kd-section { padding: 50px 0; }

/* ---------- HERO ----------
   Brushed-metal gray like the designer backgrounds: dark at the top,
   fading to near-white behind the dates and copy.
-------------------------------- */
#kimber-days .kd-hero {
    position: relative;
    padding: 30px 0 46px;
    text-align: center;
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 4px),
        linear-gradient(180deg, #4e5052 0%, #8d8f91 28%, #d6d6d6 52%, #f2f2f2 70%, #f2f2f2 100%);
}
#kimber-days .kd-hero-logo {
    margin: 0;
    line-height: 0;
}
#kimber-days .kd-logo {
    display: inline-block;
    width: 100%;
    max-width: 1000px;
    height: auto;
}
#kimber-days .kd-hero-dates {
    margin-top: 30px;       /* evens out the space between the logo art and the dates */
    font-family: var(--kd-display);
    font-size: 46px;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--kd-brown);
}
#kimber-days .kd-hero-dates sup {
    font-size: .5em;
    vertical-align: super;
    line-height: 0;
}
#kimber-days .kd-intro {
    max-width: 860px;
    margin: 18px auto 0;
    font-size: 22px;
    line-height: 1.45;
    color: var(--kd-text-soft);
}
/* Range event under the intro - white on a Kimber Red box so it stands out.
   Kept on one line (font steps down by screen size); phones are too narrow, so it wraps there. */
#kimber-days .kd-intro-range {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 18px auto 0;
    white-space: nowrap;
    padding: 14px 26px;
    background: var(--kd-red);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.35;
    color: #fff;
    box-shadow: 0 10px 22px rgba(0,0,0,0.2);
}
#kimber-days .kd-intro-range sup { font-size: .6em; }
#kimber-days .kd-hero-action { margin-top: 28px; }
#kimber-days .kd-hero-action .kd-btn {
    margin: 0;
    padding: 20px 48px;
    font-size: 17px;
}
#kimber-days .kd-hero-note {
    margin: 12px 0 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--kd-text-muted);
}

/* ---------- COUNTDOWN (before kdReveal) ---------- */
#kimber-days .kd-teaser-eyebrow {
    margin: 26px 0 12px;
    font-family: var(--kd-display);
    font-size: 15px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--kd-ink);
}
#kimber-days .kd-countdown {
    display: flex;
    justify-content: center;
    gap: 12px;
}
#kimber-days .kd-countdown-unit {
    min-width: 108px;
    padding: 14px 10px 12px;
    background: linear-gradient(180deg, #2c2c2c 0%, #151515 100%);
    border-bottom: 4px solid var(--kd-bronze);
    color: #fff;
    box-shadow: 0 10px 22px rgba(0,0,0,0.25);
}
#kimber-days .kd-countdown-num {
    display: block;
    font-family: var(--kd-display);
    font-size: 44px;
    line-height: 1;
    font-variant-numeric: tabular-nums;   /* digits don't jiggle as they change */
}
#kimber-days .kd-countdown-label {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--kd-bronze-light);
}

/* ---------- BUTTONS ---------- */
#kimber-days .kd-btn-row { margin-top: 24px; }
#kimber-days .kd-btn {
    display: inline-block;
    margin: 0 6px 12px;
    padding: 12px 24px;
    border: 2px solid transparent;
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-family: var(--kd-display);
    font-size: 13px;
    line-height: 1.2;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
#kimber-days .kd-btn-lg { padding: 14px 30px; font-size: 14px; }
#kimber-days .kd-btn-primary {
    background: linear-gradient(180deg, #6e4729 0%, var(--kd-brown-dark) 100%);
    border-color: var(--kd-brown-dark);
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(62,39,22,0.3);
}
#kimber-days .kd-btn-primary:hover,
#kimber-days .kd-btn-primary:focus-visible {
    background: var(--kd-ink);
    border-color: var(--kd-ink);
}
#kimber-days .kd-btn-light {
    background: #fff;
    border-color: #fff;
    color: var(--kd-brown) !important;
}
#kimber-days .kd-btn-light:hover,
#kimber-days .kd-btn-light:focus-visible {
    background: transparent;
    color: #fff !important;
}

/* ---------- MEET THE KIMBER REP (after kdReveal) ----------
   Like the flyer: brown heading, two days side by side with a thin divider
-------------------------------- */
#kimber-days .kd-reps-section {
    background: #f2f2f2;
    border-top: 1px solid var(--kd-rule);
    text-align: center;
}
#kimber-days .kd-heading {
    margin: 0 0 26px;
    font-family: var(--kd-display);
    font-size: 34px;
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--kd-brown);
}
#kimber-days .kd-reps-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
#kimber-days .kd-rep-card {
    flex: 0 1 420px;
    padding: 4px 30px;
}
#kimber-days .kd-rep-card + .kd-rep-card { border-left: 1px solid var(--kd-rule); }
#kimber-days .kd-rep-day {
    font-size: 26px;
    font-weight: 600;
    color: var(--kd-ink);
}
#kimber-days .kd-rep-store { padding-top: 4px; }
#kimber-days .kd-rep-store + .kd-rep-store { margin-top: 14px; }
#kimber-days .kd-rep-store-time {
    display: block;
    font-family: var(--kd-display);
    font-size: 24px;
    line-height: 1.3;
    color: var(--kd-brown);
}
#kimber-days .kd-rep-store-name {
    display: block;
    margin-top: 4px;
    font-size: 19px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--kd-ink);
}
#kimber-days .kd-rep-store-address {
    display: block;
    font-size: 17px;
    color: var(--kd-text-soft);
}

/* ---------- BROWN BAND (like the flyer's "Scan the QR code" band) ---------- */
#kimber-days .kd-cta-band {
    padding: 44px 0;
    text-align: center;
    color: #fff;
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 4px),
        radial-gradient(ellipse at center, #7a4e2c 0%, var(--kd-brown) 55%, var(--kd-brown-dark) 100%);
}
#kimber-days .kd-cta-heading {
    margin: 0;
    font-family: var(--kd-display);
    font-size: 32px;
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
    color: #fff;
}
#kimber-days .kd-cta-copy {
    margin: 10px 0 0;
    font-size: 21px;
    font-weight: 600;
    color: #fff;
}
#kimber-days .kd-cta-band .kd-btn { margin: 0; }

/* ---------- FINE PRINT ---------- */
#kimber-days .kd-legal {
    padding: 18px 0 24px;
    background: var(--kd-brown-dark);
    text-align: center;
    font-size: 13px;
    font-style: italic;
    line-height: 1.5;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
}
#kimber-days .kd-legal p { margin: 0; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1199px) {
    #kimber-days .kd-intro-range    { font-size: 22px; }
}
@media (max-width: 991px) {
    #kimber-days .kd-hero-dates     { font-size: 36px; }
    #kimber-days .kd-intro          { font-size: 19px; }
    #kimber-days .kd-intro-range    { padding: 12px 20px; font-size: 17px; }
    #kimber-days .kd-heading        { font-size: 28px; }
    #kimber-days .kd-rep-day        { font-size: 22px; }
    #kimber-days .kd-rep-store-time { font-size: 20px; }
}
@media (max-width: 767px) {
    #kimber-days .kd-hero           { padding: 20px 0 36px; }
    #kimber-days .kd-hero-dates     { margin-top: 18px; font-size: 22px; }
    #kimber-days .kd-intro          { font-size: 17px; }
    #kimber-days .kd-intro-range    { padding: 12px 14px; font-size: 19px; white-space: normal; text-wrap: balance; }
    #kimber-days .kd-hero-action .kd-btn { display: block; width: 100%; padding: 16px 18px; font-size: 14px; }
    #kimber-days .kd-btn            { display: block; margin: 0 0 12px; text-align: center; }
    #kimber-days .kd-countdown      { gap: 8px; }
    #kimber-days .kd-countdown-unit { min-width: 0; flex: 1 1 0; padding: 10px 4px 8px; }
    #kimber-days .kd-countdown-num  { font-size: 26px; }
    #kimber-days .kd-countdown-label { font-size: 10px; letter-spacing: .1em; }
    #kimber-days .kd-section        { padding: 38px 0; }
    #kimber-days .kd-heading        { font-size: 21px; }
    /* stack the two days, divider goes horizontal */
    #kimber-days .kd-rep-card       { flex-basis: 100%; padding: 0 0 18px; }
    #kimber-days .kd-rep-card + .kd-rep-card { border-left: 0; border-top: 1px solid var(--kd-rule); padding-top: 18px; }
    #kimber-days .kd-cta-heading    { font-size: 21px; }
    #kimber-days .kd-cta-copy       { font-size: 17px; }
}