/*
    Theme Name: LL22
    Template: twentytwentyfour
    Author: Jan
    Version: 1.1
*/

/* --------------------------------------------------
   1. Global Smooth Scrolling and Anchor Spacing
-------------------------------------------------- */

/* Enable smooth scrolling for the entire page */
html {
    scroll-behavior: smooth;
}

/* Add scroll margin for anchor targets */
[id] {
    scroll-margin-top: var(--header-height, 65px); /* Dynamically set based on header */
}

/* --------------------------------------------------
   2. Root Variables
-------------------------------------------------- */

/* Root element for CSS variables */
:root {
    --header-height: 65px; /* Default header height */
}

/* --------------------------------------------------
   3. Header Styles
-------------------------------------------------- */

/* Floating Header */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    width: 100%;
    background-color: #ffffff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease, height 0.3s ease;
}

/* Stronger shadow on scroll */
.site-header.scrolled {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

/* Push content down by the header's height */
body {
    margin: 0;
    padding-top: var(--header-height); /* Space for fixed header */
}

/* --------------------------------------------------
   4. Main Content and Cover Block
-------------------------------------------------- */

/* Main content starts below floating header */
.main-content {
    display: flex;
    flex-direction: column;
}

/* Ensure the Cover block starts below the header */
.wp-block-cover {
    margin-top: 0;
    position: relative;
    z-index: 1;
}

/* --------------------------------------------------
   5. Font Awesome Icon Styles
-------------------------------------------------- */

/* Default Font Awesome icon styles */
.fa {
    color: #00a3c8 !important;
    font-size: 1.5rem;
}

/* Black Font Awesome icons */
.fa.black {
    color: #000000 !important;
    font-size: 1.5rem;
}

/* --------------------------------------------------
   6. Centered List Block
-------------------------------------------------- */

/* Center-align a specific list block with inline bullets/numbers */
.center-list {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 auto !important;
    list-style-position: outside !important;
}

.center-list li {
    text-align: center !important;
    display: list-item !important;
    width: auto !important;
}

/* --------------------------------------------------
   7. Button Styles (Global for is-style-fill)
-------------------------------------------------- */

/* Global button styling for is-style-fill */
.is-style-fill .wp-block-button__link {
    background-color: #00a3c8;
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover effect for buttons */
.is-style-fill .wp-block-button__link:hover {
    background-color: #0086a3;
    color: #fff;
}

/* --------------------------------------------------
   8. Overlapping Content Block
-------------------------------------------------- */

/* Adjust overlapping content block */
.overlap-block {
    margin-top: -50px !important;
    z-index: 2 !important;
    position: relative !important;
    display: none !important;
}

/* --------------------------------------------------
   9. Responsive Adjustments for Mobile
-------------------------------------------------- */

/* 
   Adjust Cover block height and prevent header overlap on mobile.
   NOTE: Now using (max-width: 781px) so that desktop picks up at 782px.
*/
@media (max-width: 781px) {
    /* Increase header height if stacked */
    :root {
        --header-height: 120px; /* Adjust based on actual stacked header height */
    }

    .wp-block-cover {
        min-height: 430px !important;
        height: 430px !important;
        box-sizing: border-box;
    }

    /* Ensure header is above cover block */
    header {
        position: relative;
        z-index: 10;
    }
}

/* --------------------------------------------------
   10. Transitions for Header and Cover Blocks
-------------------------------------------------- */

/* Smooth transition for header shadow and dynamic changes */
.site-header,
.wp-block-cover {
    transition: all 0.3s ease;
}

/* --------------------------------------------------
   11. Navigation Menu Hover Effects
-------------------------------------------------- */

/* Smooth transition for background color on all navigation links */
.wp-block-navigation a {
    transition: background-color 0.3s ease;
}

/* General hover effect for navigation links: change background and remove underline */
.wp-block-navigation a:hover {
    background-color: rgba(0, 163, 200, 0.2); /* Custom-blue with lower opacity */
    text-decoration: none;
}

/* --------------------------------------------------
   12. Top-Level Navigation Hover Padding Enhancement
-------------------------------------------------- */

/* Target only top-level navigation links to add extra padding on hover */
.wp-block-navigation > ul > li > a {
    display: inline-block; /* Allows padding to affect only the link area */
    transition: background-color 0.3s ease, padding 0.3s ease;
}

/* On hover, add extra padding around the text for top-level items */
.wp-block-navigation > ul > li > a:hover {
    background-color: rgba(0, 163, 200, 0.2); /* Custom-blue with reduced opacity */
    text-decoration: none;
    padding: 5px 15px; /* Adjust values as needed for a more padded appearance */
}

/* --------------------------------------------------
   13. Cover Block Spacing Adjustment
-------------------------------------------------- */
/* 
   This snippet sets the top margin of the cover block to the value 
   of the CSS variable --header-height. The variable is dynamically 
   updated by js/header-adjust.js based on the actual header height. 
   This ensures that the cover block always starts right below the header, 
   even when the header’s height changes due to responsive stacking.
*/
.wp-block-cover {
    margin-top: var(--header-height);
    position: relative;
    z-index: 1;
}

/* --------------------------------------------------
   14. Zoom Twice Effect Animation
-------------------------------------------------- */

/* Define keyframes for the double zoom animation */
@keyframes zoomTwice {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.98);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(0.98);
  }
  100% {
    transform: scale(1);
  }
}

