/*
 * Casiny 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 Casiny-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: #0a0914;
    --ui-card: #141225;
    --ui-inner: #1a1633;
    --ui-accent: #ff6b4a;
    --ui-border: #292347;
    --ui-border-strong: #8e44ad;
    --ui-text: #ffffff;
    --ui-muted: #8c8ca1;
    --ui-cta-from: #ff7b40;
    --ui-cta-to: #ff5252;
    --ui-cta-text: #ffffff;
    --ui-login-bg: #2d1e4a;
    --ui-login-text: #ffffff;
    --ui-secondary-bg: #1b1630;
    --ui-secondary-border: #2d284d;
    --ui-secondary-text: #ffffff;
    --ui-head: #1b1733;
    --ui-head-text: #ff9f43;
    --ui-radius-btn: 8px;
    --ui-radius-secondary: 8px;
    --ui-radius-card: 12px;
    --ui-radius-table: 8px;
    --ui-card-border: #211d3b;
    --ui-row-border: #292347;
    --ui-zebra: #17142c;
    --ui-row-hover: rgba(142, 68, 173, 0.35);
    --ui-card-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    --ui-callout-bg: rgba(255, 123, 64, 0.07);
    --ui-callout-border: rgba(255, 123, 64, 0.3);
}

/*
 * 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: linear-gradient(180deg, var(--ui-cta-from) 0%, var(--ui-cta-to) 100%);
    color: var(--ui-cta-text);
    filter: brightness(1.1);
}

/* Header "Registration" keeps the pulse, recoloured */
body .vox-header__btn--register .wp-block-button__link {
    box-shadow: 0 4px 14px rgba(255, 82, 82, 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);
    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);
    color: var(--ui-login-text);
    filter: brightness(1.1);
}

/* 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-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-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: transparent;
    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;
        word-break: break-word;
    }
}

/* 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-muted);
}

/* 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);
}

/* ---- Casiny: coral CTAs, violet Log In / filters, typography, promo gradient ---- */
:root {
    --ui-text-body: #d1d1e0;
    --ui-heading-accent: #ff9f43;
    --ui-link-hover: #ff6b4a;
    --ui-violet: #a855f7;
    --ui-violet-muted: #8e44ad;
    --ui-filter-active: #2a1a40;
    --ui-row: #141225;
    --ui-input-bg: #1b182e;
    --ui-input-border: #2d284d;
    --ui-placeholder: #6c6a85;
    --ui-success: #00c853;
    --ui-danger: #ff3b30;
    --ui-rating: #ffd700;
    --ui-promo-gradient: linear-gradient(90deg, #0d1120 0%, #083238 100%);
}

/* Primary CTA: horizontal coral gradient, bold uppercase */
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,
body .wp-block-button__link: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 .nt-sticky-cta .nt-sticky-cta__link:hover,
body .nt-button--primary:hover {
    background: linear-gradient(90deg, var(--ui-cta-from) 0%, var(--ui-cta-to) 100%);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

body .wp-block-button__link:hover,
body .wp-block-new-theme-hero.page-hero--promo .wp-block-button__link:hover,
body .vox-header__btn .wp-block-button__link:hover,
body .nt-sticky-cta .nt-sticky-cta__link:hover,
body .nt-button--primary:hover {
    box-shadow: 0 6px 20px rgba(255, 82, 82, 0.4);
}

body .vox-header__btn--register .wp-block-button__link {
    animation: none;
    box-shadow: 0 4px 14px rgba(255, 82, 82, 0.35);
}

/* Log In: muted violet with a violet frame */
body .vox-header__actions .wp-block-button + .wp-block-button .wp-block-button__link {
    background: var(--ui-login-bg);
    border: 1px solid var(--ui-violet-muted);
    border-radius: var(--ui-radius-btn);
}

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-violet-muted);
    border-color: var(--ui-violet-muted);
    box-shadow: none;
    filter: none;
}

/* Outline / filter buttons: #1B1630, active/hover #2A1A40 with bright violet frame */
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,
body .is-active > .wp-block-button__link.is-style-outline,
body .wp-block-button.is-style-outline.is-active > .wp-block-button__link {
    background: var(--ui-filter-active);
    border-color: var(--ui-violet);
    box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.25);
    color: var(--ui-text);
}

/* Typography */
body h1, body h2,
body .wp-block-heading:is(h1, h2) {
    color: var(--ui-text);
    font-weight: 700;
}

body h3, body h4,
body .wp-block-heading:is(h3, h4) {
    color: var(--ui-heading-accent);
}

body p,
body li,
body .page-main p,
body .wp-block-table td {
    color: var(--ui-text-body);
}

/* Links: white, coral on hover (buttons excluded) */
body a:not(.wp-block-button__link):not(.nt-sticky-cta__link) {
    color: var(--ui-text);
    text-decoration-color: rgba(255, 255, 255, 0.35);
}

body a:not(.wp-block-button__link):not(.nt-sticky-cta__link):hover,
body a:not(.wp-block-button__link):not(.nt-sticky-cta__link):focus-visible {
    color: var(--ui-link-hover);
    text-decoration-color: var(--ui-link-hover);
}

/* Tables: #1B1733 head with warm orange text, #141225 rows, #292347 dividers */
body .wp-block-table table {
    background: var(--ui-row);
    border-color: var(--ui-border);
}

body .wp-block-table th {
    border-bottom: 1px solid var(--ui-border);
    font-weight: 700;
}

/* Cards: violet frame on hover */
body .nt-link-card:hover,
body .nt-faq-item:hover {
    border-color: var(--ui-violet);
}

/* Inputs */
body input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
body select,
body textarea {
    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);
}

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

/* Status and rating colours */
body .is-pro, body .pros li::before { color: var(--ui-success); }
body .is-con, body .cons li::before { color: var(--ui-danger); }
body .star, body .rating, body .nt-rating { color: var(--ui-rating); }

/* Sticky bottom bar: promo gradient (navy -> sea-green) */
body .nt-sticky-cta {
    background: var(--ui-promo-gradient);
    border-top: 1px solid var(--ui-border);
    color: var(--ui-text-body);
}

/* Footer */
body .site-footer {
    background: var(--ui-card);
    border-top: 1px solid var(--ui-border);
}

body .site-footer p,
body .site-footer li,
body .site-footer__copyright {
    color: var(--ui-muted);
}

/* Hero lead paragraph: main text colour, not muted */
body .wp-block-new-theme-hero .page-hero__content > p:first-of-type,
body .wp-block-new-theme-hero.page-hero--promo .page-hero__content > p:first-of-type {
    color: var(--ui-text-body);
}

/* Promo-hero outline button: uppercase like the other buttons */
body .wp-block-new-theme-hero.page-hero--promo .wp-block-button.is-style-outline > .wp-block-button__link {
    letter-spacing: 0.03em;
    text-transform: uppercase;
}