/*
=====================================================================
 PCM SERVICE - USER.CSS
 Joomla 6 / Cassiopeia Extended

 01. Färger
 02. Grundinställningar
 03. Header / logotyp
 04. Meny
 05. Joomla-layout
 06. Gemensamma PCM-klasser
 07. Hero
 08. Förtroenderad
 09. Tjänster / sektioner
 10. Marin / mörka sektioner
 11. Kontakt
 12. Footer
 13. Undersidor
 14. Mobil / surfplatta
 15. Responsiv logotyp
 16. Fullbredd / borttagning av ytterkant

 Viktigt:
 - Ändra färger i sektion 01.
 - Ändra loggans storlek i sektion 03/15.
 - Sektion 16 styr att sidans bakgrunder går kant-till-kant.
=====================================================================
*/

/* =================================================================
   01. FÄRGER OCH VARIABLER
   ================================================================= */
:root {
  --pcm-ink: #292c2b;
  --pcm-charcoal: #202322;
  --pcm-steel: #b36a2e;
  --pcm-pale: #e9e7e2;
  --pcm-white: #ffffff;
  --pcm-text: #343735;
  --pcm-muted: #6f716d;
  --pcm-line: #d2cec6;
}

/* Headerns bakgrund bakom logotyp och meny */
:root {
  --pcm-header-bg: #101111;
}


/* =================================================================
   02. GRUNDINSTÄLLNINGAR
   ================================================================= */
html {
  scroll-behavior: smooth;
}

body {
  background: #f5f4f1;
  color: var(--pcm-text);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.65;
}


/* =================================================================
   03. HEADER, LOGOTYP OCH SLOGAN
   ================================================================= */

/* Hela området bakom logotyp + meny */
body .container-header {
  background: var(--pcm-header-bg) !important;
  background-color: var(--pcm-header-bg) !important;
  background-image: none !important;
  color: var(--pcm-ink);
  box-shadow: 0 1px 0 rgba(0,0,0,.12);
  position: relative;
  z-index: 10;
}

/* Inre headerytor ska inte lägga egen bakgrund ovanpå headern */
body .container-header .grid-child,
body .container-header .container-nav {
  background: transparent !important;
}

/* Logotypblocket */
.container-header .navbar-brand {
  color: var(--pcm-ink);
  display: grid;
  grid-template-columns: 1fr;
  justify-items: stretch;
  margin: 0;
  padding: 0;
  width: max-content;
}

.container-header .navbar-brand > a,
.container-header .navbar-brand > span:not(.site-description) {
  color: var(--pcm-ink);
  display: block;
  justify-self: start;
  line-height: 1;
}

.container-header .navbar-brand img {
  display: block;
  width: 385px;
  max-width: 100%;
  height: auto;
  margin: 0;
}

/* Separat Joomla-slogan döljs - texten finns redan i den nya logotypbilden */
.container-header .navbar-brand .site-description,
.container-header .site-description {
  display: none !important;
}


/* =================================================================
   04. HUVUDMENY
   ================================================================= */
.container-header .mod-menu {
  align-items: center;
  gap: 16px;
}

