/* ============================================================
   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 — slate blue (was warm taupe #BAAE9E) */
  --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; }

/* ── 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; }