/* Innehållssidorna i den nya identiteten (WEBB 25/10, push 2): /lokalt, /guide, /hjalp, /tatuerare,
   /bokningssystem-bilverkstad, /byta-bokningssystem och jämförelsesidorna (*-alternativ).

   Beställningen: "Texterna på dem ändras inte, bara skal, typsnitt och färger." Sidornas egna stilar
   läser temavariablerna i theme.css (--text-primary, --surface, --border …). Här får variablerna den
   nya identitetens ljusa värden, så sidorna blir ljusa utan att deras egna regler skrivs om. Ramen som
   home.css gav (meny, sektion, avslutskort, företagssök, fot) ersätts av skalet i bix-identitet.css och
   av reglerna nedan. Laddas efter theme.css, bix-identitet.css och sidans eget ark. */

body.bx-sidor {
  --bg: var(--bx-duk);
  --surface: var(--bx-panel);
  --surface-card: var(--bx-panel);
  --surface-elevated: var(--bx-panel);
  --surface-raised: var(--bx-sub);
  --border: var(--bx-linje);
  --text-primary: var(--bx-text);
  --text-secondary: var(--bx-text-2);
  /* Liten tertiär text (källrader, kategorirubriker): #69645B ger 4,9:1 mot duken. --bx-dampad-ljust (4,5:1) räcker för
     stor text men mättes till 4,4:1 ur pixlarna på 12 px, där kornet i theme.css drar ned den. */
  --text-tertiary: #69645B;
  --text-faint: #69645B;
  --accent: var(--bx-mork);
  --accent-text: var(--bx-ljus);
  --accent-brand-subtle: rgba(21, 20, 18, 0.06);
  --sage: #3F7259;  /* salvia som text och bock: 5,4:1 mot panelen, 4,7:1 mot duken (--bx-punkt #4F8A6D ger 3,9:1) */
  --sage-subtle: rgba(79, 138, 109, 0.12);
  --cell-emphasis: var(--bx-panel);
  --row-hover: rgba(21, 20, 18, 0.03);
  --error: #CC6666;
}

/* booking.css (/hjalp) gör body till en flexkolumn och html mörkt: menyraden ska ha full bredd och kontrollerna vara ljusa. */
html:has(> body.bx-sidor) { color-scheme: light; }
body.bx-sidor { display: block; min-height: 0; }

/* Rubriker: Clash på rubriker med ord från 28 px, och ingen kursiv utom ordet live i taglinen.
   Det kursiva ledet i en rubrik blir det dämpade ledet, som i canvasen. */
.bx-sidor h1 { font-family: var(--bx-rubrik); font-weight: 500; letter-spacing: -0.035em; text-wrap: balance; }
.bx-sidor :is(h1, h2, h3) em { font-family: inherit; font-style: normal; font-weight: inherit; color: var(--bx-dampad-stor-ljust); }
.bx-sidor .bx-rubrik-stor { font-family: var(--bx-rubrik); font-weight: 500; letter-spacing: -0.03em; }

/* Ramen som home.css gav */
.bx-sidor .wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(12px, 3vw, 44px); box-sizing: border-box; }
.bx-sidor .section { position: relative; }
.bx-sidor .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bx-text-2); }
.bx-sidor .reveal { opacity: 1; transform: none; filter: none; }  /* inget annat än bandet och lyftet rör sig */

/* /hjalp är appens hjälpvy (booking.css höll den smal): en läsbar spalt i stället för hela bredden. */
.bx-sidor main#app > .wrap { max-width: 760px; }

