/**
 * SRZ Rada Theme - Responsive CSS
 *
 * Refactored: Mobile-first approach with clear breakpoints
 *
 * Breakpoints:
 * - Mobile:     0 - 767px
 * - Tablet:     768px - 1024px
 * - Desktop:    1025px - 1300px
 * - Large:      1301px+
 *
 * Note: Many styles require !important because WordPress FSE
 * generates inline styles that cannot be overridden otherwise.
 *
 * @package Srz_Rada
 * @since 1.0.0
 */

/* ==========================================================================
   CSS CUSTOM PROPERTIES (Variables)
   ========================================================================== */

:root {
    --srz-header-padding-mobile: 15px;
    --srz-header-padding-tablet: 20px;
    --srz-header-padding-desktop: 40px;
    --srz-banner-height-mobile: 400px;
    --srz-banner-height-tablet: 550px;
    --srz-banner-height-desktop: 800px;
}

/* ==========================================================================
   GLOBAL - Zabrániť horizontálnemu scrollu
   ========================================================================== */

html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body {
    position: relative !important;
}

/* WordPress Navigation Modal - musí byť nad všetkým */
body.has-modal-open {
    overflow: hidden !important;
}

.wp-block-navigation__responsive-container {
    z-index: 999999 !important;
}

.wp-block-navigation__responsive-container-open {
    z-index: 999998 !important;
}

.wp-block-navigation__responsive-dialog {
    z-index: 999999 !important;
}

