/* 
Theme Name: Hello Elementor Child
Author: SkansenSanok
Author URI: https://skansensanok.pl
Template: hello-elementor
Version: 2.0.1
Requires PHP: 7.4
Text Domain: hello-elementor-child
Description: WCAG 2.2 AA compliant child theme for Skansen Sanok open-air museum
*/

/* ========================================
   TABLE OF CONTENTS
   ========================================
   1. CSS Custom
   2. Body
   3. Screen Reader & Accessibility
   4. Skip Links
   5. Typography
   6. Focus Styles (WCAG 2.4.7)
   7. Layout Components
   8. Navigation & Breadcrumbs
   9. Landing Video Component
   10. Slider Controls
   11. Grayscale Mode
   12. Utility Classes
   13. Responsive Design
   14. Print Styles
   ======================================== */


:root {
    --font-primary: 'MuseoModerno', sans-serif;  
    --font-secondary: 'Nunito', sans-serif;

    /* Color Palette */
    --color-dark: #000;
    --color-gold: #D1A552;
    --color-brown-dark: #4B2E1F;
    --color-brown-medium: #8B6C54;
    --color-cream: #F2EFEA;
    --color-beige: #E6E0D8;
    --color-gray: #767676; 
    --color-charcoal: #292929;
    --color-gray-light: #DBDBDB;

    /* Focus */
    --focus-color: #D1A552;
    --focus-width: 2px;
    --focus-style: solid;
    --focus-offset: 3px;
    --focus-border-radius: 2px;
    --transition-normal: 0.3s ease;
    --transition-fast: 0.15s ease;
}


/* ========================================
   2. BODY
   ======================================== */

body {
    overflow-y: auto;
    font-family: var(--font-secondary);
    font-size: 1.125rem; /* 18px */
    line-height: 1.6;
    color: var(--color-dark);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.page-content {
padding: 40px 0;
}


*,
*::before,
*::after {
    box-sizing: border-box;
}

body.home-page-grayscale {
    --focus-color: #FFFFFF;
}


/* Chrome iOS specific fixes */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 768px) {
        html {
            height: -webkit-fill-available;
        }
        
        body {
            min-height: 100vh;
            min-height: -webkit-fill-available;
            min-height: var(--actual-height, 100vh);
        }
        
        #landing-movie {
            min-height: 100vh !important;
            min-height: -webkit-fill-available !important;
            height: var(--actual-height, 100vh) !important;
        }
        
        footer,
        .elementor-location-footer {
            min-height: 0 !important;
            height: auto !important;
            max-height: none !important;
        }
    }
}


/* TRANGLE NA STRONIE BILETOWEJ */
.triangle-edge::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 25px;
    background-image: url("data:image/svg+xml,%3Csvg width='1171' height='25' viewBox='0 0 1171 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1139.5 13.5L1171 1.5V24.5H-172V7.5L-155 0L-121.5 14.5L-88.5 0L-54.5 14.5L-22 0L10 14.5L45.5 0L77.5 14.5L111.5 0L144.5 14.5L177.5 0L210 14.5L243 0L277 13.5L311 0L342 13.5L377.5 0L409 13.5L444 0L475.5 13.5L496.744 5.40625L509 0L542.5 14.5L575.5 0L609.5 14.5L642 0L674 14.5L709.5 0L741.5 14.5L775.5 0L808.5 14.5L841.5 0L874 14.5L907 0L941 13.5L975 0L1006 13.5L1041.5 0L1073 13.5L1108 0L1139.5 13.5Z' fill='%23F5F5F5'/%3E%3C/svg%3E");
    background-size: cover;
    background-repeat: repeat-x;
    background-position: bottom;
    z-index: 1;
}



/* Reduced motion - WCAG */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ========================================
   3. SCREEN READER & ACCESSIBILITY
   ======================================== */

.screen-reader-text,
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.screen-reader-text:focus,
.visually-hidden:focus {
    position: fixed !important;
    top: 0;
    left: 0;
    width: auto !important;
    height: auto !important;
    padding: 15px 23px 14px !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    background-color: #000;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    z-index: 100000;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
}


/* ========================================
   4. SKIP LINKS (WCAG 2.4.1)
   ======================================== */

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    z-index: 100000;
    padding: 8px 16px;
    background-color: #000;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: 0;
    outline: var(--focus-width) var(--focus-style) var(--focus-color);
    outline-offset: 2px;
}


/* ========================================
   5. TYPOGRAPHY
   ======================================== */


