/*
Theme Name:   Cybersikker Virksomhed (child)
Theme URI:    https://cybersikkervirksomhed.danspot.dk
Description:  Child theme til Hello Elementor. Al design-styling ligger i Elementor (Site Settings + templates) — denne fil indeholder kun det, Elementor ikke kan sætte via UI.
Author:       DesignRus
Template:     hello-elementor
Version:      1.0.0
Text Domain:  csv-child
*/

/* Design tokens fra Loveable-designet — så de kan bruges i Elementors
   "Custom CSS"-felter og af redaktører, uden at farverne hardkodes i widgets. */
:root {
  --csv-emerald:    #009D66;
  --csv-lilac:      #DADAFE;
  --csv-purple:     #9598FF;
  --csv-darkpurple: #3B3D7A;
  --csv-darkgreen:  #0B3D24;
  --csv-coral:      #E6624D;
  --csv-lime:       #ACFF69;
  --csv-offwhite:   #F9F8F4;
  --csv-ink:        #0A0A0A;
  --csv-muted:      #EFEEE7;
  --csv-muted-fg:   #4A5A51;
  --csv-border:     #E7E5DC;
}

/* Blød rulning, når man klikker på scroll-pilen i heroen.
   Referencen sætter det samme (html { scroll-behavior: smooth }). */
html { scroll-behavior: smooth; }

/* Hero-sliderens prikker — KUN det, Elementor Pro ikke har en kontrol til.
   Placering (nederst til højre), størrelse (højde), mellemrum, normal- og
   hover-farve er sat NATIVT på karrussel-widgeten (Brugerdefineret position
   + Prikker-indstillingerne). Tilbage er tre ting uden kontrol i Elementor:
     1) prikkens BREDDE  — widgeten har kun én "Størrelse" (kvadratisk/rund)
     2) firkantede hjørner — Swipers prikker er altid border-radius: 50%
     3) den AKTIVE prikkes farve — der findes kun Normal og Hover
   Selektorerne er ét niveau mere specifikke end Elementors egne
   (.elementor-widget-n-carousel .swiper-pagination-bullet), så de vinder
   uanset hvilken rækkefølge stylesheetsene indlæses i. */
.csv-hero .swiper-pagination-bullets .swiper-pagination-bullet {
  width: 32px;
  border-radius: 0;
  opacity: 1;
  transition: background 0.2s;
}

.csv-hero .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--csv-lime);
}

/* Ikoner i knapper: 20 px.
   Elementors Knap-widget har INGEN kontrol til ikonstørrelse — den registrerer
   kun "Ikonafstand" (icon_indent), så ikonet arver knappens skriftstørrelse på
   16 px, mens designet bruger 20 px. Verificeret i plugin-kilden
   elementor/includes/widgets/traits/button-trait.php.
   Rører kun de tre knapper, der har klassen (de to kort-links og
   "Læs mere her" i IT-leverandør-sektionen). Alt andet på knapperne —
   farver, kant, polstring, typografi, hover — er native indstillinger. */
.csv-btn-icon-20 .elementor-button-icon {
  font-size: 20px;
}

/* Samme sag i topbarens "Akut hjælp" — dér er designets ikon 16 px, mens
   knappens skriftstørrelse er 12,8 px. (Footerens "Akut hjælp" har allerede
   16 px skrift og rammer derfor selv, uden en regel her.) */
.csv-btn-icon-16 .elementor-button-icon {
  font-size: 16px;
}

/* Undermenu-pilen i hovedmenuen ("Om CSV").
   Elementor Pro har INGEN kontrol til pilens størrelse — plugin'ets egen CSS
   låser netop chevron-down til 0,7em (= 11,8 px ved 16,8 px skrift), mens
   designet bruger 16 px. Verificeret i
   elementor-pro/modules/nav-menu/widgets/nav-menu.php (kun ikon-vælgeren
   'submenu_icon', intet størrelsesfelt) og i widget-nav-menu.min.css.
   Den anden selektor er ét niveau mere specifik end Elementors egen, så den
   vinder uanset indlæsningsrækkefølge. */
.csv-nav .elementor-nav-menu .sub-arrow .e-font-icon-svg,
.csv-nav .elementor-nav-menu .sub-arrow .e-font-icon-svg.fa-svg-chevron-down {
  width: 16px;
  height: 16px;
}

/* Event-bokse. De statiske farver (topbjælke, dato-pill) er native
   Elementor-kontroller. Kun de rene hover-interaktioner ligger her, fordi
   de ikke har native container-kontroller: løft + skygge på boksen, og en
   "Læs mere"-linje der toner frem — sidstnævnte er group-hover (hover på
   forælder påvirker barn), som Elementor slet ikke kan udtrykke. */
.csv-event-card {
  transition: transform 0.2s, box-shadow 0.2s;
}

.csv-event-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -24px rgba(11, 61, 36, 0.45);
}

.csv-event-more {
  opacity: 0;
  transition: opacity 0.2s;
}

.csv-event-card:hover .csv-event-more {
  opacity: 1;
}

/* Diagonal pil. Font Awesome 5 har ingen "arrow-up-right", så designets
   skrå pil laves ved at dreje fa-arrow-right 45° op. På en Button-widget
   findes der ingen native kontrol til KUN at dreje ikonet (Transformér
   drejer hele knappen), derfor står drejningen her. Farve, størrelse,
   placering og afstand er native indstillinger. */
.csv-btn-icon-diag .elementor-button-icon {
  transform: rotate(-45deg);
}

/* Kampagnesidens "Sådan foregår Cyber Survey": overskriften og teksten er
   ét afsnit i designet, hvor overskriften er en blok-<strong>. Elementor
   har ingen kontrol til at style <strong> inde i en tekst-widget. */
