/* Stjernholm Materiel — udlejningsside */

:root{
  --blue:      #0145B6;   /* brand, taget fra logoet */
  --blue-deep: #013A96;   /* hover, footer */
  --blue-dark: #00266A;   /* footerbund */
  --ink:       #10151F;
  --ink-soft:  #55607A;
  --page:      #F5F6F8;
  --surface:   #FFFFFF;
  --line:      #E3E7EE;

  /* Blå afløsere for widgetens grønne nuancer, holdt i samme lyshed. */
  --blue-tint:        #E4EDFB;  /* var #dcfce7 */
  --blue-tint-strong: #C3D8F6;  /* var #bbf7d0 */
  --blue-mid:         #8FB4E8;  /* var #86efac */
  --blue-ink:         #0B3A85;  /* var #166534 */
  --blue-ink-deep:    #08285C;  /* var #14532d */
  --blue-rgb:         1,69,182; /* --blue som RGB, til de gennemsigtige nuancer */

  --wrap: 1100px;
  --radius: 10px;
  --topbar-h: 76px; /* Widgetens egen sticky toolbar hænges op under denne højde. */
  --font: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--page);
  color:var(--ink);
  font-family:var(--font);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

a{ color:var(--blue); }
a:hover{ color:var(--blue-deep); }

:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:3px;
  border-radius:4px;
}

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:24px;
}

/* ---------- Topbar ---------- */

.topbar{
  position:sticky;
  top:0;
  /* Widgetens toolbar er selv sticky med z-index 50 — vores header skal ligge over. */
  z-index:100;
  background:var(--surface);
  border-bottom:1px solid var(--line);
}

.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:var(--topbar-h);
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  color:inherit;
}

.brand-mark{
  width:52px;
  height:52px;
  border-radius:8px;
  object-fit:cover;
}

.brand-name{
  font-weight:800;
  font-size:1.0625rem;
  letter-spacing:-.01em;
  line-height:1.15;
  display:flex;
  flex-direction:column;
}

.brand-name span{
  font-weight:600;
  color:var(--ink-soft);
}

.topbar-phone{
  flex:none;
  background:var(--blue);
  color:#fff;
  text-decoration:none;
  font-weight:650;
  font-size:.9375rem;
  padding:11px 20px;
  border-radius:var(--radius);
  transition:background .15s ease;
}

.topbar-phone:hover{ background:var(--blue-deep); color:#fff; }

/* ---------- Hero ---------- */

.hero{
  position:relative;
  overflow:hidden;
  background:var(--blue);
  color:#fff;
}

/* Diagonalstriberne fra logomærket, dæmpet ned til baggrundstekstur */
.hero::after{
  content:"";
  position:absolute;
  inset:0 0 0 auto;
  width:46%;
  background:repeating-linear-gradient(
    -60deg,
    rgba(255,255,255,.11) 0 14px,
    transparent 14px 34px
  );
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 62%);
  mask-image:linear-gradient(90deg, transparent, #000 62%);
  pointer-events:none;
}

.hero-inner{
  position:relative;
  z-index:1;
  padding-block:78px 70px;
}

.hero h1{
  margin:0 0 16px;
  font-size:clamp(2.125rem, 5.5vw, 3.5rem);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.05;
  max-width:17ch;
}

.hero p{
  margin:0;
  font-size:clamp(1.0625rem, 2vw, 1.25rem);
  line-height:1.5;
  color:#D6E2FA;
  max-width:44ch;
}

/* ---------- Booking ---------- */

.booking{
  padding-block:56px 72px;
}

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:36px 32px 40px;
}

/* Widgeten har sin egen sticky toolbar med top:0. Uden det her lægger den sig
   op under vores header og bliver skjult. Vi hænger den op lige under headeren
   i stedet. Ændrer GoRental360 klassenavnet, sker der ikke andet, end at deres
   toolbar ryger ind bag headeren igen — headeren dækker den, ikke omvendt. */
#gr360-widget .gr360-toolbar{
  /* +1px så den rammer under headerens bundstreg og ikke oven i den. */
  top:calc(var(--topbar-h) + 1px);
}

/* Pladsholder mens widgeten hentes */
.gr360-loading{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:180px;
  color:var(--ink-soft);
}

.gr360-loading::before{
  content:"";
  width:20px;
  height:20px;
  border:2.5px solid var(--line);
  border-top-color:var(--blue);
  border-radius:50%;
  animation:gr360-spin .8s linear infinite;
}

@keyframes gr360-spin{ to{ transform:rotate(360deg); } }

@media (prefers-reduced-motion:reduce){
  .gr360-loading::before{ animation:none; }
  *{ transition-duration:.01ms !important; }
}

/* ---------- Footer ---------- */

.foot{
  background:var(--blue-deep);
  color:#C9D8F4;
}

