/* ==========================================================================
   Žluté stránky - PUBLIC support section (napoveda*.php)
   Loaded AFTER podpora.css.

   podpora.css already styles the shared vocabulary (page-hero, category-card,
   article-card, article-body, article-feedback, related-articles, toc, section-
   header, buttons). The pages use the site's real header.php / footer.php for
   chrome, so this file adds only the public-specific helpers (.npv-*) for the
   hero search, article list rows, search results and CTA blocks that the
   business section did not have.

   Accent + tokens (--color-yellow, --color-gray-*, --radius-*, --shadow-*,
   --transition-*, --header-height) come from the site's main.css, so the
   napoveda pages match the main yellow brand. Every var() also carries a
   literal fallback, so the section still renders if a token is ever renamed.
   ========================================================================== */

/* --------------------------------------------------------------------------
   PAGE LAYOUT
   The business section ran full-bleed with its own dark backdrop. On the public
   site the pages sit inside the shared layout, whose <main> butts straight
   against the sticky site header and the footer. These rules give the content
   room to breathe and a faint tinted backdrop so white cards don't dissolve.
   Scoped to .page-napoveda so nothing here leaks into other pages.
   -------------------------------------------------------------------------- */

/* Clear the fixed site header at the top and give the footer breathing room
   below. main.css makes .header `position: fixed` (height: var(--header-height),
   72px desktop / 64px mobile) with NO global content offset — every page clears
   it itself. podpora.css then set .main-container padding to 0 for the business
   app's full-bleed layout, so here the content ran straight under the header.

   Using calc(var(--header-height) + …) tracks the real header height, including
   the mobile breakpoint, instead of a guessed pixel value. padding-top (not
   margin) can't margin-collapse through the section wrappers, so the gap always
   holds. */
.page-napoveda .main-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: calc(var(--header-height, 72px) + 2rem) 1.5rem 4rem;
    overflow: visible;
}

/* Belt-and-braces against the sticky header: if the browser ever scrolls a
   hero to the top (anchor jump, back-forward cache), keep it below the nav. */
.page-napoveda .page-hero,
.page-napoveda .page-hero-mini {
    scroll-margin-top: calc(var(--header-height, 72px) + 1rem);
}

@media (max-width: 768px) {
    .page-napoveda .main-container {
        padding: calc(var(--header-height, 64px) + 1.5rem) 1rem 3rem;
    }
}

/* --------------------------------------------------------------------------
   HUB HERO (full)
   podpora.css only styles .page-hero-mini (the small coloured banner on
   category/article pages). The hub uses a full .page-hero, which podpora.css
   leaves unstyled — so its white title/subtitle were invisible on the light
   page and the search box collapsed onto the section below. Give it the same
   gradient treatment as the mini hero so the white text reads and the search
   sits in a proper container.
   -------------------------------------------------------------------------- */
