/**
 * Builder V8 — Franken UI Component Overrides
 * Customises uk-* component defaults to use CSS custom property tokens.
 * Also defines v8-specific button and card styles.
 * Satisfies AC4, AC16, AC17.
 */

/* ---- Buttons ---- */
.uk-button-primary,
.v8-btn-primary {
    background-color: var(--color-primary, #2563eb);
    color: var(--color-text-on-dark, #ffffff);
    border-color: var(--color-primary, #2563eb);
    border-radius: var(--radius-md, 8px);
    font-family: var(--font-body, sans-serif);
    font-weight: 600;
    padding: 0.75rem 1.75rem;
    font-size: var(--text-base, 1rem);
    transition: background-color var(--transition-fast, 150ms ease),
                transform var(--transition-fast, 150ms ease),
                box-shadow var(--transition-fast, 150ms ease);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    border: 2px solid transparent;
}

.uk-button-primary:hover,
.v8-btn-primary:hover {
    background-color: var(--color-secondary, #1e40af);
    border-color: var(--color-secondary, #1e40af);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
    text-decoration: none;
    color: var(--color-text-on-dark, #ffffff);
}

/*
 * WP-024 (WP-020 regression) — vendor uikit-utilities.css ships a
 * higher-specificity rule that paints `.uk-button-primary` WHITE with grey
 * text whenever it sits inside a `.uk-section-secondary` / `.uk-tile-primary`
 * / `.uk-tile-secondary` (the (0,3,0) `:not(.uk-preserve-color)` descendant
 * selectors). Generator-emitted CTAs inside dark/secondary sections fell back
 * to that white-on-grey, losing the brand primary (the gold-CTA-on-dark the
 * anchor intends). We re-assert the brand primary with the SAME selector list
 * (matching (0,3,0) specificity) loaded AFTER the vendor file (components.css
 * is last in the link list), so source-order wins without `!important`.
 * Q2: the CTA stays `--color-primary` on dark; on-dark legibility is carried
 * by `--color-text-on-dark`.
 */
.uk-section-secondary:not(.uk-preserve-color) .uk-button-primary,
.uk-tile-primary:not(.uk-preserve-color) .uk-button-primary,
.uk-tile-secondary:not(.uk-preserve-color) .uk-button-primary {
    background-color: var(--color-primary, #2563eb);
    color: var(--color-text-on-dark, #ffffff);
    border-color: var(--color-primary, #2563eb);
}

.uk-section-secondary:not(.uk-preserve-color) .uk-button-primary:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-primary:active,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-primary.uk-active,
.uk-tile-primary:not(.uk-preserve-color) .uk-button-primary:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-button-primary:active,
.uk-tile-primary:not(.uk-preserve-color) .uk-button-primary.uk-active,
.uk-tile-secondary:not(.uk-preserve-color) .uk-button-primary:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-button-primary:active,
.uk-tile-secondary:not(.uk-preserve-color) .uk-button-primary.uk-active {
    background-color: var(--color-secondary, #1e40af);
    color: var(--color-text-on-dark, #ffffff);
    border-color: var(--color-secondary, #1e40af);
}

.uk-button-default,
.v8-btn-secondary {
    background-color: transparent;
    color: var(--color-primary, #2563eb);
    border: 2px solid var(--color-primary, #2563eb);
    border-radius: var(--radius-md, 8px);
    font-family: var(--font-body, sans-serif);
    font-weight: 600;
    padding: 0.75rem 1.75rem;
    font-size: var(--text-base, 1rem);
    transition: all var(--transition-fast, 150ms ease);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.uk-button-default:hover,
.v8-btn-secondary:hover {
    background-color: var(--color-primary, #2563eb);
    color: var(--color-text-on-dark, #ffffff);
    text-decoration: none;
}

/* Ghost button for dark backgrounds */
.v8-btn-ghost {
    background-color: transparent;
    color: var(--color-text-on-dark, #ffffff);
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: var(--radius-md, 8px);
    font-weight: 600;
    padding: 0.75rem 1.75rem;
    font-size: var(--text-base, 1rem);
    transition: all var(--transition-fast, 150ms ease);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.v8-btn-ghost:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 1);
    text-decoration: none;
    color: #ffffff;
}

/* ---- Cards ---- */
.uk-card,
.v8-card {
    background: var(--color-bg-white, #ffffff);
    border-radius: var(--radius-lg, 16px);
    border: 1px solid var(--border-color, #e2e8f0);
    overflow: hidden;
    transition: box-shadow var(--transition-base, 250ms ease),
                transform var(--transition-base, 250ms ease);
}

.uk-card:hover,
.v8-card:hover {
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
    transform: translateY(-2px);
}

.uk-card-body,
.v8-card__body {
    padding: var(--space-8, 2rem);
}

.uk-card-title,
.v8-card__title {
    font-family: var(--font-heading, sans-serif);
    font-size: var(--text-xl, 1.25rem);
    font-weight: 600;
    color: var(--color-text-primary, #0f172a);
    margin-bottom: var(--space-3, 0.75rem);
}

/* ---- Sections ---- */
.uk-section {
    padding-block: var(--section-padding-y, 5rem);
}

.uk-section-default {
    background-color: var(--color-bg-white, #ffffff);
}

.uk-section-muted {
    background-color: var(--color-bg-alt, #f8fafc);
}

/* ---- Navigation ---- */
.uk-navbar,
.v8-nav {
    background-color: var(--color-bg-white, #ffffff);
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Franken UI's `.uk-navbar-container` paints the header #f8f8f8 with a
   higher-specificity :not() selector, leaving grey edges either side of the
   centered nav. Re-assert the brand surface across the full-width header and
   keep the inner navbar transparent so the bar is one continuous colour. */
.v8-nav.uk-navbar-container {
    background-color: var(--color-bg-white, #ffffff);
}
.v8-nav .uk-navbar {
    background: transparent;
}

/* NOTE: do NOT put `transform`/`will-change:transform` on .v8-nav — the mobile
   nav overlay (.v8-mobile-nav) is a position:fixed child of the header, and a
   transformed header becomes its containing block, breaking the full-screen
   overlay. The homepage sticky-header glitch is addressed by removing the
   horizontal overflow (form min-width + disabling reveals on mobile) instead. */

.uk-navbar-nav > li > a,
.v8-nav__link {
    font-family: var(--font-body, sans-serif);
    font-weight: 500;
    color: var(--color-text-secondary, #475569);
    transition: color var(--transition-fast, 150ms ease);
    text-decoration: none;
    padding: 0.5rem 0.75rem;
}

.uk-navbar-nav > li > a:hover,
.v8-nav__link:hover {
    color: var(--color-primary, #2563eb);
    text-decoration: none;
}

/* Compact navbar height — keep the bar tight around the (now cropped) logo
   instead of inheriting Franken UI's tall 80px navbar rows. */
.v8-nav .uk-navbar,
.v8-nav .uk-navbar-left,
.v8-nav .uk-navbar-right,
.v8-nav .uk-navbar-item,
.v8-nav .uk-navbar-nav > li > a {
    min-height: 64px;
}

.v8-nav__logo {
    padding-block: 0;
}

.v8-nav__logo-img {
    height: 38px;
    width: auto;
    display: block;
}

/* Slightly bolder nav links */
.v8-nav .uk-navbar-nav > li > a,
.v8-nav .v8-nav__link {
    font-weight: 600;
}

/* Keep the header CTA proportionate to the compact bar — more compact box,
   bolder/tighter label so it reads as a strong button without dominating.
   NB: UIkit's `.uk-button` ships line-height:38px, which alone makes the
   button ~60px tall and touch the bar edges — reset it here. */
.v8-nav .uk-navbar-item .uk-button-primary,
.v8-nav .uk-navbar-item .v8-btn-primary {
    padding: 0.55rem 1.4rem;
    font-size: 0.8125rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.03em;
}

/* ---- Forms ---- */
.uk-input,
.uk-textarea,
.uk-select,
.v8-input {
    width: 100%;
    /* Form controls have an intrinsic min-width (≈ the `size`/`cols` default).
       In a grid/flex column that min-width can overflow the layout on iOS
       Safari — forcing horizontal page scroll. Let them shrink to the column. */
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 1rem;
    border: 1.5px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-md, 8px);
    font-family: var(--font-body, sans-serif);
    font-size: var(--text-base, 1rem);
    color: var(--color-text-primary, #0f172a);
    background-color: var(--color-bg-white, #ffffff);
    transition: border-color var(--transition-fast, 150ms ease);
    outline: none;
}

.uk-input:focus,
.uk-textarea:focus,
.uk-select:focus,
.v8-input:focus {
    border-color: var(--color-primary, #2563eb);
    box-shadow: 0 0 0 3px rgb(37 99 235 / 0.1);
}

.uk-textarea,
.v8-textarea {
    resize: vertical;
    min-height: 120px;
}

.uk-form-label,
.v8-label {
    display: block;
    font-family: var(--font-body, sans-serif);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    color: var(--color-text-primary, #0f172a);
    margin-bottom: var(--space-2, 0.5rem);
}

.v8-form-group {
    margin-bottom: var(--space-6, 1.5rem);
}

/* ---- Icons (inline SVG or icon font) ---- */
.v8-icon {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md, 8px);
    background-color: color-mix(in srgb, var(--color-primary, #2563eb) 10%, transparent);
    color: var(--color-primary, #2563eb);
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* ---- Stats bar numbers ---- */
.v8-stat__number {
    font-family: var(--font-heading, sans-serif);
    font-size: var(--text-4xl, 2.5rem);
    font-weight: 700;
    color: var(--color-primary, #2563eb);
    line-height: 1;
}

.v8-stat__label {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #475569);
    font-weight: 500;
    margin-top: var(--space-2, 0.5rem);
}

/* ---- Mobile nav overlay ---- */
.v8-mobile-nav {
    position: fixed;
    inset: 0;
    background-color: var(--color-bg-white, #ffffff);
    z-index: 200;
    display: flex;
    flex-direction: column;
    padding: var(--space-8, 2rem);
    transform: translateX(100%);
    transition: transform var(--transition-base, 250ms ease);
}

.v8-mobile-nav.is-open {
    transform: translateX(0);
}