.csv-trin-tekst strong {
  display: block;
  font-weight: 600;
  color: #f9f8f4;
}

/* Punktopstillinger inde i de ni trin. Hello Elementor nulstiller <ul>,
   og tekst-widgetten har ingen native liste-kontroller. */
.csv-liste ul {
  list-style: disc;
  margin: 0 0 0 20px;
  padding: 0;
}

/* Designet bruger space-y-3, altså 12 px mellem ALLE børn i tekstblokken.
   Elementors "Afstand mellem afsnit" rammer kun <p>, så en liste midt i
   teksten står klistret op ad afsnittet under. Værdien skal følge
   paragraph_spacing i csv_bliv_trin_blok(). */
.csv-liste ul:not(:last-child) {
  margin-bottom: 12px;
}

.csv-liste li + li {
  margin-top: 4px;
}

/* Numrene 01-09 foran de ni trin i harmonikaen.
   De tælles frem af CSS, så rækkefølgen altid passer — også hvis Lone
   tilføjer, fjerner eller flytter et trin i Elementor. Selve overskriften
   er et helt almindeligt felt i harmonika-widgetten. */
.csv-steps .e-n-accordion {
  counter-reset: csv-trin;
}

.csv-steps .e-n-accordion-item {
  counter-increment: csv-trin;
}

.csv-steps .e-n-accordion-item-title-text::before {
  content: counter(csv-trin, decimal-leading-zero);
  display: inline-block;
  width: 48px;
  margin-right: 16px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--e-global-color-primary, #009d66);
  /* Uden disse to ville tallets inline-block-boks skubbe linjen 2 px op
     i højden, fordi den flugter på skriftlinjen i stedet for på toppen. */
  line-height: 28px;
  vertical-align: top;
}

/* Afsnitsafstand i tekst-widgets.
   Elementors "Afstand mellem afsnit" lægger margin under HVERT afsnit —
   også det sidste — så en tekstboks bliver én afstand for høj i forhold
   til designet, hvor afstanden kun står MELLEM afsnittene. Verificeret i
   elementor/includes/widgets/text-editor.php ('{{WRAPPER}} p' =>
   margin-block-end). Reglen her fjerner kun den sidste, så feltet i
   editoren betyder præcis det, det siger. */
.elementor .elementor-element.elementor-widget-text-editor p:last-child {
  margin-block-end: 0;
}

/* Store nøgletal må ikke ombryde. Referencen bruger white-space: nowrap og
   lader tallet flyde ud over kolonnen; Elementor har hverken en white-space-
   kontrol eller en bredde, der kan overskride containeren (frontend-CSS'en
   låser widgets til max-width: 100%). Klassen sættes i Avanceret → CSS-klasser. */
.csv-tal-nowrap .elementor-heading-title { white-space: nowrap; }

/* /om-os, sektion "Om os: tekst og partnerskab" — se kommentaren i
   wp/scripts/sections-page-omos.php. Uden denne regel krymper Elementor
   kolonnen til 342 px ved 390 px, hvor referencen holder 362,17 px. */
.csv-min-indhold > .e-con-inner { min-width: min-content; }

/* Burgermenuen på mobil: iOS Safari tegner sin egen blå fokusramme, når
   panelet åbner og fokus lander på det første link (logoet). Der er ingen
   kant i vores egen CSS — målt til "border: 0px none" på både <a> og <img>.
   Rammen skal kun frem ved tastaturnavigation, så den slås fra ved
   mus/berøring og erstattes af husets limegrønne ved :focus-visible. */
.elementor-popup-modal a:focus,
.elementor-popup-modal button:focus {
  outline: none;
}

.elementor-popup-modal a:focus-visible,
.elementor-popup-modal button:focus-visible {
  outline: 2px solid var(--e-global-color-csvlime, #acff69);
  outline-offset: 4px;
}

/* Logoet i menuen er undtaget. iOS Safari regner den fokus, panelet selv
   flytter ved åbning, som tastaturfokus, så :focus-visible ramte også der.
   Logoet er en dublet af sidehovedets link til forsiden — menupunkterne og
   knapperne under det beholder deres fokusramme. */
.elementor-popup-modal .csv-menu-logo a:focus,
.elementor-popup-modal .csv-menu-logo a:focus-visible {
  outline: none;
}

/* Vejledningslinkene i de ni trin. Designet bruger underline-offset-4;
   Elementor har ingen kontrol til afstanden mellem tekst og understregning. */
.csv-vejledninger .elementor-icon-list-item > a {
  text-underline-offset: 4px;
}

/* Fuldskærms-søgningen i sidehovedet. Elementors lightbox-stylesheet
   indlæses ikke på sitet, så luk-krydset arver hverken størrelse eller
   placering: dets SVG ender 0 × 0 midt i feltet og kan hverken ses eller
   rammes. Reglen giver krydset sin plads i øverste højre hjørne og husets
   offwhite, så overlayet kan lukkes med musen og ikke kun med Esc.
   Alt andet ved søgefeltet — farver, ikonstørrelser, overlayets grønne —
   er almindelige Elementor-indstillinger på selve widget'en. */
.elementor-search-form--skin-full_screen .elementor-search-form__container .dialog-lightbox-close-button {
	position: absolute;
	top: 28px;
	right: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	cursor: pointer;
	opacity: .8;
	transition: opacity .2s;
}

.elementor-search-form--skin-full_screen .elementor-search-form__container .dialog-lightbox-close-button:hover,
.elementor-search-form--skin-full_screen .elementor-search-form__container .dialog-lightbox-close-button:focus-visible {
	opacity: 1;
}

.elementor-search-form--skin-full_screen .elementor-search-form__container .dialog-lightbox-close-button svg {
	width: 22px;
	height: 22px;
	fill: #F9F8F4;
}