/* Improved Responsive Styles */

/* Large screens - keep your existing styles */
@media only screen and (min-width: 1921px) {
  #page {
    max-width: 1920px;
    margin: 0 auto;
  }

  header {
    left: 0;
  }
  
  .top-bar.padded {
    max-width: 1920px;
    margin: 0 auto;
  }
}

/* Desktop adjustments */
@media only screen and (max-width: 1366px) {
  #wpadminbar {
    display: none;
  }
  
  html {
    font-size: 0.9rem;
  }
  
  .padded {
    padding-left: 5%;
    padding-right: 5%;
  }

  .featured-post.blog-post .content p {
    display: none;
  }
  
  /* Improve hero section on smaller desktops */
  .hero {
    gap: 2rem;
  }
  
  .top-menu ul {
    gap: 4rem; /* Reduce from 6rem */
  }
}

/* Medium desktop */
@media only screen and (max-width: 1124px) {
  html {
    font-size: 0.8rem;
  }
  
  #masthead {
    max-height: 100px;
  }
  
  #masthead.nav-up {
    top: -100px;
  }
  
  /* Better spacing for content */
  .hero {
    padding-top: 100px;
    padding-bottom: 100px;
    gap: 3rem;
  }
  
  .modal-content h2 {
    font-size: 2.5rem;
  }
}

/* Tablet landscape */
@media only screen and (max-width: 1050px) {
  .timeline-nav .timeline-swiper {
    padding-bottom: 2rem;
  }
  
  /* Stack hero content on tablets */
  .hero {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    text-align: center;
    gap: 2rem;
  }
  
  .single-tour .row {
    gap: 2rem;
  }
  
  .contacts .row {
    gap: 2rem;
  }
}

/* Tablet portrait and small laptops */
@media only screen and (max-width: 900px) {

  .main-menu > ul {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }

  #mobile-menu .copyright img {
    max-width: 12rem;
  }
  
  .accordion__content-inner {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  
  .accordion__content-inner .single-event {
    -ms-flex-preferred-size: calc(50% - 1rem);
        flex-basis: calc(50% - 1rem);
  }
  
  .post-list,
  .blog-articles,
  .tour-list,
  .post-list.points-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  
  .featured-post {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  
  .featured-post.blog-post {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }

  .blog-post .featured-content {
    border: 2px solid var(--cc-neutral);
    border-top: none;
    border-radius: 0 0 2rem 2rem;
    padding: 2rem;
  }

  .featured-post.blog-post .card-image {
    position: static;
  }

  .featured-post.blog-post .content {
    margin-bottom: 0;
  }

  .blog-post .featured-text.row.dual-language-row {
    gap: 1rem;
  }

  .featured-post.blog-post .card-image img {
    width: 100%;
    height: 350px;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: bottom right;
       object-position: bottom right;
  }

  .contact-form-section .row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  .top-menu-wrap,
  .top-bar {
    position: static;
  }

  #search-wrap {
    width: 100%;
    left: 0;
    padding: 1rem 5%;
    background: var(--cc-bg);
  }

  #search-wrap.show {
    top: 100px;
    left: 0;
  }
  
  /* Better mobile hero */
  .hero.compact {
    padding-top: 6rem;
    padding-bottom: 3rem;
  }
  
  /* Stack single tour layout */
  .single-tour .row,
  .single-tour:nth-child(2n) .row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  
  /* Better store buttons layout */
  .stores {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 1rem;
    max-width: 200px;
    margin: 0 auto 2rem;
  }
  
  .download-app .stores {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    max-width: none;
  }
}

