/* ============================================================
   theme.css — design polish layer (loaded after style.css and
   responsive.css, before page CSS). Tokens + refinements only;
   page layout lives in style.css and css/pages/*.css.
   ============================================================ */

:root {
    --shadow_xs: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow_sm: 0 2px 8px rgba(15, 23, 42, 0.07);
    --shadow_md: 0 8px 24px rgba(15, 23, 42, 0.10);
    --shadow_lg: 0 18px 40px rgba(26, 43, 86, 0.16);
    --ease_out: cubic-bezier(0.22, 1, 0.36, 1);
    --focus_ring: 0 0 0 3px rgba(243, 110, 28, 0.45);
}

/* ── Base ─────────────────────────────────────────────────── */
html { scroll-padding-top: 90px; }

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }

::selection { background: var(--hover_color); color: #fff; }

/* Visible, consistent keyboard focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--focus_ring);
    border-radius: 4px;
}

/* ── Header ───────────────────────────────────────────────── */
.main-header {
    transition: box-shadow 0.3s var(--ease_out), background-color 0.3s var(--ease_out);
}
.main-header.sticky-header { box-shadow: var(--shadow_md); }

/* ── Section headings ─────────────────────────────────────── */
.section-title { letter-spacing: 0.01em; }

/* ── Cards ────────────────────────────────────────────────── */
.card-item,
.we-do-item {
    border-radius: var(--round_md);
    box-shadow: var(--shadow_sm);
    transition: transform 0.35s var(--ease_out), box-shadow 0.35s var(--ease_out);
    will-change: transform;
}
.card-item:hover,
.we-do-item:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow_lg);
}
.card-item img { transition: transform 0.6s var(--ease_out); }
.card-item:hover img { transform: scale(1.04); }
.card-item .img { overflow: hidden; border-radius: var(--round_md) var(--round_md) 0 0; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn-outline,
.slider-nav-btn,
.btn-membership {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease,
                transform 0.25s var(--ease_out), box-shadow 0.25s ease;
}
.btn-outline:hover,
.slider-nav-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow_sm); }
.btn-outline:active,
.slider-nav-btn:active { transform: translateY(0); box-shadow: none; }

/* ── Content pages ────────────────────────────────────────── */
main table { border-collapse: collapse; max-width: 100%; }
main .table-responsive,
main .content table { display: block; overflow-x: auto; }
main p, main li { line-height: 1.7; }

/* ── Footer (base rules live in layout.css) ────────────────── */
.main-footer ul.list-unstyled a {
    transition: color 0.2s ease, padding-left 0.2s var(--ease_out);
}
.main-footer ul.list-unstyled a:hover { padding-left: 3px; }

/* ── Motion preferences ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}