.container-header .mod-menu > li > a {
  color: #f0ede7;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .8rem .35rem;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Aktiv meny + hover använder kopparfärgen */
.container-header .mod-menu > li.active > a,
.container-header .mod-menu > li > a:hover {
  color: var(--pcm-steel);
}

.container-header .navbar-toggler {
  border-color: #b36a2e;
  color: #f0ede7;
}

/* Desktop: logotyp vänster och meny direkt till höger */
@media (min-width: 992px) {
  .container-header {
    align-items: center;
    column-gap: 30px;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-rows: auto;
    padding: 4px max(24px, calc((100vw - 1180px) / 2));
  }

  .container-header .navbar-brand {
    align-self: center;
    grid-column: 1;
    grid-row: 1;
  }

  .container-header .container-nav {
    align-self: center;
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    padding: 0;
    transform: translateY(-4px);
    width: 100%;
  }

  .container-header .container-nav .grid-child {
    margin: 0;
    max-width: none;
    min-height: 0;
    padding: 0;
  }

  .container-header .navbar-collapse {
    width: 100%;
  }

  .container-header .mod-menu {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
  }
}


/* =================================================================
   05-13. SIDANS INNEHÅLL
   Nedanstående regler är bevarade från den fungerande PCM-designen.
   ================================================================= */

/* ----- 05. JOOMLA-LAYOUT / INNEHÅLLSYTA ----- */
.container-below-top,
.container-banner,
.container-top-a,
.container-top-b,
.container-bottom-a,
.container-bottom-b {
  max-width: none;
}
.site-grid {
  grid-gap: 0;
}
.site-grid > .grid-child,
.container-component {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
main {
  margin: 0;
}
main .page-header,
main .article-info,
main .icons {
  display: none;
}
.com-content-article {
  margin: 0;
}
.pcm-home h1,
.pcm-home h2,
.pcm-home h3,
.pcm-home p {
  margin-top: 0;
}
.pcm-home h1,
.pcm-home h2,
.pcm-home h3 {
  color: inherit;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
}
/* ----- 06. GEMENSAMMA PCM-KLASSER ----- */
.pcm-wrap {
  width: min(1120px, calc(100% - 40px));
  margin-inline: auto;
}
/* ----- 07. STARTSIDA - HERO ----- */
.pcm-hero {
  background: var(--pcm-charcoal);
  color: #fff;
  padding: 76px 0;
}
.pcm-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 70px;
  align-items: center;
}
.pcm-eyebrow {
  color: var(--pcm-steel);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .18em;
  margin-bottom: 12px;
}
.pcm-hero .pcm-eyebrow,
.pcm-marine .pcm-eyebrow {
  color: #d7b18f;
}
.pcm-hero h1 {
  color: #fff;
  font-size: clamp(2.6rem, 5.5vw, 5.2rem);
  letter-spacing: -.055em;
  line-height: .98;
  margin-bottom: 24px;
  max-width: 800px;
}
.pcm-intro {
  color: #dedbd5;
  font-size: 1.08rem;
  max-width: 700px;
}
.pcm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.pcm-btn {
  display: inline-block;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .06em;
  padding: 13px 21px;
  text-decoration: none;
  text-transform: uppercase;
}
.pcm-btn-primary {
  background: var(--pcm-steel);
  color: #fff;
}
.pcm-btn-secondary {
  border: 1px solid #8b9192;
  color: #fff;
}
.pcm-btn:hover {
  filter: brightness(.92);
  text-decoration: none;
}
.pcm-hero-photo {
  background: #dedbd4;
  padding: 15px;
}
.pcm-hero-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
/* ----- 08. STARTSIDA - FÖRTROENDERAD ----- */
.pcm-trust {
  background: var(--pcm-steel);
  color: #fff;
}
.pcm-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.pcm-trust-grid > div {
  border-right: 1px solid rgba(255,255,255,.24);
  padding: 22px 28px;
}
.pcm-trust-grid > div:first-child {
  border-left: 1px solid rgba(255,255,255,.24);
}
.pcm-trust strong,
.pcm-trust span {
  display: block;
}
.pcm-trust strong {
  font-size: 1.2rem;
}
.pcm-trust span {
  font-size: .82rem;
  opacity: .83;
}
/* ----- 09. SEKTIONER OCH TJÄNSTEKORT ----- */
.pcm-section {
  padding: 82px 0;
}
.pcm-section-light {
  background: var(--pcm-pale);
}
.pcm-section-white {
  background: #fff;
}
.pcm-section-heading {
  max-width: 790px;
  margin-bottom: 38px;
}
.pcm-section-heading h2,
.pcm-two-col h2,
.pcm-contact h2 {
  font-size: clamp(2rem, 4vw, 3.35rem);
  letter-spacing: -.045em;
  line-height: 1.05;
  margin-bottom: 18px;
}
.pcm-section-heading > p:last-child {
  color: var(--pcm-muted);
  font-size: 1.02rem;
}
.pcm-service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--pcm-line);
}
.pcm-service-card {
  background: #fff;
  border-right: 1px solid var(--pcm-line);
  min-height: 270px;
  padding: 28px 24px;
}
.pcm-service-card:last-child {
  border-right: 0;
}
.pcm-number {
  color: var(--pcm-steel);
  display: block;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  margin-bottom: 56px;
}
.pcm-service-card h3 {
  font-size: 1.16rem;
  line-height: 1.2;
  margin-bottom: 12px;
  text-transform: uppercase;
}
.pcm-service-card p {
  color: var(--pcm-muted);
  font-size: .9rem;
}
/* ----- 10. MARIN / MÖRKA SEKTIONER ----- */
.pcm-marine {
  background: var(--pcm-charcoal);
  color: #fff;
}
.pcm-marine h2 {
  color: #fff;
}
.pcm-marine p {
  color: #ddd9d2;
}
.pcm-two-col {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 80px;
  align-items: start;
}
.pcm-text-link {
  color: #e3c2a5;
  display: inline-block;
  font-weight: 700;
  margin-top: 8px;
}
.pcm-text-link:hover {
  color: #fff;
}
.pcm-brand-list {
  color: var(--pcm-muted);
  font-style: italic;
}
.pcm-pickup {
  background: #dedbd4;
}
/* ----- 11. KONTAKT ----- */
.pcm-contact {
  background: #fff;
  padding: 78px 0;
}
.pcm-contact-grid {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 70px;
  align-items: start;
}
.pcm-contact-details {
  border-left: 5px solid var(--pcm-steel);
  padding-left: 28px;
}
.pcm-contact-details a {
  color: var(--pcm-steel);
  font-size: 1.05rem;
  font-weight: 700;
}
/* ----- 12. FOOTER ----- */
.container-footer {
  background: var(--pcm-charcoal);
  background-image: none;
  color: #ddd9d2;
  margin-top: 0;
}
.container-footer .grid-child {
  max-width: 1120px;
}
.footer {
  background: var(--pcm-charcoal);
}
@media (max-width: 900px) {
  .pcm-hero-grid,
  .pcm-two-col,
  .pcm-contact-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .pcm-service-grid {
    grid-template-columns: 1fr 1fr;
  }
  .pcm-service-card:nth-child(2) {
    border-right: 0;
  }
  .pcm-service-card:nth-child(-n+2) {
    border-bottom: 1px solid var(--pcm-line);
  }
}
@media (max-width: 650px) {
.pcm-wrap {
    width: min(100% - 28px, 1120px);
  }
  .pcm-hero {
    padding: 52px 0;
  }
  .pcm-hero h1 {
    font-size: 2.7rem;
  }
  .pcm-trust-grid,
  .pcm-service-grid {
    grid-template-columns: 1fr;
  }
  .pcm-trust-grid > div,
  .pcm-trust-grid > div:first-child {
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.24);
    padding-inline: 0;
  }
  .pcm-service-card,
  .pcm-service-card:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid var(--pcm-line);
  }
  .pcm-section {
    padding: 58px 0;
  }
  .pcm-service-card {
    min-height: 220px;
  }
  .pcm-number {
    margin-bottom: 30px;
  }
}