/* Mobile landscape and small tablets */
@media only screen and (max-width: 768px) {

  #top-nav {
    display: none;
  }

  .top-menu ul {
    gap: 0rem;
  }

  main {
    padding-top: 7rem;
  }

  .main-menu ul {
    max-width: 100%;
  }

  .main-menu > ul {
    max-width: 100%;
    width: 60%;
  }

  .main-menu {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  .accordion__icon {
    padding-right: 1rem;
  }

  .accordion__icon svg {
    width: 2rem;
  }

  [data-theme="cs"] {
    --item-order: column;
    --item-webkit-order: normal;
    --row-webkit-direction: vertical;
    --row-order: column;
  }

  [data-theme="de"] {
    --item-order: column-reverse;
    --item-webkit-order: reverse;
    --row-webkit-direction: horizontal;
    --row-order: column-reverse;
  }

  .link-button {
    font-size: 1.125rem;
  }

  .wp-block-contact-form-7-contact-form-selector {
    padding: 1.5rem;
  }

  .checkbox-item {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
  }
  
  /* Better mobile spacing */
  section {
    margin-bottom: 3rem;
  }
  
  .block-margin {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
  
  .block-padding {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  
  /* Mobile contact layout */
  .contacts .row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 1.5rem;
  }
  
  /* Better mobile modal */
  .modal-content h2 {
    font-size: 2rem;
    margin-bottom: 2rem;
  }
  
  .icon-row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  
  .icon-row img {
    margin: 0 auto;
  }
  
  .icon-row h3 {
    text-align: center;
  }
  
  /* Mobile download section */
  .download-app {
    padding-top: 2rem;
  }
  
  .download-img {
    position: static;
    text-align: center;
    margin-top: 2rem;
  }
}

/* Mobile portrait */
@media only screen and (max-width: 600px) {
  .accordion__title .dual-language {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: var(--item-order);
            flex-direction: var(--item-order);
  }
  
  .accordion__title {
    padding-right: 3.5rem;
  }
  
  .contact-list .row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  
  /* Single column for stores on small mobile */
  .stores {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  
  .download-app .stores {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  
  /* Better mobile navigation */
  .mobile-nav-icon {
    width: 2.5rem;
    height: 2.5rem;
  }
  
  /* Improve form spacing */
  .search-form {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 1rem;
  }
  
  .search-form input {
    width: 100%;
  }
}

/* Small mobile */
@media only screen and (max-width: 500px) {
  html {
    font-size: 0.7rem;
  }

  .page-logo {
    width: 10rem;
  }

  #masthead {
    max-height: 65px;
  }
  
  #masthead.nav-up {
    top: -65px;
  }
  
  #search-wrap.show {
    top: 65px;
  }

  header {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  
  h1 {
    font-size: 2.5rem;
  }

  p, h3 {
    font-size: 1.375rem;
  }
  
  .post-list,
  .blog-articles,
  .post-list.points-list {
    grid-template-columns: 1fr;
  }

  .accordion__content-inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  
  footer .main-footer.row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 4rem;
  }

  .footer-menu .dual-language {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }

  .footer-content {
    gap: 4rem;
  }

  .footer-menu ul {
    padding-left: 0;
  }

  .page-headline {
    font-size: 1.85rem;
    max-width: 100%;
  }
  
  /* Improve mobile padding */
  .padded {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* Better mobile hero */
  .hero {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  
  .hero.compact {
    padding-top: 4rem;
    padding-bottom: 2rem;
  }
  
  /* Mobile store buttons - stack vertically with better spacing */
  .stores {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    max-width: 250px;
  }
  
  .stores img {
    height: 45px;
  }
  
  /* Better mobile modal spacing */
  .modal-content {
    padding: 1rem;
  }
  
  .modal-content h2 {
    font-size: 1.8rem;
    line-height: 1.2;
  }
  
  /* Mobile typography improvements */
  .site-title {
    font-size: 3rem;
  }
  
  h2 {
    font-size: 1.75rem;
  }
  
  h3 {
    font-size: 1.375rem;
  }
  
  /* Better mobile button sizes */
  button {
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
  }
}

@media only screen and (max-width: 450px) {    
  
  .main-menu > ul {
    max-width: 100%;
    width: 90%;
  }

}

@media only screen and (max-width: 400px) {    
  h1 {
    font-size: 2.1rem;
  }

  .copyright {
    display: none;
  }
  
  /* Ultra-compact mobile stores */
  .stores {
    max-width: 220px;
  }
  
  .stores img {
    height: 40px;
  }
  
  /* Tighter mobile spacing */
  .padded {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  
  /* Smaller mobile icons */
  .mobile-nav-icon {
    width: 2.25rem;
    height: 2.25rem;
  }
  
  .search-button {
    width: 2.25rem;
    height: 2.25rem;
  }
}

/* Foldable/very narrow screens */
@media only screen and (max-width: 350px) {
  .stores {
    max-width: 200px;
  }
  
  .modal-content h2 {
    font-size: 1.5rem;
  }
  
  .site-title {
    font-size: 2.5rem;
  }
}

/* Ultra-narrow (rare but good to handle) */
@media only screen and (max-width: 260px) {
  .padded {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  
  .stores {
    max-width: 180px;
  }
  
  .stores img {
    height: 35px;
  }
}