.page-napoveda .page-hero.npv-hero {
    background: linear-gradient(135deg, var(--color-yellow, #FFD900), var(--color-yellow-dark, #E6C200));
    border-radius: var(--radius-xl, 20px);
    padding: 3rem 2rem 3.25rem;
    margin-bottom: 2.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.page-napoveda .page-hero.npv-hero .page-hero-title {
    font-size: 2rem;
    color: var(--color-black, #0A0A0A);
}

.page-napoveda .page-hero.npv-hero .page-hero-subtitle {
    color: rgba(10, 10, 10, 0.78);
    max-width: 620px;
    margin: 0 auto;
}

/* --------------------------------------------------------------------------
   PAGE LAYOUT
   The business section ran full-bleed with its own dark backdrop. On the public
   site the pages sit inside the shared layout, whose <main> butts straight
   against the sticky site header and the footer. These rules give the content
   room to breathe and a faint tinted backdrop so white cards don't dissolve.
   Scoped to .page-napoveda so nothing here leaks into other pages.
   -------------------------------------------------------------------------- */

/* Fallbacks: if main.css ever renames a token, the section still renders
   instead of collapsing to unstyled white. Real tokens win when present. */
.page-napoveda {
    --npv-bg: var(--color-gray-100, #eef2f6);
    --npv-card: var(--color-white, #ffffff);
    --npv-line: var(--color-gray-200, #e2e8f0);
    --npv-ink: var(--color-gray-800, #1f2937);
    --npv-ink-soft: var(--color-gray-500, #6b7280);
    --npv-accent: var(--color-yellow, #FFD900);
    --npv-accent-dark: var(--color-yellow-dark, #E6C200);
    --npv-ink-on-accent: var(--color-black, #0A0A0A);

    background: var(--npv-bg);
    min-height: 100vh;
}


/* On the tinted backdrop, lift the cards with a real border + shadow so they
   read as distinct surfaces instead of dissolving into the page. */
.page-napoveda .category-card,
.page-napoveda .article-card {
    background: var(--npv-card);
    border: 1px solid var(--npv-line);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.06);
}

.page-napoveda .category-card:hover,
.page-napoveda .article-card:hover {
    border-color: var(--npv-accent);
    box-shadow: 0 4px 16px var(--color-yellow-glow, rgba(255, 217, 0, 0.4));
}

/* Category-icon tiles: the pastel gradient behind each emoji. podpora.css
   defines these, but the public node may not ship podpora.css — without them
   every tile falls back to one flat colour (the "blue behind every emoji").
   Re-declaring the ones the public categories use keeps the icons colourful
   and self-contained. Scoped to .page-napoveda so they never clash. */
.page-napoveda .category-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg, 12px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 1.25rem;
    background: linear-gradient(135deg, #E0F2FE, #BAE6FD); /* default */
}
.page-napoveda .category-icon.services { background: linear-gradient(135deg, #FEF3C7, #FDE68A); }
.page-napoveda .category-icon.offers   { background: linear-gradient(135deg, #FEE2E2, #FECACA); }
.page-napoveda .category-icon.profile  { background: linear-gradient(135deg, #DBEAFE, #BFDBFE); }
.page-napoveda .category-icon.billing  { background: linear-gradient(135deg, #CFFAFE, #A5F3FC); }
.page-napoveda .category-icon.reviews  { background: linear-gradient(135deg, #FEF9C3, #FEF08A); }
.page-napoveda .category-icon.coupons  { background: linear-gradient(135deg, #EDE9FE, #DDD6FE); }
.page-napoveda .category-icon.vouchers { background: linear-gradient(135deg, #D1FAE5, #A7F3D0); }
.page-napoveda .category-icon.analytics{ background: linear-gradient(135deg, #FCE7F3, #FBCFE8); }
.page-napoveda .category-icon.marketing{ background: linear-gradient(135deg, #E0E7FF, #C7D2FE); }

/* The small round icon on article-list rows (search + category pages) had the
   same single-colour problem. Give it a soft neutral tile. */
.page-napoveda .npv-article-row-icon,
.page-napoveda .npv-other-cat-icon {
    background: var(--color-gray-50, #f1f5f9);
}

/* --------------------------------------------------------------------------
   HERO SEARCH
   -------------------------------------------------------------------------- */

.npv-hero {
    text-align: center;
}

.npv-search {
    display: flex;
    align-items: center;
    max-width: 640px;
    margin: 1.5rem auto 0;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    padding-left: 1.1rem;
}

.npv-search-icon {
    font-size: 1.1rem;
    color: var(--color-gray-400);
    flex-shrink: 0;
}

.npv-search-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 1rem 0.9rem;
    font-family: inherit;
    font-size: 1rem;
    color: var(--color-gray-800);
    background: transparent;
}

.npv-search-btn {
    flex-shrink: 0;
    border: none;
    padding: 0 1.6rem;
    align-self: stretch;
    background: var(--color-yellow, #FFD900);
    color: var(--color-black, #0A0A0A);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.npv-search-btn:hover {
    background: var(--color-yellow-dark, #E6C200);
}

/* --------------------------------------------------------------------------
   CATEGORY CARD ADDITION
   -------------------------------------------------------------------------- */

.npv-cat-count {
    margin-top: 0.75rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-gray-400);
}

.npv-cat-hero-icon {
    margin-right: 0.4rem;
}

.npv-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--color-gray-500);
    font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   ARTICLE LIST ROWS (category + search)
   -------------------------------------------------------------------------- */

.npv-article-list-wrap,
.npv-search-results-wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.npv-article-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.npv-article-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.npv-article-row:hover {
    border-color: var(--color-yellow, #FFD900);
    box-shadow: var(--shadow-md);
    transform: translateX(3px);
}

.npv-article-row-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: var(--radius-md);
    font-size: 1.4rem;
    background: var(--color-gray-50);
}

.npv-article-row-main {
    flex: 1;
    min-width: 0;
}

.npv-article-row-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0 0 0.3rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-gray-800);
}

.npv-article-row-excerpt {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--color-gray-500);
}

.npv-article-row-cat {
    display: inline-block;
    margin-top: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-gray-400);
}

.npv-article-row-meta {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-gray-400);
    white-space: nowrap;
}

.npv-article-row-arrow {
    font-size: 1.1rem;
    color: var(--color-gray-300);
    transition: color var(--transition-fast);
}

.npv-article-row:hover .npv-article-row-arrow {
    color: var(--color-yellow-dark, #E6C200);
}

/* --------------------------------------------------------------------------
   OTHER CATEGORIES STRIP
   -------------------------------------------------------------------------- */

.npv-other-cats {
    max-width: 1400px;
    margin: 2.5rem auto 0;
    padding: 0 1.5rem;
}

.npv-other-cats-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.npv-other-cat {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.npv-other-cat:hover {
    border-color: var(--color-yellow, #FFD900);
    box-shadow: var(--shadow-sm);
}

.npv-other-cat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    background: var(--color-gray-50);
}

.npv-other-cat-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--color-gray-700);
}

/* --------------------------------------------------------------------------
   SEARCH RESULTS STATES
   -------------------------------------------------------------------------- */

.npv-search-count {
    margin: 1.5rem 0 0.5rem;
    font-size: 0.95rem;
    color: var(--color-gray-600);
}

.npv-search-hint,
.npv-search-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--color-gray-500);
}

.npv-search-empty-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
}

.npv-search-empty h2 {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--color-gray-800);
    margin: 0 0 0.5rem;
}

.npv-search-empty p {
    max-width: 480px;
    margin: 0 auto 1.5rem;
    line-height: 1.6;
}

.npv-search-empty-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.npv-hero-search .npv-search {
    margin-top: 1rem;
}

/* --------------------------------------------------------------------------
   CTA SECTION (hub)
   -------------------------------------------------------------------------- */

.npv-cta-section {
    max-width: 1400px;
    margin: 3rem auto 0;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.npv-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.75rem;
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, var(--color-yellow-light, #FFF8D6) 0%, #FFEFA8 100%);
    border: 1px solid var(--color-yellow, #FFD900);
}

.npv-cta-secondary {
    background: var(--color-gray-50, #f8fafc);
    border-color: var(--color-gray-200, #e5e7eb);
}

.npv-cta-text h2 {
    margin: 0 0 0.35rem;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-gray-800, #1f2937);
}

.npv-cta-text p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-gray-600, #4b5563);
}

.npv-cta-btn {
    flex-shrink: 0;
    padding: 0.75rem 1.4rem;
    border-radius: var(--radius-full, 9999px);
    background: var(--color-yellow, #FFD900);
    color: var(--color-black, #0A0A0A);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--transition-fast, 0.15s ease);
}

.npv-cta-btn:hover {
    filter: brightness(0.95);
}

.npv-cta-btn-outline {
    background: transparent;
    color: var(--color-black, #0A0A0A);
    border: 1.5px solid var(--color-yellow-dark, #E6C200);
}

.npv-cta-btn-outline:hover {
    background: var(--color-yellow, #FFD900);
    color: var(--color-black, #0A0A0A);
    filter: none;
}

/* --------------------------------------------------------------------------
   KONTAKT PAGE (kontakt.php)
   Two-column layout: the form on the left, contact details + quick links on
   the right. Same tokens and card treatment as the rest of the section, so it
   reads as part of the nápověda family.
   -------------------------------------------------------------------------- */

.npv-kontakt-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 1.75rem;
    align-items: start;
}

.npv-kontakt-form-card,
.npv-kontakt-info-card {
    background: var(--color-white, #fff);
    border: 1px solid var(--color-gray-200, #e5e7eb);
    border-radius: var(--radius-xl, 20px);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.06);
    padding: 2rem;
}

.npv-kontakt-info-card + .npv-kontakt-info-card {
    margin-top: 1.25rem;
}

.npv-kontakt-h2 {
    margin: 0 0 1.25rem;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-gray-800, #1f2937);
}

/* --- Form fields --- */
.npv-field {
    margin-bottom: 1.1rem;
}

.npv-field label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-gray-700, #374151);
}

.npv-field input,
.npv-field select,
.npv-field textarea {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--color-gray-200, #e5e7eb);
    border-radius: var(--radius-md, 10px);
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--color-gray-800, #1f2937);
    background: var(--color-white, #fff);
    transition: border-color var(--transition-fast, 0.15s ease),
                box-shadow var(--transition-fast, 0.15s ease);
}

.npv-field input:focus,
.npv-field select:focus,
.npv-field textarea:focus {
    outline: none;
    border-color: var(--color-yellow, #FFD900);
    box-shadow: 0 0 0 3px var(--color-yellow-glow, rgba(255, 217, 0, 0.4));
}

.npv-field textarea {
    resize: vertical;
    min-height: 130px;
}

.npv-field input.has-error,
.npv-field textarea.has-error {
    border-color: var(--color-error, #EF4444);
}

.npv-field-error {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: var(--color-error, #EF4444);
}

/* --- Submit + note --- */
.npv-kontakt-submit {
    width: 100%;
    padding: 0.85rem 1.5rem;
    border: none;
    border-radius: var(--radius-full, 9999px);
    background: var(--color-yellow, #FFD900);
    color: var(--color-black, #0A0A0A);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--transition-fast, 0.15s ease);
}

.npv-kontakt-submit:hover {
    background: var(--color-yellow-dark, #E6C200);
}

.npv-kontakt-note {
    margin: 0.9rem 0 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--color-gray-500, #6b7280);
    text-align: center;
}

.npv-kontakt-note a {
    color: var(--color-gray-700, #374151);
    text-decoration: underline;
}

.npv-kontakt-alert {
    margin-bottom: 1.25rem;
    padding: 0.85rem 1.1rem;
    border-radius: var(--radius-md, 10px);
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #991B1B;
    font-size: 0.88rem;
    line-height: 1.5;
}

/* --- Contact details --- */
.npv-kontakt-info-row {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 0.75rem 0;
    border-top: 1px solid var(--color-gray-100, #f3f4f6);
}

.npv-kontakt-info-row:first-of-type {
    border-top: none;
    padding-top: 0;
}

.npv-kontakt-info-icon {
    flex-shrink: 0;
    font-size: 1.25rem;
    line-height: 1.4;
}

.npv-kontakt-info-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-gray-400, #9ca3af);
    margin-bottom: 0.15rem;
}

.npv-kontakt-info-row a {
    color: var(--color-gray-800, #1f2937);
    font-weight: 600;
    text-decoration: none;
}

.npv-kontakt-info-row a:hover {
    color: var(--color-yellow-dark, #E6C200);
}

/* --- Quick-help buttons --- */
.npv-kontakt-help-text {
    margin: 0 0 1rem;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--color-gray-600, #4b5563);
}

.npv-kontakt-help-btn {
    display: block;
    padding: 0.7rem 1rem;
    border-radius: var(--radius-md, 10px);
    background: var(--color-gray-50, #f9fafb);
    border: 1px solid var(--color-gray-200, #e5e7eb);
    color: var(--color-gray-800, #1f2937);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition-fast, 0.15s ease);
}

.npv-kontakt-help-btn + .npv-kontakt-help-btn {
    margin-top: 0.6rem;
}

.npv-kontakt-help-btn:hover {
    border-color: var(--color-yellow, #FFD900);
    background: var(--color-yellow-light, #FFF8D6);
}

.npv-kontakt-business {
    background: var(--color-gray-50, #f9fafb);
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .npv-cta-section {
        grid-template-columns: 1fr;
    }

    .npv-cta {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .npv-article-row-excerpt {
        display: none;
    }

    .npv-kontakt-grid {
        grid-template-columns: 1fr;
    }
}