h1,
.elementor-heading-title.elementor-size-xxl {
    font-family: var(--font-primary);
    font-size: clamp(2rem, 5vw, 2.75rem); /* Responsive: 32px - 44px */
    line-height: 1.2;
    color: var(--color-brown-dark);
    margin-bottom: 1rem;
}

h2,
.elementor-heading-title.elementor-size-xl {
    font-family: var(--font-primary);
    font-size: clamp(1.5rem, 4vw, 2.125rem); /* Responsive: 24px - 34px */
    line-height: 1.25;
    color: var(--color-brown-dark);
    margin-bottom: 0.875rem;
}

h3,
.elementor-heading-title.elementor-size-large {
    font-family: var(--font-primary);
    font-size: clamp(1.25rem, 3vw, 1.75rem); /* Responsive: 20px - 28px */
    line-height: 1.3;
    color: var(--color-brown-dark);
    margin-bottom: 0.75rem;
}

h4,
.elementor-heading-title.elementor-size-medium {
    font-family: var(--font-primary);
    font-size: clamp(1.125rem, 2.5vw, 1.375rem); 
    line-height: 1.3;
    color: var(--color-brown-dark);
    margin-bottom: 0.625rem;
}

h5,
.elementor-heading-title.elementor-size-small {
    font-family: var(--font-primary);
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.35;
    color: var(--color-brown-dark);
    margin-bottom: 0.5rem;
}

h6,
.elementor-heading-title.elementor-size-xs {
    font-family: var(--font-primary);
    font-size: clamp(0.875rem, 1.5vw, 1.125rem);
    line-height: 1.4;
    color: var(--color-brown-dark);
    margin-bottom: 0.5rem;
}


p,
li,
label,
input,
textarea,
select,
button {
    font-family: var(--font-secondary);
}

p {
    margin-bottom: 1em;
}


a {
    color:  #8B6C54;
    text-decoration: underline;
    transition: color var(--transition-normal);
}

a:hover,
a:focus {
    color: var(--color-brown-medium);
    text-decoration: underline;
}


/* ========================================
   6. FOCUS (WCAG AA)
   ======================================== */


body:not(.elementor-editor-active) *:focus-visible {
    outline: var(--focus-width) var(--focus-style) var(--focus-color);
    outline-offset: var(--focus-offset);
    transition: none;
}

body:not(.elementor-editor-active) .card-v1-box a:focus-visible .elementor-cta__content,
body:not(.elementor-editor-active) .card-v4-box a:focus-visible .elementor-cta__content,
body:not(.elementor-editor-active) .action-card-v1 a:focus-visible .elementor-cta__content {
    outline: var(--focus-width) var(--focus-style) var(--focus-color);
    outline-offset: var(--focus-offset);
}


body:not(.elementor-editor-active) .media-carousel-st .swiper-slide a:focus-visible .elementor-carousel-image,
body:not(.elementor-editor-active) .archives-st .elementor-post__thumbnail__link:focus-visible img {
    outline: var(--focus-width) var(--focus-style) var(--focus-color);
    outline-offset: -8px; 
}


body:not(.elementor-editor-active) .archives-st .elementor-post__thumbnail__link:focus-visible {
    outline: none;
}


body:not(.elementor-editor-active).home-page-grayscale *:focus-visible {
    outline-width: 3px; 
    outline-style: solid;
}


body:not(.elementor-editor-active).home-page-grayscale .slider-top .elementor-swiper-button:focus-visible,
body:not(.elementor-editor-active).home-page-grayscale .slider-top .swiper-pagination .swiper-pagination-bullet:focus-visible {
    outline-color: #FFFFFF;
}

body:not(.elementor-editor-active).home-page-grayscale .footer-bottom-bar a:focus-visible {
    outline-color: #C9C9C9;
    color: #FFFFFF;
}

body:not(.elementor-editor-active) .cpel-switcher--layout-dropdown a:focus-visible,
body:not(.elementor-editor-active) .header-menu a:focus-visible {
    outline-offset: -2px;
}


@media (max-width: 1250px) {
    body:not(.elementor-editor-active) .elementor-menu-toggle:focus-visible {
        outline-offset: -4px;
    }
}


/* ========================================
   7. LAYOUT COMPONENTS
   ======================================== */


.card-box .elementor-cta {
    min-height: 15rem; 
    background: #FFFFFF;
}


@media (min-width: 78.125rem) { 
    .full-height,
    .child-full-height .elementor-widget-container,
    .child-full-height .elementor-widget-container * {
        height: 100%;
        max-height: 100%;
    }
}


