/**
 * Kind Recards — Base & Layout primitives
 * ----------------------------------------------------------------------------
 * A light, opinionated reset followed by the structural primitives every
 * template relies on: .kr-container, .kr-section and the section colour tints.
 */

/* ---- Reset ------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background-color: var(--kr-bg);
    color: var(--kr-text-body);
    overflow-x: hidden;
}

img,
picture,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
    display: block;
}

ul,
ol {
    margin: 0 0 var(--kr-space-4);
    padding-left: var(--kr-space-5);
}

figure {
    margin: 0;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

/* Tint native checkboxes / radios / range to the brand pink. */
input,
textarea,
select {
    accent-color: var(--kr-control-accent);
}

button {
    cursor: pointer;
    background: none;
    border: none;
}

hr {
    border: none;
    border-top: 1px solid var(--kr-border);
    margin: var(--kr-space-6) 0;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--kr-space-5);
}

th,
td {
    padding: var(--kr-space-3);
    border-bottom: 1px solid var(--kr-border);
    text-align: left;
}

blockquote {
    margin: 0 0 var(--kr-space-5);
    padding: var(--kr-space-4) var(--kr-space-5);
    border-left: 4px solid var(--kr-accent);
    background: var(--kr-section-pink);
    border-radius: var(--kr-radius-md);
    font-style: italic;
}

code,
pre,
kbd {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.9em;
}

/* ---- Selection & focus ------------------------------------------------- */
::selection {
    background: var(--kr-accent);
    color: var(--kr-color-white);
}

:focus-visible {
    outline: 3px solid var(--kr-focus-ring);
    outline-offset: 2px;
    border-radius: var(--kr-radius-sm);
}

/* ---- Accessibility helpers -------------------------------------------- */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    position: absolute !important;
    word-wrap: normal !important;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: var(--kr-z-toast);
}

.skip-link:focus {
    left: var(--kr-space-4);
    top: var(--kr-space-4);
    padding: var(--kr-space-2) var(--kr-space-4);
    background: var(--kr-primary);
    color: var(--kr-primary-contrast);
    border-radius: var(--kr-radius-pill);
}

/* ---- Layout primitives ------------------------------------------------- */
.kr-container,
.container {
    width: var(--kr-container-width); /* 85% — gutters are proportional */
    max-width: var(--kr-container-max); /* capped at the 1600px frame */
    margin-inline: auto;
}

.kr-container--narrow {
    max-width: var(--kr-container-narrow);
}

.kr-container--wide {
    max-width: var(--kr-container-wide);
}

/* Full-bleed coloured bands, the core rhythm of the home page. */
.kr-section {
    padding-block: var(--kr-section-gap);
}

.kr-section--cream {
    /* Same tone as the page itself (body uses --kr-bg = --kr-color-cream), so
       stay transparent and let that single body cream show through — avoids a
       double-painted, subtly-mismatched cream band. */
    background: transparent;
}
.kr-section--peach {
    background: var(--kr-section-peach);
}
.kr-section--pink {
    background: var(--kr-section-pink);
}
.kr-section--cyan {
    background: var(--kr-section-cyan);
}
.kr-section--mint {
    background: var(--kr-section-mint);
}
.kr-section--navy {
    background: var(--kr-primary);
    color: var(--kr-text-on-dark);
}
.kr-section--navy :is(h1, h2, h3, h4, h5, h6) {
    color: var(--kr-text-on-dark);
}

/* Coloured bands get generous top/bottom padding so the colour frames the
   content; cream / default sections keep the lighter base rhythm. */
.kr-section--peach,
.kr-section--pink,
.kr-section--cyan,
.kr-section--mint,
.kr-section--navy {
    padding-block: clamp(3rem, 5vw, 6rem);
}

/* Simple, responsive auto grid for card collections. */
.kr-grid {
    display: grid;
    gap: var(--kr-space-5);
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* 12-column grid matching the design system. Place children with
   grid-column: span N (1–12); collapses to a single column on small screens. */
.kr-grid-12 {
    display: grid;
    grid-template-columns: repeat(var(--kr-columns), 1fr);
    gap: var(--kr-space-5);
}

@media (max-width: 760px) {
    .kr-grid-12 {
        grid-template-columns: 1fr;
    }
}

.kr-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kr-space-3);
    align-items: center;
}

.kr-stack > * + * {
    margin-top: var(--kr-space-4);
}

.kr-center-text {
    text-align: center;
}