/*
 * Ahalni UI layer: buttons, tables, cards, backdrop.
 * Loaded last (after sticky-cta.css); the "body" prefix beats global.css,
 * core-blocks-v2.css and the inlined block styles.
 * Colours live in global.css :root; this file only adds the Ahalni-specific shapes.
 *
 * Starting point generated by recolor-site from templates/ui.css. Edit freely:
 * shapes (radius, uppercase, glow, gradients) come from the user's UI notes.
 */
:root {
    --ui-bg: #121212;
    --ui-card: #1e1e1e;
    --ui-inner: #242424;
    --ui-accent: #ff7a1a;
    --ui-border: #2a2a2a;
    --ui-border-strong: #444444;
    --ui-text: #ffffff;
    --ui-muted: #cccccc;
    --ui-cta-from: #ff7a1a;
    --ui-cta-to: #ff7a1a;
    --ui-cta-text: #000000;
    --ui-login-bg: #2b2b2b;
    --ui-login-text: #ffffff;
    --ui-secondary-bg: #2b2b2b;
    --ui-secondary-border: #ff7a1a;
    --ui-secondary-text: #ffffff;
    --ui-head: #000000;
    --ui-head-text: #ff7a1a;
    --ui-radius-btn: 25px;
    --ui-radius-secondary: 8px;
    --ui-radius-card: 12px;
    --ui-radius-table: 8px;
    --ui-card-border: #2a2a2a;
    --ui-row-border: #333333;
    --ui-zebra: #222222;
    --ui-row-hover: #2b2b2b;
    --ui-card-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    --ui-callout-bg: rgba(255, 122, 26, 0.07);
    --ui-callout-border: rgba(255, 122, 26, 0.3);
    --ui-cta-hover: #e65a00;
    --ui-header: #000000;
    --ui-body-text: #e0e0e0;
    --ui-soft: #9e9e9e;
    --ui-row-odd: #1a1a1a;
    --ui-row-even: #222222;
    --ui-table-line: #333333;
    --ui-input-bg: #1e1e1e;
    --ui-input-border: #333333;
    --ui-placeholder: #757575;
}

/*
 * Primary CTA. The promo hero has its own, more specific button rule
 * (.wp-block-new-theme-hero.page-hero--promo .wp-block-button__link), so it is listed explicitly.
 */
body .wp-block-button__link,
body .wp-block-new-theme-hero .wp-block-button__link,
body .wp-block-new-theme-hero .page-hero__cta,
body .wp-block-new-theme-hero.page-hero--promo .wp-block-button__link,
body .wp-block-new-theme-hero.page-hero--promo .page-hero__cta,
body .vox-header__btn .wp-block-button__link,
body .nt-sticky-cta .nt-sticky-cta__link,
body .nt-button--primary {
    background: linear-gradient(180deg, var(--ui-cta-from) 0%, var(--ui-cta-to) 100%);
    border: 0;
    border-radius: var(--ui-radius-btn);
    box-shadow: none;
    color: var(--ui-cta-text);
    font-weight: 700;
    transition: filter .2s ease, box-shadow .2s ease;
}

body .wp-block-button__link:hover,
body .wp-block-button__link:focus-visible,
body .wp-block-new-theme-hero .wp-block-button__link:hover,
body .wp-block-new-theme-hero .page-hero__cta:hover,
body .wp-block-new-theme-hero.page-hero--promo .wp-block-button__link:hover,
body .wp-block-new-theme-hero.page-hero--promo .page-hero__cta:hover,
body .vox-header__btn .wp-block-button__link:hover,
body .vox-header__btn .wp-block-button__link:focus-visible,
body .nt-sticky-cta .nt-sticky-cta__link:hover,
body .nt-button--primary:hover {
    background: var(--ui-cta-hover);
    color: var(--ui-cta-text);
    filter: none;
}

/* Header "Registration" keeps the pulse, recoloured */
body .vox-header__btn--register .wp-block-button__link {
    box-shadow: 0 4px 14px rgba(255, 122, 26, 0.35);
}

