/* ==========================================================================
   KLA Personskade — Mobil / responsiv optimering
   --------------------------------------------------------------------------
   Indlæses sidst (afhænger af salient-child-style + kla-footer), så regler
   her vinder over tema og WPBakery uden !important hvor muligt.

   Breakpoints (matcher Salient):
     - Telefon:        max-width: 690px
     - Tablet/portræt: max-width: 999px
     - Lille telefon:  max-width: 480px

   Tilføj nye fixes under den relevante sektion. Hold hver regel lille og
   kommenteret, så vi kan rulle enkelttilfælde tilbage uden bivirkninger.
   ========================================================================== */


/* ==========================================================================
   0. GOOGLE reCAPTCHA-BADGE — skjult (global, alle enheder)
   --------------------------------------------------------------------------
   Den flydende reCAPTCHA-badge (cirkulært pile-logo nederst i hjørnet).
   Google tillader at skjule den, FORUDSAT at attributions-teksten vises et
   andet sted — fx under kontaktformularen:
   "Denne side er beskyttet af reCAPTCHA, og Googles privatlivspolitik og
    servicevilkår gælder."  (med links til policies)
   Bruger visibility:hidden (ikke display:none), så reCAPTCHA stadig kører.
   ========================================================================== */
.grecaptcha-badge {
  visibility: hidden !important;
}

/* ==========================================================================
   0a. KLA-LOGO — ~17% mindre på mobil (var for stort)
   ========================================================================== */
@media (max-width: 690px) {
  #header-outer #logo img,
  #header-outer #logo .stnd {
    height: 29px !important;   /* fra ~35px ≈ 17% mindre */
    width: auto !important;
    max-height: 29px !important;
  }
}

/* Den lovpligtige reCAPTCHA-attribution, vist under formularerne i stedet
   for badgen. Diskret/dæmpet. */
.recaptcha-attribution {
  font-size: 11px;
  line-height: 1.4;
  color: #999;
  margin-top: 12px;
}
.recaptcha-attribution a {
  color: #999;
  text-decoration: underline;
}

/* ==========================================================================
   0b. COOKIE-BANNER KNAPPER — centrér tekst (global, alle enheder)
   --------------------------------------------------------------------------
   Knapperne er display:flex + justify-content:center, men text-align:left.
   "Accepter alle" er kort (1 linje) → ser centreret ud. "Kun funktionale
   cookies" wrapper til 2 linjer → venstrestilles. Sæt text-align:center,
   så begge knappers tekst centreres ens.
   ========================================================================== */
.coi-banner__decline,
.coi-banner__accept,
.coi-banner__lastpage {
  text-align: center !important;
}

/* ==========================================================================
   0c. HOVEDMENU (desktop) — lidt mere luft mellem top-niveau-punkter
   --------------------------------------------------------------------------
   Kun 1. niveau i hovedmenuen (#top nav). IKKE undermenuer (.sub-menu),
   IKKE den sekundære menu (#header-secondary-outer) og IKKE YouTube-knappen
   (menu-item-btn-style). Link-padding 10px → 13px pr. side = +6px mellem
   punkterne. (.sf-menu er skjult på mobil, så reglen rører ikke mobilvisning.)
   ========================================================================== */
#top nav .sf-menu > li.menu-item:not([class*="menu-item-btn-style"]) > a {
  padding-left: 13px !important;
  padding-right: 13px !important;
}

/* ==========================================================================
   0d. BURGER-MENU (mobil off-canvas) — afstande
   --------------------------------------------------------------------------
   1. niveau-punkter har 5px afstand (margins kollapser). +4px → 9px.
   Første punkt i hver undermenu får +5px top-spacing, så undermenuen
   adskilles lidt fra sit forælder-punkt (gælder alle undermenu-niveauer,
   men kun det FØRSTE punkt i hver).
   ========================================================================== */
