/*
 Theme Name:   Brf Rosenbad
 Theme URI:    https://brfrosenbad.se
 Description:  Child theme för Brf Rosenbads webbplats, baserat på Hello Elementor. Samma struktur som Brf Saltsjöhöjdens barntema, med Rosenbads palett.
 Author:       Brf Rosenbad
 Template:     hello-elementor
 Version:      1.0.1
 Text Domain:  brf-rosenbad
*/

/* ===== LOKALA TYPSNITT (GDPR - inga anrop till Google Fonts) ===== */
@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-variable.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-variable.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ===== PALETT =====
   Uppmätta kontrastvärden (WCAG) mot bakgrunden --bg (#FAF5F3):
     kolsvart    #1A1A1A  16.09:1  brödtext, rubriker
     vinröd      #8B3A42   6.98:1  länkar, accentuerad text, knappfyllning (vit text 7.55:1)
     mörk vinröd #6E2C34   9.37:1  hover
     roseton     #D9A5AA   1.96:1  KLARAR INTE textkrav - endast ytfärg (kolsvart text ovanpå 8.22:1)
     ljus roseton #E8B4BA  1.66:1  ENDAST text mot mörk botten (9.6:1 mot hero-mörkt #2B1418)
     ljusgrå-rosa #E5D5D3  1.31:1  endast ytfärg
   Vinröd klarar alltså både text och fyllning; roseton bär varumärket
   som yta (avdelare, block, citattecken) och används aldrig som textfärg.
   Vinröd text på roseton botten ger bara 3.56:1 - sätt aldrig den kombinationen.
   OBS: paletten är satt utifrån #8B3A42 som utgångspunkt. Stäm av mot
   logotypens faktiska färger innan sajten går skarp och räkna om
   kontrasterna om värdena ändras.
*/
:root {
  --ink:          #1A1A1A; /* kolsvart - rubriker och brödtext */
  --ink-soft:     #5A4B4D; /* varm mörkgrå med rosa ton - meny och bildtexter, 7.62:1 */
  --surface:      #E5D5D3; /* ljusgrå-rosa - ENDAST ytfärg, aldrig text */
  --bg:           #FAF5F3; /* varm off-white med dragning åt rosa */
  --rose:         #D9A5AA; /* roseton - ENDAST fyllning */
  --rose-light:   #E8B4BA; /* ljus roseton - ENDAST text mot mörk botten, se hero */
  --wine:         #8B3A42; /* vinröd - text, länkar, knappar */
  --wine-deep:    #6E2C34; /* mörk vinröd - hover */
  --white:        #ffffff;
  --border:       #EAD9D9; /* svag rosa ram som håller ihop med bakgrunden */
  --radius:       8px;
  --radius-lg:    14px;
  --radius-xl:    22px;
  --shadow-sm:    0 1px 4px rgba(26,26,26,.06);
  --shadow:       0 4px 18px rgba(26,26,26,.08);
  --shadow-lg:    0 14px 44px rgba(26,26,26,.14);

  /* Spacing-skala - används för padding och gap, inga lösa siffror */
  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px;
  --sp-4: 40px; --sp-5: 64px; --sp-6: 96px;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-size: 18px;
  line-height: 1.7;
}
h1, h2, h3, h4, .elementor-heading-title { font-family: 'Archivo', sans-serif; }

/* Brödtextlänkar hålls kolsvarta med roseton understrykning: färgen ensam
   räcker inte som markör, och roseton som textfärg klarar inte kontrastkravet. */
/* Hello Elementor sätter a { color:#cc3366 } med samma specificitet, och
   Elementors frontend-CSS laddas efter barntemat - därför krävs en tyngre
   selektor här för att länkarna ska följa paletten. */
a,
.elementor a:not(.elementor-button),
.site-main a:not(.elementor-button) {
  color: var(--ink);
  text-decoration-color: var(--rose);
  text-underline-offset: 3px;
}
a:hover, a:focus-visible,
.elementor a:not(.elementor-button):hover,
.site-main a:not(.elementor-button):hover {
  color: var(--wine);
  text-decoration-color: var(--wine);
}

p, li, .elementor-text-editor { font-size: 18px; line-height: 1.7; }
/* Läsbar radlängd på löpande text (~50-75 tecken) */
.brf-prose p, .brf-prose li { max-width: 68ch; }

/* Klickytor mobil >= 44x44px */
a.elementor-button, button, .elementor-button { min-height: 44px; min-width: 44px; }
/* Fristående e-post- och telefonlänkar är egna klickmål, till skillnad från
   länkar mitt i löptext - de behöver därför nå 44px i höjd. */
.elementor a[href^="mailto:"], .elementor a[href^="tel:"] {
  display: inline-block; padding: 11px 2px;
}

/* Synlig tangentbordsfokus - krav för tillgänglighet */
a:focus-visible, button:focus-visible, .elementor-button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--wine);
  outline-offset: 2px;
}


