/* brand.css - D-TEC Dealerportaal brand slot (demo-local copy; theme-default ships this file empty).
 * Loaded after default_custom.css by DefaultHeadInclude.cshtml. Per-scheme palette, fonts and button shape live
 * in the GENERATED System/Styles pairs (group dtec, written by scripts/p3-styles.py through the MCP style tools).
 * This sheet only carries what that model cannot express. Source of truth: brand.tokens.json beside it.
 * Guards: no comment-close sequence in prose, no numeric-leading id selectors, keep the sentinel.
 */

/* The sentinel. Inert: nothing in a Swift document carries the attribute. */
[data-td-block="brand"] { --td-block: brand; }

/* 1. Brand tokens */
:root:root {
  --td-ink:          #1A1A1A;
  --td-ink-soft:     #003050;
  --td-slate:        #0F4A70;
  --td-slate-mid:    #4A5B66;
  --td-slate-light:  #C9CCC4;
  --td-grey-light:   #F4F4F1;
  --td-hairline:     #E8E8E2;
  --td-white:        #FFFFFF;
  --td-accent:       #006A94;                   /* dark cyan: 6.02:1 on white, 4.89:1 on #E8E8E2 */
  --td-accent-soft:  rgba(0, 173, 239, .10);
  --td-radius:       6px;
  --td-radius-sm:    4px;
  --td-shadow-soft:  0 1px 2px rgba(0, 48, 80, .06), 0 12px 28px -14px rgba(0, 48, 80, .22);
  --td-logo-h:       2.4rem;
  --td-logo-w-phone: 128px;
  --td-logo-w-laptop: 168px;
  --td-hero-max-h:   62vh;
  --dtec-cyan:   #00ADEF;
  --dtec-orange: #EC6607;
  --dtec-navy:   #003050;
  --dtec-panel:  #E8E8E2;
}

/* 2. Button ink on cyan fills. The generator derives --dw-color-button-primary-contrast itself and picks white on
 *    #00ADEF (2.55:1, fails AA). Navy on cyan is 5.34:1. Doubled attribute selector (0,2,0) beats the generated
 *    rule whatever the load order. Retire when the Style-asset model accepts a brand contrast ink. */
[data-dw-colorscheme="dark"][data-dw-colorscheme],
[data-dw-colorscheme="darksubtle"][data-dw-colorscheme] {
  --dw-color-button-primary-contrast: #003050;
}

/* 3. Brand rules: cyan rule under the header, orange rule over the footer (decorative, not text) */
header[data-swift-page-header] { border-bottom: 3px solid var(--dtec-cyan); }
footer[data-swift-page-footer], footer { border-top: 4px solid var(--dtec-orange); }

/* Links in running text on light schemes: dark cyan, AA on white and panel grey */
[data-dw-colorscheme="light"] main [data-swift-text] a:not(.btn),
[data-dw-colorscheme="lightgrey1"] main [data-swift-text] a:not(.btn),
[data-dw-colorscheme="lightgrey2"] main [data-swift-text] a:not(.btn) { color: var(--td-accent); }

/* 4. Home hero (the only poster on the site): headline in navy over the panel-grey trailer render; a short orange
 *    bar under the eyebrow. Below 992px the render stacks under the copy instead of sitting behind it. */
[data-swift-poster] [data-swift-text] .dw-h1 { color: var(--dtec-navy); }
[data-swift-poster] [data-swift-text] p:first-child { font-weight: 600; letter-spacing: .02em; }
[data-swift-poster] [data-swift-text] p:first-child::after {
  content: ""; display: block; width: 3rem; height: 4px; margin-top: .6rem; background: var(--dtec-orange);
}
@media (min-width: 992px) {
  [data-swift-poster] [data-swift-text] { max-width: 28rem; }
  /* Swift sizes height 4 at 85vh on desktop: the 2400x900 canvas then crops to a giant trailer behind the copy */
  [data-swift-poster-height="4"][data-swift-poster] { --swift-poster-height: 60vh; min-height: 60vh !important; }
  /* the render sits on the right of a 2400x900 canvas: anchor the cover crop right so the trailer stays whole */
  [data-swift-poster] > figure img { object-position: 100% 50% !important; }
}
@media (max-width: 991.98px) {
  [data-swift-poster] { min-height: 0 !important; align-content: start !important; }
  [data-swift-poster]::before { display: none !important; }   /* no scrim: the copy no longer sits on the image */
  [data-swift-poster] > figure {
    position: relative !important; inset: auto !important; order: 2; aspect-ratio: 4 / 3; height: auto !important;
  }
  [data-swift-poster] > figure img { object-position: 84% 50% !important; }
  [data-swift-poster] > [data-swift-container] { order: 1; padding-top: 2rem; padding-bottom: 1rem; }
}