/* Scroll snap fullpage behavior (no external lib) */
html { scroll-behavior: smooth; }
body { margin: 0; }

/* Wrapper enabling vertical snap with jump effect */
.scroll-snap-wrapper {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -ms-scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  /* hide scrollbar */
  scrollbar-width: none; /* Firefox */
  scroll-behavior: auto; /* disable smooth scrolling for jump effect */
}
.scroll-snap-wrapper::-webkit-scrollbar { display: none; } /* Webkit */

/* Each section snaps to center with jump effect */
.scroll-snap-section {
  height: auto; /* default for mobile */
  scroll-snap-align: center; /* snap to center */
  scroll-snap-stop: always; /* force stop at each section */
  display: flex;
  align-items: stretch; /* allow inner rows to fill */
}

/* Make common inner containers fill section height */
.scroll-snap-section > .container,
.scroll-snap-section > .container-fluid { height: 100%; }
.scroll-snap-section .row.g-0.align-items-stretch { min-height: 100% !important; }

/* Desktop-only snap + heights */
@media (min-width: 992px) {
  /* Desktop: disable CSS snap, use JS-controlled jumps */
  .scroll-snap-wrapper { scroll-snap-type: none; }
  .scroll-snap-section { height: 108vh; }
  /* Ensure specific sections are 108vh on desktop */
  #hero.scroll-snap-section,
  #why.scroll-snap-section,
  #home.scroll-snap-section,
  #about-us.scroll-snap-section,
  #contact.scroll-snap-section,
  #info.scroll-snap-section,
  #footer.scroll-snap-section { 
    height: 108vh; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Center footer content */
  #footer .container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
  }

  /* Center all sections content */
  .scroll-snap-section { 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
  }
  
  /* Center Hero section content */
  #hero { display: flex !important; align-items: center !important; justify-content: center !important; }
  #hero .container { 
    height: 100% !important; 
    display: flex !important; 
    flex-direction: column !important; 
    justify-content: center !important; 
    align-items: center !important; 
    padding-top: 0 !important; 
    margin-top: 0 !important; 
  }
  #hero h1 { margin-top: 0 !important; padding-top: 0 !important; }

  /* Center Section 01 content inside its container */
  #home > .container { 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    text-align: center;
    max-width: 1600px !important;
    margin: 0 auto !important;
    margin-top: 20vh !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #home .menu-cards-horizontal { 
    width: 100%; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
  }
  
  /* Contact form: remove left padding, keep right padding, limit height */
  #contact .container-fluid { height: 100%; }
  #contact .row.g-0.align-items-stretch { 
    min-height: 100%; 
    height: 100%; 
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  #contact .col-12.col-lg-6 { 
    height: 100%; 
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  /* Removed problematic contact form CSS */
  /* Enforce no left padding on Section 01 header */
  .section-01-header { padding-left: 0 !important; margin-left: 0 !important; }
  #home .section-01-header { padding-left: 0 !important; margin-left: 0 !important; }
  .container .section-01-header { padding-left: 0 !important; }
  /* Removed problematic p-5 rule */
  
  /* Make last section (Praktisk Info) fill full height without white space */
  #info { height: 108vh !important; }
  #info .pi-scope { height: 100%; }
  #info .container-fluid { height: 100%; }
  #info .row.g-0.align-items-stretch { min-height: 100%; height: 100%; }
  #info .col-12.col-lg-6 { height: 100%; }
  /* Center accordion in the last section */
  #info .praktisk-info-content { display: flex !important; align-items: center !important; justify-content: center !important; }
  #info .praktisk-info-content .p-5 { max-width: 800px !important; margin: 0 auto !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; padding-top: 15vh !important; padding-bottom: 0 !important; width: 100% !important; }
  #info .accordion.link-col { max-width: 800px; margin-left: auto !important; margin-right: auto !important; align-self: center !important; height: 100% !important; display: flex !important; flex-direction: column !important; justify-content: space-evenly !important; }
  /* Section 02 header top padding */
  .section-02-header { padding-top: 10vh !important; }
  /* Removed duplicate rule */
  /* Removed all problematic contact form CSS */
}
/* Desktop accordion centering in Praktisk Info */
@media (min-width: 992px) {
  #info .col-12.col-lg-6.order-2,
  #info .col-12.col-lg-6.order-lg-2.order-2 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #info .praktisk-info-content {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #info .praktisk-info-content .p-5 {
    margin: auto !important;
    max-width: 800px !important;
  }
}