/* ===== TESTVERSION-BANDEROLL =====
   Visas medan sajten granskas av styrelsen via Tailscale Funnel. Ta bort hela
   sektionen (och bumpa Version:) när sajten går skarp. Ingen markup behövs -
   texten laggs pa med ::before pa body. */
body::before {
  content: 'TESTVERSION – brfrosenbad.se är under uppbyggnad. Synpunkter till styrelsen.';
  display: block;
  background: var(--wine);
  color: var(--white);
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .04em;
  text-align: center;
  padding: 10px 16px;
  position: sticky;
  top: 0;
  z-index: 10000;
}

/* ===== HELLO ELEMENTOR HEADER/FOOTER - fullbredd med boxat, centrerat innehåll ===== */
.site-header { background: var(--white) !important; border-bottom: 1px solid var(--border); }
.site-header .header-inner { max-width: 1180px; }
.site-branding .site-title a { color: var(--ink) !important; font-family: 'Archivo', sans-serif; font-weight: 800; }
.site-header .custom-logo-link img { max-height: 56px; width: auto; }
.site-navigation ul.menu > li > a {
  color: var(--ink-soft) !important; font-weight: 600; font-size: 16px;
  padding: 10px 14px; border-radius: 7px; text-decoration: none; min-height: 44px;
  display: flex; align-items: center;
}
.site-navigation ul.menu > li > a:hover { background: var(--bg); color: var(--wine) !important; }
.site-navigation ul.menu > li.current-menu-item > a {
  color: var(--wine) !important; box-shadow: inset 0 -3px 0 var(--rose);
}
/* In-/utloggning är en handling, inte en sida — därför en inramad knapp
   som skiljer sig från de vanliga menyvalen. */
.site-navigation ul.menu > li.brf-menu-login > a {
  border: 2px solid var(--wine);
  color: var(--wine) !important;
  font-weight: 700;
}
.site-navigation ul.menu > li.brf-menu-login > a:hover {
  background: var(--wine);
  color: var(--white) !important;
}

