/*
 * Pontis brand theme — override Bootstrap 5 defaults podľa doc/design-manual.html.
 *
 * Selektor `:root, [data-bs-theme="light"]` musí zodpovedať bootstrapovmu pre rovnakú
 * špecificitu. Poradie importu v app.js: bootstrap.css → app.css (naše overrides idú
 * posledné kvôli CSS cascade). Detaily v doc/knowledge/fonty.md + bootstrap-migration.md.
 *
 * Admin panel (EasyAdmin) nie je dotknutý — má vlastný asset chain, neextenduje base.html.twig.
 */

:root,
[data-bs-theme="light"] {
    /* ── Brand farby (sekcia 2 design manuálu) ─────────────── */
    --bs-primary: #3EC7F4;                      /* $pontis-blue */
    --bs-primary-rgb: 62, 199, 244;
    --bs-primary-text-emphasis: #0CA7D9;
    --bs-primary-bg-subtle: #EAF7FD;
    --bs-primary-border-subtle: #9EE4F8;

    /* ── Typography (sekcia 1, 4) ──────────────────────────── */
    --bs-body-font-family: 'Lexend Deca Alt', sans-serif;
    --bs-body-font-weight: 300;
    --bs-body-color: #3D3D3D;                   /* $text-black-color */
    --bs-secondary-color: #747474;              /* $text-light-black-color (pre .text-muted) */

    /* ── Linky (sekcia 5) ──────────────────────────────────── */
    --bs-link-color: #3EC7F4;
    --bs-link-color-rgb: 62, 199, 244;
    --bs-link-hover-color: #0CA7D9;
    --bs-link-hover-color-rgb: 12, 167, 217;

    /* ── Border — Pontis hranatý dizajn (sekcie 9, 27) ─────── */
    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
    --bs-border-radius-xl: 0;
    --bs-border-radius-xxl: 0;
    /* .rounded-pill (--bs-border-radius-pill) zostáva okrúhle pre badge-pill */

    /* ── Focus ring v Pontis farbe ─────────────────────────── */
    --bs-focus-ring-color: rgba(62, 199, 244, 0.25);
}

body {
    background-color: #FFFFFF;
}

body > footer {
    margin-top: 6rem;
}

/* Bočný padding stránky — aspoň 20px aj na malých obrazovkách, aby obsah
   nemlkol priamo na okraj viewport-u. BS5 container má default 12px. */
.container-xl {
    padding-left: 20px;
    padding-right: 20px;
}

/* ── Typografia (sekcia 3) ─────────────────────────────────── */
h1, .h1 {
    font-weight: 900;
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
}
h2, .h2 { font-weight: 600; }
h3, .h3 { font-weight: 500; }
h4, .h4,
h6, .h6 { font-weight: 300; }
h5, .h5 { font-weight: 500; }

.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-weight: 700;
}

/* ── Tlačidlá — invertovaný hover (sekcia 6) ───────────────── */
.btn {
    text-transform: uppercase;
    font-weight: 500;
    --bs-btn-padding-y: 15px;
    --bs-btn-padding-x: 40px;
    transition: all 0.2s linear;
}

@media (max-width: 991.98px) {
    .btn {
        --bs-btn-padding-x: 20px;
    }
}

.btn-lg {
    --bs-btn-padding-y: 25px;
    --bs-btn-padding-x: 50px;
    --bs-btn-font-size: 1.25rem;
}

.btn-sm {
    --bs-btn-padding-y: 10px;
    --bs-btn-padding-x: 20px;
}

.btn-primary {
    --bs-btn-bg: #3EC7F4;
    --bs-btn-border-color: #3EC7F4;
    --bs-btn-color: #FFFFFF;
    /* invertovaný hover — biele pozadie, modrý text, modrý border */
    --bs-btn-hover-bg: #FFFFFF;
    --bs-btn-hover-border-color: #3EC7F4;
    --bs-btn-hover-color: #3EC7F4;
    --bs-btn-active-bg: #FFFFFF;
    --bs-btn-active-border-color: #3EC7F4;
    --bs-btn-active-color: #3EC7F4;
}