.foot a{ color:#fff; text-decoration:none; }
.foot a:hover{ color:#fff; text-decoration:underline; }

.foot h3{
  margin:0 0 10px;
  font-size:.9375rem;
  font-weight:700;
  color:#fff;
}

.foot-inner{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr;
  gap:40px;
  padding-block:52px 44px;
  font-size:.9375rem;
}

.foot-inner p{ margin:0 0 10px; }

.foot-brand img{
  width:64px;
  height:64px;
  border-radius:8px;
  margin-bottom:16px;
}

.foot-brand p{ max-width:34ch; }

.foot-adr{ color:#9FB6E4; }

.foot-base{
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding-block:18px;
  border-top:1px solid rgba(255,255,255,.15);
  font-size:.8125rem;
  color:#9FB6E4;
}

.foot-base p{ margin:0; }

/* ---------- Mobil ---------- */

@media (max-width:820px){
  .foot-inner{ grid-template-columns:1fr 1fr; }
  .foot-brand{ grid-column:1 / -1; }
}

@media (max-width:560px){
  :root{ --topbar-h:66px; }
  body{ font-size:16px; }
  .hero::after{ display:none; }
  .brand-mark{ width:44px; height:44px; }
  .brand-name{ font-size:.9375rem; }
  .topbar-phone{ padding:9px 14px; font-size:.875rem; }
  .hero-inner{ padding-block:52px 46px; }
  .booking{ padding-block:36px 48px; }
  .card{ padding:24px 18px 28px; }
  .foot-inner{ grid-template-columns:1fr; gap:28px; }
}

/* ---------- GoRental360: blå i stedet for grøn ----------

   Widgeten samler det meste af sin accentfarve i variablen --gr-accent,
   men har ~12 grønne nuancer hårdkodet ved siden af. Vi sætter variablen
   og retter resten enkeltvis.

   To ting styrer, hvordan reglerne er skrevet:
   1. Widgetens <style> indsættes af widget.js EFTER vores style.css, så
      ens specificitet taber. Derfor er de hårdkodede rettelser præfikset
      med "html", og variablen sættes via #gr360-widget — begge dele vejer
      tungere end deres egne selektorer.
   2. Cookiebanner og datovælger hænges på <body>, altså uden for vores
      container. Der er --gr-accent slet ikke sat, og deres
      var(--gr-accent,#16a34a) falder derfor tilbage til grøn — med
      variablen på :root arver de blå i stedet.                          */

:root{ --gr-accent:var(--blue); }
#gr360-widget .gr360-widget{ --gr-accent:var(--blue); }

/* Kurv-baren (og alt andet, widget.js selv farvelægger) får accentfarven
   sat som inline style. En inline-erklæring slår enhver almindelig regel,
   så !important er eneste vej udenom. Selektoren rammer alt med
   --gr-accent i style-attributten, så nye steder også er dækket. */
[style*="--gr-accent"]{ --gr-accent:var(--blue) !important; }

/* Ledig-badge på produktkortene */
html .gr360-card-availbadge.green{
  background:var(--blue-tint);
  color:var(--blue-ink);
}
html .gr360-card-availbadge.green::before{ background:var(--blue); }

/* "10 produkter ledige i hele perioden" */
html .gr360-tb-status.success{ color:var(--blue); }

/* Ledighedskalenderen */
html .gr360-pcal-day.gr360-pcal-green{
  background:var(--blue-tint);
  color:var(--blue-ink);
}
html .gr360-pcal-day.gr360-pcal-inrange{
  background:rgba(var(--blue-rgb),.15) !important;
  color:var(--blue-ink) !important;
}
html .gr360-pcal-legend-dot.green{ background:var(--blue-mid); }

/* Valgt periode i kurv-/bestillingsflowet */
html .gr360-period-box{
  border-color:var(--blue-tint-strong);
  color:var(--blue-ink);
}
html .gr360-period-days,
html .gr360-period-edit{ color:var(--blue-deep); }

/* Kvitteringsikonet til sidst i forespørgslen */
html .gr360-success-icon{
  background:var(--blue-tint);
  color:var(--blue);
}

/* Widgetens mørke tema bruger vi ikke, men så er der ikke grønt tilbage. */
html .gr360-theme-dark .gr360-pcal-day.gr360-pcal-green{
  background:var(--blue-ink-deep);
  color:var(--blue-mid);
}
html .gr360-theme-dark .gr360-pcal-day.gr360-pcal-inrange{
  background:rgba(var(--blue-rgb),.25) !important;
  color:var(--blue-tint-strong) !important;
}

/* Gennemsigtige grønne nuancer — fokusringe, skygger og markeringer.
   De står som rgba() og fanges derfor ikke af --gr-accent. */

html .gr360-dp-day-in-range{ background:rgba(var(--blue-rgb),.12); }

html .gr360-card.gr360-selected{ box-shadow:0 0 0 4px rgba(var(--blue-rgb),.12); }
html .gr360-card-selected{ box-shadow:0 4px 12px rgba(var(--blue-rgb),.4); }

html .gr360-variant-select:focus{ box-shadow:0 0 0 3px rgba(var(--blue-rgb),.15); }
html .gr360-widget .gr360-card-qty-input:focus{
  box-shadow:0 0 0 3px rgba(var(--blue-rgb),.15) !important;
}
html .gr360-fg input:focus,
html .gr360-fg textarea:focus{ box-shadow:0 0 0 3px rgba(var(--blue-rgb),.12); }

html .gr360-pcal-book{ box-shadow:0 4px 12px rgba(var(--blue-rgb),.35) !important; }
html .gr360-progress-step.active .gr360-progress-num{
  box-shadow:0 0 0 4px rgba(var(--blue-rgb),.18);
}

/* Datochippen pulser grønt, indtil der er valgt en periode. Deres keyframes
   hedder gr360DatePulse og indsættes efter vores, så vi kan ikke overskrive
   den — vi peger chippen over på vores egen i stedet. */
@keyframes gr360-blue-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(var(--blue-rgb),.45); }
  50%    { box-shadow:0 0 0 8px rgba(var(--blue-rgb),0); }
}
html .gr360-tb-dates.empty{ animation-name:gr360-blue-pulse; }

/* Luk-krydset øverst til højre i widgetens pop-ups er fjernet efter ønske.
   Det gælder datovælgeren, ledighedskalenderen og forespørgselsformularen.
   Alle tre kan stadig lukkes med Escape eller ved at klikke uden for boksen,
   og datovælgeren har derudover sin egen Annullér-knap. */
html .gr360-dp-close,
html .gr360-pcal-close,
html .gr360-modal-close{ display:none !important; }