/* Header "Log In" (second button in the header) */
body .vox-header__actions .wp-block-button + .wp-block-button .wp-block-button__link {
    animation: none;
    background: var(--ui-login-bg);
    border: 1px solid var(--ui-border-strong);
    box-shadow: none;
    color: var(--ui-login-text);
}

body .vox-header__actions .wp-block-button + .wp-block-button .wp-block-button__link:hover,
body .vox-header__actions .wp-block-button + .wp-block-button .wp-block-button__link:focus-visible {
    background: var(--ui-login-bg);
    border-color: var(--ui-accent);
    color: var(--ui-login-text);
    filter: none;
}

/* Secondary / outlined buttons (incl. the outline button inside the promo hero) */
body .wp-block-button.is-style-outline > .wp-block-button__link,
body .wp-block-button__link.is-style-outline,
body .wp-block-new-theme-hero.page-hero--promo .wp-block-button.is-style-outline > .wp-block-button__link,
body .nt-button--secondary {
    background: var(--ui-secondary-bg);
    border: 1px solid var(--ui-secondary-border);
    border-radius: var(--ui-radius-secondary);
    box-shadow: none;
    color: var(--ui-secondary-text);
    filter: none;
    text-transform: none;
}

body .wp-block-button.is-style-outline > .wp-block-button__link:hover,
body .wp-block-button__link.is-style-outline:hover,
body .wp-block-new-theme-hero.page-hero--promo .wp-block-button.is-style-outline > .wp-block-button__link:hover,
body .nt-button--secondary:hover {
    background: var(--ui-secondary-border);
    border-color: var(--ui-secondary-border);
    color: var(--ui-cta-text);
    filter: none;
}

/* Tables: dark plate, coloured headers, thin dividers */
body .wp-block-table table {
    background: var(--ui-card);
    border: 1px solid var(--ui-card-border);
    border-collapse: separate;
    border-radius: var(--ui-radius-table);
    border-spacing: 0;
    overflow: hidden;
}

body .wp-block-table thead {
    border: 0;
}

body .wp-block-table th,
body .wp-block-table td {
    border: 0;
    border-bottom: 1px solid var(--ui-row-border);
    padding: 12px 16px;
}

body .wp-block-table th {
    background: var(--ui-head);
    color: var(--ui-head-text);
    text-align: left;
}

body .wp-block-table td {
    color: var(--ui-body-text);
}

body .wp-block-table tbody tr:last-child td {
    border-bottom: 0;
}

/*
 * Zebra. core-blocks-v2.css paints rows with
 * ":not(.is-style-stripes) tbody tr:nth-child(even) td" - override with the same selector.
 */
/* is-style-stripes: WP core paints the <tr> itself (#f0f0f0 on odd rows), not the td */
body .wp-block-table.is-style-stripes {
    border-bottom: 0;
}

body .wp-block-table tbody tr,
body .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background-color: transparent;
}

body .wp-block-table tbody tr td,
body .wp-block-table.is-style-stripes tbody tr:nth-child(odd) td {
    background: var(--ui-row-odd);
    transition: background .15s;
}

body .wp-block-table tbody tr:nth-child(even) td,
body .wp-block-table:not(.is-style-stripes) tbody tr:nth-child(even) td,
body .wp-block-table.is-style-stripes tbody tr:nth-child(even) td {
    background: var(--ui-zebra);
}

body .wp-block-table tbody tr:hover td,
body .wp-block-table:not(.is-style-stripes) tbody tr:nth-child(even):hover td {
    background: var(--ui-row-hover);
}

body .wp-block-table td strong,
body .wp-block-table td b {
    color: var(--ui-head-text);
}

/*
 * Phones: tables with 2-3 columns fit the screen instead of scrolling sideways
 * (core CSS gives them min-width: 640px). Tables with 4+ columns keep the scroll.
 */