/* Fix pre 100vw problém (scrollbar) */
.wp-site-blocks,
.wp-block-template-part,
footer {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Header - bez overflow hidden kvôli navigation menu */
header {
    max-width: 100% !important;
    width: 100% !important;
}

/* Logo box - vždy vertikálne centrované, logo sa nesmie posúvať */
.logo-box {
    align-items: center !important;
    flex-wrap: nowrap !important;
}

.logo-box .wp-block-site-logo {
    flex-shrink: 0 !important;
    align-self: center !important;
}

/* Logo 100 rokov - musí sa zmenšovať, nie tlačiť hlavné logo */
/* Pozn: max-width, margin-left, margin-top a width sa nastavujú cez Logo Position Tool */
.logo-box .logo-100-rokov {
    flex-shrink: 1 !important;
    min-width: 0 !important;
    /* max-width a overflow sa nastavujú dynamicky cez srz_rada_logo_position_css() */
    align-self: flex-end !important;
    margin-bottom: -5px !important;
}

.logo-box .logo-100-rokov img {
    max-width: 100% !important;
    height: auto !important;
    /* width, margin-top a margin-left sa nastavujú dynamicky */
}

/* Main element - bez overflow-x: hidden kvôli stacking context pre quick links */
main {
    max-width: 100% !important;
    width: 100% !important;
}

/* Alignfull elementy - nesmú byť širšie ako viewport */
.alignfull,
[class*="align-full"],
.wp-block-cover.alignfull,
.wp-block-group.alignfull {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ==========================================================================
   QUICK LINKS - Rovnaká výška kariet (všetky veľkosti)
   ========================================================================== */

/* Desktop - flex s rovnakou výškou */
.fashion-store-category {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
}

.fashion-store-category > .service-main-box {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 180px !important;
}

.fashion-store-category > .service-main-box h3 {
    margin-top: auto !important;
    margin-bottom: 0 !important;
}

/* ==========================================================================
   MOBILE STYLES (0 - 767px)
   ========================================================================== */

@media screen and (max-width: 767px) {

    /* Global reset for mobile */
    * {
        box-sizing: border-box;
    }

    html, body {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    /* Zabrániť pretečeniu akéhokoľvek elementu */
    img, video, iframe, embed, object,
    .wp-block-image, .wp-block-video, .wp-block-embed,
    .wp-block-group, .wp-block-cover, .wp-block-columns,
    figure, table {
        max-width: 100% !important;
    }

    /* Logo 100 rokov - skryť na mobile (príliš veľké) */
    .logo-100-rokov {
        display: none !important;
    }

    /* WordPress kontajnery */
    .wp-site-blocks,
    .wp-block-template-part,
    [class*="wp-container"] {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Skryť banner na mobile */
    .wp-block-srz-rada-banner-block,
    .wp-block-srz-rada-banner,
    .srz-banner-slider,
    .srz-banner-single,
    .banner-wrap,
    .main-slider,
    .owl-carousel.main-slider {
        display: none !important;
    }


    /* -------------------------------------------------------------------------
       TOP BAR - Contact info
       ------------------------------------------------------------------------- */

    .top-bar {
        padding: 10px 15px !important;
    }

    .top-bar .wp-block-group.is-layout-flex {
        flex-direction: column !important;
        align-items: center !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
    }

    .top-bar .wp-block-group.is-layout-flex p {
        text-align: center !important;
        font-size: 12px !important;
        margin: 0 !important;
    }

    /* Hide dashicons on very small screens */
    .top-bar .dashicons {
        display: none;
    }

    /* -------------------------------------------------------------------------
       HEADER MAIN - Logo, Search, Contact Button
       ------------------------------------------------------------------------- */

    .header-main {
        padding: 15px !important;
    }

    .header-main .wp-block-columns {
        flex-direction: column !important;
        gap: 15px !important;
    }

    .header-main .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
    }

    /* Logo box - centered on mobile, no wrap to prevent logo shifting */
    .logo-box {
        justify-content: center !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .logo-box .wp-block-site-logo {
        width: 60px !important;
        flex-shrink: 0 !important;
    }

    .logo-box .wp-block-site-logo img {
        width: 60px !important;
        height: auto !important;
    }

    /* Logo 100 rokov - max-width pre mobile */
    .logo-100-rokov,
    .logo-100-rokov img {
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
    }

    .logo-box .wp-block-site-title {
        font-size: 18px !important;
        text-align: center !important;
    }

    /* Search box - full width */
    .header-main .wp-block-search {
        width: 100% !important;
    }

    .header-main .wp-block-search__inside-wrapper {
        width: 100% !important;
    }

    /* Contact button - centered and smaller */
    .header-main .wp-block-buttons {
        justify-content: center !important;
        width: 100% !important;
    }

    .header-main .wp-block-button__link {
        padding: 10px 20px !important;
        font-size: 14px !important;
    }

    /* -------------------------------------------------------------------------
       MAIN HEADER - Navigation
       ------------------------------------------------------------------------- */

    .main-header {
        padding: 10px 15px !important;
    }

    .main-header .wp-block-columns {
        flex-direction: column !important;
    }

    .main-header .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
    }

    .main-header nav,
    .main-header ul,
    .main-header .wp-block-buttons {
        justify-content: center !important;
    }

    /* Navigácia - max-width bez overflow hidden (potrebné pre mobile menu) */
    .wp-block-navigation,
    .wp-block-navigation__container {
        max-width: 100% !important;
    }

    /* Navigation responsive menu */
    .wp-block-navigation__responsive-container.is-menu-open {
        padding: 20px !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
        padding-top: 20px !important;
    }

    /* -------------------------------------------------------------------------
       BANNER / SLIDER
       ------------------------------------------------------------------------- */

    /* Banner wrapper - reduced height */
    .banner-wrap {
        min-height: var(--srz-banner-height-mobile) !important;
    }

    .banner-wrap .wp-block-cover__inner-container {
        padding: 20px 15px !important;
    }

    /* Banner columns - stack vertically */
    .banner-wrap .wp-block-columns,
    .banner-wrap .sliderrs {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .banner-wrap .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
    }

    /* Banner heading - responsive font size */
    .banner-wrap h2,
    .banner-wrap .wp-block-heading {
        font-size: 28px !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }

    /* Banner buttons - centered */
    .banner-wrap .wp-block-buttons {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .banner-wrap .wp-block-button__link {
        padding: 10px 20px !important;
        font-size: 14px !important;
    }

    /* Owl Carousel navigation arrows */
    .main-slider .owl-nav {
        display: none !important;
    }

    .main-slider .owl-dots {
        bottom: 10px !important;
    }

    /* SRZ Banner slider (custom) */
    .srz-banner-single,
    .srz-banner-slide {
        min-height: var(--srz-banner-height-mobile) !important;
    }

    .srz-banner-inner {
        padding: 30px 15px !important;
        max-width: 100% !important;
    }

    .srz-banner-title {
        font-size: 28px !important;
        text-align: center !important;
    }

    .srz-banner-subtitle {
        font-size: 14px !important;
        text-align: center !important;
    }

    .srz-banner-buttons {
        justify-content: center !important;
    }

    /* -------------------------------------------------------------------------
       CONTENT SECTIONS
       ------------------------------------------------------------------------- */

    /* Service boxes */
    .service-main-box {
        margin-top: 0 !important;
        width: auto !important;
    }

    /* Hide overlap effect on mobile */
    .fse-overlap-image {
        position: relative !important;
        right: auto !important;
        bottom: auto !important;
        margin: 25px 0 !important;
    }

    /* Section headings */
    .wp-block-section-01 h2,
    .wp-block-section-02 h2 {
        font-size: 24px !important;
    }

    /* Blog grid - single column */
    .blog-area .wp-block-post-template {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Course columns */
    .course-column {
        flex-wrap: wrap !important;
        text-align: center !important;
    }

    .courses-inner-box h4 {
        font-size: 16px !important;
        margin-bottom: 10px !important;
    }

    .courses-inner-box img {
        width: 100% !important;
    }

    /* Achievement boxes */
    .achive-column,
    .ac-main-box {
        display: block !important;
        text-align: center !important;
    }

    .ac-image-box {
        margin: 0 auto 20px !important;
    }

    /* Fashion store / Category grid */
    .fashion-store-category {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
    }

    /* Šírka tlačidiel na mobile - max 280px ale nie viac ako viewport */
    .fashion-store-category > .service-main-box {
        width: calc(100% - 30px) !important;
        max-width: 280px !important;
    }

    /* Head column */
    .head-column {
        display: block !important;
    }

    .head-icon-box {
        text-align: center !important;
    }

    /* Contact form inputs */
    .wpcf7 input[type="text"],
    .wpcf7 input[type="tel"],
    .wpcf7 input[type="email"],
    .wpcf7 textarea {
        width: 100% !important;
    }

    /* -------------------------------------------------------------------------
       FOOTER
       ------------------------------------------------------------------------- */

    /* Stats bar - štatistiky nad footerom */
    .srz-circuit-stats {
        padding: 20px 15px !important;
    }

    .srz-circuit-stats > .wp-block-group {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        gap: 20px !important;
        align-items: center !important;
    }

    .srz-circuit-stats > .wp-block-group > .wp-block-group {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
    }

    .srz-circuit-stats p {
        font-size: 16px !important;
    }

    /* Stats ikony - override inline 60px na 40px */
    .srz-circuit-stats [style*="width:60px"] {
        width: 40px !important;
        height: 40px !important;
    }

    .srz-circuit-stats [style*="width:60px"] img {
        width: 24px !important;
        height: 24px !important;
    }

    /* Footer section - hlavný footer */
    .footer-section,
    .srz-circuit-footer {
        padding: 30px 15px !important;
    }

    .footer-section .wp-block-cover__inner-container > .wp-block-group,
    .srz-circuit-footer .wp-block-cover__inner-container > .wp-block-group {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        gap: 30px !important;
        align-items: center !important;
    }

    /* Social links sekcia */
    .footer-section .wp-block-cover__inner-container > .wp-block-group > .wp-block-group:first-child,
    .srz-circuit-footer .wp-block-cover__inner-container > .wp-block-group > .wp-block-group:first-child {
        text-align: center !important;
    }

    /* Footer navigácia - odkazy */
    .footer-section .wp-block-cover__inner-container > .wp-block-group > .wp-block-group:last-child,
    .srz-circuit-footer .wp-block-cover__inner-container > .wp-block-group > .wp-block-group:last-child {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        gap: 25px !important;
        align-items: center !important;
    }

    .footer-div {
        text-align: center !important;
    }

    .footer-div h3,
    .footer-div p {
        text-align: center !important;
    }

    .footer-section .wp-block-columns {
        flex-direction: column !important;
        gap: 30px !important;
    }

    .footer-section .wp-block-column {
        flex-basis: 100% !important;
        text-align: center !important;
    }

    /* Copyright */
    .srz-circuit-copyright {
        padding: 15px !important;
    }

    .srz-circuit-copyright p {
        font-size: 13px !important;
    }
}

/* ==========================================================================
   TABLET STYLES (768px - 1024px)
   ========================================================================== */

@media screen and (min-width: 768px) and (max-width: 1024px) {

    html, body {
        overflow-x: hidden;
    }

    /* -------------------------------------------------------------------------
       TOP BAR
       ------------------------------------------------------------------------- */

    .top-bar .wp-block-group.is-layout-flex {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 15px 30px !important;
    }

    /* -------------------------------------------------------------------------
       HEADER MAIN
       ------------------------------------------------------------------------- */

    .header-main .wp-block-columns {
        flex-wrap: wrap !important;
    }

    .header-main .wp-block-column:first-child {
        flex-basis: 100% !important;
        margin-bottom: 15px !important;
    }

    .header-main .wp-block-column:nth-child(2),
    .header-main .wp-block-column:nth-child(3) {
        flex-basis: 48% !important;
    }

    .logo-box {
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }

    .logo-box .wp-block-site-logo {
        flex-shrink: 0 !important;
    }

    /* Logo 100 rokov - zobraziť na tablet ale menšie */
    .logo-100-rokov {
        display: block !important;
        max-width: 180px !important;
        margin-left: 0 !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }

    .logo-100-rokov img {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
    }

    /* -------------------------------------------------------------------------
       BANNER
       ------------------------------------------------------------------------- */

    .banner-wrap {
        min-height: var(--srz-banner-height-tablet) !important;
    }

    .banner-wrap h2,
    .banner-wrap .wp-block-heading {
        font-size: 42px !important;
    }

    .banner-wrap .wp-block-columns {
        gap: 30px !important;
    }

    /* SRZ Banner */
    .srz-banner-single,
    .srz-banner-slide {
        min-height: var(--srz-banner-height-tablet) !important;
    }

    .srz-banner-title {
        font-size: 42px !important;
    }

    /* -------------------------------------------------------------------------
       CONTENT
       ------------------------------------------------------------------------- */

    .blog-area .wp-block-post-template {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .fashion-store-category,
    .ac-main-box {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 30px !important;
        justify-items: center !important;
    }

    /* Zmenšenie tlačidiel na 80% */
    .fashion-store-category > .service-main-box {
        width: 80% !important;
    }

    /* Centrovanie posledného tlačidla v nepárnom počte */
    .fashion-store-category > .service-main-box:last-child:nth-child(odd) {
        grid-column: 1 / -1 !important;
        width: 40% !important;
    }

    .head-column {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .service-main-box {
        margin-top: 20px !important;
    }

    .sliderrs {
        padding-bottom: 80px !important;
    }
}

/* ==========================================================================
   SMALL DESKTOP STYLES (1025px - 1300px)
   ========================================================================== */

@media screen and (min-width: 1025px) and (max-width: 1300px) {

    /* -------------------------------------------------------------------------
       HEADER - Logo nesmie posúvať
       ------------------------------------------------------------------------- */

    .logo-box {
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    .logo-box .wp-block-site-logo {
        flex-shrink: 0 !important;
    }

    .logo-box .logo-100-rokov {
        flex-shrink: 1 !important;
        max-width: 280px !important;
    }

    /* Container width adjustment */
    .sliderrs,
    [class*="wp-container-core-group-is-layout-"] > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
        max-width: 90%;
    }

    .main-slider .owl-stage-outer {
        max-width: 100%;
    }

    /* -------------------------------------------------------------------------
       BANNER
       ------------------------------------------------------------------------- */

    .banner-wrap {
        min-height: 600px !important;
    }

    .banner-wrap h2,
    .banner-wrap .wp-block-heading {
        font-size: 50px !important;
    }

    /* -------------------------------------------------------------------------
       CONTENT
       ------------------------------------------------------------------------- */

    .shipping-box p {
        font-size: 13px !important;
    }

    .service-main-box h3 {
        font-size: 15px !important;
    }

    .sliderrs {
        padding-bottom: 100px !important;
    }
}

/* ==========================================================================
   LARGE DESKTOP STYLES (1301px - 1550px)
   ========================================================================== */

@media screen and (min-width: 1301px) and (max-width: 1550px) {

    /* -------------------------------------------------------------------------
       HEADER - Logo nesmie posúvať
       ------------------------------------------------------------------------- */

    .logo-box {
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    .logo-box .wp-block-site-logo {
        flex-shrink: 0 !important;
    }

    .logo-box .logo-100-rokov {
        flex-shrink: 1 !important;
        max-width: 320px !important;
    }

    .shipping-box p {
        font-size: 14px !important;
    }

    /* Footer columns adjustment */
    .columnn-1 {
        flex-basis: 25% !important;
    }

    .columnn-2 {
        flex-basis: 22% !important;
    }

    .columnn-3 {
        flex-basis: 22% !important;
    }

    .columnn-4 {
        flex-basis: 31% !important;
    }
}

/* ==========================================================================
   UTILITY CLASSES FOR RESPONSIVE VISIBILITY
   ========================================================================== */

/* Hide on mobile */
@media screen and (max-width: 767px) {
    .hide-on-mobile {
        display: none !important;
    }
}

/* Hide on tablet */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .hide-on-tablet {
        display: none !important;
    }
}

/* Hide on desktop */
@media screen and (min-width: 1025px) {
    .hide-on-desktop {
        display: none !important;
    }
}

/* Show only on mobile */
@media screen and (min-width: 768px) {
    .show-only-mobile {
        display: none !important;
    }
}

/* Show only on tablet */
@media screen and (max-width: 767px),
screen and (min-width: 1025px) {
    .show-only-tablet {
        display: none !important;
    }
}

/* Show only on desktop */
@media screen and (max-width: 1024px) {
    .show-only-desktop {
        display: none !important;
    }
}

/* ==========================================================================
   IMPORTANT TOPICS - Špeciálne pravidlá (do 1200px)
   ========================================================================== */

@media screen and (max-width: 1200px) {
    /* Important Topics - karty pod sebou
       WordPress generuje dynamické triedy ako wp-container-core-columns-is-layout-*
       s flex-wrap: nowrap, preto treba použiť !important */
    .highlights-inner-box {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 20px !important;
    }

    .highlights-inner-box > .wp-block-column {
        flex-basis: auto !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        width: 480px !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
}

/* ==========================================================================
   SMALL MOBILE - 90% width (do 600px)
   ========================================================================== */

@media screen and (max-width: 600px) {
    /* Important Topics - 90% šírka na malých mobile */
    .highlights-inner-box > .wp-block-column {
        width: 90% !important;
        min-width: unset !important;
        max-width: 90% !important;
    }

    /* Quick Links - fixná 90% šírka na malých mobile */
    .fashion-store-category > .service-main-box {
        width: 90% !important;
        min-width: 90% !important;
        max-width: 90% !important;
    }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    .top-bar,
    .main-header,
    .header-main .wp-block-search,
    .header-main .wp-block-buttons,
    .banner-wrap,
    .footer-section {
        display: none !important;
    }

    body {
        font-size: 12pt;
        line-height: 1.4;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }
}