/* Hero adjustments for desktop to avoid visual cut and ensure centering */
@media (min-width: 992px) {
  #hero { padding-top: 10vh !important; }
  #hero > .container, #hero > .container-fluid { height: calc(100% - 10vh) !important; display: flex; align-items: center; }
}

/* Slightly taller sections on very large desktops for smoother effect */
@media (min-width: 1400px) {
  .scroll-snap-section { height: 115vh; }
  #why.scroll-snap-section,
  #home.scroll-snap-section,
  #about-us.scroll-snap-section,
  #contact.scroll-snap-section,
  #info.scroll-snap-section,
  #footer.scroll-snap-section { height: 115vh; }
  
  /* Increase padding-top for larger screens */
  /* Removed contact form padding rule */
}

/* Extra large screens - even more padding */
@media (min-width: 1600px) {
  /* Removed contact form padding rule */
}

@media (max-width: 991.98px) {
  /* Mobile: normal scrolling (no section-based snap, no forced 100vh) */
  .scroll-snap-wrapper { height: auto !important; overflow-y: visible !important; scroll-snap-type: none !important; scroll-behavior: auto; }
  .scroll-snap-section { height: auto !important; min-height: auto !important; scroll-snap-align: none !important; scroll-snap-stop: normal !important; }
  #home-mobile-1, #home-mobile-2 { min-height: auto !important; }
  /* Hide desktop bullets on mobile */
  .nav-bullets { display: none !important; }
  /* Uniform padding for all sections */
  .scroll-snap-section > .container, .scroll-snap-section > .container-fluid { padding-left: 20px !important; padding-right: 20px !important; }
  .scroll-snap-section { margin-bottom: 0 !important; }
  /* Section-specific padding adjustments - remove top/bottom padding on mobile */
  #hero { min-height: 100vh !important; height: auto !important; padding: 60px 20px !important; }
  #why { height: auto !important; padding: 0 !important; }
  #home { display: none !important; }
  #about-us { height: auto !important; padding: 0 !important; }
  #services { min-height: 80vh !important; height: auto !important; }
  #contact { height: auto !important; padding: 0 !important; }
  #info { height: auto !important; padding: 0 !important; }
  /* Section 02 mobile font reductions and button visibility */
  #about-us .section-02-header h2 { font-size: 2rem !important; }
  #about-us .section-02-list p { font-size: 0.95rem !important; }
  #about-us .create-btn { margin-top: 16px !important; }

  /* Contact heading: remove <br> on mobile */
  #contact h2 br { display: none !important; }

  /* Invert PRAKTISK INFO columns on mobile - accordion first, then title */
  #info .order-lg-1.order-1 { order: 2 !important; }
  #info .order-lg-2.order-1 { order: 1 !important; }
  /* Section-specific heights on mobile - normal heights */
  #home.scroll-snap-section { height: auto !important; padding-top: 2vh !important; }
  #about-us.scroll-snap-section { height: auto !important; }
  #contact.scroll-snap-section { height: auto !important; }
  /* Removed mobile form adjustments */
  /* Mobile center accordion */
  #info .praktisk-info-content { display: flex !important; align-items: center !important; justify-content: center !important; }
  #info .praktisk-info-content .p-5 { max-width: 90% !important; margin: 0 auto !important; height: 100% !important; display: flex !important; align-items: center !important; padding-top: 40px !important; padding-bottom: 40px !important; }

  /* WHY section: normal mobile layout */
  #why .row.g-0.align-items-stretch { flex-direction: column !important; min-height: auto !important; }
  #why .col-12.col-lg-6.order-lg-2.order-1 > div { height: auto !important; min-height: 300px !important; }
  #why .col-12.col-lg-6.d-flex.align-items-center.order-lg-1.order-2 { height: auto !important; min-height: auto !important; align-items: center !important; }
  #why .why-section-content { max-width: 100% !important; padding: 20px !important; margin: 0 !important; }
  #why h2 { font-size: 1.8rem !important; }
  #why ul li { font-size: 1.1rem !important; }

  /* Removed contact form inputs responsive sizing */

  /* Remove global section min-heights on mobile to allow >200vh if needed */
  .container-fluid.p-0 .row { min-height: auto !important; height: auto !important; }
  .container-fluid.p-0 .col-12, .container-fluid.p-0 .col-lg-6 { height: auto !important; }
  .container-fluid.p-0 .col-lg-6 > div { height: auto !important; min-height: auto !important; }

  /* Keep mobile visual order equal to desktop order-lg-* utilities */
  .row [class*="order-lg-1"] { order: 1 !important; }
  .row [class*="order-lg-2"] { order: 2 !important; }
  .row [class*="order-lg-3"] { order: 3 !important; }
  .row [class*="order-lg-4"] { order: 4 !important; }
  /* Removed mobile layout contact form rules */
  
  /* Hide info icon on mobile in Praktisk Info sections */
  .info-icon {
    display: none !important;
  }
}

