/*
 Theme Name:   Brf Saltsjöhöjden
 Theme URI:    https://brfsaltsjohojden.se
 Description:  Child theme för Brf Saltsjöhöjdens webbplats, baserat på Hello Elementor.
 Author:       Brf Saltsjöhöjden
 Template:     hello-elementor
 Version:      3.12.0
 Text Domain:  brf-saltsjohojden
*/

/* ===== 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 mot bakgrunden --bg (#FAF5EC):
     kolsvart   #1A1A1A  16.03:1  brödtext, rubriker
     terrakotta #8C5A28   5.36:1  länkar och accentuerad text
     ockra      #C08A3E   2.78:1  KLARAR INTE textkrav - endast ytfärg
     ljusgrå    #C9CBCC   1.50:1  KLARAR INTE textkrav - endast ytfärg
   Ockran bär alltså varumärket som fyllning (knappar, block, avdelare)
   med kolsvart text ovanpå (5.76:1), aldrig som textfärg i sig.
*/
:root {
  --ink:          #1A1A1A; /* kolsvart - rubriker och brödtext */
  --ink-soft:     #55504A; /* varm mörkgrå - meny och bildtexter, 7.35:1 */
  --surface:      #C9CBCC; /* ljusgrå - ENDAST ytfärg, aldrig text */
  --bg:           #FAF5EC; /* varm krämig off-white */
  --ochre:        #C08A3E; /* primär accent - ENDAST fyllning */
  --ochre-light:  #D9A34A; /* ljus ockra - ENDAST text mot mörk botten, se hero */
  --terracotta:   #8C5A28; /* sekundär accent - text, länkar, hover */
  --white:        #ffffff;
  --border:       #E7DFCF; /* varm ram som håller ihop med krämtonen */
  --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 ockra understrykning: färgen ensam
   räcker inte som markör, och ockra 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(--ochre);
  text-underline-offset: 3px;
}
a:hover, a:focus-visible,
.elementor a:not(.elementor-button):hover,
.site-main a:not(.elementor-button):hover {
  color: var(--terracotta);
  text-decoration-color: var(--terracotta);
}

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(--terracotta);
  outline-offset: 2px;
}

/* ===== 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(--terracotta) !important; }
.site-navigation ul.menu > li.current-menu-item > a {
  color: var(--terracotta) !important; box-shadow: inset 0 -3px 0 var(--ochre);
}
/* 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(--terracotta);
  color: var(--terracotta) !important;
  font-weight: 700;
}
.site-navigation ul.menu > li.brf-menu-login > a:hover {
  background: var(--terracotta);
  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(--ochre); }
.site-footer a:hover { color: var(--ochre); }
.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/2026/08/logo-saltsjohojden-ockra-ljus.png');
  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; }

/* ===== SIGNATURELEMENT: böljande vattenlinje-avdelare (samma stil som loggan) ===== */
.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(--terracotta); }

/* ===== 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(--terracotta); }
.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 ockra list som trappas ett steg mörkare åt höger. */
.brf-steps > * { border-top: 5px solid var(--ochre); }
.brf-steps > *:nth-child(2) { border-top-color: #AF7A37; }
.brf-steps > *:nth-child(3) { border-top-color: #9D6A2F; }
.brf-steps > *:nth-child(4) { border-top-color: var(--terracotta); }

/* 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 ockra bakgrund med ockra 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(--terracotta); 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(--ochre); 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(--terracotta); 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(--terracotta);
  box-shadow: 0 0 0 2px var(--terracotta); outline: none;
}
/* Standardröd asterisk är svårläst mot krämvit - terrakotta klarar 5.36:1 */
.fluentform .ff-el-is-required.asterisk-right label:after,
.fluentform .ff-el-is-required.asterisk-left label:before { color: var(--terracotta); }
.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(--ochre);
  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 ockra - ren ytfärg, aldrig bärande text */
.brf-quote p::before {
  content: '”'; color: var(--ochre);
  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(--ochre);
  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. Men den
   ska mörka DÄR TEXTEN STÅR, inte över hela bilden. Första försöket lade en
   jämn överlagring på 66 % kalibrerad mot himlen (#BAE1FB) - och himlen
   ligger i kanterna, inte bakom texten. Resultatet blev ett foto som gick i
   stort sett i moll utan att det gav någon läsbarhet där den behövdes.

   Uppmätt bakom själva textytan är det trädkronor, inte himmel:
     rubrikraden, ljusaste yta  #B5AB40
     brödtext/knappar           #A19550
     mobilens textband          #9C914E
   Vit text mot #B5AB40 ger 2,4:1 helt utan överlagring och 4,5:1 vid 35 %.
   Därför en elliptisk mörkning: ~50 % i mitten där texten står, uttonad
   till 10 % vid kanterna, där himlen och husen får behålla sitt ljus.
   Det ger vit text drygt 6:1 och lämnar fotot i stort sett obeskuret.

   Texten i heron är vit; ockra klarar inte den här överlagringen (under
   3:1) och används bara som knappfyllning med kolsvart text ovanpå.
*/
.brf-hero {
  position: relative;
  min-height: 660px;
  background-color: #0A1E30;       /* 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(10,30,48,.52)  0%,
    rgba(10,30,48,.46) 40%,
    rgba(10,30,48,.24) 72%,
    rgba(10,30,48,.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(10,30,48,.45);
}
.brf-hero p,
.brf-hero li,
.brf-hero .elementor-text-editor {
  color: var(--white);
  text-shadow: 0 1px 12px rgba(10,30,48,.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(--ochre-light);
}

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

/* Knappar i heron: ockra botten med kolsvart text (5,76:1) håller även mot
   fotot, eftersom knappen har egen bakgrund. */
.brf-hero .elementor-button {
  background-color: var(--ochre);
  color: var(--ink);
}
.brf-hero .elementor-button:hover { background-color: var(--ochre-light); color: var(--ink); }
/* Fokusmarkeringen är terrakotta i grunden och syns inte mot mörk botten. */
.brf-hero a:focus-visible,
.brf-hero .elementor-button:focus-visible { outline-color: var(--ochre-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(10,30,48,.10)  0%,
      rgba(10,30,48,.18) 22%,
      rgba(10,30,48,.46) 40%,
      rgba(10,30,48,.46) 72%,
      rgba(10,30,48,.30) 100%
    );
  }
}


/* ===== KONTAKTREGISTER ([brf_kontakter]) =====
   Samma formspråk som dokumentlistan: vitt kort med ockra 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(--ochre);
}
.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(--ochre); 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.
   Terrakotta 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: #F5E7D0; color: var(--terracotta);
}
.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; }
}