/* ==========================================================================
   RESPONSIVE STYLES - ORGANIZED BY BREAKPOINTS
   ========================================================================== */

/* ==========================================================================
   LARGE DESKTOP (1300px and below)
   ========================================================================== */
@media screen and (max-width: 1300px) {

  section.footer .footer-cols .footer-col {
  	padding-right: 2rem;
  }
}

/* ==========================================================================
   MEDIUM DESKTOP (1215px and below)
   ========================================================================== */
@media screen and (max-width: 1215px) {
  /* Footer adjustments */
  section.footer .footer-col.logo a {
    height: 3rem;
  }

  section.footer .footer-col.copyright p {
    font-size: 9pt;
  }

  /* Commented navigation styles - consider removing if not needed
  section.header .navlink {
    display: inline-flex;
  }
  section.header .navbar-center {
    display: none;
  }
  */
}

/* ==========================================================================
   SMALL DESKTOP (1100px and below)
   ========================================================================== */
@media screen and (max-width: 1100px) {

}

/* ==========================================================================
   TABLET LANDSCAPE (1023px and below)
   ========================================================================== */
@media screen and (max-width: 1023px) {

  /* Navigation mobile toggle */
  section.header .navlink {
    /*display: inline-flex;*/
  }

  section.header .navbar-center {
    /*display: none;*/
  }

  /* Modal adjustments */
  section.modal h2 {
    /* Add specific styles if needed */
  }

  /* Footer spacing */
  section.footer .footer-cols .footer-col {
    padding-right: 2rem;
  }

  /* Commented paragraph styles - uncomment if needed
  .content p {
    font-size: 0.9em;
  }
  */
}

/* ==========================================================================
   TABLET PORTRAIT (1000px and below)
   ========================================================================== */
@media screen and (max-width: 1000px) {

}

/* ==========================================================================
   SMALL TABLET (960px and below)
   ========================================================================== */
@media screen and (max-width: 960px) {
  /* Hero section padding */
  #home section.hero.is-large .hero-body {
    padding: 6rem 1.5rem;
  }

  /* Footer layout adjustments */
  section.footer .footer-cols .footer-col {
    flex-shrink: 1;
    flex-grow: 0;
    min-width: 170px;
  }

  section.footer .footer-cols .footer-col.menu {
    margin-right: auto;
  }

}

/* ==========================================================================
   MOBILE LANDSCAPE (900px and below)
   ========================================================================== */
@media screen and (max-width: 900px) {


  /* Commented hero padding - uncomment if needed
  section.hero.is-small .hero-body {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
  */
}

/* ==========================================================================
   MOBILE PORTRAIT (768px and below)
   ========================================================================== */
@media screen and (max-width: 768px) {
  /* Section spacing adjustments */
  section.section.blok-item {
    padding-top: calc(var(--blok-outerGapPx) / 1.7);
    padding-bottom: calc(var(--blok-outerGapPx) / 1.7);
  }

  /* Mobile column reversal */
  section.mobflip .columns,
  .columns.mobflip {
    display: flex;
    flex-direction: column-reverse;
  }

  /* Image spacing adjustments */
  section:not(.big_image).block_type_image_text .block_image,
  section:not(.big_image).block_type_text_image .block_image {
    margin-bottom: 20px;
  }

  /* Big image layout */
  section.big_image .column-image .block_image {
    width: 100% !important;
    position: static;
  }

  section.block_type_text_image.big_image.mobflip .column-image .block_image,
  section.block_type_image_text.big_image:not(.mobflip) .column-image .block_image {
    margin-bottom: 2rem;
  }

  section.block_type_image_text.big_image.mobflip .column-image .block_image,
  section.block_type_text_image.big_image:not(.mobflip) .column-image .block_image {
    margin-top: 2rem;
  }

  /* Carousel controls */
  .owl-carousel .owl-controls .owl-prev {
    left: -40px;
  }

  .owl-carousel .owl-controls .owl-next {
    right: -40px;
  }

  /* Modal adjustments */
  .modal p img {
    display: none;
  }

  .modal .fields,
  .modal .content {
    margin-bottom: 0;
  }

  /* CTA banner centering */
  section.cta_banner,
  section.cta_banner p {
    text-align: center !important;
  }

  /* Blok columns mobile layout */
  section.section.blok-item .blok-columns {
    display: flex;
    flex-direction: column;
    align-items: var(--blok-horizontalAlign);
    justify-content: var(--blok-verticalAlign);
  }

  section.section.blok-item .blok-columns .column {
    width: 100%;
    flex-grow: 0;
  }

  /* Form fields layout */
  .fields.fields-horizontal {
    flex-wrap: wrap;
    gap: 1rem;
  }

  /* Commented section padding - uncomment if needed
  .section {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }
  */
}

/* ==========================================================================
   SMALL MOBILE (660px and below)
   ========================================================================== */
@media screen and (max-width: 660px) {

  /* Modal content padding */
  .modal .modal-content {
    padding: 1.3rem !important;
  }

  /* Footer spacing adjustment */
  section.footer .footer-cols .footer-col {
    padding-right: 2.5rem;
  }
}

/* ==========================================================================
   EXTRA SMALL MOBILE (560px and below)
   ========================================================================== */
@media screen and (max-width: 560px) {

  /* Footer mobile layout */
  section.footer .footer-cols {
    display: block !important;
  }

  section.footer .footer-cols .footer-col {
    margin-bottom: 2rem;
    text-align: center;
    padding-right: 0;
  }

  /* Social icons spacing */
  section.footer .footer-col.icons .socials {
    margin-right: 0.5rem;
  }
}

/* ==========================================================================
   SPECIFIC RANGE: 501px - 560px
   ========================================================================== */
@media screen and (max-width: 560px) {
  /* Button adjustments for specific range */
  section.header .navbar-end .navbar-item .button {
    padding: 0.9rem 1.2rem;
    border: none !important;
    font-size: 0.9rem;
  }

}

/* ==========================================================================
   VERY SMALL MOBILE (450px and below)
   ========================================================================== */
@media screen and (max-width: 480px) {

  section.header .navbar-end .navbar-item {
  	display: none;
  }

  .element-text.content p:has(.button:first-child:nth-last-child(2)) {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }

}