/* ===========================================================================
   KDL Child — theme styles

   Scope is deliberately narrow: the page canvas, the header, the footer, the
   mobile navigation, the sticky mobile action, and the handful of things
   Elementor's controls cannot express (focus rings, reduced motion).

   It does NOT style page content. Headings, paragraphs, cards, buttons and
   accordions inside a page take their appearance from their own Elementor
   settings, so the client can change any of them in the panel. Adding
   page-content rules here would silently override the panel.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Brand tokens

   The single source of truth for the KDL palette and type. The page builder
   writes matching literal values into each Elementor widget, so a page still
   renders correctly if this stylesheet is ever missing.
   --------------------------------------------------------------------------- */
:root {
  /* Surfaces — five levels, so the site is never one flat black. */
  --kdl-canvas:         #0B0B0C;
  --kdl-surface:        #121214;
  --kdl-surface-2:      #17171A;
  --kdl-surface-3:      #1D1D21;
  --kdl-surface-4:      #25252A;

  /* Text. Muted is the dimmest permitted for type; anything dimmer is a
     border. All three clear WCAG AA on the canvas. */
  --kdl-text:           #F5F5F4;
  --kdl-text-secondary: #A9A9AF;
  --kdl-text-muted:     #86868F;

  --kdl-border:         #262629;
  --kdl-border-strong:  #34343A;

  /* Accent. 8.5:1 against the canvas in both directions. */
  --kdl-accent:         #C9A84C;
  --kdl-accent-hover:   #D9BC6A;
  --kdl-accent-press:   #B39239;
  --kdl-accent-soft:    rgba(201, 168, 76, .10);
  --kdl-accent-ink:     #0B0B0C;

  --kdl-font-display:   'Schibsted Grotesk', system-ui, sans-serif;
  --kdl-font-ui:        'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Layout */
  --kdl-shell:          1200px;
  --kdl-gutter:         32px;

  --kdl-radius-btn:     12px;
  --kdl-radius-card:    18px;

  --kdl-ease:           cubic-bezier(.22, 1, .36, 1);
}

/* ---------------------------------------------------------------------------
   2. Page canvas
   --------------------------------------------------------------------------- */
body {
  background: var(--kdl-canvas);
  color: var(--kdl-text-secondary);
  font-family: var(--kdl-font-ui);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Nothing on this site should ever scroll sideways. */
  overflow-x: hidden;
}

/* Hello Elementor's main region, once the skip link has given it an id. */
#content:focus,
#kdl-main:focus { outline: none; }

.kdl-shell {
  width: 100%;
  max-width: var(--kdl-shell);
  margin-inline: auto;
  padding-inline: var(--kdl-gutter);
}

/* Screen-reader-only text. */
.kdl-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
   3. Accessibility

   Focus is never removed. `:focus-visible` keeps the ring off mouse clicks
   while guaranteeing it for keyboard users.
   --------------------------------------------------------------------------- */
.kdl-skip {
  position: absolute;
  top: -120px;
  left: 16px;
  z-index: 300;
  padding: 12px 24px;
  border-radius: var(--kdl-radius-btn);
  background: var(--kdl-accent);
  color: var(--kdl-accent-ink);
  font-weight: 600;
  text-decoration: none;
  transition: top .15s ease-out;
}

.kdl-skip:focus { top: 16px; }

.kdl-header :focus-visible,
.kdl-footer :focus-visible,
.kdl-mobile-nav :focus-visible,
.kdl-sticky-cta :focus-visible,
.kdl-skip:focus-visible {
  outline: 2px solid var(--kdl-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------------------
   4. Buttons (chrome only — page buttons are Elementor's)
   --------------------------------------------------------------------------- */
.kdl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* 48px desktop, 52px on touch — see the mobile block below. */
  min-height: 48px;
  padding-inline: 26px;
  border: 0;
  border-radius: var(--kdl-radius-btn);
  font-family: var(--kdl-font-ui);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease-out, border-color .15s ease-out, transform .15s ease-out;
}

.kdl-btn--primary { background: var(--kdl-accent); color: var(--kdl-accent-ink); }
.kdl-btn--primary:hover { background: var(--kdl-accent-hover); transform: translateY(-1px); color: var(--kdl-accent-ink); }
.kdl-btn--primary:active { background: var(--kdl-accent-press); transform: none; }

.kdl-btn--secondary {
  background: transparent;
  color: var(--kdl-text);
  border: 1px solid var(--kdl-border-strong);
}

.kdl-btn--secondary:hover { border-color: var(--kdl-text-muted); background: var(--kdl-surface-2); color: var(--kdl-text); }
.kdl-btn--block { width: 100%; }

.kdl-link-quiet {
  color: var(--kdl-text-secondary);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: color .15s ease-out;
}

.kdl-link-quiet:hover { color: var(--kdl-text); }

/* ---------------------------------------------------------------------------
   5. Header
   --------------------------------------------------------------------------- */
.kdl-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11, 11, 12, .85);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--kdl-border);
}

