/*
Theme Name: Ejerlauget Bastrupgaard — Lys
Template: bastrupgaard
Description: Variant af hovedtemaet med den lyse, billedbårne æstetik fra test.bastrupgaard.dk: Fraunces-overskrifter, Manrope-brødtekst, svævende menu og fuldbredde-forsidebillede. Samme indhold, samme komponenter — kun tokens og forside er anderledes.
Author: Anders
Version: 0.1.1
Requires at least: 6.5
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bastrupgaard-lys
*/

/* Forældretemaets komponenter er bygget udelukkende på tokens, så det meste af
   udseendet skifter allerede med theme.json. Her ligger kun det tokens ikke kan
   udtrykke: den større afstandsskala, den svævende menubjælke, forsidebilledet
   og de runde hjørner. */

/* ---------------------------------------------------------------------------
   Afstandsskala. Samme trin-navne som forælderen, bare større — komponenterne
   læser gennem dem, så luften åbner sig uden en eneste komponentregel.
   --------------------------------------------------------------------------- */
:root {
  --eb-1: 0.375rem;
  --eb-2: 0.75rem;
  --eb-3: 1.125rem;
  --eb-4: 1.75rem;
  --eb-5: 2.75rem;
  --eb-6: 4rem;
  --eb-7: 5.5rem;
  --ebl-radius: 1rem;
}

/* ---------------------------------------------------------------------------
   Altid lyst

   Varianten er bygget om et fotografi og en lys flade — den har intet mørkt
   modstykke. Forældretemaet skifter til mørkt tema efter browserens indstilling,
   og dets regler ligger i en stylesheet der indlæses før denne, så de skal
   skrives over frem for blot at udelades. Værdierne er de samme som paletten i
   theme.json.

   color-scheme holder også browserens egne dele lyse — formularfelter,
   rullepaneler og datovælgere ville ellers stå mørke midt i et lyst site.
   --------------------------------------------------------------------------- */
:root { color-scheme: light; }

@media (prefers-color-scheme: dark) {
  :root {
    --wp--preset--color--ground: #F9FAFE;
    --wp--preset--color--surface: #FFFFFF;
    --wp--preset--color--surface-alt: #F2F5FD;
    --wp--preset--color--ink: #0A0A0A;
    --wp--preset--color--ink-muted: #333333;
    --wp--preset--color--ink-subtle: #5A5F6B;
    --wp--preset--color--accent: #0B51C2;
    --wp--preset--color--accent-strong: #083A8C;
    --wp--preset--color--accent-soft: #E6EDFB;
    --wp--preset--color--attention: #8A5A12;
    --wp--preset--color--rule: #DDE3F1;
    --wp--preset--color--rule-soft: #EBEFF9;
  }
  /* Forælderen dæmper kortskyggen i mørkt tema. */
  .eb-card { box-shadow: 0 1px 2px rgba(10, 10, 10, 0.04); }
}

/* ---------------------------------------------------------------------------
   Svævende menubjælke

   Baggrunden er halvgennemsigtig med blur: over forsidebilledet læses den som
   glas, over almindeligt indhold som en svag hvid pille. Det er derfor der ikke
   er brug for en særregel for forsiden.
   --------------------------------------------------------------------------- */
.ebl-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  padding-block: var(--eb-2);
  background: transparent;
}

/* En sticky boks kan kun blive stående inden for sin forælder, og
   template-part-blokken er præcis lige så høj som bjælken selv — så der er
   ingen vej at blive stående på, og bjælken rullede ud af skærmen.
   display:contents fjerner wrapperen som boks, så bjælken hører direkte under
   .wp-site-blocks, der er hele sidens højde. */
.wp-site-blocks > .wp-block-template-part:first-child { display: contents; }

/* Bjælken bliver stående øverst, så et ankerlink (forsidens genveje til
   /praktisk/#…, vedtægternes indholdsfortegnelse) landede med overskriften
   gemt bag den. Forælderens afstand regner med en bjælke der ruller væk. */
:target { scroll-margin-top: 7rem; }