/* ----- 13. UNDERSIDOR ----- */
.pcm-subhero {
  background: var(--pcm-charcoal);
  color: #fff;
  padding: 72px 0;
}
.pcm-subhero h1 {
  color: #fff;
  font-size: clamp(2.6rem, 5vw, 4.8rem);
  letter-spacing: -.055em;
  line-height: 1;
  margin: 0 0 20px;
  max-width: 850px;
}
.pcm-subhero > .pcm-wrap > p:last-child {
  color: #ddd9d2;
  font-size: 1.1rem;
  max-width: 720px;
}
.pcm-service-grid-3 {
  grid-template-columns: repeat(3,1fr);
}
.pcm-dark-link {
  color: var(--pcm-steel);
}
.pcm-year {
  color: var(--pcm-steel);
  font-size: clamp(3.5rem, 8vw, 7rem);
  font-weight: 700;
  letter-spacing: -.06em;
  line-height: .9;
  margin-bottom: 18px;
}
.pcm-contact-page {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 80px;
  align-items: start;
}
.pcm-contact-page h2 {
  font-size: clamp(2rem,4vw,3.3rem);
}
.pcm-contact-page a {
  color: var(--pcm-steel);
  font-size: 1.1rem;
  font-weight: 700;
}
.pcm-contact-panel {
  background: var(--pcm-pale);
  border-left: 6px solid var(--pcm-steel);
  padding: 38px;
}
@media (max-width: 900px) {
  .pcm-service-grid-3,
  .pcm-contact-page {
    grid-template-columns: 1fr;
  }
}


