/*
 * URBA Sports — design layer.
 *
 * Tailwind ships from the CDN without the typography plugin, so the `prose`
 * classes the content used to carry resolved to nothing: every heading inside
 * imported WordPress content rendered at body size. This file supplies the
 * content typography and the shared chrome, and is loaded after Tailwind so
 * it wins on the few utilities it overlaps.
 */

:root {
    /* Brand greens, taken from the logo. */
    --brand-50:  #f4fbe8;
    --brand-100: #e6f6ca;
    --brand-300: #b6e05c;
    --brand-500: #7cb518;
    --brand-600: #67a20f;
    --brand-700: #4f7d0c;
    --brand-900: #2c4707;

    --ink-900: #10151b;
    --ink-700: #2c3540;
    --ink-500: #5b6773;
    --ink-300: #9aa5b1;
    --line:    #e6e9ed;
    --surface: #ffffff;
    --canvas:  #f7f9fa;

    --radius:    14px;
    --radius-sm: 10px;

    --shadow-sm: 0 1px 2px rgba(16, 21, 27, .05), 0 1px 3px rgba(16, 21, 27, .04);
    --shadow-md: 0 4px 12px rgba(16, 21, 27, .07), 0 2px 4px rgba(16, 21, 27, .04);
    --shadow-lg: 0 12px 32px rgba(16, 21, 27, .10), 0 4px 8px rgba(16, 21, 27, .04);

    --ease: cubic-bezier(.22, .61, .36, 1);
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--canvas);
    color: var(--ink-700);
    font-feature-settings: "kern", "liga";
    text-rendering: optimizeLegibility;
}

::selection {
    background: var(--brand-100);
    color: var(--brand-900);
}

:where(a, button, input, select, textarea):focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ------------------------------------------------------------------ */
/* Page chrome                                                         */
/* ------------------------------------------------------------------ */

.site-header {
    background: rgba(255, 255, 255, .85);
    backdrop-filter: saturate(1.6) blur(10px);
    border-bottom: 1px solid var(--line);
}

.site-nav-link {
    position: relative;
    color: var(--ink-700);
    font-weight: 600;
    font-size: .9rem;
    letter-spacing: .01em;
    padding: .35rem 0;
    transition: color .18s var(--ease);
    white-space: nowrap;
}

.site-nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    border-radius: 2px;
    background: var(--brand-500);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s var(--ease);
}

.site-nav-link:hover,
.site-nav-link[aria-current="page"] {
    color: var(--brand-700);
}

.site-nav-link:hover::after,
.site-nav-link[aria-current="page"]::after {
    transform: scaleX(1);
}

.page-title {
    font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem);
    line-height: 1.1;
    letter-spacing: -.022em;
    font-weight: 800;
    color: var(--ink-900);
}

.page-lede {
    margin-top: .6rem;
    font-size: 1.06rem;
    line-height: 1.65;
    color: var(--ink-500);
    max-width: 62ch;
}

/* ------------------------------------------------------------------ */
/* Imported WordPress content                                          */
/* ------------------------------------------------------------------ */

.wp-content {
    color: var(--ink-700);
    font-size: 1.02rem;
    line-height: 1.75;
}

.wp-content > * + * {
    margin-top: 1.1em;
}

.wp-content h1,
.wp-content h2,
.wp-content h3,
.wp-content h4,
.wp-content h5,
.wp-content h6 {
    color: var(--ink-900);
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.25;
    margin-top: 2em;
    margin-bottom: .6em;
    text-wrap: balance;
}

.wp-content h1 { font-size: 1.95rem; }
.wp-content h2 { font-size: 1.6rem; }
.wp-content h3 { font-size: 1.3rem; }
.wp-content h4 { font-size: 1.12rem; }
.wp-content h5 { font-size: 1.05rem; font-weight: 600; }
.wp-content h6 { font-size: .98rem; font-weight: 600; }

.wp-content :is(h1, h2, h3, h4, h5, h6):first-child {
    margin-top: 0;
}

/* Centred lead paragraphs the editor wrote as headings. */
.wp-content h5[style*="center"] {
    color: var(--ink-500);
    font-weight: 500;
    font-size: 1.06rem;
    line-height: 1.7;
    letter-spacing: 0;
    max-width: 78ch;
    margin-inline: auto;
}

.wp-content p {
    margin-block: 1.05em;
    max-width: 74ch;
}

.wp-content strong { color: var(--ink-900); font-weight: 650; }

.wp-content a:not([class]) {
    color: var(--brand-700);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--brand-300);
    text-underline-offset: 3px;
    transition: color .16s var(--ease), text-decoration-color .16s var(--ease);
}

.wp-content a:not([class]):hover {
    color: var(--brand-900);
    text-decoration-color: var(--brand-500);
}

.wp-content :is(ul, ol) {
    margin-block: 1.05em;
    padding-left: 0;
    list-style: none;
}

.wp-content li {
    position: relative;
    padding-left: 1.6rem;
    margin-block: .5em;
    max-width: 74ch;
}

.wp-content ul > li::before {
    content: "";
    position: absolute;
    left: .3rem;
    top: .72em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand-500);
}

.wp-content ol {
    counter-reset: wp-ol;
}

.wp-content ol > li {
    counter-increment: wp-ol;
}

.wp-content ol > li::before {
    content: counter(wp-ol) ".";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
    font-size: .9em;
    color: var(--brand-700);
}

.wp-content hr {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line) 15%, var(--line) 85%, transparent);
    margin-block: 2.4em;
}

.wp-content :is(img, video, iframe) {
    border-radius: var(--radius-sm);
}

.wp-content figure { margin-block: 1.4em; }

/* ------------------------------------------------------------------ */
/* Section heading used by the converted woodmart_title blocks         */
/* ------------------------------------------------------------------ */

.section-title {
    position: relative;
    display: block;
    color: var(--ink-900);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    font-size: clamp(1.35rem, 1.1rem + .9vw, 1.85rem);
    margin-top: 2.4rem;
    margin-bottom: 1.4rem;
    padding-bottom: .7rem;
    text-wrap: balance;
}

.section-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--brand-500), var(--brand-300));
}

.wp-content > .section-title:first-child { margin-top: 0; }

/* ------------------------------------------------------------------ */
/* Shared surfaces                                                     */
/* ------------------------------------------------------------------ */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow .24s var(--ease), transform .24s var(--ease), border-color .24s var(--ease);
}

.card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--brand-300);
    transform: translateY(-3px);
}

.card-media {
    overflow: hidden;
    background: var(--canvas);
}

.card-media img {
    transition: transform .5s var(--ease);
}

.card:hover .card-media img { transform: scale(1.05); }

/* A tile that must not lift, used for logo grids. */
.tile {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.tile:hover {
    border-color: var(--brand-300);
    box-shadow: var(--shadow-md);
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: var(--brand-600);
    color: #fff;
    font-weight: 650;
    border-radius: 999px;
    padding: .7rem 1.6rem;
    box-shadow: var(--shadow-sm);
    transition: background .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}

.btn-primary:hover {
    background: var(--brand-700);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.btn-primary:active { transform: translateY(0); }

.field {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .68rem .9rem;
    color: var(--ink-900);
    transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}

.field:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px var(--brand-100);
}

.field::placeholder { color: var(--ink-300); }

/* ------------------------------------------------------------------ */
/* Motion                                                              */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }

    .card:hover { transform: none; }
    .card:hover .card-media img { transform: none; }
}