@media (max-width: 690px) {

  #slide-out-widget-area .off-canvas-menu-container ul.menu > li {
    margin-top: 9px !important;
    margin-bottom: 9px !important;
  }

  #slide-out-widget-area .off-canvas-menu-container ul.menu .sub-menu > li:first-child {
    margin-top: 10px !important;
  }

}


/* ==========================================================================
   0e. HERO-UNDERTEKST — centrér vertikalt i det farvede felt (global)
   --------------------------------------------------------------------------
   "Det koster ikke noget at spørge KLA...". Kolonnen (med den lilla bg via
   .column-bg-overlay-wrap) er lidt højere end teksten pga. equal_height, så
   teksten lå i toppen med mere luft i bunden. Flex-centrering balancerer
   top/bund. Gælder desktop + mobil (ens inline-style hvid 15px på 111 sider).
   ========================================================================== */
.vc_column-inner:has(> .wpb_wrapper > p.vc_custom_heading[style*="color: #ffffff"][style*="15px"]),
.vc_column-inner:has(> .wpb_wrapper > p.vc_custom_heading[style*="color: #ffffff"][style*="30px"]) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}


/* ==========================================================================
   1. COOKIE-DEKLARATION (Cookie Information / coi-banner)
   --------------------------------------------------------------------------
   Deklarations-tabellen rendered med 10.8px tekst og 9.7px links på alle
   sider — for småt på mobil. Hæver til læsbar størrelse uden at sprænge
   bannerets layout. Tredjeparts-markup, derfor målrettede selektorer.
   ========================================================================== */