.site-footer { background: var(--ink) !important; }
.site-footer .footer-inner { max-width: 1180px; }
.site-footer a { color: #FFFFFF; text-decoration-color: var(--rose); }
.site-footer a:hover { color: var(--rose); }
.site-footer .copyright p { color: rgba(255,255,255,.65) !important; font-size: 15px; }

/* Sidfotsloggan: WordPress skickar ut originalet i 2126px och utan tak
   spränger den layouten på mobil. Dessutom är ordbilden svart, vilket blir
   osynligt mot den mörka sidfoten - därför den ljusa varianten här. */
.site-footer .custom-logo-link img {
  /* content: url('/wp-content/uploads/ÅÅÅÅ/MM/logo-rosenbad-ljus.png');  <- sätt när den ljusa loggan är uppladdad */
  max-width: 300px;
  width: 100%;
  height: auto;
}

/* Hello Elementor skriver ut sidans titel ovanför Elementor-innehållet.
   Varje sida har redan sin H1 i hero-sektionen, så rubriken kom dubbelt. */
.page .page-header .entry-title { display: none; }

/* ===== AVDELARE: böljande linje, ärvd från Saltsjöhöjden. Byt motiv om Rosenbads logotyp ger ett eget signaturelement. ===== */
.brf-wave-divider { width: 100%; line-height: 0; margin: 0; }
.brf-wave-divider svg { display: block; width: 100%; height: 32px; }
.brf-wave-divider path { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.brf-wave-divider.brf-wave-accent path { stroke: var(--wine); }

/* ===== Kort/box-komponenter (används inom Elementor-widgets vid behov) ===== */
.brf-card { background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: all .25s; }
.brf-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.brf-stat-value { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 32px; color: var(--wine); }
.brf-stat-label { font-size: 13px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }

/* Trappstegsformen ur loggan som subtil rytm i statistik-/kortrader:
   varje kort får en roseton list som trappas ett steg mörkare åt höger. */
.brf-steps > * { border-top: 5px solid var(--rose); }
.brf-steps > *:nth-child(2) { border-top-color: #A05059; }
.brf-steps > *:nth-child(3) { border-top-color: #8B3A42; }
.brf-steps > *:nth-child(4) { border-top-color: var(--wine); }

/* Knapptypografi gäller alla knappar. Färgen sätts däremot per knapp i
   Elementor - en generell bakgrundsregel här slog även mot text- och
   konturknappar, som då fick roseton bakgrund med roseton text. */
.elementor-button, a.elementor-button {
  font-family: 'Archivo', sans-serif; font-weight: 700; border-radius: var(--radius);
}
/* Hover bara på fyllda knappar, inte på text- eller konturvarianten. */
.elementor-button:not(.elementor-button-link):not(.elementor-button-outline):hover {
  background-color: var(--wine); color: var(--white);
}

/* ===== DOKUMENTLISTA ([brf_dokument]) ===== */
.brf-doc-list { list-style: none; margin: 0 0 var(--sp-4); padding: 0; }
.brf-doc-item {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2);
  background: var(--white); border: 1px solid var(--border);
  border-left: 5px solid var(--rose); border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-1);
}
.brf-doc-item .brf-doc-title {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 18px;
  /* Hela raden är ändå en tydlig träffyta; 44px höjd via padding ovan. */
  padding: 6px 0;
}
.brf-doc-desc { flex: 1 1 100%; color: var(--ink-soft); font-size: 16px; }
.brf-doc-status {
  font-size: 14px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--wine); white-space: nowrap;
}
/* Ej uppladdade poster ska läsas som "inte klar än", inte som en länk. */
.brf-doc-item.is-pending { border-left-color: var(--surface); background: transparent; }
.brf-doc-item.is-pending .brf-doc-title { color: var(--ink-soft); font-weight: 600; }
.brf-doc-item.is-pending .brf-doc-status { color: var(--ink-soft); }
.brf-doc-empty { color: var(--ink-soft); }

/* ===== FLUENT FORMS - följ sajtens palett och tillgänglighetskrav ===== */
.brf-form-wrap .fluentform { max-width: 720px; }
.fluentform .ff-el-input--label label {
  font-family: 'Archivo', sans-serif; font-weight: 600;
  color: var(--ink); font-size: 16px;
}
.fluentform .ff-el-form-control {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--white); color: var(--ink);
  font-family: 'Inter', sans-serif; font-size: 16px;  /* under 16px zoomar iOS */
  min-height: 46px; padding: 10px 14px;
}
.fluentform textarea.ff-el-form-control { min-height: 150px; }
.fluentform .ff-el-form-control:focus {
  border-color: var(--wine);
  box-shadow: 0 0 0 2px var(--wine); outline: none;
}
/* Standardröd asterisk är svårläst mot krämvit - vinröd klarar 5.36:1 */
.fluentform .ff-el-is-required.asterisk-right label:after,
.fluentform .ff-el-is-required.asterisk-left label:before { color: var(--wine); }
.fluentform .ff-el-help-message { color: var(--ink-soft); font-size: 15px; }
.fluentform .ff-el-group { margin-bottom: var(--sp-3); }
.fluentform .ff-btn-submit {
  min-height: 48px; padding: 12px 28px;
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 17px;
}
.fluentform .ff-el-form-check-label { font-size: 16px; line-height: 1.6; }
.fluentform .ff-el-form-check input[type="checkbox"] { width: 22px; height: 22px; }
.ff-message-success {
  background: var(--white); border-left: 5px solid var(--rose);
  border-radius: var(--radius); padding: var(--sp-3); color: var(--ink);
}
.ff-el-is-error .ff-el-form-control { border-color: #A3231C; }
.fluentform .error, .fluentform .text-danger { color: #A3231C; font-size: 15px; }

/* Ingen sidledes scroll: en bild eller ett block som är bredare än skärmen
   är den vanligaste orsaken, så vi tar bort möjligheten helt. */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }

/* Reducerad rörelse respekteras */
@media (prefers-reduced-motion: reduce) {
  .brf-card, .brf-card:hover { transition: none; transform: none; }
}

/* ===== RÖSTER FRÅN MEDLEMMARNA ===== */
.brf-quote p {
  font-family: 'Archivo', sans-serif;
  font-size: 30px; line-height: 1.45; font-weight: 600;
  color: var(--ink);
  max-width: 760px; margin-left: auto; margin-right: auto;
}
/* Dekorativt citattecken i roseton - ren ytfärg, aldrig bärande text */
.brf-quote p::before {
  content: '”'; color: var(--rose);
  font-size: 1.5em; line-height: 0;
  vertical-align: -0.3em; margin-right: .08em;
}
.brf-quote-by p {
  color: var(--ink-soft); font-size: 16px; letter-spacing: .04em;
  text-transform: uppercase; font-weight: 600;
}
.brf-ord {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  justify-content: center; margin-top: var(--sp-2);
}
.brf-ord span {
  background: var(--bg); border-left: 5px solid var(--rose);
  border-radius: var(--radius); padding: 12px 20px;
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 18px;
  color: var(--ink);
}
@media (max-width: 768px) {
  .brf-quote p { font-size: 22px; }
  .brf-ord span { font-size: 17px; padding: 10px 16px; }
}

/* ===== HERO MED FOTOGRAFI =====
   Sektionen är en Elementor Flexbox-behållare med klassen brf-hero.
   Bakgrundsbilden sätts i Elementor (Stil → Bakgrund → Bild), en liggande
   beskärning under Dator och en stående under Mobil, så att den går att
   byta utan kodändring. Texten ligger som riktiga Elementor-widgetar
   ovanpå, aldrig inbränd i bilden: inbränd text skalas till oläslighet på
   mobil, är osynlig för skärmläsare och sökmotorer, och kräver ny bild vid
   varje rättelse.

   OM SELEKTORERNA NEDAN — läs innan du "städar" dem.
   Elementor definierar själv `.e-con::before` med
   `content: var(--background-overlay)` för sin egen överlagringsfunktion.
   Har man ingen överlagring satt i Elementor är variabeln tom, och då
   renderas inget ::before alls. Elementors frontend-CSS laddas EFTER
   barntemat, så ett enkelt `.brf-hero::before` förlorar på lika
   specificitet och överlagringen försvinner spårlöst — sidan ser ut precis
   som förut, utan felmeddelande. Samma fälla som med länkfärgerna längre
   upp i filen. Klassen upprepas därför i selektorn för att väga tyngre.

   Överlagringen är inte dekoration utan det som gör texten läsbar. Den
   ska mörka DÄR TEXTEN STÅR, inte över hela bilden. Värdena nedan är
   ärvda från Saltsjöhöjdens foto och MÅSTE kalibreras om mot Rosenbads
   hero-bild: mät den ljusaste ytan bakom rubrik, brödtext och knappar
   (inte bildens ljusaste punkt, som ofta ligger i kanterna) och justera
   gradienten tills vit text når minst 4,5:1 där. Se DRIFTHANDBOK.md.

   Texten i heron är vit; roseton klarar inte överlagringen som text och
   används bara som ytfärg. Knappar i heron är vinröda med vit text.
*/
.brf-hero {
  position: relative;
  min-height: 660px;
  background-color: #2B1418;       /* syns innan bilden laddat - aldrig vit blink */
  background-size: cover;
  background-position: center;
}

/* Överlagringen. Jämn styrka, eftersom texten är centrerad och alltså kan
   hamna var som helst i bredd. Något lättare i underkant så att klippan och
   spegelbilden får synas. */
.elementor-element.brf-hero.brf-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 78% 74% at 50% 52%,
    rgba(43,20,24,.52)  0%,
    rgba(43,20,24,.46) 40%,
    rgba(43,20,24,.24) 72%,
    rgba(43,20,24,.10) 100%
  );
}
/* Innehållet måste lyftas över överlagringen. Elementor ger inte sina
   widgetar något z-index, så utan det här hamnar de under. */
