/* === BRF Nyborg — stylesheet vAuto (tablet/desktop fix: 768/992) === */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:Arial,Helvetica,sans-serif;line-height:1.6;background:#fff;color:#002f5f}

/* Headings */
h1,h2,h3{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:800;color:#0b3560}
h1{font-size:2.5rem;margin:0 0 .75rem}
h2{font-size:1.75rem;margin:.5rem 0 .9rem}
h3{font-size:1.25rem;margin:.4rem 0 .75rem}

/* Layout */
.main-content,.container{max-width:1000px;margin:0 auto;padding:1rem}

/* Support bar */
.support-bar{background:#fff;color:#000;text-align:center;font-size:.9rem;padding:.2rem}

/* Header */
.site-header{background:#1c2a61;color:#fff}
.site-header .header-container{
  max-width:1200px;margin:0 auto;padding:.85rem 1rem;
  display:flex;align-items:center;gap:1rem
}
.site-header .logo img{height:72px;display:block}

/* =========================
   NAVIGATION (Mobile/Tablet/Desktop)
   Breakpoints:
   - Mobile:  <768px
   - Tablet:  768–991px  (compact desktop menu)
   - Desktop: ≥992px     (normal desktop menu)
   ========================= */

/* Desktop menu base (hidden by default) */
.desktop-menu{display:none;margin-left:1.25rem}
.desktop-menu ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:2rem}
.desktop-menu li{position:relative}
.desktop-menu > ul > li > a{
  display:block;padding:.6rem .2rem;color:#ffe600;font-weight:700;text-decoration:none
}
.desktop-menu > ul > li > a:hover{color:#fff}
.desktop-menu .has-children > a::after{content:"▾";margin-left:.35rem;font-size:.8rem}
.desktop-menu .has-children::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px}
.desktop-menu .submenu{
  position:absolute;left:0;top:100%;z-index:1000;min-width:260px;
  background:#1c2a61;border:1px solid rgba(255,255,255,.15);
  border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.25);
  padding:.5rem;margin:0;list-style:none;display:none
}
.desktop-menu .submenu li a{
  display:block;padding:.6rem .8rem;border-radius:8px;color:#ffe600;text-decoration:none;white-space:nowrap
}
.desktop-menu .submenu li a:hover{background:rgba(255,255,255,.08);color:#fff}
.desktop-menu .has-children:hover>.submenu,
.desktop-menu .has-children:focus-within>.submenu,
.desktop-menu .has-children>.submenu:hover{display:block}

/* Mobile toggle (hamburger) */
.mobile-toggle{
  margin-left:auto;background:transparent;border:0;cursor:pointer;
  display:flex;align-items:center;gap:.5rem;color:#ffe600;font-size:2rem;line-height:1
}
.mobile-toggle .icon-bars{display:inline}
.mobile-toggle .icon-close{display:none}
.mobile-toggle[aria-expanded="true"] .icon-bars{display:none}
.mobile-toggle[aria-expanded="true"] .icon-close{display:inline}

/* Mobile menu container */
#mobileMenu{display:none;flex-direction:column;background:#1c2a61}
#mobileMenu.visible{display:flex}
#mobileMenu a,#mobileMenu .submenu-toggle{
  display:block;width:100%;text-align:left;color:#ffe600;font-weight:700;
  padding:1rem 1.1rem;border-bottom:1px solid rgba(255,255,255,.08);text-decoration:none
}
#mobileMenu .submenu-toggle{position:relative;background:transparent;border:0}
#mobileMenu .submenu-toggle .arrow{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:1.4rem
}
#mobileMenu .submenu-items{display:none;flex-direction:column;background:#162354}
#mobileMenu .submenu.open>.submenu-items{display:flex}
#mobileMenu .submenu-items a{padding:1rem 1.1rem 1rem 2.4rem;border-bottom:1px solid rgba(255,255,255,.06)}