/* Hide mobile home split on desktop */
@media (min-width: 992px) { #home-mobile-1, #home-mobile-2 { display: none !important; } }

/* Desktop side bullets */
.nav-bullets { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 1000; display: none; }
.nav-bullets a { display: block; width: 10px; height: 10px; border-radius: 50%; background: rgba(0,0,0,.25); margin: 10px 0; text-decoration: none; transition: transform .2s, background .2s; }
.nav-bullets a:hover { transform: scale(1.2); background: #bf6d4b; }
.nav-bullets a.active { background: #bf6d4b; transform: scale(1.2); }
@media (min-width: 992px) { .nav-bullets { display: block; } }

/* Footer Styling */
.footer-home { background-color: #c87d5c !important; width: 100%; margin-top: 0; }
.footer-home a { transition: opacity 0.3s ease; }
.footer-home a:hover { opacity: 0.8; text-decoration: underline !important; }
.footer-logo img { max-width: 400px; width: 100%; height: auto; margin: 0 auto; display: block; }
@media (min-width: 992px) {
  .footer-logo img { height: 75px; width: 373.93px; max-width: none; }
}
.footer-address, .footer-email, .footer-phone { line-height: 1.6; }
.footer-links a { line-height: 2; font-weight: 500; }
@media (max-width: 768px) {
  .footer-home { padding: 40px 20px 30px; }
  .footer-logo img { height: 40px; width: 199.422px; max-width: none; }
  .footer-address, .footer-email, .footer-phone { font-size: 1rem !important; }
  .footer-links a { font-size: 0.95rem !important; }
}
/* Footer should not be part of scroll-snap system */
.footer-home { 
  scroll-snap-align: none !important; 
  scroll-snap-stop: normal !important;
  position: relative !important;
  display: block !important;
  visibility: visible !important;
  z-index: 1000 !important;
  margin-top: 0 !important;
}

/* Import Gyaste font locally */
@font-face {
    font-family: 'Gyaste';
    src: url('/static/fonts/giyaste.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Global font override to Albert Sans */
* {
    font-family: 'Albert Sans', sans-serif !important;
}

/* Override global font for h1 with Albert Sans */
h1.display-4 {
    font-family: 'Albert Sans', sans-serif !important;
    font-size: 3.3rem !important;
}

/* Mobile responsive fixes - EXACT COPY FROM ARRANGEMENTER.CSS */
@media (max-width: 991.98px) {
    /* Remove padding from body on mobile */
    body {
        padding: 0 !important;
        padding-top: 0 !important; /* remove mobile gap under navbar */
    }
    
    /* Remove navbar gap on mobile */
    body { padding-top: 0 !important; }

    /* Ensure logo positioning matches meny.html on mobile */
    .navbar .container {
        justify-content: space-between !important;
    }
    .navbar .brand {
        position: relative !important;
        left: auto !important;
        transform: none !important;
    }
    .logo-img {
        vertical-align: middle !important;
        display: inline-block !important;
        max-height: 40px !important;
        width: auto !important;
    }
    
    /* Desktop navbar logo margin */
    @media (min-width: 992px) {
      .logo-img {
        margin-top: 15px !important;
      }
    }
    
    /* Remove global center alignment on mobile */
   
    /* Remove side paddings on mobile */
    .container, .row, .col-12, .col-lg-6, .col-lg-4 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Specific padding for text content */
    .p-3, .p-5 {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    /* Homepage cards mobile centering */
    .menu-cards .col-md-6.col-lg-3 {
        padding: 20px 0 !important;
        display: flex !important;
        justify-content: center !important;
    }
    
    .menu-cards .card {
        max-width: 280px !important;
        width: 100% !important;
    }
    
    /* Banner content sizing to match banner-overlay */
    .banner-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px !important;
    }
    
    .banner-content p {
        font-size: 16px !important;
        line-height: 1.5 !important;
        margin-bottom: 20px !important;
    }
    
    .banner-content .btn {
        font-size: 16px !important;
        padding: 12px 24px !important;
    }
}

@media (max-width: 576px) {
    /* Further mobile adjustments for homepage */
    .banner-content p {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }
    
    .banner-content .btn {
        font-size: 1rem !important; /* 16px */
        padding: 10px 30px !important; /* match btn-submit */
    }
}

/* Stili per la sezione di contatto */
.container-fluid.p-0 .row {
    min-height: 100vh;
}

.container-fluid.p-0 .col-lg-6:last-child div {
    height: 100%;
}

.banner {
  width: 100%;
  height: 70vh;
  max-height: 70vh;
  background-image: url("/img/meny3.jpg");
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.banner-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-content {
  color: #fff;
  max-width: 800px;
  padding: 20px;
}

.banner-content p {
  font-size: 3.5rem;
  line-height: 1.6;
  margin-bottom: 20px;
}

.banner-content .btn {
  border: 2px solid #bf6d4b;
  border-radius: 0;
  padding: 12px 30px;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 0.5px;
  color: #bf6d4b;
  background: transparent;
  font-size: 1.1rem;
}

.banner-content .btn:hover {
  background: #bf6d4b;
  color: #fff;
}

/* Specific styles for homepage buttons */
.btn-primary {
  background-color: #bf6d4b !important;
  border-color: #bf6d4b !important;
  color: #fff !important;
  border-radius: 0 !important;
  padding: 12px 30px !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-size: 1.1rem !important;
  transition: all 0.3s ease !important;
}

.btn-primary:hover {
  background-color: #a85a3a !important;
  border-color: #a85a3a !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}

.menu-card {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    transition: transform 0.3s ease;
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1;
    pointer-events: none;
    aspect-ratio: 1 / 1;   /* mantiene le card quadrate */
    width: 100%;
    border-radius: 0 !important; 
}

.menu-card .card-overlay,
.menu-card .card-body { 
    position: absolute;
    inset: 0;
}
.menu-card .card-title {
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.2;
}

.menu-card, 
.menu-card .card-body, 
.menu-card .card-overlay, 
.card, 
.fit-cover { 
    border-radius: 0 !important; 
}

.menu-card:hover {
    transform: translateY(-5px) scale(1.03);
}

@media (max-width: 991.98px){
    .menu-cards .col-md-6{ flex: 0 0 auto; width: 50%; }
}
@media (max-width: 767.98px){
    .menu-cards .col-md-6, 
.menu-cards .col-lg-3 { width: 100%; margin-bottom: 0 !important; }
.menu-card { aspect-ratio: 1 / 1; }
}

.card-overlay {
    position: absolute;
    inset: 0;
}

.menu-card .card-body {
    position: relative;
    z-index: 2;
    color: white;
    text-align: center;
}

.menu-card .card-title {
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.2;
}

/* Section 01 - Horizontal Card Gallery */
.menu-cards-horizontal { width: 100%; overflow: hidden; }
.cards-scroll-wrapper { display: flex; gap: 20px; overflow-x: auto; scroll-behavior: smooth; padding-bottom: 20px; scrollbar-width: none; -ms-overflow-style: none; }
.cards-scroll-wrapper::-webkit-scrollbar { display: none; }
.menu-gallery-card { flex: 0 0 240px !important; width: 240px !important; height: 240px !important; min-width: 240px !important; min-height: 240px !important; max-width: 240px !important; max-height: 240px !important; background-size: cover; background-position: center; position: relative; overflow: hidden; }
.menu-gallery-card-labeled { flex: 0 0 240px !important; width: 240px !important; height: 240px !important; min-width: 240px !important; min-height: 240px !important; max-width: 240px !important; max-height: 240px !important; }
.menu-gallery-card .card-body { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; }
.menu-gallery-card .card-title { color: #fff; font-weight: 700; font-family: 'Albert Sans', sans-serif; font-size: 22px; line-height: 1.15; margin: 0; }
.card-overlay-gallery { position: absolute; inset: 0; background: rgba(0,0,0,0.1); }
@media (max-width: 768px) { .menu-gallery-card { flex: 0 0 240px !important; width: 240px !important; height: 240px !important; } .menu-gallery-card-labeled { flex: 0 0 240px !important; width: 240px !important; height: 240px !important; } }

/* Mobile-only line break */
.br-mobile { display: none; }
@media (max-width: 768px) { .br-mobile { display: inline; } }
@media (min-width: 992px){ h1.display-4{ font-size: 3.3rem !important; } }

/* Section 01 subtitle + CTA mobile sizing */
@media (max-width: 768px) {
    .section-01-sub p { font-size: 2rem !important; line-height: 1.25 !important; }
    .section-01-sub .btn { padding: 14px 40px !important; font-size: 1rem !important; }
}

/* Section 01 cards - Unified sizing */

/* Desktop alignments */
@media (min-width: 992px) {
  .section-01-cards { justify-content: center; }
  .create-btn { margin-left: 12vw !important; }
  
  /* Card dimensions 300x300px on desktop */
  .menu-gallery-card {
    width: 300px !important;
    height: 300px !important;
    min-width: 300px !important;
    min-height: 300px !important;
    max-width: 300px !important;
    max-height: 300px !important;
    flex: 0 0 300px !important;
  }
  
  .menu-gallery-card .card-body {
    width: 300px !important;
    height: 300px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    position: absolute !important;
    inset: 0 !important;
  }
  
  .menu-gallery-card .card-title {
    text-align: center !important;
    margin: auto !important;
    font-size: 22px !important;
  }
  
  .menu-gallery-card .card-overlay-gallery {
    width: 300px !important;
    height: 300px !important;
    position: absolute !important;
    inset: 0 !important;
  }
  
  /* Container dimensions to match card */
  .menu-gallery-card-labeled {
    width: 300px !important;
    height: 300px !important;
    min-width: 300px !important;
    min-height: 300px !important;
    max-width: 300px !important;
    max-height: 300px !important;
  }
}

/* Mobile alignments */
@media (max-width: 991.98px) {
  .create-btn { margin: 0 auto !important; }
}

/* Center block, keep text left-aligned */
.title-left-centered { display: block; width: fit-content; margin-left: auto; margin-right: auto; text-align: left; }
@media (min-width: 992px) { .section-01-title.title-left-centered { margin-left: 0 !important; margin-right: 0 !important; } }

/* Section 02 - Mobile adjustments */
@media (max-width: 991.98px) { .row.g-0.align-items-stretch { flex-direction: column-reverse !important; } .row.g-0.align-items-stretch .col-lg-6:first-child { padding: 40px 20px !important; } .row.g-0.align-items-stretch .col-lg-6:last-child > div { min-height: 300px !important; } }

/* Section 01 mobile: stack cards vertically (no horizontal scroll) and left-align header */
@media (max-width: 991.98px) {
    .cards-scroll-wrapper { 
      display: grid; 
      grid-template-columns: 1fr; 
      gap: 14px; 
      overflow: visible; 
      padding-bottom: 0; 
      justify-items: center;
    }
    .menu-gallery-card, .menu-gallery-card-labeled { 
      flex: 0 0 auto; 
      width: 100%; 
      max-width: 300px;
    }
    .section-01-header { justify-content: flex-start !important; gap: 0 !important; }
    .section-01-header h2 { font-size: 1.6rem !important; }
    .section-01-sub { height: 50vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center !important; padding-left: 0 !important; padding-right: 0 !important; }
    .section-01-sub p { font-size: 2rem !important; }
}

  /* Mobile section images: remove padding and put before text */
  @media (max-width: 991.98px) {
    /* WHY section mobile tweaks: image on top full-width, left-align text */
    #why .row.g-0.align-items-stretch { flex-direction: column !important; }
    #why .col-12.col-lg-6.order-lg-2.order-1 { order: 1 !important; }
    #why .col-12.col-lg-6.order-lg-1.order-2 { order: 2 !important; }
    #why .col-12.col-lg-6.order-lg-2.order-1 > div { 
      min-height: 320px !important; 
      width: 100% !important; 
      margin-left: -20px !important;
      margin-right: -20px !important;
      width: calc(100% + 40px) !important;
    }
    #why h2 { white-space: normal !important; font-size: 1.8rem !important; text-align: left !important; }
    #why .p-5.w-100 { text-align: left !important; }
    #why ul { text-align: left !important; padding-left: 24px !important; }
    
    /* About-us section mobile: image first, remove padding */
    #about-us .row.g-0.align-items-stretch { flex-direction: column !important; }
    #about-us .col-12.col-lg-6:first-child { order: 2 !important; }
    #about-us .col-12.col-lg-6:last-child { order: 1 !important; }
    #about-us .col-12.col-lg-6:last-child > div {
      margin-left: -20px !important;
      margin-right: -20px !important;
      width: calc(100% + 40px) !important;
    }
    
    /* Contact section mobile: image first, remove padding */
    #contact .row.g-0.align-items-stretch { flex-direction: column !important; }
    #contact .col-12.col-lg-6:first-child { order: 2 !important; }
    #contact .col-12.col-lg-6:last-child { order: 1 !important; }
    #contact .col-12.col-lg-6:last-child > div {
      margin-left: -20px !important;
      margin-right: -20px !important;
      width: calc(100% + 40px) !important;
    }
  }

/* Contact right image: desktop width only */
@media (min-width: 992px) { .home-contact-image { width: 950px !important; } }
@media (max-width: 991.98px) { .home-contact-image { width: 100% !important; } }

/* Praktisk Info padding alignment */
@media (min-width: 992px) {
  .praktisk-info-content { padding-left: 60px !important; padding-right: 60px !important; }
  .praktisk-info-content .p-5 { padding-left: 0 !important; padding-right: 0 !important; max-width: 100%; }
  
  /* Center align PRAKTISK INFO section with the p-5 w-100 section */
  .pi-scope .col-12.col-lg-6.order-lg-1.order-2 {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
  }
  
  .pi-scope .pi-title-block {
      text-align: left !important;
      width: 100% !important;
      padding-bottom: 100px !important;
      padding-left: 160px !important;
  }
  
  .pi-scope .info-icon {
      padding-left: 160px !important;
  }
  
  .pi-scope .praktisk-info-title {
      padding-left: 160px !important;
  }
  
  /* Removed problematic padding-left rule */
}
@media (max-width: 991.98px) {
  .praktisk-info-content { padding-left: 20px !important; padding-right: 20px !important; }
  
  /* Remove line breaks from text on mobile */
  .section-02-list p br {
    display: none !important;
  }
}

/* Reduce top/bottom padding by half (desktop and mobile) */
.praktisk-info-content { padding-top: 30px !important; padding-bottom: 30px !important; }
.praktisk-info-content .p-5 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }

/* Contact right image: desktop width only */
@media (min-width: 992px) { .home-contact-image { width: 950px !important; } }
@media (max-width: 991.98px) { .home-contact-image { width: 100% !important; } }

/* Praktisk Info padding alignment */
@media (min-width: 992px) {
  .praktisk-info-content { padding-left: 60px !important; padding-right: 60px !important; }
  .praktisk-info-content .p-5 { padding-left: 0 !important; padding-right: 0 !important; max-width: 100%; }
  
  /* Center align PRAKTISK INFO section with the p-5 w-100 section */
  .pi-scope .col-12.col-lg-6.order-lg-1.order-2 {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
  }
  
  .pi-scope .pi-title-block {
      text-align: left !important;
      width: 100% !important;
      padding-bottom: 100px !important;
      padding-left: 160px !important;
  }
  
  .pi-scope .info-icon {
      padding-left: 160px !important;
  }
  
  .pi-scope .praktisk-info-title {
      padding-left: 160px !important;
  }
  
  /* Removed problematic padding-left rule */
}
@media (max-width: 991.98px) {
  .praktisk-info-content { padding-left: 20px !important; padding-right: 20px !important; }
  
  /* Remove line breaks from text on mobile */
  .section-02-list p br {
    display: none !important;
  }
}

/* Desktop centering fix for Section 01 when container has asymmetric margins */
@media (min-width: 992px) {
  /* removed asymmetric offset */
}

/* Mobile: restore default centering */
@media (max-width: 991.98px) {
  section:has(.section-01-header) .container { margin: 0 auto !important; padding-left: 20px !important; padding-right: 20px !important; }
}

/* Responsive H1 (display-4) on hero */
h1.display-4 {
  font-size: 3.3rem !important;
}
@media (max-width: 768px) {
  h1.display-4 { font-size: 2.0rem !important; line-height: 1.25; }
  
  /* Mobile button styles */
  .btn.create-btn {
    font-size: 32px !important;
  }
  
  /* Mobile contact number */
  .contact-number {
    font-size: 48px !important;
  }
  
  /* Mobile praktisk info title */
  .praktisk-info-title {
    font-size: 48px !important;
    text-align: center !important;
  }
}

/* Banner text uses Gyaste with responsive sizing */
.banner-text {
  font-size: 3.0rem !important;
}
@media (max-width: 768px) {
  .banner-text { font-size: 2.0rem !important; }
}

/* Desktop: remove lateral paddings for f5f0e8 sections */
@media (min-width: 992px) {
  section[style*="background: #f5f0e8"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Accordion button font size increase and arrow fix */
.accordion-button { 
    font-size: 20px !important; 
    padding: 1rem 1.25rem !important;
    height: auto !important;
    min-height: 50px !important;
}

/* Fix accordion arrow positioning */
.accordion-button::after {
    margin-left: auto !important;
    margin-right: 0 !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    background-size: 1.25rem !important;
}

/* Specific fix for Praktisk Info accordion arrows */
.pi-scope .accordion-button {
    padding-right: 2.5rem !important;
    position: relative !important;
}

.pi-scope .accordion-button::after {
    position: absolute !important;
    right: 1rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    width: 1rem !important;
    height: 1rem !important;
    background-size: 1rem !important;
    flex-shrink: 0 !important;
}

/* SECTION 01 - Allineamento e dimensioni card aumentate */
@media (min-width: 992px) {
    /* Contenitore principale - centrato con margini auto */
    section:has(.section-01-header) .container {
        max-width: 1600px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Header 01 - allineato a sinistra */
    .section-01-header {
        justify-content: flex-start !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
    
    /* Cards unified sizing handled above */
    
    /* Cards wrapper - centrare le card */
    .cards-scroll-wrapper {
        justify-content: center !important;
        max-width: 100% !important;
    }
}

/* Home contact submit hover */
.home-contact-submit:hover {
    background-color: #bf6d4b !important;
    color: #ffffff !important;
    border: none !important;
}

/* Accordion item base height - collapsed state */
.pi-scope .accordion-item {
    margin-bottom: 0 !important;
    min-height: 50px !important;
    height: auto !important;
}

/* Accordion header fixed height */
.pi-scope .accordion-header {
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
}

/* Accordion button takes full header height */
.pi-scope .accordion-button {
    height: 50px !important;
    padding: 0 1rem !important;
    display: flex !important;
    align-items: center !important;
}

/* Collapsed state - no extra space */
.pi-scope .accordion-collapse:not(.show) {
    height: 0 !important;
    overflow: hidden !important;
}

/* Expanded state - auto height for content */
.pi-scope .accordion-collapse.show {
    height: auto !important;
}

/* Body padding */
.pi-scope .accordion-body {
    padding: 1rem !important;
}

/* Vertical alignment for section 01 and 02 text */
@media (min-width: 992px) {
    .section-01-sub {
        text-align: center !important;
        padding-left: 0 !important;
    }
    
    /* Desktop-only padding for WHY section */
    .why-section-content {
        padding-left: 250px !important;
    }
    
    /* Align section 01 header with section 02 content */
    .section-01-header {
        padding-left: 285px !important;
        padding-right: 520px !important;
    }
    
    /* Section 02 header padding */
    .section-02-header {
        padding-left: 180px !important;
    }
    
    /* Section 02 list padding */
    .section-02-list {
        padding-left: 180px !important;
    }
    
    /* Align LAG NÅ button with din meny text */
    .create-btn {
        margin-left: 180px !important;
    }
    
    /* Keep section 01 sub centered */
    .section-01-sub {
        text-align: center !important;
        padding-left: 0 !important;
    }
}

/* Hover effect for second SE MER button */
.btn-outline-light:hover {
    background-color: white !important;
    color: #bf6d4b !important;
    border-color: white !important;
    transform: translateY(-2px) !important;
}

/* ================================================================
   CONTACT FORM - RICOSTRUITO DA ZERO
   ================================================================ */

/* --- LAYOUT BASE --- */
#contact {
    background: #fff5ee;
    min-height: 100vh;
}

#contact .container-fluid {
    height: 100%;
}

#contact .row {
    min-height: 100vh;
}

/* --- WRAPPER DEL FORM --- */
.contact-form-wrapper {
    max-width: 580px;
    width: 100%;
    padding: 30px 20px;
}

/* --- HEADER --- */
.contact-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.contact-number {
    font-size: 3rem;
    font-weight: 700;
    color: #bf6d4b;
    line-height: 1;
}

.contact-title h2 {
    margin: 0;
    font-size: 2.2rem;
    font-weight: 400;
    line-height: 1.2;
    color: #000;
}

.contact-title .highlight {
    color: #b4ba93;
    font-weight: 700;
}

.contact-subtitle {
    color: #666;
    font-size: 1rem;
    margin-bottom: 20px;
    line-height: 1.6;
}

.contact-label {
    color: #000;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

/* --- FORM STYLING --- */
.contact-form {
    width: 100%;
}

.form-group {
    margin-bottom: 20px;
}

.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.form-col {
    flex: 1;
}

.form-input {
    width: 100%;
    border: none;
    border-bottom: 2px solid #bf6d4b;
    border-radius: 0;
    background: transparent;
    padding: 12px 0;
    font-size: 1.1rem;
    color: #333;
    transition: border-color 0.3s ease;
}

.form-input:focus {
    outline: none;
    border-bottom-color: #a85a3a;
}

.form-input::placeholder {
    color: #999;
}

textarea.form-input {
    resize: vertical;
    min-height: 100px;
}

.form-submit {
    text-align: center;
    margin-top: 30px;
}

.btn-submit {
    background: transparent;
    border: 2px solid #bf6d4b;
    border-radius: 0;
    color: #bf6d4b;
    padding: 12px 40px;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-submit:hover {
    background: #bf6d4b;
    color: #fff;
}

/* --- IMAGE SECTION --- */
.contact-image {
    height: 100%;
    min-height: 500px;
    width: 100%;
}

/* --- DESKTOP OPTIMIZATIONS --- */
@media (min-width: 992px) {
    .contact-form-wrapper {
        padding: 40px 60px;
        padding-top: 15vh;
        max-width: 600px;
        margin-left: 350px;
    }
    
    .contact-title h2 {
        font-size: 2.6rem;
    }
    
    .contact-image {
        min-height: 100vh;
    }
}

/* --- MOBILE ADJUSTMENTS --- */
@media (max-width: 991.98px) {
    #contact .row {
        flex-direction: column;
        min-height: auto;
    }
    
    .contact-form-wrapper {
        padding: 40px 20px;
    }
    
    .contact-header {
        gap: 15px;
    }
    
    .contact-number {
        font-size: 2.5rem;
    }
    
    .contact-title h2 {
        font-size: 1.8rem;
    }
    
    .contact-title h2 br {
        display: none;
    }
    
    .form-row {
        flex-direction: column;
        gap: 30px;
    }
    
    .contact-image {
        min-height: 300px;
        order: -1;
    }
}

/* --- MOBILE SMALL --- */
@media (max-width: 576px) {
    .contact-number {
        font-size: 2rem;
    }
    
    .contact-title h2 {
        font-size: 1.5rem;
    }
    
    .form-input {
        font-size: 1rem;
        padding: 10px 0;
    }
    
    .btn-submit {
        padding: 10px 30px;
        font-size: 1rem;
    }
}