:root {
  --fc-color-bg: #fbf9f4;
  --fc-color-text: #292724;
  --fc-color-link: #cf1b45;

  --fc-font-size-large: clamp(2rem, 2vw + 1.25rem, 3.75rem); /* 32–60px */
  --fc-font-size-small: clamp(1.25rem, 1vw + 1rem, 1.75rem); /* 20–28px */
  --fc-font-size-heading: clamp(2.25rem, 2.5vw + 1.5rem, 4rem); /* 36–64px */
  --fc-font-size-display: clamp(3.25rem, 6vw + 1rem, 8rem); /* 52–128px */

  /* Bootstrap theme overrides via CSS variables */
  --bs-body-bg: var(--fc-color-bg);
  --bs-body-color: var(--fc-color-text);
  --bs-link-color: var(--fc-color-link);
  --bs-link-hover-color: var(--fc-color-link);
  --bs-body-font-family: "Libre Baskerville", Baskerville, serif;
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-xxl: 0;
}

.font-body {
  font-family: var(--bs-body-font-family);
}

/*
 * Horisontell scroll: Bootstrap .row har negativa marginaler som matchar container-padding.
 * Utan sidpadding (t.ex. container-fluid.px-0) sträcker raden utanför skärmen → hela vyn “bryts”.
 */
html {
  overflow-x: hidden;
}

body {
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  font-family: var(--bs-body-font-family);
  letter-spacing: 0;
  line-height: 1;
}

a {
  color: var(--bs-link-color);
}

h1,
h2,
h3,
h4,
h5,
h6,
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
  font-family: "Archivo Black", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: -0.1em;
  line-height: 1;
}

.navbar-brand {
  font-family: "Archivo Black", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}

/* Logotyp: mindre under lg; telefon något större än iPad */
@media (max-width: 991.98px) {
  .navbar-brand .fc-navbar-logo {
    max-height: 2.25rem;
    max-width: min(10rem, 42vw);
    width: auto;
    height: auto;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .navbar-brand .fc-navbar-logo {
    max-height: 1.875rem;
    max-width: min(8rem, 28vw);
  }
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2030%2030%27%3E%3Cpath%20stroke%3D%27rgba(41%2C39%2C36%2C1)%27%20stroke-linecap%3D%27round%27%20stroke-miterlimit%3D%2710%27%20stroke-width%3D%272%27%20d%3D%27M4%207h22M4%2015h22M4%2023h22%27%2F%3E%3C%2Fsvg%3E");
}

.navbar-nav a {
  color: var(--fc-color-text);
  font-family: "Libre Baskerville", Baskerville, serif;
  font-weight: 400;
  font-size: clamp(16px, 1.1vw, 20px);
  letter-spacing: 0;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 1;
}

.navbar-nav a:hover,
.navbar-nav a:focus-visible {
  color: var(--fc-color-link);
}

/* CTA i header: kompakt på surfplatta/mobil, till vänster om hamburger */
@media (max-width: 991.98px) {
  .fc-header-cta.btn {
    font-size: clamp(14px, 3.2vw, 18px);
    padding: 0.45rem 0.65rem;
    line-height: 1.2;
  }

  .offcanvas-body .btn.btn-primary {
    width: 100%;
    text-align: center;
  }
}

@media (min-width: 992px) {
  .w-lg-auto {
    width: auto !important;
  }
}

/* Hero textkolumn: min-width 0 så grid/flex inte låser bredden (långa ord kan brytas) */
.hero .hero__text-col {
  min-width: 0;
}

/* Hero: mer inryck för text (vänster, inte centrerat) */
@media (min-width: 992px) {
  .hero .hero__text-col {
    padding-left: clamp(2.5rem, 6vw, 5rem);
  }
}

/*
 * Radbrytning: `break-word` är snällare än `anywhere` (bryter inte i onödan mitt i ord).
 * Mobil vs dator: riktig telefon har ofta ~360px innehållsbredd; ett "smalt" fönster på dator
 * kan ändå vara 700px+ → färre radbrytningar där. OS kan också förstora text på mobilen.
 */
.hero__title,
main h1.display-4,
main h2.display-4 {
  overflow-wrap: break-word;
}

/* Hero: lite mindre rubrik under sm breakpoint så den får plats mer som i bredare vy */
@media (max-width: 575.98px) {
  .hero .hero__title.display-4 {
    font-size: clamp(1.6rem, 5vw + 0.85rem, 2.5rem);
  }
}

/* Hero-collage: form styrs via inline aspect-ratio på <img> */

/* Offcanvas meny (Bootstrap 5.3) */
#fcPrimaryNav.offcanvas {
  width: min(420px, 100%);
}

.btn-primary {
  background: #27272a;
  border-color: #27272a;
  color: #ffffff;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0;
  line-height: 1;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: #1f1f22;
  border-color: #1f1f22;
  color: #ffffff;
}

.fc-card-img img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.fc-three-img img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.fc-bigtext {
  padding-top: clamp(2.5rem, 3vw + 1rem, 6rem);
  padding-bottom: clamp(2.5rem, 3vw + 1rem, 6rem);
}

.fc-bigtext__inner {
  max-width: 1320px;
}

.fc-bigtext__text {
  margin: 0;
  max-width: 34ch;
}

.fc-bigtext__text a {
  color: var(--fc-color-link);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

/* Startsida: stora texter / innehåll från anpassaren – långa ord och länkar ska inte spräcka bredden */
.fc-front-block-text {
  overflow-wrap: break-word;
  min-width: 0;
}

/* Tre bilder i full bredd: px-0 + .row → negativa marginaler; klipp så inget sticker ut */
.fc-front-three-row {
  overflow-x: hidden;
}

@media (max-width: 991.98px) {
  #fcPrimaryNav.offcanvas {
    background: var(--fc-color-bg);
  }
}

.fc-offer-modal__excerpt,
.fc-offer-modal__pros {
  line-height: 1.5;
}

.fc-offer-modal__excerpt {
  font-size: 1.05rem;
}

 
/* Frisör single: flex-rad annars min-width:auto → kolumn krymper inte under bildens intrinsic bredd */
/* Kolumn med stor bild i tvåspalts-rad: flex annars min-width:auto → bilden skalar inte */
.fc-two-col-media {
  min-width: 0;
}

/* Frisörkort: enkla “kort” utan Bootstrap card (ingen bakgrund, ram eller skugga) */
.fc-stylist-tile {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

.fc-stylist-tile__media {
  text-decoration: none;
  color: inherit;
}

/* Namn överst i textytan; knapp med margin-top:auto längst ned så knappar linjerar i raden */
.fc-stylist-tile__stack {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.75rem;
  min-height: 0;
  min-width: 0;
}

.fc-stylist-tile__name {
  width: 100%;
  line-height: 1.15;
  overflow-wrap: break-word;
}

.fc-stylist-tile .fc-stylist-cta {
  align-self: flex-start;
  margin-top: auto;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.45rem 0.65rem;
  font-size: clamp(14px, 2.5vw, 18px);
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

/* Sidfot: sajtens namn från WP, stor typ bara på stora skärmar */
.fc-footer-site-title {
  font-family: "Archivo Black", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: -0.1em;
  line-height: 1;
  font-size: clamp(1.5rem, 6.5vw + 0.35rem, 5rem);
}