.elementor-element.brf-hero > * {
  position: relative;
  z-index: 1;
}

.brf-hero h1,
.brf-hero .elementor-heading-title {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  line-height: 1.1;
  color: var(--white);
  text-wrap: balance;
  text-shadow: 0 1px 18px rgba(43,20,24,.45);
}
.brf-hero p,
.brf-hero li,
.brf-hero .elementor-text-editor {
  color: var(--white);
  text-shadow: 0 1px 12px rgba(43,20,24,.5);
}
/* Textskuggan är en andra försvarslinje, inte huvudlösningen: den hjälper
   mot enstaka ljusa fläckar i fotot som en jämn överlagring inte tar. */

.brf-hero .brf-hero-tagline {
  font-family: 'Archivo', sans-serif;
  font-weight: 400;
  font-size: clamp(1.25rem, 2.1vw, 1.75rem);
  color: var(--rose-light);
}

/* Vågavdelaren är kolsvart i sitt grundutförande och försvinner mot mörk
   botten - här får den ljus roseton istället. */
.brf-hero .brf-wave-divider path { stroke: var(--rose-light); stroke-width: 4; }

/* Knappar i heron: vinröd botten med vit text (7,55:1) håller även mot
   fotot, eftersom knappen har egen bakgrund. */
.brf-hero .elementor-button {
  background-color: var(--wine);
  color: var(--white);
}
.brf-hero .elementor-button:hover { background-color: var(--rose); color: var(--ink); }
/* Fokusmarkeringen är vinröd i grunden och syns inte mot mörk botten. */
.brf-hero a:focus-visible,
.brf-hero .elementor-button:focus-visible { outline-color: var(--rose-light); }

