/* ==========================================================================
   Base — Reset, Body, Typography, Focus, Admin bar
   ========================================================================== */

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

html {
    background: #fff;
    scroll-behavior: smooth;
    /* Anchors (#kaha6-reviews etc.) land below the sticky header. */
    scroll-padding-top: calc(var(--kaha6-header-h) + 16px);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    /* The closed off-canvas menu sits 320px off the right edge; without this
       mobile browsers widen the layout viewport to include it and render
       the whole site zoomed out. Only body carries it so sticky still works. */
    overflow-x: hidden;
    font-family: var(--kaha6-font);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--kaha6-text);
    background: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.5rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--kaha6-text);
}

h1 { font-size: clamp(1.75rem, 1.25rem + 1.8vw, 2.5rem); }
h2 { font-size: clamp(1.375rem, 1.05rem + 1.2vw, 1.875rem); }
h3 { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); }
h4 { font-size: 1.0625rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.9rem; }

p {
    margin: 0 0 1rem;
}

small,
.small {
    font-size: 0.875em;
}

.text-muted {
    color: var(--kaha6-text-muted) !important;
}

/* ---------- Links ---------- */
a {
    color: var(--kaha6-primary);
    text-decoration: none;
    transition: color var(--kaha6-transition), background-color var(--kaha6-transition), border-color var(--kaha6-transition);
}

a:hover {
    color: var(--kaha6-primary-hover);
    text-decoration: none;
}

/* Only long-form content gets underlined links. */
.entry-content a,
.kaha6-prose a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---------- Focus (keyboard users) ---------- */
:focus-visible {
    outline: 3px solid rgba(var(--kaha6-primary-rgb), 0.35);
    outline-offset: 2px;
}

/* ---------- Media ---------- */
img,
svg,
video,
iframe {
    max-width: 100%;
}

img {
    height: auto;
}

/* ---------- Selection ---------- */
::selection {
    background: var(--kaha6-primary);
    color: #fff;
}

/* ---------- Lists ---------- */
ul, ol {
    padding-left: 1.25rem;
}

/* ---------- Misc ---------- */
hr {
    border: 0;
    border-top: 1px solid var(--kaha6-border);
    opacity: 1;
}

/* ---------- WordPress admin bar ---------- */
body.admin-bar .kaha6-navbar {
    top: 32px;
}

@media (max-width: 782px) {
    body.admin-bar .kaha6-navbar {
        top: 46px;
    }
}