@media (max-width: 767px) {
    body .wp-block-table table:not(:has(tr > :nth-child(4))) {
        min-width: 0;
    }

    body .wp-block-table th,
    body .wp-block-table td {
        font-size: 14px;
        padding: 10px 12px;
        /* break-word here split labels mid-word ("Payme|nt") on 4/4 recolored sites */
        overflow-wrap: break-word;
        word-break: normal;
    }

    /* first-column labels: whole words, no mid-word breaks */
    body .wp-block-table tbody th,
    body .wp-block-table tbody td:first-child {
        hyphens: none;
        min-width: 110px;
        width: 38%;
    }
}

/* Cards */
body .nt-link-card,
body .nt-faq-item,
body .nt-icon-card {
    background: var(--ui-card);
    border: 1px solid var(--ui-card-border);
    border-radius: var(--ui-radius-card);
    box-shadow: none;
    transition: box-shadow .2s, border-color .2s;
}

body .nt-link-card:hover,
body .nt-faq-item:hover,
body .nt-icon-card:hover {
    border-color: var(--ui-border-strong);
    box-shadow: var(--ui-card-shadow);
}

/* Pastel icon tiles and callouts from the light theme -> dark */
body .nt-icon-card .nt-icon-card__icon {
    background: var(--ui-bg);
    color: var(--ui-cta-from);
}

body .nt-icon-card--tone-violet .nt-icon-card__icon,
body .nt-icon-card--tone-blue .nt-icon-card__icon,
body .nt-icon-card--tone-sky .nt-icon-card__icon,
body .nt-icon-card--tone-pink .nt-icon-card__icon {
    color: var(--ui-accent);
}

body .nt-icon-card--tone-green .nt-icon-card__icon {
    color: var(--ui-muted);
}

body .nt-icon-card__note,
body .wp-block-new-theme-warning-callout.nt-warning-callout {
    background: var(--ui-callout-bg);
    border-color: var(--ui-callout-border);
    color: var(--ui-text);
}

body .wp-block-new-theme-warning-callout.nt-warning-callout {
    border-left-color: var(--ui-cta-to);
}

body .nt-warning-callout__icon,
body .nt-warning-callout__title,
body .nt-icon-card__note svg {
    color: var(--ui-cta-from);
}

/*
 * List bullets: legacy-reference.css paints "ul li::before" green #12a96a behind a long :not() chain
 * (specificity ~0,10,2), so !important is the sane way to recolour them.
 */
body .nt-anchor-nav__item::before,
body ul.wp-block-list > li::before {
    color: var(--ui-accent) !important;
}

/* Muted text */
body .age-disclaimer,
body figcaption {
    color: var(--ui-soft);
}

/* Backdrop: the glow gradient from global.css stays at the top of the page, not pinned to the viewport */
body {
    background-attachment: scroll;
    background-color: var(--ui-bg);
    background-repeat: no-repeat;
    color: var(--ui-text);
}

/* Header: pure black bar */
body header.vox-header {
    background: var(--ui-header);
    backdrop-filter: none;
    border-bottom: 1px solid var(--ui-border);
}

/* Typography: white headings, soft light-grey body copy */
body h1, body h2, body h3, body h4, body h5, body h6,
body .wp-block-heading {
    color: var(--ui-text);
}

body p,
body li,
body dd {
    color: var(--ui-body-text);
}

/* Active menu items */
body .current-menu-item > a,
body .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
body .wp-block-navigation-item__content[aria-current="page"] {
    color: var(--ui-cta-hover);
}

/* Inputs / search */
body input[type="text"],
body input[type="search"],
body input[type="email"],
body input[type="password"],
body input[type="tel"],
body input[type="url"],
body input[type="number"],
body select,
body textarea,
body .wp-block-search__input {
    background: var(--ui-input-bg);
    border: 1px solid var(--ui-input-border);
    color: var(--ui-text);
}

body input::placeholder,
body textarea::placeholder {
    color: var(--ui-placeholder);
    opacity: 1;
}

body input:focus,
body select:focus,
body textarea:focus {
    border-color: var(--ui-accent);
    outline: none;
}