/* Without backdrop-filter the translucent bar would let content show
   through illegibly, so fall back to a solid panel. */
@supports not (backdrop-filter: blur(1px)) {
  .kdl-header { background: var(--kdl-canvas); }
}

.kdl-header__inner {
  display: flex;
  align-items: center;
  gap: 40px;
  min-height: 76px;
}

.kdl-logo {
  display: inline-flex;
  align-items: center;
  font-family: var(--kdl-font-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--kdl-text);
  text-decoration: none;
  flex: none;
}

.kdl-logo__dot { color: var(--kdl-accent); }

/* An uploaded logo, via Site Identity. */
.custom-logo-link { display: inline-flex; align-items: center; flex: none; }
.custom-logo { max-height: 44px; width: auto; height: auto; }

.kdl-nav { margin-left: auto; }

.kdl-nav__list {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kdl-nav__list li { margin: 0; }

.kdl-nav__list a {
  font-size: 15px;
  font-weight: 500;
  color: var(--kdl-text-secondary);
  text-decoration: none;
  transition: color .15s ease-out;
}

.kdl-nav__list a:hover,
.kdl-nav__list .current-menu-item > a,
.kdl-nav__list .current_page_item > a {
  color: var(--kdl-text);
}

.kdl-header__actions { display: flex; align-items: center; gap: 20px; flex: none; }

.kdl-header__phone {
  font-size: 15px;
  font-weight: 600;
  color: var(--kdl-text);
  text-decoration: none;
  white-space: nowrap;
}

.kdl-header__phone:hover { color: var(--kdl-accent); }

/* ---------------------------------------------------------------------------
   6. Mobile navigation
   --------------------------------------------------------------------------- */
.kdl-burger {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  place-items: center;
  background: none;
  border: 0;
  color: var(--kdl-text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Hello Elementor, the Elementor kit and several optimisation plugins all
   style bare <button> elements, and at least one of them paints a background
   on :focus — which left the burger sitting on a coloured block from the
   moment it was first tapped until focus moved elsewhere. Every interaction
   state is pinned here so no outside rule can fill it. The gold focus ring is
   an outline, not a background, so it still shows for keyboard users. */
.kdl-burger:hover,
.kdl-burger:focus,
.kdl-burger:active,
.kdl-burger[aria-expanded="true"] {
  background: none;
  background-color: transparent;
  border: 0;
  box-shadow: none;
  color: var(--kdl-text);
}

.kdl-burger svg { width: 24px; height: 24px; }

/* A panel fixed to the viewport, pinned under the header.

   It used to be an ordinary block inside the sticky header, with
   `html.kdl-nav-open { overflow: hidden }` locking the page behind it. That
   pairing broke as soon as the page was scrolled: overflow:hidden on the ROOT
   element takes away the scrollport that position:sticky depends on, so the
   header — and this panel inside it — was painted at the top of the document,
   far above the viewport. The page stopped scrolling and the menu was nowhere
   to be seen.

   Taking the panel out of the flow removes that dependency. It hangs off the
   sticky header, so it follows the header wherever the page is scrolled to,
   and overscroll-behavior stops a flick inside the panel chaining to the page
   behind. No scroll lock is needed, so nothing touches the root overflow.

   It is `absolute` rather than `fixed`, and that is not interchangeable here.
   The header sets `backdrop-filter`, and backdrop-filter makes an element a
   containing block for fixed-position descendants — so `position: fixed` on
   this panel resolves against the 69px-tall header instead of the viewport,
   and `bottom: 0` collapses it to roughly 50px showing one menu item. Absolute
   resolves against the same header deliberately, which is exactly where the
   panel should hang from; the viewport only has to cap its height. */
.kdl-mobile-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 90;
  max-height: calc(100vh - var(--kdl-header-h, 72px));
  max-height: calc(100dvh - var(--kdl-header-h, 72px));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--kdl-border);
  background: var(--kdl-canvas);
  padding-block: 20px calc(28px + env(safe-area-inset-bottom, 0px));
}

.kdl-mobile-nav[hidden] { display: none; }

.kdl-mobile-nav .kdl-nav__list {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin-bottom: 20px;
}

.kdl-mobile-nav .kdl-nav__list a {
  display: block;
  /* Comfortably above the 44px touch-target minimum. */
  padding: 14px 0;
  font-size: 17px;
  color: var(--kdl-text);
  border-bottom: 1px solid var(--kdl-border);
}

.kdl-mobile-nav .kdl-btn + .kdl-btn { margin-top: 10px; }

.kdl-mobile-nav__phone {
  display: block;
  margin-top: 20px;
  font-size: 17px;
  font-weight: 600;
  color: var(--kdl-accent);
  text-align: center;
  text-decoration: none;
}

/* The panel carries its own Book Cleaning button, so the sticky bar would only
   sit on top of the panel saying the same thing twice. It comes back on close. */
html.kdl-nav-open .kdl-sticky-cta { display: none; }

/* ---------------------------------------------------------------------------
   7. Footer
   --------------------------------------------------------------------------- */
.kdl-footer {
  background: var(--kdl-canvas);
  border-top: 1px solid var(--kdl-border);
  padding-block: 72px 32px;
  margin-top: 0;
}

.kdl-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 48px;
}