/* =================================================================
   14. MOBIL / SURFPLATTA - HEADER
   ================================================================= */
@media (max-width: 991.98px) {
  .container-header .navbar-brand {
    margin: 0;
  }
.container-header .mod-menu {
    gap: 0;
  }
}

/* =================================================================
   15. NY LOGOTYP - RESPONSIV STORLEK
   ================================================================= */
@media (max-width: 1200px) and (min-width: 992px) {
  .container-header .navbar-brand img {
    width: 340px;
  }

  .container-header {
    column-gap: 22px;
  }

  .container-header .mod-menu {
    gap: 10px;
  }
}

@media (max-width: 991.98px) {
  .container-header .navbar-brand img {
    width: 360px;
    max-width: calc(100vw - 90px);
  }
}

@media (max-width: 520px) {
  .container-header .navbar-brand img {
    width: 300px;
    max-width: calc(100vw - 80px);
  }
}

/* Tunn kopparlinje direkt under headern */
body .container-header {
  border-bottom: 2px solid var(--pcm-steel);
}

/* =================================================================
   16. FULLBREDD - ALLA SIDOR
   =================================================================
   Gäller Hem och samtliga undersidor.
   Bakgrunder går kant-till-kant, medan .pcm-wrap håller innehållet
   centrerat och läsbart.
   ================================================================= */

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: clip;
}

body {
  background: var(--pcm-charcoal);
}

/* Ta bort Cassiopeias yttre marginaler/maxbredder runt komponenten */
.site-grid,
.site-grid > .grid-child,
.container-component,
main,
.com-content-article,
.com-content-category-blog,
.blog,
.item-page,
.pcm-home {
  width: 100%;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Alla PCM-huvudsektioner bryts ut till hela viewportens bredd.
   Selektorerna är INTE bundna till .pcm-home, så de fungerar även
   på Båtmotorer, Våra tjänster, Om företaget, Kontakt osv. */
.pcm-hero,
.pcm-trust,
.pcm-section,
.pcm-marine,
.pcm-pickup,
.pcm-contact,
.pcm-subhero {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* Centrerat innehåll inne i fullbreddssektionerna */
.pcm-wrap {
  width: min(1120px, calc(100% - 40px));
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

/* Mobil */
@media (max-width: 650px) {
  .pcm-wrap {
    width: calc(100% - 28px);
  }
}

/* =================================================================
   17. HOVERFÄRG - HELA WEBBPLATSEN
   =================================================================
   Alla vanliga textlänkar får samma hover/focus-färg.
   ================================================================= */

a:hover,
a:focus,
.pcm-text-link:hover,
.pcm-text-link:focus,
.pcm-text-link.pcm-dark-link:hover,
.pcm-text-link.pcm-dark-link:focus,
.pcm-contact a:hover,
.pcm-contact a:focus {
  color: #343735 !important;
}

/* Menyn behåller koppar som aktiv markering,
   men hover följer webbplatsens gemensamma hoverfärg. */
.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > a:focus {
  color: #343735 !important;
}

/* Aktivt menyobjekt ska fortfarande synas i koppar. */
.container-header .mod-menu > li.active > a {
  color: var(--pcm-steel) !important;
}

/* =================================================================
   18. MENY - EGEN HOVERFÄRG PÅ MÖRK HEADER
   =================================================================
   Den globala hoverfärgen #343735 används på sidan, men inte i
   huvudmenyn eftersom headern är mörk.
   ================================================================= */

.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > a:focus {
  color: #f0ede7 !important;
}

/* Aktiv sida fortsätter vara kopparfärgad */
.container-header .mod-menu > li.active > a {
  color: var(--pcm-steel) !important;
}

/* =================================================================
   19. PCM-KNAPPAR - LÄS MER / TELEFON
   =================================================================
   Kopparfärgad standardknapp som fungerar på både ljusa och mörka
   sektioner. Hover blir grafit och pilen rör sig diskret åt höger.
   ================================================================= */

.pcm-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 46px;
  margin-top: 18px;
  padding: 12px 18px;

  background: #B36A2E;
  border: 1px solid #B36A2E;

  color: #FFFFFF !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .035em;
  text-decoration: none !important;
  text-transform: uppercase;

  transition:
    background-color .2s ease,
    border-color .2s ease,
    color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}

.pcm-link-btn:hover,
.pcm-link-btn:focus {
  background: #343735;
  border-color: #343735;
  color: #FFFFFF !important;
  text-decoration: none !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .14);
}

.pcm-link-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Korten får flexlayout så knapparna hamnar snyggt på samma nivå */
.pcm-service-card {
  display: flex;
  flex-direction: column;
}

.pcm-service-card .pcm-link-btn {
  align-self: flex-start;
  margin-top: auto;
}

/* Mobil: behåll tydliga knappar utan att de blir för stora */
@media (max-width: 650px) {
  .pcm-link-btn {
    width: 100%;
    padding: 13px 16px;
  }
}

/* =================================================================
   20. PCM ONE-PAGE
   ================================================================= */

html {
  scroll-behavior: smooth;
}

/* Ankarlänkar ska inte hamna under headern */
.pcm-onepage section[id] {
  scroll-margin-top: 110px;
}

/* Tydligare rytm mellan innehållsblock på den långa sidan */
.pcm-onepage .pcm-section-heading {
  margin-bottom: 38px;
}

.pcm-onepage .pcm-service-grid + .pcm-two-col,
.pcm-onepage .pcm-two-col + .pcm-service-grid {
  margin-top: 52px;
}

.pcm-onepage .pcm-service-grid + .pcm-link-btn {
  margin-top: 34px;
}

/* Luft mellan de två delarna i Om PCM Service */
.pcm-onepage #om-oss .pcm-section-heading {
  margin-top: 64px;
}

