/* =====================================================================
   Noventis Ventilation – korrigeringar 2026-08-30
   Den här filen laddas SIST på varje sida, efter sidans egna
   <style>-block. Reglerna här gäller därför framför sidmallarnas
   egna varianter utan att !important behöver användas.
   ===================================================================== */

/* ---------------------------------------------------------------
   1. LOGOTYPEN – större på samtliga sidor
   --------------------------------------------------------------- */
.header .logo{height:60px;width:auto;max-width:none;display:block}
.header-inner{padding:20px}
.mobile-menu-header img{height:40px}

@media(max-width:900px){
  .header .logo{height:50px !important;max-width:66vw !important;max-height:none !important}
  .header-inner{padding:15px 20px}
}
@media(max-width:400px){
  .header .logo{height:44px !important}
}

/* ---------------------------------------------------------------
   2. LÄNKAR – blå och aldrig understrukna
   --------------------------------------------------------------- */
a{color:#1E7BEF;text-decoration:none}
a:hover,a:focus,a:active{text-decoration:none}

/* Länkar på mörk bakgrund blir ljusblå så att de går att läsa */
.site-footer a,.site-footer .footer-col a,.footer a{color:#9CC6FF}
.problem-box a,.dark-section p a,.dark-section li a,.section-dark p a,.section-dark li a{color:#8FC4FF}

/* Länkar som är hela kort eller knappar ska behålla sin egen färg */
a.card,a.problem-card,a.omrade-link,a.area-link,.mobile-menu a,nav > a,
.nav-dropdown-menu a,.related-links a,.icon-btn{color:inherit}
.mobile-menu a{color:#08162f}
.mobile-menu a.cta{color:#fff}
nav > a{color:#08162f}
nav > a.active{color:#1E7BEF}
.topbar .top-right a{color:#fff}
.icon-btn{color:#08162f}
.icon-btn.menu-toggle{color:#fff}

/* ---------------------------------------------------------------
   3. KNAPPAR SKA SE UT SOM KNAPPAR
      Primär = fylld blå. Sekundär = vit med tydlig blå ram och blå
      text. Ingen vanlig textruta på sajten ser ut så längre.
   --------------------------------------------------------------- */
.btn-primary,.page-btn-primary,.hero-primary,.trust-buttons .hero-primary{
  background:#1E7BEF;color:#fff;border:2px solid #1E7BEF;border-radius:16px;
  font-weight:800;padding:16px 26px;display:inline-block;text-align:center;
  box-shadow:0 10px 24px rgba(30,123,239,.28)
}
.btn-secondary,.page-btn-secondary,.hero-secondary{
  background:#fff;color:#1E7BEF;border:2px solid #1E7BEF;border-radius:16px;
  font-weight:800;padding:16px 26px;display:inline-block;text-align:center;
  box-shadow:none
}
.btn-primary:hover,.page-btn-primary:hover{background:#1668cc;border-color:#1668cc}
.btn-secondary:hover,.page-btn-secondary:hover,.hero-secondary:hover{background:#eef6ff}
.offert-form .btn{border:2px solid #1E7BEF;border-radius:16px}

/* Knappen i mörka rutor: vit botten, blå text – syns tydligt som knapp */
.final-cta .page-btn-secondary,.home-cta .btn-secondary,
.cta-banner .hero-secondary,.trust-banner .hero-secondary{
  background:#fff;color:#1E7BEF;border:2px solid #fff
}

/* ---------------------------------------------------------------
   4. FAKTARADER ÄR TEXT – INTE KNAPPAR
      Tidigare låg de i vita rutor med rundade hörn direkt under
      knapparna och gick inte att skilja från dem.
   --------------------------------------------------------------- */
.hero-content .trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px;margin-top:26px}
.hero-content .trust-card{
  background:transparent;border:0;box-shadow:none;border-radius:0;
  padding:5px 0;font-weight:700;font-size:16px;color:#41506a
}
.page-hero .hero-trust,.hero-trust{display:block;margin-top:24px}
.hero-trust div{
  background:transparent;border:0;box-shadow:none;border-radius:0;
  padding:5px 0;font-weight:700;font-size:16px;color:#41506a
}
.hero-trust div:before{content:"\2713\00a0";color:#1E7BEF;font-weight:900}
.trust-row{display:block;margin-top:22px}
.trust-item{
  background:transparent;border:0;border-radius:0;padding:4px 0;display:block;
  color:#41506a;font-weight:700;font-size:16px
}
.trust-item:before{content:"\2713\00a0";color:#1E7BEF;font-weight:900}

/* Områdeslänkarna på startsidan är länkar – markera det med blå text */
.omrade-link,.area-links a{color:#1E7BEF;font-weight:800}
.omrade-link:after,.area-links a:after{content:" \2192";color:#8fb6ea}

/* ---------------------------------------------------------------
   5. INGEN SIDLED-SKROLL
      Prislistan på lokalsidorna var bredare än skärmen. Sista
      kolumnen låg dessutom i nowrap.
   --------------------------------------------------------------- */
html{overflow-x:clip}
body{overflow-x:clip}

@media(max-width:700px){
  .ort-pris{table-layout:fixed;width:100%;font-size:15px}
  .ort-pris th,.ort-pris td{padding:11px 10px;overflow-wrap:break-word}
  .ort-pris th:first-child,.ort-pris td:first-child{width:58%}
  .ort-pris th:last-child,.ort-pris td:last-child{white-space:normal;text-align:right}
  .pris-tabell th,.pris-tabell td{overflow-wrap:break-word}
}

/* ---------------------------------------------------------------
   6. TELEFONNUMMER FÅR ALDRIG DELAS ÖVER TVÅ RADER
   --------------------------------------------------------------- */
a[href^="tel:"],.sticky-ring,.telefonnummer{white-space:nowrap}

/* ---------------------------------------------------------------
   7. RUBRIKER PÅ SMÅ SKÄRMAR
      Företagsnamn och långa fackord ska aldrig avstavas mitt i ordet.
      Rubrikerna får i stället brytas mellan hela ord och skalas ned.
   --------------------------------------------------------------- */
h1,h2,h3,h4{hyphens:none;-webkit-hyphens:none;overflow-wrap:normal;word-break:normal}

/* Den utökade områdesmenyn ska rymmas även på lägre och smalare laptops. */
.nav-dropdown-menu{
  left:auto;right:0;max-height:72vh;overflow-y:auto;
  transform:translateY(8px)
}
.nav-dropdown.open .nav-dropdown-menu,
.nav-dropdown:hover .nav-dropdown-menu{transform:translateY(0)}

@media(max-width:900px){
  .problem-box{padding:28px 22px}
  .problem-box h2,.problem-box h3{font-size:clamp(20px,5.8vw,34px);line-height:1.2}
  .final-cta{padding:32px 24px}
  .final-cta h2{font-size:clamp(20px,5.6vw,32px);line-height:1.2}
  .offert-box{padding:28px 22px}
  .offert-box h2{font-size:clamp(20px,5.6vw,32px);line-height:1.2}
  .home-cta h2{font-size:clamp(20px,5.6vw,34px);line-height:1.2}
  .page-side-card h2{font-size:clamp(19px,5.4vw,28px);line-height:1.25}
  .section-title,.section-heading h2,.article h2{font-size:clamp(20px,5.8vw,32px);line-height:1.2}
  .card h3,.problem-card h3,.faq-item h3{font-size:clamp(18px,5vw,24px);line-height:1.25}
  .contact-card h2{font-size:clamp(19px,5.4vw,28px);line-height:1.25}
  .sidebar-card h3{font-size:clamp(18px,5vw,24px)}
}

/* ---------------------------------------------------------------
   8. KNAPPRADER STAPLAS PÅ MOBIL SÅ ATT DE BLIR LÄTTA ATT TRÄFFA
   --------------------------------------------------------------- */
@media(max-width:600px){
  .page-cta-row,.cta-row,.hero-buttons,.trust-buttons{flex-direction:column;align-items:stretch}
  .page-cta-row a,.cta-row a,.hero-buttons a,.trust-buttons a{width:100%}
}

/* ---------------------------------------------------------------
   9. KORTEN I "VANLIGA TECKEN" – texten låg utanför rutan
      (en regel för klickytor skrev över kortets padding)
   --------------------------------------------------------------- */
a.problem-card,a.card{padding:26px;min-height:0;line-height:1.6;display:block}
@media(max-width:900px){
  a.problem-card,a.card{padding:24px 22px}
}

/* ---------------------------------------------------------------
   10. PRISTABELLERNA RYMS UTAN ATT SKROLLA I SIDLED
   --------------------------------------------------------------- */
@media(max-width:700px){
  .tabell-svep .pris-tabell,.pris-tabell{table-layout:fixed;width:100%;min-width:0;font-size:14px}
  .tabell-svep{box-shadow:none}
  .pris-tabell th,.pris-tabell td{padding:10px 8px;overflow-wrap:break-word;hyphens:auto}
  .pris-tabell td.pris{white-space:normal}
}

/* ---------------------------------------------------------------
   11. Sista justeringar
   --------------------------------------------------------------- */
/* Knappen i den mörka problemrutan ska ha vit text, inte länkblå */
.problem-box a.btn-primary,.problem-box a.btn-secondary,
.dark-section a.btn-primary,.section-dark a.hero-primary{color:#fff}
.problem-box a.btn-primary{margin-top:26px}

/* Faktaraderna i hjälterutan: en kolumn på riktigt små skärmar */
@media(max-width:620px){
  .hero-content .trust-grid{grid-template-columns:1fr;gap:2px}
}

/* Logotypen i mobilmenyn följer med upp i storlek */
@media(max-width:900px){ .mobile-menu-header img{height:34px} }