.btn-outline-primary {
    --bs-btn-color: #3EC7F4;
    --bs-btn-border-color: #3EC7F4;
    --bs-btn-hover-bg: #3EC7F4;
    --bs-btn-hover-border-color: #3EC7F4;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-active-bg: #3EC7F4;
    --bs-btn-active-border-color: #3EC7F4;
    --bs-btn-active-color: #FFFFFF;
}

/* ── Formuláre (sekcia 10) ─────────────────────────────────── */
.form-control,
.form-select {
    background-color: #FFFFFF;
    border: 1px solid #231F20;                  /* $pontis-black, zladené s .card-pontis */
    box-shadow: 5px 5px 0 #3EC7F4;             /* signature Pontis shadow */
    padding: 12px 20px;
    letter-spacing: 0.03em;
    transition: all 0.2s linear;
}

/* Text inputy a selecty — rozumná max šírka (textarea a rádiá ostávajú full-width). */
input.form-control,
.form-select {
    max-width: 500px;
}

/* Invalid state — Pontis oranžová namiesto BS červenej. Hrubší 2px border
   odlíšenie od 1px focus stavu. BS default ikonka (background-image) skrytá. */
.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
    border: 1px solid #B44319;
    box-shadow: 5px 5px 0 #B44319;
    background-image: none;
    padding-right: 20px;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus,
.was-validated .form-control:invalid:focus,
.was-validated .form-select:invalid:focus {
    border-color: #B44319;
    box-shadow: 5px 5px 0 #B44319, 0 0 0 .25rem rgba(180, 67, 25, .25);
}

.form-check-input.is-invalid,
.was-validated .form-check-input:invalid {
    border-color: #B44319;
}

.form-check-input.is-invalid:checked,
.was-validated .form-check-input:invalid:checked {
    background-color: #B44319;
}

.form-check-input.is-invalid ~ .form-check-label,
.was-validated .form-check-input:invalid ~ .form-check-label {
    color: #B44319;
}

.invalid-feedback {
    color: #B44319;
    font-weight: 700;
    font-size: 0.9375rem;
}

/* Text inputy a selecty majú signature shadow pod sebou — error potrebuje väčší
   margin, aby vizuálne "neprilep" k shadow. Checkboxy/rádiá shadow nemajú,
   tam stačí default. */
.form-control + .invalid-feedback,
.form-select + .invalid-feedback {
    margin-top: 1.25rem;
}

.form-control:hover,
.form-select:hover {
    border-color: #747474;
}

.form-control:focus,
.form-select:focus {
    background-color: #FFFFFF;
    border-color: #B44319;                      /* $orange */
    box-shadow: 5px 5px 0 #3EC7F4, 0 0 0 .25rem rgba(180, 67, 25, .25);
}

.form-control::placeholder {
    color: #AAAAAA;
    letter-spacing: 0.09em;
}

.form-label {
    font-weight: 500;
}

.form-check {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
}

.form-check-label {
    line-height: 1.6;
    flex: 1;
}