/* Kontaktknappar */
.pcm-onepage .pcm-contact .pcm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.pcm-onepage .pcm-contact .pcm-actions .pcm-link-btn {
  margin-top: 0;
}

/* Två knappar efter varandra på andra ställen */
.pcm-contact-details .pcm-link-btn + .pcm-link-btn,
.pcm-contact-page .pcm-link-btn + .pcm-link-btn {
  margin-left: 10px;
}

@media (max-width: 650px) {
  .pcm-onepage section[id] {
    scroll-margin-top: 90px;
  }

  .pcm-onepage .pcm-service-grid + .pcm-two-col,
  .pcm-onepage .pcm-two-col + .pcm-service-grid {
    margin-top: 38px;
  }

  .pcm-onepage #om-oss .pcm-section-heading {
    margin-top: 46px;
  }

  .pcm-onepage .pcm-contact .pcm-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .pcm-contact-details .pcm-link-btn + .pcm-link-btn,
  .pcm-contact-page .pcm-link-btn + .pcm-link-btn {
    margin-left: 0;
    margin-top: 10px;
  }
}

/* =================================================================
   21. PCM ONE-PAGE V7 - VISUELL FINPUTSNING
   ================================================================= */

/* Lite generösare luft i huvudsektionerna */
.pcm-onepage .pcm-section {
  padding-top: 82px;
  padding-bottom: 82px;
}

/* Rubrikblock får tydligare separation från innehållet */
.pcm-onepage .pcm-section-heading {
  margin-bottom: 44px;
}

.pcm-onepage .pcm-section-heading > p:last-child {
  max-width: 760px;
}

/* Tjänstekort: bättre läsbarhet och jämnare känsla */
.pcm-onepage .pcm-service-card {
  min-height: 210px;
}

.pcm-onepage .pcm-service-card p {
  line-height: 1.65;
}

/* Båtmotorer ligger på mörk bakgrund men korten är vita.
   Tvinga därför tydlig mörk text inne i korten. */
.pcm-onepage #batmotorer .pcm-service-card {
  background: #ffffff;
  color: #343735;
}

.pcm-onepage #batmotorer .pcm-service-card h3 {
  color: #292c2b;
}

.pcm-onepage #batmotorer .pcm-service-card p {
  color: #555957;
}

.pcm-onepage #batmotorer .pcm-service-card .pcm-number {
  color: #b36a2e;
}

/* Luft före båtmotorernas kort */
.pcm-onepage #batmotorer .pcm-two-col {
  margin-bottom: 46px;
}

/* Trädgårdsmaskiner får lite mer andrum */
.pcm-onepage #tradgardsmaskiner {
  padding-top: 92px;
  padding-bottom: 92px;
}