@media (max-width: 47.9375rem) { 
    
    .elementor-widget-icon-box .elementor-icon-box-icon {
        justify-content: center;
        display: flex;
        align-items: center;
    }

    .elementor-widget-icon-box .elementor-icon-box-icon .elementor-icon {
        display: block;
    }
}


/* ========================================
   8. NAVIGATION & BREADCRUMBS
   ======================================== */


.cpel-switcher__icon {
    color: #fff;
}


.header-lang .cpel-switcher__toggle a:focus-visible,
.header-lang .cpel-switcher__lang a:focus-visible {
    outline: var(--focus-width) var(--focus-style) var(--focus-color);
    outline-offset: 2px;
}


.cpel-switcher--layout-dropdown .cpel-switcher__lang {
	    border: 1px solid #ac8e75;
}



body.page-id-911 .header-breadcrumbs {
    display: none;
}


.header-breadcrumbs {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    font-family: var(--font-secondary);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
}

.woocommerce-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.woocommerce-breadcrumb a {
    display: inline-flex;
    align-items: center;
}


.woocommerce-breadcrumb a:first-child::before {
    content: '';
    display: inline-block;
    width: 1.875rem;
    height: 1.875rem;
    margin-right: 1em;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='26' viewBox='0 0 24 26' fill='none' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Home'%3E%3Cpath d='M23.75 11.9313L21.179 9.23918L12.609 0.265473C12.5294 0.181354 12.4346 0.114587 12.3302 0.0690226C12.2257 0.0234586 12.1137 0 12.0005 0C11.8874 0 11.7754 0.0234586 11.6709 0.0690226C11.5665 0.114587 11.4717 0.181354 11.392 0.265473L2.82205 9.23918L0.252049 11.9313C0.0906646 12.1003 0 12.3295 0 12.5685C0 12.8074 0.0906646 13.0366 0.252049 13.2056C0.413433 13.3746 0.632317 13.4695 0.860549 13.4695C1.08878 13.4695 1.30766 13.3746 1.46905 13.2056L2.57405 12.0391V24.2338C2.57405 24.4718 2.66434 24.7 2.82506 24.8683C2.98578 25.0366 3.20376 25.1311 3.43105 25.1311H20.57C20.7973 25.1311 21.0153 25.0366 21.176 24.8683C21.3368 24.7 21.427 24.4718 21.427 24.2338V12.0391L22.532 13.2056C22.6934 13.3746 22.9123 13.4695 23.1405 13.4695C23.3688 13.4695 23.5877 13.3746 23.7491 13.2056C23.9104 13.0366 24.0011 12.8074 24.0011 12.5685C24.0011 12.3295 23.9114 12.1003 23.75 11.9313ZM19.713 23.3364H4.28805V10.2475L12.004 2.16807L19.717 10.2444L19.713 23.3364Z' fill='%23000000'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
}

.woocommerce-breadcrumb > a {
    color: #8B6C54 !important;
    text-decoration: underline;
    transition: color var(--transition-normal);
}

.woocommerce-breadcrumb a:hover,
.breadcrumbs a:focus {
    color: var(--color-gold);
}


.breadcrumb-separator,
.woocommerce-breadcrumb span.current-item::before {
    content: '|';
    display: inline-block;
    margin: 0 0.5rem;
    color: #000;
    font-weight: 400;
}

.woocommerce-breadcrumb span.current-item {
    color: #000;
    margin-left: -0.9375rem; 
}


@media (max-width: 48rem) { 
    .breadcrumbs {
        font-size: 0.875rem;
    }

    .woocommerce-breadcrumb a:first-child::before {
        width: 1.5rem; 
        height: 1.5rem;
    }
}


/* ========================================
   9. LANDING VIDEO COMPONENT
   ======================================== */

#landing-movie {
    position: relative;
    background: url("assets/images/hero-fallback.jpg") center center / cover no-repeat;
	max-height: -webkit-fill-available;
}


#landing-movie.video-off .elementor-background-video-container {
    display: none;
}


@media (prefers-reduced-motion: reduce) {
    #landing-movie .elementor-background-video-container {
        display: none;
    }
}


.landing-video-toggle {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    z-index: 100;
    padding: 0.4rem 0.9rem;
    font-size: 0.875rem;
    line-height: 1.2;
    border-radius: 999px;
    border: 1px solid currentColor;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    cursor: pointer;
    transition: background-color var(--transition-normal);
}

.landing-video-toggle:hover {
    background: rgba(0, 0, 0, 0.85);
}

.landing-video-toggle:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.landing-video-toggle.is-paused {
    background: rgba(0, 0, 0, 0.9);
}


