/* Krøyers Detailing — global CSS for Bricks.
   Bricks → Settings → Custom code → Custom CSS (or a child-theme stylesheet).
   All six pages are native Bricks elements now, styled via the 14 kd-*
   global classes (see bricks_global_classes, not this file). What's left
   here: body reset, @keyframes, responsive header swap, header/footer
   partial hover states, road/marquee positioning, and native form styling. */

/* ---- hero top spacing ----
   Round 4 §2a: one number governs the gap under the sticky header on every
   page's first section instead of each page guessing its own padding-top. */
:root { --kd-hero-top:132px; }              /* header ~92px + 10px offset + 30px air */
@media (max-width:1060px) { :root { --kd-hero-top:124px; } }
@media (max-width:640px)  { :root { --kd-hero-top:112px; } }

html { background:#EDF1F0; }
  body { margin:0; padding:0; background:transparent; }
  html, body { padding:0; }
  * { box-sizing:border-box; }
  a { color:#0F6B57; text-decoration:none; }
  a:hover { color:#0A5343; }
  ::selection { background:#0F6B57; color:#FFFFFF; }
  @keyframes marq { from { transform:translateX(0); } to { transform:translateX(-50%); } }
  @keyframes kdDrive {
    0%   { transform:translate(-50%,-50%) rotate(6deg) scale(1); opacity:0; }
    12%  { opacity:1; }
    50%  { transform:translate(-38%,140px) rotate(20deg) scale(1); opacity:1; }
    88%  { opacity:1; }
    100% { transform:translate(-6%,300px) rotate(38deg) scale(1); opacity:0; }
  }
  @media (prefers-reduced-motion:reduce) { .kd-van { animation:none !important; } }
  input, select, textarea { font-family:Manrope, sans-serif; }
  /* Defect round 5 (2.4): #kdHeader is now just a sticky positioning box
     (position + the fixed inset padding, in header.php); every visual
     property — padding, radius, shrink-on-scroll transitions — moved to
     .kd-header-card, the actual floating card, so tuning the sticky offset
     and tuning the card's look can never fight each other again. */
  .kd-header-card { padding:18px clamp(16px,2.4vw,24px) 18px clamp(18px,2.6vw,26px); border-radius:26px; transition:padding 260ms cubic-bezier(.4,0,.2,1), border-radius 260ms cubic-bezier(.4,0,.2,1); }
  .kd-header-card img { height:60px; transition:height 260ms cubic-bezier(.4,0,.2,1); }
  .kd-header-card [data-wordmark] { font-size:16px; transition:font-size 260ms cubic-bezier(.4,0,.2,1); }
  #kdHeader[data-shrunk="true"] .kd-header-card { padding:11px clamp(12px,2vw,16px) 11px clamp(14px,2vw,20px); border-radius:22px; }
  #kdHeader[data-shrunk="true"] .kd-header-card img { height:38px; }
  #kdHeader[data-shrunk="true"] .kd-header-card [data-wordmark] { font-size:13.5px; }
  @media (max-width:1060px) {
    .kd-header-card img { height:52px; }
    .kd-header-card [data-wordmark] { font-size:15px; }
  }
  @media (max-width:640px) {
    .kd-header-card img { height:46px; }
    .kd-header-card [data-wordmark] { font-size:14px; }
    #kdHeader[data-shrunk="true"] .kd-header-card img { height:36px; }
  }
  @media (prefers-reduced-motion:reduce) { .kd-header-card, .kd-header-card img, .kd-header-card [data-wordmark] { transition:none; } }
  @media (max-width:1000px) { .kd-roadlayer { display:none !important; } }
  @media (max-width:640px) {
    .kd-header-card { gap:10px !important; }
  }
  html, body { max-width:100%; overflow-x:clip; }
  [data-marquee] { max-width:100%; }

/* responsive header swap (was JS state in the design) */
.kd-wide{display:contents}
.kd-narrow{display:none}
.kd-lockup{display:contents}
.kd-phoneonly{display:none}
.kd-wordmarkwrap{display:contents}
.kd-menu{display:none}
.kd-menu[data-open="true"]{display:contents}
@media (max-width:1060px){ .kd-wide{display:none} .kd-narrow{display:contents} }
@media (max-width:640px){ .kd-lockup{display:none} .kd-phoneonly{display:contents} }
@media (max-width:359px){ .kd-wordmarkwrap{display:none} }
#kdHeader a{text-decoration:none}

/* Bricks native form, styled to match the glass system */
.kd-form .form-group{margin-bottom:14px}
.kd-form label{display:block;font:500 13px/1.3 'Instrument Sans',system-ui,sans-serif;letter-spacing:.01em;color:#e8ecf2;margin-bottom:6px}
.kd-form input,.kd-form textarea,.kd-form select{width:100%;box-sizing:border-box;padding:13px 15px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#fff;font:400 15px/1.4 'Instrument Sans',system-ui,sans-serif;backdrop-filter:blur(6px);transition:border-color .18s,background .18s}
.kd-form input::placeholder,.kd-form textarea::placeholder{color:rgba(255,255,255,.42)}
.kd-form input:focus,.kd-form textarea:focus,.kd-form select:focus{outline:none;border-color:rgba(214,40,40,.75);background:rgba(255,255,255,.09)}
.kd-form textarea{min-height:120px;resize:vertical}
.kd-form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.6) 50%),linear-gradient(135deg,rgba(255,255,255,.6) 50%,transparent 50%);background-position:calc(100% - 20px) center,calc(100% - 14px) center;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.kd-form button[type="submit"]{min-height:48px;padding:0 26px;border:none;border-radius:999px;background:#d62828;color:#fff;font:600 15px/1 'Instrument Sans',system-ui,sans-serif;cursor:pointer;transition:transform .16s,box-shadow .16s,background .16s}
.kd-form button[type="submit"]:hover{background:#e63232;transform:translateY(-1px);box-shadow:0 8px 24px rgba(214,40,40,.34)}
.kd-form .message{border-radius:12px;padding:12px 15px;font:400 14px/1.45 'Instrument Sans',system-ui,sans-serif}

/* Amelia booking, toned into the palette */
.amelia-app-booking{--am-c-primary:#d62828}
/* Popup width (2026-08-31): Amelia's own dialog uses Element Plus's
   --el-dialog-width CSS variable, scoped on .el-dialog itself
   (v3/public/assets/style.css: `.el-dialog{--el-dialog-width:50%;...}`) —
   default 50% of viewport. Same specificity, later in cascade (this file
   loads after Amelia's), so this wins without !important. */
.el-dialog{--el-dialog-width:60%;}
.kd-headerwrap,.kd-footerwrap{padding:0}

/* ---- header + footer partials (rendered by the child theme) ---- */
.kdh-nav:hover{background:rgba(255,255,255,0.75) !important;color:#0F1413 !important;box-shadow:0 1px 0 rgba(255,255,255,0.9) inset !important}
.kdh-navm:hover{background:rgba(255,255,255,0.9) !important}
.kdh-lang:hover{color:#0F1413 !important;background:rgba(255,255,255,0.8) !important}
.kdh-phone:hover{color:#0F6B57 !important}
.kdh-cta:hover{background:linear-gradient(180deg, #0E6351, #0A4E40) !important}
.kdh-burger:hover{background:rgba(255,255,255,0.9) !important}
.kdh-flink:hover{color:#0F1413 !important}

/* ---- layering (decor sits behind content; road layers position against the page) ---- */
.kd-passthrough{display:contents}
.kd-decor{position:fixed; inset:0; z-index:0; pointer-events:none}
.kd-decor > div{z-index:auto !important}
footer{position:relative; z-index:1}

/* ---- road + van need a page-height containing block ---- */
/* Bricks wraps front-end content in #brx-content; without position:relative the
   road layers resolve their top/bottom against the viewport, collapse to one
   screen and hide behind the wrapper's background. */
#brx-content{position:relative; z-index:1; background:transparent}
#kdHeader{z-index:50}
.kd-roadlayer{z-index:0}

/* ---- inherited text colour ----
   Code-element pages don't set a heading colour, so they inherited Bricks'
   default grey while native pages (kd-h1/h2/h3) were correct. Pin it. */
#brx-content h1, #brx-content h2, #brx-content h3, #brx-content h4 { color:#0F1413; }
#brx-content { color:#4E5A56; }

/* ---- full-bleed layout ----
   The design has NO content max-width: every section is fluid, edge-to-edge,
   with only its own horizontal padding (clamp(16px,4vw,32px)). Bricks caps
   .brxe-container at a hardcoded 1100px and kd-shell added a 1320px cap on top,
   which left the hero in a narrow centred column while the header and marquee
   (theme partials, unaffected) ran to the edges. Remove both caps.

   Defect round 5: this used to be scoped `#brx-content .brxe-container` etc.
   That ID+class prefix was never needed to beat Bricks' own (plain-class)
   `.brxe-container{width:1100px}` — kroyers-global.css already loads after
   bricks-frontend-css, so equal specificity + load order was always enough.
   What the `#brx-content` prefix actually did was out-specificity every
   per-element override: a bare `#brxe-{id}` rule (any element's own
   `_cssCustom`, or the `_width`/`_widthMax` structured controls kd_row()/
   kd_col() stamp by default) has LOWER specificity than `#brx-content
   .brxe-container` (1 ID + 1 class beats 1 ID + 0 classes), so it always won
   regardless of what any individual element tried to do. That's the actual
   root cause behind three separate "this box won't shrink to its content"
   defects (round 4's ANBEFALET badge, round 5's hero kicker/trust chips/
   image-frame stamp) — plain class selectors here fix all of them at once,
   because a per-element ID rule now finally outranks this one either way. */
/* Round 5 (2.1): Bricks' own `.brxe-container` rule ALSO sets
   `margin-left:auto; margin-right:auto` (same rule that sets width:1100px —
   see the comment above). That was invisible everywhere an element is
   already 100% width (an element with zero spare width has nothing for
   margin:auto to center), so it went unnoticed until an element with a
   smaller max-width than its available track (Forside's 660px hero copy
   column) made it very visible: ~270px of unwanted auto-centering. Same
   family of bug as the width trap above, same fix location — reset it here
   sitewide rather than per-element, so this can't recur the way the width
   trap did across three separate defect rounds. */
.brxe-container,
.brxe-section,
.brxe-block,
.brxe-div { width:100%; max-width:100%; margin-inline:0; }
.kd-shell { width:100%; max-width:100%; margin-inline:0; }

/* ---- mobile defects at 360px ----
   Keyed off data attributes rather than classes so they survive the native
   rebuild regardless of which element/class ends up carrying them. */
@media (max-width:640px) {
  /* !important: the pill is built with a per-element `_display:inline-flex`
     control, which Bricks compiles to `#brxe-{id}{display:inline-flex}` — an
     ID-specificity rule this plain attribute selector can't otherwise beat,
     media query or not. */
  [data-work-shot] { height:min(550px,63vh); }
  [data-work-shot] img { object-fit:cover !important; }
  [data-hero-kicker] { display:flex !important; width:100%; justify-content:center; }
  [data-recommended] { margin-top:16px; }
  [data-work-shot]   { min-height:0 !important; aspect-ratio:4/5; }
}