.form-check-input {
    width: 24px;
    height: 24px;
    border: 1px solid #231F20;                  /* $pontis-black, zladené s .card-pontis */
    border-radius: 5px;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.form-check-input[type="radio"] {
    border-radius: 50%;
}

.form-check-input:checked {
    background-color: #3EC7F4;
    border-color: #3EC7F4;
}

.form-check-input:focus {
    border-color: #3EC7F4;
    box-shadow: 0 0 0 .25rem rgba(62, 199, 244, .25);
}

/* ── Dotazník — obmedzená šírka otázok/labelov a radio/checkbox odpovedí
   (lepšia čitateľnosť). Rovnaký constraint platí aj pre krok „oblasti pôsobenia". */
.questionnaire-form h5,
.questionnaire-form .form-check,
.questionnaire-form > div > p {
    max-width: 600px;
}

/* ── Registrácia — GDPR a research consent checkboxy obmedzené na 500px
   (rovnaká šírka ako text inputy). */
form[name="registration_form"] .form-check {
    max-width: 500px;
}


/* ── Oddeľovač oblastí (dotazník) ─────────────────────────── */
.dimension-divider {
    border: none;
    height: 1px;
    background-color: #231F20;
    opacity: 1;
    margin: 4rem 0;
    width: 50%;
}

/* GDPR disclosure text — zobrazený ako odsek namiesto checkboxu,
   ale s rovnakou typografiou ako checkbox label (line-height 1.6). */
.gdpr-disclosure {
    max-width: 500px;
    line-height: 1.6;
}

/* ── Pontis utility triedy — reuse z PDF report layoutu ────────────
   Uppercase label sekcií, veľké modré skóre, body text.
   Používané v hero boxíku, 5-col prehľade oblastí, S/V/O labeloch. */
.section-title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #231F20;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    line-height: 1.2;
}

.big-score {
    font-size: 2.5rem;
    font-weight: 700;
    color: #3EC7F4;
    line-height: 1;
}

.points-text {
    font-size: 0.875rem;
    font-weight: 300;
}

.points-text strong {
    font-weight: 700;
}

/* ── Výsledková stránka — hero box a sekcie ───────────────────── */
.hero-card .level-line {
    font-size: 1.75rem;
    font-weight: 700;
    color: #3EC7F4;
    letter-spacing: 0;
    line-height: 1.2;
}

.hero-card .interpretation {
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 1.55;
    color: #231F20;
}

.hero-card svg {
    max-width: 500px;
    height: auto;
}


.points-note {
    font-style: italic;
    font-weight: 300;
    color: #231F20;
    line-height: 1.5;
}

/* S/V/O — 3 stĺpce ukončené 1px čiernou linkou zdola (zladené s PDF rytmom) */
.sco-row {
    border-bottom: 1px solid #231F20;
}

/* 5-col prehľad oblastí — dividers medzi stĺpcami na desktope.
   Na mobile/tablete stack bez dividerov (grid sa láme po 2/3). */
.dim-summary-grid > .col {
    padding: 0.5rem 1rem;
    margin-bottom: 1.5rem;
}

.dim-summary-grid .dim-name {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #231F20;
    line-height: 1.25;
}

@media (min-width: 992px) {
    .dim-summary-grid > .col {
        margin-bottom: 0;
        border-right: 1px solid #231F20;
    }

    .dim-summary-grid > .col:last-child {
        border-right: none;
    }
}

/* ── Cards ─────────────────────────────────────────────────── */
.card-header {
    background-color: transparent;
    border-bottom-color: #dee2e6;
}

/* Signature box-shadow — podpisový prvok Pontis dizajnu (sekcia 9)
   Použitie: <div class="card card-pontis">...</div> pre kľúčové bloky */
.card-pontis {
    border: 1px solid #000000 !important;
    box-shadow: 5px 5px 0 #3EC7F4;
}

/* ── Navbar — biely bg, Pontis logo vľavo (zladený s PDF header a nadaciapontis.sk) ─ */
.navbar .pontis-logo {
    height: 66px;
    width: auto;
    flex-shrink: 0;
}

/* ── EU spolufinancovanie — povinný atribút na konci výsledkovej stránky ── */
.eu-cofunded img {
    display: block;
    width: 112px;
    height: auto;
}

.navbar-app-title {
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #231F20;
    font-size: 1rem;
    line-height: 1.25;
    text-align: center;
}

/* Logo a nadpis pod sebou, centrované — na všetkých rozlíšeniach (Pontis hero style). */
.navbar {
    padding-bottom: 1.5rem;
}

.navbar > .container-xl {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.navbar-brand {
    margin-right: 0;
}

/* ── Badge (sekcia 22) ─────────────────────────────────────── */
.badge {
    font-weight: 400;
    text-transform: uppercase;
}

/* ── Alerty ────────────────────────────────────────────────── */
.alert {
    border-width: 2px;
}