.pcm-onepage #tradgardsmaskiner .pcm-service-grid {
  margin-bottom: 56px;
}

/* Om PCM Service: behåll uttrycket men skapa lite tydligare rytm */
.pcm-onepage #om-oss {
  padding-top: 90px;
  padding-bottom: 90px;
}

.pcm-onepage #om-oss .pcm-year {
  margin-bottom: 8px;
}

/* Hämtning/lämning som tydlig paus före kontakt */
.pcm-onepage #hamtning {
  padding-top: 70px;
  padding-bottom: 70px;
}

/* Kontakt ska kännas som ett riktigt avslut */
.pcm-onepage #kontakt {
  padding-top: 82px;
  padding-bottom: 88px;
}

.pcm-onepage #kontakt h2 {
  margin-bottom: 18px;
}

.pcm-onepage #kontakt .pcm-contact-panel {
  height: 100%;
}

/* Mer konsekventa CTA-knappar */
.pcm-onepage .pcm-link-btn {
  min-height: 44px;
}

.pcm-onepage .pcm-service-grid + .pcm-link-btn {
  margin-top: 30px;
}

/* Mobil finputsning */
@media (max-width: 650px) {
  .pcm-onepage .pcm-section,
  .pcm-onepage #tradgardsmaskiner,
  .pcm-onepage #om-oss {
    padding-top: 58px;
    padding-bottom: 58px;
  }

  .pcm-onepage #hamtning {
    padding-top: 52px;
    padding-bottom: 52px;
  }

  .pcm-onepage #kontakt {
    padding-top: 58px;
    padding-bottom: 62px;
  }

  .pcm-onepage .pcm-section-heading {
    margin-bottom: 30px;
  }

  .pcm-onepage .pcm-service-card {
    min-height: 0;
  }

  .pcm-onepage #batmotorer .pcm-two-col {
    margin-bottom: 34px;
  }

  .pcm-onepage #tradgardsmaskiner .pcm-service-grid {
    margin-bottom: 38px;
  }
}

/* =================================================================
   22. PCM V8 - STICKY HEADER + RIKTIG MOBILMENY
   ================================================================= */

/* Headern ligger kvar när sidan scrollas */
body .container-header {
  position: sticky !important;
  top: 0;
  z-index: 1000;
}

/* Ankare tar hänsyn till den fasta headern */
.pcm-onepage section[id] {
  scroll-margin-top: 100px;
}

/* Mobil / surfplatta */
@media (max-width: 991.98px) {

  body .container-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 8px 16px !important;
  }

  /* Loggan till vänster */
  .container-header .navbar-brand {
    grid-column: 1;
    grid-row: 1;
    width: auto;
    min-width: 0;
    justify-self: start;
  }

  .container-header .navbar-brand img {
    width: 300px;
    max-width: calc(100vw - 90px);
    height: auto;
  }

  /* Navigationsområdet får ligga i samma rad */
  .container-header .container-nav {
    grid-column: 2;
    grid-row: 1;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static;
  }

  .container-header .container-nav .grid-child {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Cassiopeias hamburgerknapp */
  .container-header .navbar-toggler {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 42px;
    margin: 0 !important;
    padding: 8px !important;
    border: 1px solid var(--pcm-steel) !important;
    border-radius: 2px;
    background: transparent !important;
    color: #f0ede7 !important;
    box-shadow: none !important;
  }

  .container-header .navbar-toggler:focus,
  .container-header .navbar-toggler:hover {
    background: var(--pcm-steel) !important;
    color: #fff !important;
  }

  /* Den hopfällda menyn öppnas som panel under headern */
  .container-header .navbar-collapse {
    position: absolute !important;
    top: 100%;
    left: 0;
    right: 0;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 18px 16px !important;
    background: #101111 !important;
    border-bottom: 2px solid var(--pcm-steel);
    box-shadow: 0 12px 22px rgba(0,0,0,.28);
    z-index: 1001;
  }

  /* Bootstrap/Cassiopeia styr show/hide med .show */
  .container-header .navbar-collapse:not(.show) {
    display: none !important;
  }

  .container-header .navbar-collapse.show,
  .container-header .navbar-collapse.collapsing {
    display: block !important;
  }

  .container-header .mod-menu {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100%;
    margin: 0 !important;
    padding: 8px 0 0 !important;
  }

  .container-header .mod-menu > li {
    width: 100%;
    margin: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }

  .container-header .mod-menu > li:last-child {
    border-bottom: 0;
  }

  .container-header .mod-menu > li > a {
    display: block;
    width: 100%;
    padding: 13px 6px !important;
    font-size: .92rem;
    text-align: left;
    color: #f0ede7 !important;
  }

  .container-header .mod-menu > li.active > a {
    color: var(--pcm-steel) !important;
  }

  .pcm-onepage section[id] {
    scroll-margin-top: 82px;
  }
}

