/*
Theme Name:  IDSK Template – SVPS
Description: Child téma pre IDSK Template prispôsobená pre data.svps.sk (ŠVPS SR).
             Umožňuje bezpečné úpravy bez rizika straty zmien pri aktualizácii rodičovskej témy.
Template:    idsk-template
Version:     1.1.0
Author:      Štátna veterinárna a potravinová správa SR
Text Domain: idsk-template-svps
Requires at least: 6.0
Requires PHP: 7.4
*/

/*
 * Vlastné CSS úpravy pre data.svps.sk
 * Pridávajte sem – neprekrývajte štýly priamo v súboroch rodičovskej témy.
 */

/* ── Block Pattern: O portáli (.svps-o-portali) ─────────────────────────────
 *
 * Informačný úvodný blok s logom iniciatívy, názvom inštitúcie a popisom.
 * Vychádza z IDSK dizajnu: govuk-inset-text + govuk-notification-banner.
 */
.svps-o-portali {
    border-left: 5px solid #126dff;
    background-color: #f5f5f5;
    padding: 1.5rem 2rem !important;
    position: relative;
    margin-bottom: 2rem;
}

/* Horný riadok: badge "Otvorené dáta" + doménový názov */
.svps-o-portali__badge-row {
    margin-bottom: 1rem !important;
    padding: 0 !important;
    gap: 0 !important;
}

.svps-o-portali__badge {
    display: inline-block !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    background-color: #126dff !important;
    padding: 3px 10px !important;
    border-radius: 2px !important;
    margin: 0 !important;
    line-height: 1.8 !important;
}

.svps-o-portali__org {
    font-size: 13px !important;
    color: #757575 !important;
    margin: 0 !important;
    font-weight: 400 !important;
}

/* Nadpis inštitúcie */
.svps-o-portali__title {
    margin-bottom: 0.75rem !important;
    margin-top: 0 !important;
    color: #000000 !important;
}

/* Popis portálu */
.svps-o-portali__body {
    margin-bottom: 0 !important;
    color: #000000 !important;
    max-width: 70ch;
}

/* ── Logo SVPS — stredový stĺpec (odkaz na svps.sk) ────────────────────────
 * Vymenené poradie: Open data vľavo | Logo stred | Vyhľadávanie vpravo.
 */
.svps-logo-center-col {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-top: 4px;
    padding-bottom: 4px;
}

@media (min-width: 640px) {
    .svps-logo-center-col {
        justify-content: center;
        padding-top: 0;
        padding-bottom: 0;
    }
}

.svps-logo-center-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.svps-logo-center-link:hover {
    opacity: 0.85;
}

.svps-logo-center-img {
    height: 40px;
    width: auto;
    display: block;
}

/* Open data odkaz — bez podčiarknutia, zachová gradient */
.svps-open-data-link {
    text-decoration: none;
    display: inline-flex;
}

.svps-open-data-link:hover .svps-od-label {
    opacity: 0.8;
}

.svps-open-data-link:hover .svps-od-icon {
    opacity: 0.75;
}

/* Editor preview – rovnaký vzhľad v editore */
.editor-styles-wrapper .svps-o-portali {
    border-left: 5px solid #126dff;
    background-color: #f5f5f5;
    padding: 1.5rem 2rem;
}

/* ── Skryť vyhľadávanie v mobilnom menu ────────────────────────────────────
 * Search form je dostupný aj v hlavičke (1 tap), v menu je nadbytočný (2 tapy).
 * nav-mobile.php volá get_search_form() — skryjeme ho len na mobilnom viewporte.
 */
@media (max-width: 640px) {
    .idsk-header-web__nav--mobile .search-form {
        display: none;
    }
}

/* ── Jazykový prepínač – zarovnanie vpravo ─────────────────────────────────
 * .govuk-grid-column-full v .idsk-header-web__brand obsahuje gestor text
 * aj lang switcher. Flex + margin-left: auto posunie prepínač na pravú stranu.
 */
.idsk-header-web__brand .govuk-grid-column-full {
    display: flex;
    align-items: center;
}