@media (max-width: 1024px) {
  .brf-hero { min-height: 560px; }
}

/* Mobil: Elementor byter till den stående beskärningen, så motivet behöver
   ingen panorering här. Överlagringen tonar mörkare nedåt eftersom husen
   ligger i bildens överkant och mår bäst av att synas.
   svh istället för vh - vh räknar in adressfältet och ger ett hopp i höjd
   när det rullar undan. */
@media (max-width: 768px) {
  .brf-hero { min-height: 78svh; }
  .elementor-element.brf-hero.brf-hero::before {
    background: linear-gradient(
      180deg,
      rgba(43,20,24,.10)  0%,
      rgba(43,20,24,.18) 22%,
      rgba(43,20,24,.46) 40%,
      rgba(43,20,24,.46) 72%,
      rgba(43,20,24,.30) 100%
    );
  }
}


/* ===== KONTAKTREGISTER ([brf_kontakter]) =====
   Samma formspråk som dokumentlistan: vitt kort med roseton vänsterkant mot
   den krämvita bakgrunden. Registret visas bara för inloggade med rätt
   nivå - filtreringen sker i PHP, så det som inte får synas finns inte
   heller i sidkällan. */
.brf-kontakter { margin: 0 0 var(--sp-4); }
.brf-k-grupp {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 20px;
  color: var(--ink); margin: var(--sp-4) 0 var(--sp-2);
  padding-bottom: 6px; border-bottom: 2px solid var(--rose);
}
.brf-k-grupp:first-child { margin-top: 0; }
.brf-k-lista { list-style: none; margin: 0; padding: 0; }
.brf-k-post {
  background: var(--white); border: 1px solid var(--border);
  border-left: 5px solid var(--rose); border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2);
}
.brf-k-namn {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 18px;
  margin-bottom: var(--sp-1);
}
/* Etikett och värde på samma rad, med etiketterna i en egen kolumn så att
   värdena linjerar och går att ögna igenom. */
.brf-k-rad-ut { display: flex; gap: var(--sp-2); font-size: 16px; padding: 3px 0; }
.brf-k-etikett {
  flex: 0 0 150px; color: var(--ink-soft); font-size: 14px;
  text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
  padding-top: 2px;
}
.brf-k-varde { flex: 1 1 auto; }
/* Telefonnummer och adresser är egna klickmål och behöver nå 44px. */
.brf-k-varde a[href^="tel:"], .brf-k-varde a[href^="mailto:"] {
  display: inline-block; padding: 10px 2px;
}
.brf-k-omfattning {
  margin-top: var(--sp-1); padding-top: var(--sp-1);
  border-top: 1px solid var(--border);
  color: var(--ink-soft); font-size: 15px;
}
/* Ett avtal som håller på att löpa ut ska synas utan att man läser datumet.
   Vinröd klarar 5,36:1 mot vitt; den röda är mörkad för samma skäl. */
.brf-k-flagga {
  display: inline-block; margin-left: 6px; padding: 2px 8px;
  border-radius: 20px; font-size: 13px; font-weight: 700;
  background: #F3E1E3; color: var(--wine);
}
.brf-k-flagga.brf-k-utgangen { background: #F6D9D7; color: #A3231C; }
.brf-k-tom { color: var(--ink-soft); }

@media (max-width: 768px) {
  /* Etikettkolumnen får inte plats bredvid värdet på telefon - då blir
     värdena en smal remsa. Staplas i stället. */
  .brf-k-rad-ut { flex-direction: column; gap: 0; padding: 6px 0; }
  .brf-k-etikett { flex: none; font-size: 13px; }
  .brf-k-post { padding: var(--sp-2); }
}


/* ===== Responsivt ===== */
/* Sju menyval får plats på en rad först över ~1200px. I bandet däremellan
   – bland annat iPad i liggande läge – stramas avstånden åt så att menyn
   slipper radbryta till två våningar. */
@media (min-width: 1001px) and (max-width: 1250px) {
  .site-navigation ul.menu > li > a { padding: 10px 8px; font-size: 15px; }
}

@media (max-width: 768px) {
  .site-header .header-inner, .site-footer .footer-inner { max-width: 100%; padding: 0 var(--sp-2); }
  body { font-size: 17px; }
  .brf-stat-value { font-size: 28px; }
}