@media (max-width: 48rem) { 
    .landing-video-toggle {
        display: none;
    }
}


/* ========================================
   10. SWIPER PAGINATION LINES AND WCAG
   ======================================== */

.partner-col .swiper-pagination-bullet {
    position: relative;
    width: 60px;             
    height: 60px;             
    background: transparent;  
    opacity: 1;               
    margin: 0 10px;            
    cursor: pointer;
}

.elementor-widget-n-carousel .swiper-pagination-bullet:hover {
    background: transparent;  
}


.partner-col .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
    height: 5px;
    background-color: #E9B85F; 
}


.partner-col .swiper-pagination-bullet::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 6px;                         
    border-radius: 3px;                 
    background-color: #3A261A; 
    transition: background-color .2s ease, height .2s ease;
	    height: 5px;
}

.partner-col .swiper-pagination-bullet::before:hover {
    background-color: #E9B85F;
}

.swiper .swiper-horizontal>.swiper-pagination-bullets, .elementor-element .swiper .swiper-pagination-bullets.swiper-pagination-horizontal, .elementor-element .swiper .swiper-pagination-custom, .swiper~.swiper-pagination-bullets.swiper-pagination-horizontal {
	margin-top: 20px;
}


.slider-pause-button {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    z-index: 10;
    padding: 0.5rem 1rem;
    border: 1px solid #fff;
    border-radius: 0.25rem;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color var(--transition-normal);
}

.slider-pause-button:hover {
    background: rgba(0, 0, 0, 0.85);
}

.slider-pause-button:focus-visible {
    outline: var(--focus-width) var(--focus-style) var(--focus-color);
    outline-offset: 2px;
}


.swiper-pagination-bullet:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 4px;
}


/* ========================================
   11. GRAYSCALE MODE
   ======================================== */

body:not(.elementor-editor-active).home-page-grayscale {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

body:not(.elementor-editor-active).home-page-grayscale .card-v1-box .elementor-widget-container,
body:not(.elementor-editor-active).home-page-grayscale .media-carousel-st .swiper-slide,
body:not(.elementor-editor-active).home-page-grayscale .footer-menu .menu > li > a {
    border-color: var(--color-gold);
}

body:not(.elementor-editor-active).home-page-grayscale .header-top-bar .elementor-social-icon svg {
    fill: #4d4d4d;
}

body:not(.elementor-editor-active).home-page-grayscale .slider-top .elementor-swiper-button,
body:not(.elementor-editor-active).home-page-grayscale .media-carousel-st .elementor-swiper-button {
    border-color: #CBCBCB;
}

body:not(.elementor-editor-active).home-page-grayscale .action-card-v1 .elementor-button {
    border-color: var(--color-gold);
    background-color: var(--color-gold);
}


/* ========================================
   12. UTILITY CLASSES
   ======================================== */

.overflow-hidden {
    overflow: hidden;
}

.child-links-display-block a {
    display: block;
}

.child-links-st a {
    transition: color var(--transition-normal);
}

.child-links-st a:hover,
.child-links-st a:focus {
    color: var(--color-gold);
}

.child-text-align-left * {
    text-align: left;
}


.elementor-widget-call-to-action.elementor-bg-transform-zoom-in a:hover .elementor-cta__bg {
    transform: scale(1.1);
}

.elementor-icon-list-items.elementor-inline-items li {
    margin-top: 0.625rem;
    margin-bottom: 0.3125rem;
    padding-left: 0.3125rem;
}

.elementor-posts-nothing-found {
    text-align: center;
}


/* ========================================
   13. RESPONSIVE DESIGN
   ======================================== */


@media (max-width: 1024px) {
    body {
        font-size: 1.2rem; 
    }
}


@media (max-width: 768px) {
    body {
        font-size: 1.1rem; 
    }

    .header-breadcrumbs {
        padding: 0.5rem;
    }
}


/* ========================================
   14. PRINT STYLES
   ======================================== */

@media print {
    .landing-video-toggle,
    .slider-pause-button,
    .skip-link,
    .header-menu,
    .footer-menu,
    #site-header,
    #site-footer {
        display: none !important;
    }

    body {
        color: #000;
        background: #fff;
    }

    a {
        text-decoration: underline;
        color: #000;
    }

    /* Ensure good contrast for printing */
    h1, h2, h3, h4, h5, h6 {
        color: #000;
        page-break-after: avoid;
    }

    p {
        orphans: 3;
        widows: 3;
    }
}

footer a {
	font-weight: 700;
}