.idsk-header-web__brand-language {
    margin-left: auto;
}

/* ── Hamburger menu + mobile/desktop prepínanie hlavičkového riadku ────────
 *
 * Desktop (≥ 769px):
 *   - .idsk-header-web__main-headline (logo + hamburger z nav-logo.php) — skryté
 *   - .svps-main-header-row (3 stĺpce: Open data | Logo | Hľadanie) — viditeľné
 *
 * Mobile (≤ 768px):
 *   - .idsk-header-web__main-headline — viditeľné (štandardné logo + hamburger)
 *   - .svps-main-header-row — skryté (3 stĺpce by sa len nehezkne stohovali)
 *
 * Breakpoint 48.0525em = 768.84px — zhoduje sa s IDSK CSS pre menu-button.
 */
.idsk-header-web__main-headline {
    padding-top: 12px;
    padding-bottom: 12px;
}

@media (min-width: 48.0625em) {
    /* Desktop: skry IDSK headline (logo + hamburger z nav-logo.php) */
    .idsk-header-web__main-headline {
        display: none !important;
    }
    /* Desktop: zobraz náš 3-stĺpcový riadok */
    .svps-main-header-row {
        display: flex;
    }
}

@media (max-width: 48.0525em) {
    /* Mobile: Open Data brand zostáva viditeľný — skryjeme len logo SVPS a hľadanie */
    .svps-logo-center-col {
        display: none !important;
    }
    .idsk-header-web__main-action {
        display: none !important;
    }
}

/* ── Voľný priestor nad hlavičkovým obsahom ────────────────────────────────
 * "je to nacapené" — pridáme padding nad .idsk-header-web__main aby obsah dýchal.
 */
.idsk-header-web__main {
    padding-top: 8px;
    padding-bottom: 8px;
}

/* ── Open data brand — vlastný stredový stĺpec ─────────────────────────────
 * Na mobile celý riadok skrytý. Na desktope: flex, centrovanie oboch osí,
 * veľkosť ikony a textu zodpovedá vizuálnej váhe loga vľavo.
 */
.svps-open-data-col {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-left: none !important;
    padding-top: 4px;
    padding-bottom: 4px;
}

@media (min-width: 640px) {
    .svps-open-data-col {
        justify-content: flex-start;
        padding-top: 0;
        padding-bottom: 0;
    }
}

.svps-open-data-brand {
    display: flex;
    align-items: center;
    gap: 11px;
}

.svps-open-data-brand .svps-od-icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    stroke: url(#svps-od-grad);
    stroke-width: 1.2;
}

.svps-open-data-brand .svps-od-label {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
    font-size: 25px;
    font-weight: 600;
    font-style: normal;
    letter-spacing: -0.025em;
    white-space: nowrap;
    line-height: 1.2;
    background: linear-gradient(135deg, #0055d4 0%, #00a2ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* ── Search input — biely background (pôvodná IDSK2 focus farba zostáva) ── */
.govuk-input,
input[type="search"],
input[type="text"] {
    background-color: #ffffff !important;
}


/* ── Focus: search input → IDSK3 oranžová (#d96e00) ────────────────────── */
.govuk-input:focus,
input[type="search"]:focus,
input[type="text"]:focus,
.search-input:focus {
    outline: 3px solid #d96e00 !important;
    box-shadow: inset 0 0 0 1px #d96e00 !important;
    border-color: #d96e00 !important;
}

/* ── Language button: zrušiť IDSK2 žlté podfarbenie pri fokuse ──────────── */
.idsk-header-web__brand-language-button:focus,
.idsk-header-web__brand-language-button.\:focus {
    background-color: transparent !important;
    box-shadow: none !important;
    color: #ffffff !important;
    text-decoration: underline !important;
    outline: 2px solid #ffffff !important;
    outline-offset: 2px !important;
}
.idsk-header-web__brand-language-button:focus .idsk-header-web__link-arrow,
.idsk-header-web__brand-language-button.\:focus .idsk-header-web__link-arrow {
    background-color: #ffffff !important;
}