/* ============================================================
   DB Tiles & Bathrooms — global design tokens + base chrome
   Token values extracted from the source site (Elementor kit #6,
   snippet CSS, Astra settings). Single source of truth for brand.
   ============================================================ */

@font-face {
  font-family: 'Flenja';
  src: url('../fonts/flenja.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Carsons';
  src: url('../fonts/Carson-400.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colour tokens (source: Elementor kit system/custom colours) */
  --dbt-white: #FFFFFF;        /* primary */
  --dbt-porcelain: #DEDACF;    /* secondary — warm light */
  --dbt-body: #7A7A7A;         /* text */
  --dbt-accent: #406E8C;       /* brand accent (buttons, links, pills) */
  --dbt-taupe: #406E8C;        /* custom 1 — deep slate blue (was warm taupe #706456) */
  --dbt-ink: #222220;          /* custom 2 — near-black */
  --dbt-paper: #F7F5F1;        /* light section wash (from page sections) */
  --dbt-line: rgba(34,34,32,.12);
  --dbt-danger: #b5533c;

  /* Typography tokens */
  --dbt-font-display: 'Cinzel', Georgia, 'Times New Roman', serif;
  --dbt-font-menu: 'Sora', -apple-system, 'Segoe UI', system-ui, sans-serif;      /* headings */
  --dbt-font-serif: 'Carsons', Georgia, serif;                 /* editorial serif */
  --dbt-font-body: 'Petrona', Georgia, serif;
  --dbt-font-alt: 'Roboto', sans-serif;

  --dbt-fs-h1: clamp(2.2rem, 4.6vw, 3.6rem);
  --dbt-fs-h2: clamp(1.7rem, 3.2vw, 2.5rem);
  --dbt-fs-h3: clamp(1.25rem, 2vw, 1.6rem);
  --dbt-fs-body: 1rem;
  --dbt-lh-tight: 1.15;
  --dbt-lh-body: 1.7;
  --dbt-ls-wide: .14em;

  /* Layout tokens */
  --dbt-max: 1140px;
  --dbt-max-wide: 1400px;
  --dbt-gutter: clamp(1rem, 3vw, 2.5rem);
  --dbt-sec-pad: clamp(3.5rem, 8vh, 6.5rem);
  --dbt-gap: clamp(1rem, 2vw, 1.75rem);
  --dbt-radius: 4px;
  --dbt-radius-lg: 10px;
  --dbt-shadow: 0 10px 30px rgba(34,34,32,.08);
  --dbt-header-h: 104px; /* topbar 36 + nav 68 (deterministic; see menu.php) */

  /* Motion tokens */
  --dbt-ease: cubic-bezier(.22,.61,.36,1);
  --dbt-dur: .45s;
  --dbt-dur-slow: .8s;

  /* Z layers */
  --dbt-z-nav: 1000;
  --dbt-z-drawer: 1100;
  --dbt-z-modal: 1200;
}

/* ── Base ─────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }
body.dbt {
  margin: 0;
  font-family: var(--dbt-font-body);
  font-weight: 300;
  font-size: var(--dbt-fs-body);
  line-height: var(--dbt-lh-body);
  color: var(--dbt-body);
  background: var(--dbt-white);
  overflow-x: clip; /* full-bleed breakout clip lives on body, never inner wrappers */
}
body.dbt h1, body.dbt h2, body.dbt h3, body.dbt h4, body.dbt h5, body.dbt h6 {
  font-family: var(--dbt-font-display);
  font-weight: 400;                 /* light — Cinzel's lightest is 400 (no true 300) */
  color: var(--dbt-ink);
  line-height: var(--dbt-lh-tight);
  margin: 0 0 .6em;
}
/* Builder-section headings that render as a <div> (not an h-tag) still take Cinzel. */
body.dbt .hmg-section [class$="__h"], body.dbt .hmg-section [class$="__title"],
body.dbt .hmg-section [class$="__heading"] { font-family: var(--dbt-font-display) !important; }
body.dbt h1 { font-size: var(--dbt-fs-h1); }
body.dbt h2 { font-size: var(--dbt-fs-h2); }
body.dbt h3 { font-size: var(--dbt-fs-h3); }
body.dbt a { color: var(--dbt-accent); text-decoration: none; transition: color var(--dbt-dur) var(--dbt-ease); }
body.dbt a:hover { color: var(--dbt-taupe); }
body.dbt img { max-width: 100%; height: auto; }

.screen-reader-text {
  clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; width: 1px; overflow: hidden; position: absolute !important;
}
.skip-link:focus {
  clip: auto; clip-path: none; width: auto; height: auto;
  position: fixed; top: 8px; left: 8px; z-index: 100001;
  background: var(--dbt-ink); color: #fff; padding: .6rem 1rem; border-radius: 4px;
}
:focus-visible { outline: 2px solid var(--dbt-accent); outline-offset: 2px; }

/* ── Horizontal overflow: two causes, both measured ────────────────────
   ACCEPTANCE: document.scrollWidth === clientWidth on every page at
   360/390/430/768/1024/1280/1440/1920.

   1. THIS SITE HAS NO border-box RESET. A bare <div> here computes
      box-sizing:content-box. HMG Builder styles its sections
      `.hmg-page > :where(.hmg-section){width:100%;max-width:100%}` and its
      padding utilities add horizontal padding on the SAME element — so
      `.hmg-u-p6` (10px each side) made the homepage's product-grid section
      1440+10+10 = 1460 inside a 1440 viewport. Exactly +20px at every width,
      which is why the number never changed with the breakpoint.

      max-width:100% does not save it: under content-box that caps the CONTENT
      box, not the border box. border-box is plainly what those declarations
      assume, so it is set here rather than by hiding overflow on html/body —
      clipping would conceal the symptom and leave the section 20px too wide.
      Scoped to builder sections deliberately: a global `*{box-sizing}` reset on
      a site authored without one would reflow layouts far beyond this defect.
      Sections with no horizontal padding are unaffected (the two models agree
      when padding is 0). Verified: the product grid renders identically, it
      simply stops overhanging. */
.hmg-page > .hmg-section { box-sizing: border-box; }

/* 2. BUILDER ELEMENT OVERRIDES ARE AUTHORED IN FIXED PX AND CARRY NO MOBILE
      VALUE. The editor emits, for /about-us/:
        .hmg-u-p5 [data-hmg-field="heading"]{font-size:56px!important;
                                             letter-spacing:7.5px!important}
      "TESTIMONIALS" is a single unbreakable word: at 56px + 7.5px tracking it
      measures 498px and hung 108px outside a 390px viewport (68px at 430,
      138px at 360). The parent h2 was a well-behaved 27.2px the whole time,
      which is what makes this hard to spot — the override sits on the inner
      `.hmg-fmark` span, not on the heading element you would inspect.
      See the same trap in [[hmg-builder-layout-overrides-beat-package]].

      The durable fix is a mobile value on that override in the builder; this
      keeps the page usable until then. (0,3,0) + !important beats the
      generated (0,2,0) + !important. Only this one override overflows — the
      10px/15px/21px/40px overrides elsewhere all fit. */
@media (max-width: 600px) {
  .hmg-page .hmg-u-p5 [data-hmg-field="heading"] {
    font-size: clamp(24px, 8.4vw, 40px) !important;
    letter-spacing: .05em !important;
  }
}

/* ── Hero background video: keep the cover crop on phones ──────────────
   The package sizes the hero embed to cover: width:max(100vw,177.78vh),
   height:max(100vh,56.25vw) — a 16:9 box guaranteed to be at least as large as
   the viewport in both axes, then centred and cropped by the wrapper's
   overflow:hidden.

   HMG Builder ships a responsive guard, `.hmg-page :where(img,video,iframe)
   {max-width:100%}` inside `@media (max-width:600px)`, which is right for
   ordinary content images and wrong for a deliberately oversized cover layer.
   Below 600px it clamped the embed from its intended 1500px down to the
   container's 390px while the height stayed 844px, so the box turned PORTRAIT
   (0.46:1) and YouTube letterboxed the 16:9 film into a ~390x219 strip with
   dead space above and below it. Desktop never enters that media query, which
   is why this only ever looked broken on a phone. Measured on live 2026-08-27:
   390x844 before, 1500x844 after.

   `:where()` contributes no specificity, so the guard is (0,1,0) and this is
   (0,1,1) — it wins wherever it lands in the cascade, including after the
   package stylesheet, which loads after the theme's. */
.dbt-s-hero__video iframe,
.dbt-s-hero__video video { max-width: none; max-height: none; }

/* ── Buttons (global chrome buttons; section buttons live in package) ──
   Geometry matches the original dev site: compact flat rectangle, sentence
   case (the pill/uppercase treatment was a migration deviation). Hover = the
   approved animation: colour deepen + gentle lift, reduced-motion aware. */
.dbt-btn, body.dbt .button {
  display: inline-block;
  font-family: var(--dbt-font-body);
  font-weight: 500;
  font-size: .95rem;
  letter-spacing: normal;
  text-transform: none;
  padding: .72rem 1.55rem;
  background: var(--dbt-accent);
  color: #fff;
  border: 1px solid var(--dbt-accent);
  border-radius: 3px;
  cursor: pointer;
  transition: background var(--dbt-dur) var(--dbt-ease),
              color var(--dbt-dur) var(--dbt-ease),
              border-color var(--dbt-dur) var(--dbt-ease),
              transform var(--dbt-dur) var(--dbt-ease),
              box-shadow var(--dbt-dur) var(--dbt-ease);
}
.dbt-btn:hover, body.dbt .button:hover {
  background: var(--dbt-taupe);
  border-color: var(--dbt-taupe);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(34, 34, 32, .14);
}
.dbt-btn:active, body.dbt .button:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(34, 34, 32, .12);
}
.dbt-btn--ghost { background: transparent; color: var(--dbt-ink); border-color: var(--dbt-ink); }
.dbt-btn--ghost:hover { background: var(--dbt-ink); color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .dbt-btn:hover, body.dbt .button:hover { transform: none; box-shadow: none; }
}

/* ── Page shells ──────────────────────────────────────── */
.dbt-main { min-height: 40vh; }
/* HMG pages are full-bleed; sections manage their own clearance under the fixed nav. */
.dbt-hmg-page { width: 100%; }
/* Non-HMG chrome clearance: prose pages, Woo system pages */
.dbt-prose-page, .dbt-archive-shell { padding-top: calc(var(--dbt-header-h) + 1.5rem); }
.dbt-prose { max-width: 820px; margin: 0 auto; padding: 2.5rem var(--dbt-gutter) 4rem; }
.dbt-page-title { margin-top: .5em; }

/* ── Reduced motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Layout-built blog posts: the prose section's own column is redundant inside
   the article shell — let the article column govern width. */
.S-article-body .dbt-s-prose .dbt-wrap--narrow,
.S-article-body .dbt-s-prose .dbt-wrap { max-width: 100%; padding-left: 0; padding-right: 0; }