/* Forsiden: billedet ligger umiddelbart under bjælken og skal starte i toppen
   af skærmen. Bjælken tages derfor helt ud af flowet frem for at trække
   billedet op med bjælkens højde — den højde kan ikke kendes på forhånd.
   Nav-punkternes polstring og mobilmenuens 44px bestemmer den, og den er
   forskellig på telefon og skærm. */
.wp-site-blocks:has(> .ebl-hero) .ebl-bar {
  position: fixed;
  inset-inline: 0;
}

/* Mindstehøjde, ikke fast højde: nav-punkterne har deres egen polstring og gør
   pillen højere end de 3rem. Ingen anden regel må regne med tallet. */
.ebl-pill {
  min-height: 3rem;
  border-radius: var(--ebl-radius);
  padding: var(--eb-2) var(--eb-3);
  background: color-mix(in srgb, var(--wp--preset--color--surface) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--rule) 70%, transparent);
  box-shadow: 0 1px 24px rgba(10, 10, 10, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Browsere uden backdrop-filter ville få en gennemsigtig bjælke oven på et
   fotografi — altså ulæselig tekst. Der får den en helt uigennemsigtig flade. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ebl-pill { background: var(--wp--preset--color--surface); }
}

/* Foreningens navn er to ord og må ikke ombrydes — gør det ombrudt, vokser
   pillen til to linjer og det negative træk på billedet passer ikke længere. */
.ebl-pill > .wp-block-site-title { flex: 0 0 auto; white-space: nowrap; }
.ebl-pill > .wp-block-navigation { flex: 0 1 auto; min-width: 0; }
.ebl-pill .wp-block-navigation__container { flex-wrap: nowrap; }

.ebl-pill .wp-block-site-title a {
  color: var(--wp--preset--color--ink);
  text-decoration: none;
}
/* Menuen sættes mindre end brødteksten. Ved 18px løb de syv punkter ud over
   pillens kant ved 1400px — og menuen skal alligevel træde tilbage for
   indholdet, ikke konkurrere med det. */
.ebl-pill .wp-block-navigation { font-size: var(--wp--preset--font-size--small); }

.ebl-pill .wp-block-navigation-item__content {
  white-space: nowrap;
  padding: var(--eb-1) var(--eb-2);
  border-radius: 2rem;
  text-decoration: none;
}
/* Klassen står med vilje to gange. Kernen skriver selv
   `.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content
   {color:inherit}` for at slå temaers farve, og med ét klassenavn taber vi.
   Punkterne stod derfor i ink, og skiftet til ink på hover kunne ikke ses. */
.ebl-pill .wp-block-navigation-item__content.wp-block-navigation-item__content {
  color: var(--wp--preset--color--ink-muted);
}
.ebl-pill .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--ink);
  background: var(--wp--preset--color--accent-soft);
}
/* Undermenuens felt er firkantet, så dens punkter skal ikke arve pillens runding. */
.ebl-pill .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  border-radius: 0;
}
/* Kernens eget felt rammes ind i rgba(0,0,0,0.15) — den eneste kant på sitet,
   der ikke kommer fra paletten. Ved siden af pillen læses den som en gråtone
   for meget. .wp-block-navigation skal med i selektoren: kernens regel er
   `.wp-block-navigation:not(.has-background) .…__submenu-container`, og
   :not() tæller med. */
.ebl-pill .wp-block-navigation .wp-block-navigation__submenu-container {
  border-color: var(--wp--preset--color--rule);
}
.ebl-pill .current-menu-item > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--ink);
  font-weight: 600;
}
/* Samme 44x44-mål som i forældretemaet — læserne her er ikke unge. */
.ebl-pill .wp-block-navigation__responsive-container-open,
.ebl-pill .wp-block-navigation__responsive-container-close {
  min-width: 44px;
  min-height: 44px;
}

/* backdrop-filter gør elementet til containing block for fixed-positionerede
   efterkommere. Kernens mobilmenu er netop position:fixed med inset 0, så den
   regnede ud fra pillen i stedet for skærmen: hele menuen foldedes ned i en
   kasse på 352x68 px, hvor kun det første punkt kunne ses. Sløringen kan
   undværes i de sekunder menuen alligevel dækker skærmen. */