/* ===== Mobile (<768px): show mobile menu only ===== */
@media (max-width:767px){
  .desktop-menu{display:none}
  #mobileMenu{display:none}           /* stays hidden until toggled */
  #mobileMenu.visible{display:flex}

  /* Mobile typography & spacing */
  #mobileMenu > a,
  #mobileMenu > .submenu > .submenu-toggle{
    font-size:1.05rem; line-height:1.35; font-weight:700;
    padding:1rem 1.1rem; color:#ffe600; text-decoration:none;
    border-bottom:1px solid rgba(255,255,255,.08); background:transparent;
  }
  #mobileMenu .submenu-items > a{
    font-size:.95rem; line-height:1.35; font-weight:600;
    padding:.9rem 1.1rem .9rem 2.2rem; color:#ffe600; text-decoration:none;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
}

/* ===== Tablet (768–991px): compact desktop menu ===== */
@media (min-width:768px) and (max-width:991px){
  .desktop-menu{display:block}
  #mobileMenu{display:none}           /* ensure hidden on tablet */
  .mobile-toggle{display:none}        /* hide hamburger on tablet */

  .desktop-menu{font-size:.9rem}
  .desktop-menu ul{gap:1rem}
  .desktop-menu > ul > li > a{padding:.45rem .15rem}
}

/* ===== Desktop (≥992px): normal desktop menu ===== */
@media (min-width:992px){
  .desktop-menu{display:block}
  #mobileMenu{display:none}
  .mobile-toggle{display:none}

  .desktop-menu{font-size:1rem}
  .desktop-menu ul{gap:2rem}
  .desktop-menu > ul > li > a{padding:.6rem .2rem}
}