.kdl-footer__tagline {
  margin: 14px 0 0;
  font-family: var(--kdl-font-display);
  font-size: 16px;
  color: var(--kdl-text-secondary);
}

.kdl-footer__blurb {
  margin: 12px 0 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--kdl-text-muted);
  max-width: 34ch;
}

.kdl-footer__heading {
  margin: 0 0 16px;
  font-family: var(--kdl-font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--kdl-text-muted);
}

.kdl-footer__list { margin: 0; padding: 0; list-style: none; }
.kdl-footer__list li + li { margin-top: 12px; }

.kdl-footer__list a {
  font-size: 15px;
  color: var(--kdl-text-secondary);
  text-decoration: none;
  transition: color .15s ease-out;
}

.kdl-footer__list a:hover { color: var(--kdl-accent); }

.kdl-footer__base {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--kdl-border);
  font-size: 13px;
  color: var(--kdl-text-muted);
}

.kdl-footer__base p { margin: 0; }
.kdl-footer__company { display: inline-block; margin-left: 8px; }

/* ---------------------------------------------------------------------------
   8. Sticky mobile action

   Hidden on desktop, where the header CTA is always visible. On a phone the
   header scrolls away, so one persistent action replaces it.
   --------------------------------------------------------------------------- */
.kdl-sticky-cta {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(11, 11, 12, .94);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--kdl-border);
}

.kdl-sticky-cta .kdl-btn { flex: 1; }

.kdl-sticky-cta__call {
  flex: none !important;
  width: 52px;
  padding-inline: 0;
}

.kdl-sticky-cta__call svg { width: 20px; height: 20px; }

/* ---------------------------------------------------------------------------
   9. Responsive
   --------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  :root { --kdl-gutter: 24px; }

  .kdl-nav,
  .kdl-header__actions { display: none; }

  .kdl-burger { display: grid; }

  .kdl-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .kdl-footer { padding-block: 56px 28px; }
}

@media (max-width: 767px) {
  :root { --kdl-gutter: 20px; }

  .kdl-header__inner { min-height: 68px; }

  /* Taller targets on touch. */
  .kdl-btn { min-height: 52px; }

  .kdl-footer__grid { grid-template-columns: 1fr; gap: 36px; }
  .kdl-footer__blurb { max-width: none; }

  .kdl-sticky-cta { display: flex; }

  /* Clear the sticky bar so it never covers the end of the footer. */
  body { padding-bottom: 80px; }
}

/* ---------------------------------------------------------------------------
   10. Motion

   Restrained by default, and off entirely when the visitor has asked for that.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .kdl-btn:hover { transform: none !important; }
}

/* ---------------------------------------------------------------------------
   11. Print
   --------------------------------------------------------------------------- */
@media print {
  .kdl-header,
  .kdl-footer,
  .kdl-sticky-cta,
  .kdl-mobile-nav,
  .kdl-skip { display: none !important; }

  body { background: #fff; color: #000; padding-bottom: 0; }
}

/* ---------------------------------------------------------------------------
   12. One structural helper for Elementor content

   The rest of this stylesheet deliberately leaves page content alone so that
   Elementor keeps full control of it. This single rule is an exception, and it
   is structural rather than cosmetic.

   Every cell in a built grid carries .kdl-cell. A flex item defaults to
   min-width:auto, which refuses to shrink below its own longest word. In a
   four-up row that becomes a problem once the row is narrow enough: the cells
   stop shrinking evenly and then push past their container, and because the
   page canvas clips horizontal overflow the excess simply disappears.

   At the breakpoints as shipped this rule changes nothing — measured at a
   960px content width, a four-up row is four equal 222px columns with or
   without it. It starts to matter below roughly 900px: at 760px the columns
   go uneven (154/190/154/190 against a correct 172 each), and at 560px the
   row overflows by about 70px. The shipped desktop row never gets that narrow,
   because Elementor's tablet breakpoint takes over at 1024px and wraps it.

   So this is insurance, and it is cheap: it is what keeps the columns equal if
   a grid is set to five or six across in Elementor, or if the site's
   responsive breakpoints are ever customised.
   --------------------------------------------------------------------------- */
.kdl-cell { min-width: 0; }