.ebl-pill:has(.wp-block-navigation__responsive-container.is-menu-open) {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Pillens stramme polstring hører til den vandrette bjælke. I menuen, der
   fylder skærmen, gav den rækker på 22 px — under de 44 px resten af sitet
   holder sig til.

   Den lange selektor er ikke pynt: kernen nulstiller polstringen med
   `…responsive-container.is-menu-open:where(…) …-content .…item__content`,
   altså fire klasser. Tre er ikke nok. (Forældretemaets tilsvarende regel har
   tre og taber derfor stadig — den er ikke rørt her.)
   --eb-2 frem for --eb-3: rækken bliver 53 px, og alle ti punkter bliver på
   skærmen med undermenuen foldet ud. */
.ebl-pill .is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
  padding-block: var(--eb-2);
  font-size: var(--wp--preset--font-size--medium);
}

/* ---------------------------------------------------------------------------
   Forsidebillede

   Billedet ligger i temaet frem for i mediebiblioteket, fordi varianten er til
   sammenligning. Skal den i produktion, skal det op som featured image på
   forsiden, så bestyrelsen kan skifte det uden at røre en fil.
   --------------------------------------------------------------------------- */
.ebl-hero {
  background-image: url('assets/hero.jpg');
  background-size: cover;
  background-position: center 60%;
  /* Hele skærmen ved åbning; resten af siden ligger under folden. svh frem for
     vh, fordi vh på telefon regner med adresselinjen skjult — billedets bund
     ville ligge uden for skærmen indtil man scrollede. */
  min-height: 100vh;
  min-height: 100svh;
  /* Nulstiller WordPress' blockGap mellem sidens øverste blokke. Ellers står
     billedet 1,5rem nede, med en stribe baggrundsfarve over. */
  margin-block-start: 0;
}

/* Gradienten gør teksten læsbar i bunden uden at lægge en grå dug over hele
   billedet — en flad dim på 50% slukker både himmel og græs. */
.ebl-hero > .wp-block-cover__background {
  background: linear-gradient(6deg, rgba(6, 8, 12, 0.86) 0%, rgba(6, 8, 12, 0.28) 48%, rgba(6, 8, 12, 0.04) 100%);
}

.ebl-hero .wp-block-cover__inner-container {
  align-self: end;
  width: 100%;
  padding-block-end: var(--eb-6);
}