@media (max-width: 520px) {
  body .container-header {
    padding: 7px 12px !important;
  }

  .container-header .navbar-brand img {
    width: 255px;
    max-width: calc(100vw - 76px);
  }

  .container-header .navbar-toggler {
    width: 42px;
    height: 40px;
  }
}

/* =================================================================
   23. PCM V9 - FAST MOBILHEADER
   =================================================================
   Cassiopeia Extended ligger i en struktur där sticky inte håller
   headern kvar på alla mobila webbläsare. På mobil använder vi därför
   fixed. Desktop behåller tidigare beteende.
   ================================================================= */

@media (max-width: 991.98px) {

  body .container-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    margin: 0 !important;
    background: #101111 !important;
    border-bottom: 2px solid var(--pcm-steel) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.24);
  }

  /* Plats för den fasta headern så innehållet inte hamnar bakom den */
  body {
    padding-top: 82px !important;
  }

  /* Utfälld Cassiopeia-meny ska ligga direkt under den fasta headern */
  .container-header .navbar-collapse {
    position: fixed !important;
    top: 82px !important;
    left: 0 !important;
    right: 0 !important;
    max-height: calc(100dvh - 82px);
    overflow-y: auto;
    z-index: 9998 !important;
  }

  /* Rätt stopp när one-page-menyn scrollar till en sektion */
  .pcm-onepage section[id] {
    scroll-margin-top: 96px !important;
  }
}

@media (max-width: 520px) {
  body {
    padding-top: 74px !important;
  }

  .container-header .navbar-collapse {
    top: 74px !important;
    max-height: calc(100dvh - 74px);
  }

  .pcm-onepage section[id] {
    scroll-margin-top: 88px !important;
  }
}

/* =================================================================
   24. PCM V10 - KNAPPFÄRGER / HOVER-FIX
   =================================================================
   Hindrar globala länk-hoverregler från att göra knapptext mörk.
   ================================================================= */

.pcm-home a.pcm-btn-primary,
.pcm-home a.pcm-btn-primary:visited {
  background: var(--pcm-steel) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}
.pcm-home a.pcm-btn-primary:hover,
.pcm-home a.pcm-btn-primary:focus {
  background: var(--pcm-steel) !important;
  color: #ffffff !important;
  filter: brightness(.92);
  text-decoration: none !important;
}

.pcm-home a.pcm-btn-secondary,
.pcm-home a.pcm-btn-secondary:visited {
  background: transparent !important;
  border-color: #8b9192 !important;
  color: #f0ede7 !important;
  text-decoration: none !important;
}
.pcm-home a.pcm-btn-secondary:hover,
.pcm-home a.pcm-btn-secondary:focus {
  background: #343735 !important;
  border-color: #343735 !important;
  color: #ffffff !important;
  filter: none;
  text-decoration: none !important;
}

.pcm-home a.pcm-link-btn,
.pcm-home a.pcm-link-btn:visited,
.pcm-home .pcm-contact a.pcm-link-btn,
.pcm-home .pcm-contact a.pcm-link-btn:visited {
  background: var(--pcm-steel) !important;
  border-color: var(--pcm-steel) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}
.pcm-home a.pcm-link-btn:hover,
.pcm-home a.pcm-link-btn:focus,
.pcm-home .pcm-contact a.pcm-link-btn:hover,
.pcm-home .pcm-contact a.pcm-link-btn:focus {
  background: #343735 !important;
  border-color: #343735 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.14);
}
.pcm-home a.pcm-link-btn:active,
.pcm-home .pcm-contact a.pcm-link-btn:active {
  background: #343735 !important;
  border-color: #343735 !important;
  color: #ffffff !important;
  transform: translateY(0);
  box-shadow: none;
}