/*
  ============================================================
  wwwroot/css/shared.css
  ============================================================
  PURPOSE:
    - Base/shared styles used by ALL 3 brands
    - Reset, typography, layout grid, card structure, form controls
    - Uses CSS variables (set per-brand in brand CSS files)
    - This file provides the STRUCTURE, brand files provide the COLORS

  CSS VARIABLE CONTRACT (set by each brand's CSS):
    --brand-primary          main brand color
    --brand-primary-hover    hover state
    --brand-accent           secondary accent
    --brand-bg               page background
    --brand-text             body text color
    --brand-card-border      card border color
    --brand-header-bg        header background
    --brand-footer-bg        footer background

  SECTIONS:
    1. Reset / base
    2. Typography
    3. Layout (container, grid)
    4. Header structure
    5. Footer structure
    6. Review card structure
    7. Rating stars
    8. Filter sidebar
    9. Pagination
    10. Review detail page structure
    11. FAQ accordion
    12. Pros/Cons lists
    13. Verdict box
    14. Utility classes

  USED BY:
    - Every _Layout.cshtml loads this BEFORE the brand-specific CSS
  ============================================================
*/

:root {
    --rh-container: 1120px;
    --rh-radius: 10px;
    --rh-border: #e9ecef;
    --rh-muted: #6c757d;
    --rh-text: #212529;
    --rh-bg: #ffffff;
    --rh-soft: #f8f9fa;
    --rh-shadow: 0 8px 22px rgba(0,0,0,.08);
    --rh-font: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: var(--rh-font);
    color: var(--rh-text);
    background: var(--rh-bg);
}

.rh-container {
    width: min(var(--rh-container), calc(100% - 32px));
    margin: 0 auto;
}

a {
    color: inherit;
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }

.rh-card {
    background: #fff;
    border: 1px solid var(--rh-border);
    border-radius: var(--rh-radius);
    box-shadow: none;
}

.rh-btn {
    appearance: none;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 10px 14px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
}

.rh-btn-block {
    width: 100%;
}

.rh-stars {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.rh-star {
    font-size: 16px;
    line-height: 1;
}

    .rh-star.is-full {
        color: var(--brand-primary);
    }

    .rh-star.is-half {
        color: var(--brand-primary);
        opacity: .55;
    }

    .rh-star.is-empty {
        color: #cfd4da;
    }

.rh-stars-value {
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    opacity: .95;
    margin-left: 6px;
}

/* Generic page building blocks used by all brands */
.hero {
    padding: 44px 0;
    color: #fff;
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-header-bg) 100%);
}

.hero-inner {
    max-width: 860px;
}

.hero h1 {
    margin: 0;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.15;
}

.hero p {
    margin: 12px 0 0;
    opacity: .92;
}

.hero-search {
    margin-top: 22px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
}

.input {
    width: 100%;
    border: 1px solid var(--rh-border);
    border-radius: 8px;
    padding: 10px 12px;
    font: inherit;
    background: #fff;
}

.input-lg {
    height: 46px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 10px 14px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}

.btn-primary {
    color: #fff;
    background: var(--brand-primary);
}

.btn-primary:hover {
    text-decoration: none;
    filter: brightness(.96);
}

.btn-ghost {
    color: var(--rh-text);
    border-color: var(--rh-border);
    background: #fff;
}

.btn-lg {
    height: 46px;
    padding-inline: 18px;
}

.stats {
    padding: 24px 0 14px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.stat {
    background: #fff;
    border: 1px solid var(--rh-border);
    border-radius: 10px;
    padding: 16px;
}

.stat-number {
    font-size: 28px;
    font-weight: 800;
    color: var(--brand-primary);
}

.stat-label {
    margin-top: 4px;
    color: var(--rh-muted);
    font-size: 14px;
}

.section {
    padding: 10px 0 32px;
}

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.section-head h2 {
    margin: 0;
    font-size: 24px;
}

.link {
    color: var(--brand-primary);
    font-weight: 700;
}

.page-head {
    padding: 24px 0 10px;
}

.page-head h1 {
    margin: 0;
    font-size: 34px;
}

.page-head p {
    margin: 8px 0 0;
    color: var(--rh-muted);
}

.layout-two-col {
    display: grid;
    grid-template-columns: 310px minmax(0, 1fr);
    gap: 16px;
    padding-bottom: 28px;
}

.sidebar,
.content {
    min-width: 0;
}

.grid-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.review-card {
    background: #fff;
    border: 1px solid var(--rh-border);
    border-radius: 12px;
    padding: 14px;
}

.review-card-top {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 12px;
}

.review-card-logo {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    object-fit: contain;
    background: #f3f5f9;
}

.review-card-title h3 {
    margin: 0;
    font-size: 18px;
}

.review-card-sub {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.review-card-verdict {
    margin: 10px 0 0;
    color: var(--rh-muted);
    line-height: 1.45;
}

.muted {
    color: var(--rh-muted);
}

.tags {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag {
    display: inline-flex;
    align-items: center;
    height: 26px;
    border-radius: 999px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--brand-primary) 25%, #d9dee8);
    background: color-mix(in srgb, var(--brand-primary) 10%, white);
    font-size: 12px;
}

.filter-form {
    border: 1px solid var(--rh-border);
    border-radius: 12px;
    padding: 14px;
    background: #fff;
    display: grid;
    gap: 12px;
}

.field {
    display: grid;
    gap: 6px;
}

.field label {
    font-size: 14px;
    font-weight: 700;
}

.field.inline {
    display: flex;
    align-items: center;
    gap: 8px;
}

.empty {
    border: 1px solid var(--rh-border);
    border-radius: 10px;
    background: #fff;
    padding: 20px;
}

.pagination {
    margin-top: 16px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 36px;
    border: 1px solid var(--rh-border);
    border-radius: 8px;
    padding: 0 12px;
    background: #fff;
    text-decoration: none;
}

.page-link.active {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}

.page-link.disabled {
    opacity: .45;
    pointer-events: none;
}

.page-ellipsis {
    color: var(--rh-muted);
    padding: 0 4px;
}

@media (max-width: 1000px) {
    .layout-two-col {
        grid-template-columns: 1fr;
    }

    .grid-cards {
        grid-template-columns: 1fr;
    }

    .hero-search {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }
}

.article {
    background: #fff;
    border: 1px solid var(--rh-border);
    border-radius: 10px;
    padding: 18px;
    line-height: 1.6;
}

.article h2 {
    margin: 18px 0 8px;
}

.article ul {
    margin: 0;
    padding-left: 20px;
}

.load-button {
    background-color: #ff6b35;
    border: none;
    outline: none;
    color: #fff;
    padding: 11px 20px;
    font-size: 14px;
    text-decoration: none;
    border-radius: 15px;
    cursor: pointer;
}