.ebl-hero__text > * { color: #FFFFFF; }
.ebl-hero__text .wp-block-site-title a { color: #FFFFFF; text-decoration: none; }
.ebl-hero__text .wp-block-site-tagline {
  color: rgba(255, 255, 255, 0.82);
  margin-top: var(--eb-3);
}
.ebl-hero__text .wp-block-buttons { margin-top: var(--eb-4); }

/* ---------------------------------------------------------------------------
   Links i brødteksten

   Browserens egen understregning er tyk og ligger klods op ad bogstaverne, så
   den skærer gennem nedstregerne i g, j og p. På en side der ellers kun er
   tekst, er den det mest støjende element.

   Både farve og streg dæmpes — men begge bliver stående. Et link skal kunne
   ses uden at man først fører musen hen over det, og understregningen er det
   kendetegn der også virker for dem der ikke ser forskel på blå og sort.
   --------------------------------------------------------------------------- */
.wp-block-post-content a:where(:not(.wp-element-button)) {
  color: var(--wp--preset--color--accent-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--wp--preset--color--accent-strong) 40%, transparent);
}
.wp-block-post-content a:where(:not(.wp-element-button)):hover {
  text-decoration-color: currentColor;
}

/* Dokumentrækker i brødteksten skal ikke strække sig over hele tekstbredden —
   så lander "PDF" 400 px fra sin egen titel. I sidespaltens kort er rækken
   derimod hele kortets bredde, og dér er afstanden lille nok til at parret
   stadig læses under ét. */
.wp-block-post-content .eb-linklist {
  width: fit-content;
  max-width: 100%;
  /* WordPress' rodlayout centrerer alt der er smallere end spalten med
     margin-inline: auto !important. Rækken skal flugte med teksten over den,
     og et !important er den eneste vej uden om et !important. */
  margin-inline: 0 auto !important;
}
.eb-card .eb-linklist { width: auto; }

/* ---------------------------------------------------------------------------
   Runde hjørner

   Forælderen sætter bevidst border-radius: 0 på felter og knapper. Varianten
   vender det om — det er en af de tydeligste forskelle mellem de to udtryk.
   --------------------------------------------------------------------------- */
.eb-card { border-radius: var(--ebl-radius); }

/* Manrope er bredere end Archivo, og kortene har fået mere polstring. Lange
   værdier som stedet for generalforsamlingen løb derfor ud over kortets kant.
   De får lov at falde ned på egen linje i stedet. */
.eb-keyval :where(p) { flex-wrap: wrap; }
.eb-keyval strong { margin-left: auto; }

.wp-block-search__input,
.ff-default .ff-el-form-control,
.ff-default select.ff-el-form-control {
  border-radius: 0.5rem;
}
.wp-block-search__button,
.ff-default .ff-btn-submit {
  border-radius: 2rem;
  padding-inline: var(--eb-4);
}
.frm-fluent-form { --fluentform-border-radius: 0.5rem; }

/* Knapper i indholdet: accentblå flade, hvid tekst — samme blå som links, så
   alt der kan klikkes, har én farve. theme.json sætter farve og radius; her er
   kun polstringen, som elements.button ikke dækker. */
.wp-block-button__link { padding: 0.75rem var(--eb-4); font-weight: 600; }

/* ---------------------------------------------------------------------------
   Typografi

   Fraunces er en blød antikva med markant større x-højde end Source Serif.
   Overskrifter på flere linjer får derfor strammere linjeafstand, ellers
   falder de fra hinanden.
   --------------------------------------------------------------------------- */
.eb-sectionhead h2,
.eb-posts .wp-block-post-title { letter-spacing: -0.015em; }

/* Forælderen sætter bestyrelsesnavnene med sans, fordi dens overskriftsfont er
   sans. Her er den serif, så navnene ville stå som det eneste h3 på sitet i en
   anden skrift end resten. */
.eb-bestyrelse h3 {
  font-family: var(--wp--preset--font-family--serif);
  font-weight: 500;
}

/* Tallene i områdesektionen er varianternes visuelle højdepunkt, og Fraunces
   sætter dem bedre end Manrope. Forælderen sætter dem med sans.

   Eget trin frem for display: display er sat efter forsidebilledets titel, som
   har hele bredden for sig selv. Tallene står fem i træk i samme række, og ved
   64 px rakte "19.050" ud i nabospalten — under 1200 px løb det sammen med
   tallet ved siden af. */
.eb-fig :where(p:first-child) {
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--xx-large);
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* Samme liste, to skabeloner: forsiden og Orientering sætter titlen som h3,
   arkiv og søgeresultater som h2. Her har h3 vægt 500 og h2 vægt 400, så
   nyhedslisten skiftede vægt fra side til side. */
.eb-posts .wp-block-post-title,
.eb-results .wp-block-post-title { font-weight: 500; }

/* ---------------------------------------------------------------------------
   Hvor forælderen regner med sin egen skriftfordeling

   I forældretemaet er brødteksten serif og overskrifterne sans. Her er det
   omvendt. De to regler nedenfor navngiver derfor skriften frem for at lade
   den falde tilbage på en arv, der peger den forkerte vej.
   --------------------------------------------------------------------------- */

/* Sidefodens kolonneoverskrifter er mærkater, ikke rubrikker — samme størrelse,
   vægt og farve som .eb-label. Uden dette stod de som den eneste antikva i en
   sidefod sat med grotesk. */
.eb-footer :where(h2, h3, h4) { font-family: var(--wp--preset--font-family--sans); }

/* Kontaktformularens felter stod i Fraunces, mens søgefeltet — sitets anden
   slags inputfelt — stod i Manrope. */
.ff-default .ff-el-form-control,
.ff-default select.ff-el-form-control { font-family: var(--wp--preset--font-family--sans); }