/* Apply the zoomTwice animation when the zoom-twice-effect class is added */
.zoom-twice-effect {
  animation: zoomTwice 0.4s ease-out;
}

/* --------------------------------------------------
   15. Page Transition Fade Effect
-------------------------------------------------- */

/* White overlay for fade-to-white transition effect */
#transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  pointer-events: none;
  z-index: 9999;
}

/* Active state for overlay to trigger fade */
#transition-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* --------------------------------------------------
   16. Responsive Visibility for "naročanje" Button and Nav Item
-------------------------------------------------- */

/* 
   Hide elements with .hidden-on-mobile on mobile devices
   (i.e., up to 781px).
*/
@media (max-width: 781px) {
    .hidden-on-mobile {
        display: none !important;
    }
}

/* 
   Hide elements with .hidden-on-desktop on desktop devices
   (i.e., 782px and up).
*/
@media (min-width: 782px) {
    .hidden-on-desktop {
        display: none !important;
    }
}

/* --------------------------------------------------
   17. Custom Responsive Navigation Overrides
-------------------------------------------------- */

/* 
   For 782px and up (desktop):
   - Hide the burger toggle, show the container as block (then the <ul> as flex).
*/
@media (min-width: 782px) {
  .wp-block-navigation__responsive-container-open {
    display: none !important;
  }
  .wp-block-navigation__responsive-container {
    display: block !important;
  }
  .wp-block-navigation__container {
    display: flex !important;
  }
}

/* 
   For 781px and below (mobile):
   - Show the toggle button, hide the container by default,
     then display it if "is-menu-open" is added by the JS.
*/
@media (max-width: 781px) {
  .wp-block-navigation__responsive-container-open {
    display: block !important;
  }
  .wp-block-navigation__responsive-container {
    display: none !important;
  }
  .wp-block-navigation__responsive-container.is-menu-open {
    display: block !important;
  }
  .wp-block-navigation__container {
    display: block !important;
  }
}


/* --------------------------------------------------
   18. Mobile Header: Custom Burger & Centered Logo
-------------------------------------------------- */
@media screen and (max-width: 781px) {
  /* Ensure the header container is relatively positioned */
  .site-header {
    position: relative;
  }
  
  /* Force the burger toggle button to be positioned at the left edge */
  .site-header .wp-block-navigation__responsive-container-open {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 2 !important;
    margin-left: 0 !important;
  }
  
  /* Increase burger icon size and set its fill to custom-blue */
  .site-header .wp-block-navigation__responsive-container-open svg {
    fill: #00a3c8 !important;
    width: 32px !important;
    height: 32px !important;
  }
  
  /* Center the logo column absolutely in the viewport */
  .site-header .logo-column {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    z-index: 1 !important;
  }
  
  /* Force the logo image to remain at a fixed width of 150px */
  .site-header .logo-column img {
    width: 150px !important;
    height: auto;
  }
}

/* --------------------------------------------------
   19. Mobile Header Extra Spacing
-------------------------------------------------- */
/*
   On mobile (max-width: 781px), this snippet increases the header's vertical padding,
   effectively adding extra space to each block within the header.
*/
@media screen and (max-width: 781px) {
  .site-header {
    padding-top: 35px !important;
    padding-bottom: 35px !important;
  }
}

/* --------------------------------------------------
   20. Mobile Navigation: Force Center Alignment
-------------------------------------------------- */
/*
   Ensures that all menu links are center-aligned on mobile, 
   even when they wrap to a second line.
*/
@media screen and (max-width: 781px) {
  /* Target all navigation menu items */
  .wp-block-navigation__container {
    text-align: center !important; /* Center-align all nav items */
  }

  /* Target the links inside navigation items */
  .wp-block-navigation__container .wp-block-navigation-item {
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
    flex-wrap: wrap !important; /* Allow multi-line links */
  }

  /* Target the link elements themselves */
  .wp-block-navigation__container .wp-block-navigation-item a {
    text-align: center !important;
    white-space: normal !important; /* Allow wrapping */
    display: block !important; /* Ensures alignment applies */
  }
}

@media (max-width: 781px) {
    body.page-template-default .wp-block-cover {
        height: 230px !important;
        min-height: 230px !important;
        max-height: 230px !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
    }
}