/* Footer */
.site-footer{width:100%;background:#1c2a61;color:#fff;padding:1rem 0;text-align:center}
.footer-container{max-width:1200px;margin:0 auto;padding:1rem}

/* Lists (HSB-likt) */
:where(main,.container,.content) ul {
  margin:.35rem 0 1rem 0;
  padding-left:1rem;
  list-style-position:outside;
}
:where(main,.container,.content) ol {
  margin:.35rem 0 1rem 0;
  padding-left:1rem;
  list-style-position:outside;
}
:where(main,.container,.content) li {
  margin:.35rem 0;
  line-height:1.55;
}

/* Documents (short) */
.doc-list{display:flex;flex-direction:column;gap:.4rem;margin:.75rem 0 1.25rem}
.doc-row{display:flex;align-items:center;gap:.6rem;padding:.55rem 0;border-bottom:1px solid #e9eef5}
.doc-preview{flex:0 0 22px;text-decoration:none;line-height:1}
.doc-name{flex:1;min-width:0}
.doc-name a{display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none}
.doc-download{margin-left:auto;white-space:nowrap;text-decoration:none;font-weight:700}

/* === Mobil typografi — gör rubrikerna mindre (≤768px) === */
@media (max-width:768px){
  h1{font-size:1.95rem; line-height:1.22; margin:0 0 .6rem}
  h2{font-size:1.35rem; line-height:1.28; margin:.4rem 0 .8rem}
  h3{font-size:1.10rem; line-height:1.3;  margin:.35rem 0 .65rem}
  .main-content, .container{padding:0.9rem}
}

/* (valfritt) Lite snällare desktoprubriker */
@media (min-width:980px){
  h1{font-size:2.2rem}
  h2{font-size:1.6rem}
  h3{font-size:1.15rem}
}

/* Tvättstugor – enhetlig bildbredd, centrerat */
.tvattstuga {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1rem;
}
.tvattstuga img {
  display: block;
  width: 100%;
  max-width: 620px;
  height: auto;
  margin: 0.75rem auto;
  border-radius: 6px;
}
/* Lägg till/ersätt i din CSS */

/* Overlay alltid ovanför headern */
.album-modal{
  position:fixed; inset:0; background:rgba(0,0,0,.82);
  display:none; align-items:center; justify-content:center;
  z-index:100000; /* över header/menu */
}
.album-modal.open{display:flex}
.album-stage{position:relative; max-width:min(92vw,1200px); max-height:min(88vh,900px)}
#album-image{max-width:100%; max-height:100%; display:block; margin:0 auto; border-radius:6px}
.album-close{
  position:fixed; top:14px; right:18px; border:0; background:transparent;
  color:#fff; font-size:2rem; line-height:1; cursor:pointer
}
.album-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  border:0; background:rgba(255,255,255,.18); color:#fff;
  width:48px; height:48px; border-radius:50%; font-size:1.25rem;
  cursor:pointer; display:flex; align-items:center; justify-content:center
}
.album-nav.prev{left:-64px}
.album-nav.next{right:-64px}
.album-caption,.album-counter{color:#fff; text-align:center; margin-top:.6rem; font-weight:600}
.album-counter{opacity:.85; font-weight:500; font-size:.95rem}

/* Mobil – dra in pilarna */
@media (max-width:768px){
  .album-nav.prev{left:-12px}
  .album-nav.next{right:-12px}
}

/* Lås bakgrund när overlay är öppen */
body.noscroll{overflow:hidden}
/* === Tvättstuga: thumbnail grid – mobil/tablet/desktop (fix) === */
.album-wrap{max-width:1200px;margin:0 auto;padding:1rem}

.album-grid{
  display:grid;
  gap:14px;
  grid-template-columns: repeat(2, minmax(140px, 1fr)) !important; /* mobil: 2 kolumner */
  align-items:start;
}

.album-card{
  background:#fff;
  border-radius:12px;
  box-shadow:0 4px 10px rgba(0,0,0,.06);
  padding:.6rem;
}

.album-link{display:block;border-radius:8px;overflow:hidden}
.album-thumb{
  width:100%;
  height:auto;
  aspect-ratio:4/3;              /* konsekvent höjd */
  object-fit:cover;
  display:block;
  background:#f2f4f8;
}
.album-cap{display:block;font-weight:600;color:#0b3560;padding:.55rem .15rem 0}

/* Tablet: 3 kolumner */
@media (min-width:768px){
  .album-grid{grid-template-columns: repeat(3, minmax(160px, 1fr)) !important;}
  .album-card{padding:.7rem}
}

/* Desktop: 4 kolumner */
@media (min-width:992px){
  .album-grid{grid-template-columns: repeat(4, minmax(180px, 1fr)) !important;}
  .album-card{padding:.75rem}
}
/* ===== Responsiv tabell lågpris mobilabonnemang ===== */
.table-wrap {overflow:auto;}
.table.lowcost {width:100%; border-collapse:collapse; font-size:.95rem; background:#fff; border:1px solid #e5e7eb; border-radius:8px; overflow:hidden;}
.table.lowcost th, 
.table.lowcost td {padding:.7rem .8rem; border-bottom:1px solid #eef2f7; vertical-align:top;}
.table.lowcost th {background:#f9fafb; text-align:left; font-weight:700;}
.table.lowcost tr:last-child td {border-bottom:0;}
.table.lowcost a {text-decoration:underline;}
.note {color:#6b7280; font-size:.9rem; margin-top:.5rem;}

/* Mobilanpassning */
@media (max-width: 640px) {
  .table.lowcost thead {display:none;}

  /* Gör om tabellen till list-kort och ta bort alla tabellramar */
  .table.lowcost {
    display:block;
    width:100%;
    border:0 !important;
    border-radius:0;
    background:transparent;
    overflow:visible;
  }
  .table.lowcost tbody {display:block;}
  .table.lowcost tr {
    display:block;
    margin:0 0 1rem 0;              /* avstånd mellan korten */
    padding:.5rem;
    border:1px solid #e5e7eb;       /* kortets ram */
    border-radius:12px;
    background:#fff;
    box-shadow:0 2px 6px rgba(0,0,0,.05);
  }
  .table.lowcost td {
    display:block;
    width:100%;
    border:0 !important;            /* ta bort ev. bottenlinjer */
    padding:.4rem .6rem;
  }
  .table.lowcost th,
  .table.lowcost td { border-bottom:0 !important; } /* säkerställ */

  .table.lowcost td::before {
    content: attr(data-label);
    display:block;
    font-weight:600;
    color:#374151;
    margin-bottom:.2rem;
  }
}