/* Avslutet med företagssöket: den mörka panelen ur /foretag ("Din sida väntar."). Sökets logik är sidans egen. */
.bx-sidor .finale { padding: var(--bx-luft) 0 0; }
.bx-sidor .finale-grid { display: grid; gap: 12px; }
.bx-sidor .finale-card {
  --text-primary: var(--bx-ljus); --text-secondary: var(--bx-ljus-2); --text-tertiary: var(--bx-ljus-3);
  --surface: var(--bx-mork-falt); --border: rgba(242, 239, 234, 0.12); --accent: var(--bx-ljus); --accent-text: var(--bx-mork);
  border-radius: var(--bx-r-panel); background: var(--bx-mork); color: var(--bx-ljus);
  padding: clamp(40px, 6vw, 88px) clamp(24px, 5vw, 80px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px;
}
.bx-sidor .finale-card .tag { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bx-ljus-3); }
.bx-sidor .finale-card h3 { margin: 0; font-family: var(--bx-rubrik); font-weight: 500; font-size: clamp(40px, 5vw, 76px); line-height: 1; letter-spacing: -0.035em; text-wrap: balance; }
.bx-sidor .finale-card p { margin: 0; max-width: 46ch; color: var(--bx-ljus-2); }
.bx-sidor .finale-card .finale-search-cta { font-weight: 600; color: var(--bx-ljus); }
.bx-sidor .finale-card .finale-cta-note { font-size: 15px; color: var(--bx-ljus-3); }
.bx-sidor .finale-cta { animation: none; }

.bx-sidor .biz-search { position: relative; display: flex; width: 100%; max-width: 600px; text-align: left; }
.bx-sidor .biz-search-input { width: 100%; height: 76px; box-sizing: border-box; padding: 0 84px 0 24px; border-radius: 22px; border: 1px solid rgba(242, 239, 234, 0.10); background: var(--bx-mork-falt); color: var(--bx-ljus); font: inherit; font-size: 17px; }
.bx-sidor .biz-search-input::placeholder { color: #8C877F; }
.bx-sidor .biz-search-input:focus { outline: none; border-color: rgba(242, 239, 234, 0.6); }
.bx-sidor .biz-search-go { position: absolute; right: 8px; top: 8px; width: 60px; height: 60px; border: 0; border-radius: var(--bx-r-falt); background: var(--bx-ljus); color: var(--bx-mork); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.bx-sidor .biz-search-panel { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40; max-height: min(340px, 60vh); overflow-y: auto; overscroll-behavior: contain; padding: 8px; border-radius: 22px; background: var(--bx-mork-falt); border: 1px solid rgba(242, 239, 234, 0.14); box-shadow: 0 30px 70px rgba(0, 0, 0, .5); text-align: left; }
.bx-sidor .biz-search-panel.up { top: auto; bottom: calc(100% + 8px); }
.bx-sidor .biz-result { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 12px 14px; border-radius: 14px; cursor: pointer; color: var(--bx-ljus); }
.bx-sidor .biz-result:hover { background: rgba(242, 239, 234, .08); }
.bx-sidor .biz-result-name { font-size: 16px; font-weight: 600; }
.bx-sidor .biz-result-sub, .bx-sidor .biz-result-hint { font-size: 14px; color: var(--bx-ljus-3); }
.bx-sidor .biz-result-hint { padding: 12px 14px; }
.bx-sidor .biz-result-go { flex: none; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--bx-ljus-3); }

/* home.css styr elementet footer på sidan som fortfarande laddar den (guiden En app för allt du bokar). */
.bx-sidor footer.bx-fot { position: static; border-top: 0; }

/* Sidornas egna övre luft var byggd för den gamla fasta menyn; menyraden ligger nu i flödet. */
.bx-sidor .bk-hero, .bx-sidor .lk-hero { padding-top: 64px; }
.bx-sidor .g-wrap, .bx-sidor .a-wrap { padding-top: 64px; }

@media (max-width: 600px) {
  .bx-sidor .bk-hero, .bx-sidor .lk-hero, .bx-sidor .g-wrap, .bx-sidor .a-wrap { padding-top: 40px; }
  .bx-sidor .finale { padding-top: 96px; }
  .bx-sidor .finale-card { border-radius: 28px; padding: 40px 22px; }
  .bx-sidor .finale-card h3 { font-size: 40px; }
  .bx-sidor .biz-search-input { height: 64px; padding-right: 72px; }
  .bx-sidor .biz-search-go { width: 48px; height: 48px; }
}