@media (max-width: 690px) {

  .cookie-details__detail-title,
  .cookie-details__detail-content {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  .coi-external-link,
  .coi-consent-banner__cookie-details span {
    font-size: 13px !important;
  }

  /* Lidt luft mellem felterne så tabellen ikke klumper sammen */
  .cookie-details__detail-container {
    margin-bottom: 4px;
  }

}


/* ==========================================================================
   2. TYPOGRAFI — overskrifter / hero
   --------------------------------------------------------------------------
   (Reserveret — tilføjes når vi har telefon-screenshots der viser hvilke
   overskrifter der er for store / for tætte på mobil.)
   ========================================================================== */
@media (max-width: 690px) {

  /* Hero-undertekst på undersider:
     "Det koster ikke noget at spørge KLA - men det kan være dyrt at lade
     være!" Ligger på 111 sider med ens inline-style (hvid 15px) → vi rammer
     præcist via style-attributten uden at røre indholdet.
     Problem: for lille side-padding (gik næsten ud til kanten) ift. brød-
     teksten (24px), og lidt for lille. Giver matchende padding + lidt større. */
  p.vc_custom_heading[style*="color: #ffffff"][style*="15px"] {
    padding-left: 22px;
    padding-right: 22px;
    box-sizing: border-box;
    font-size: 18px !important;
    line-height: 1.35 !important;
  }

}


/* ==========================================================================
   2b. KONTAKT / LANGE EMAILS — må bryde så de ikke går ud over kanten
   --------------------------------------------------------------------------
   "sikkerpost@klapersonskade.dk" gik ~77px ud over skærmkanten på kontakt-
   siden (brød ikke). Tillad ombrydning af lange mail-/tel-links.
   ========================================================================== */
@media (max-width: 690px) {

  a[href^="mailto:"],
  a[href^="tel:"] {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

}


/* ==========================================================================
   3. KLA UPDATES / NYHEDER — afstand mellem kort (Custom Layouts)
   --------------------------------------------------------------------------
   Problem: for lidt luft under "Hør mere"-knappen, så det næste videokort
   klistrer op ad det forrige. Custom Layouts-markup (.cl-*) er stabilt.
   ========================================================================== */
@media (max-width: 690px) {

  /* Luft mellem de enkelte opdaterings-/nyhedskort.
     Custom Layouts styrer afstanden via margin-top på items (default 10px,
     sat af .cl-layout--grid .cl-layout__item) — vi matcher specificiteten
     og loader sidst, så denne vinder. */
  .cl-layout--grid .cl-layout__item {
    margin-top: 30px;
  }

  /* Ekstra luft under "Hør mere"-linket før næste kort */
  .cl-element-link.kla-update-singel-dj {
    margin-bottom: 14px;
  }

  /* Top-luft over "KLA Updates"-overskriften (manglede top-padding).
     Hook: el_class på overskrifts-kolonnen (sat i WPBakery). */
  .kla-updates-headcol {
    padding-top: 26px;
  }

  /* Skjul de to tomme spacer-kolonner i overskrifts-rækken. De har 0
     højde men skaber ~25px mellemrum hver, når kolonnerne stakker på
     mobil → "too much space" mellem overskrift og "Se flere updates".
     col1 = overskrift (hook), col2+col3 = tomme, col4 = knap (bevares). */
  .kla-updates-headcol + .wpb_column,
  .kla-updates-headcol + .wpb_column + .wpb_column {
    display: none;
  }

}


/* ==========================================================================
   3b. FORMULARER (Contact Form 7) — datofelt på iOS
   --------------------------------------------------------------------------
   "Fødselsdagsdato" (input[type=date]) render bredere end de øvrige felter
   på iOS Safari, fordi den native -webkit-appearance ignorerer width/box-
   sizing. Nulstil appearance så feltet opfører sig som de andre tekstfelter.
   (Ses kun på rigtige iOS-enheder — ikke i desktop-emulering.)
   ========================================================================== */
@media (max-width: 690px) {

  .wpcf7-form input.wpcf7-date,
  .wpcf7-form input[type="date"].form-field {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    box-sizing: border-box;
    min-height: 0;
  }

}


/* ==========================================================================
   4. TRUSTPILOT-BANNER — vis kun højre del (anmeldelsen) på mobil
   --------------------------------------------------------------------------
   Billedet er ét bredt banner (2740×766). På mobil skrumper det til ~110px
   højt og bliver ulæseligt. Vi gør containeren højere og beskærer til højre
   del (object-position: right), så kundeanmeldelsen fylder og bliver læsbar.
   Skift 'right' til 'left' hvis I hellere vil vise logo + stjerner i stedet.
   ========================================================================== */
@media (max-width: 690px) {

  /* Case-insensitiv ("i") fordi filnavnene veksler mellem
     kla_personskade_anmeldelser_* og KLA_Personskade_anmeldelser_*.
     Slideren er 31 roterende anmeldelses-bannere. */
  .img-with-aniamtion-wrap:has(img[src*="anmeldelser" i]),
  .img-with-aniamtion-wrap:has(img[src*="anmeldelser" i]) .inner,
  .img-with-aniamtion-wrap:has(img[src*="anmeldelser" i]) .hover-wrap,
  .img-with-aniamtion-wrap:has(img[src*="anmeldelser" i]) .hover-wrap-inner,
  .img-with-aniamtion-wrap:has(img[src*="anmeldelser" i]) a {
    height: 170px !important;
    display: block;
  }

  img[src*="anmeldelser" i] {
    width: 100% !important;
    height: 170px !important;
    object-fit: cover;
    object-position: 92% 50%;    /* mod højre — beskærer hvid venstre-margin væk så indholdet flugter venstrekanten */
    border-radius: 6px;
  }

  /* Flugt venstrekanten med elementet ovenfor (Spotify-embed):
     kolonnen har 10px sidepadding som naboelementet ikke har — fjern den,
     så blokken bliver lidt bredere og venstrekanten matcher. */
  .cell:has(img[src*="anmeldelser" i]) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

}


/* ==========================================================================
   5. KNAPPER & KLIK-MÅL
   --------------------------------------------------------------------------
   (Reserveret — sikrer min. ~44px touch-mål hvor relevant.)
   ========================================================================== */
@media (max-width: 690px) {

  /* eksempel-skabelon:
  .nectar-button { min-height: 44px; }
  */

}


/* ==========================================================================
   5. SMÅ TELEFONER (≤480px) — finjustering
   ========================================================================== */
@media (max-width: 480px) {

  /* tilføj her hvis noget kun knækker på de smalleste skærme */

}