/* ══════════════════════════════════════════════════════════════════════
   Guides layout (2026-10-11, Velogics). Blog posts, how-to guides and the
   four answer guides. Mohamed: "all guides in our websites, be more
   efficient in space they are all narrow with so much empty space".

   One frame for the whole page (the site frame, 1320px, the width the
   homepage uses): the hero, the article and its rail, the closing CTA and
   the related cards all share its two edges. The article fills the left
   column; the rail beside it holds "On this page" and the contact card and
   stays in view while the article scrolls. The markup is added by
   scripts/guide_layout.mjs. Loaded last in <head>, so it wins over each
   page's own <style> at equal specificity.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --g-frame:1320px;
  --g-pad:clamp(20px,4vw,48px);
  --g-edge:max(var(--g-pad), calc((100% - var(--g-frame)) / 2 + var(--g-pad)));
  --g-inner:calc(var(--g-frame) - 2 * var(--g-pad));
}
/* overflow-x:hidden on <body> makes it a scroll container, which stops a
   sticky rail from sticking. clip trims the same overflow without that. */
body, html[dir="rtl"] body{ overflow-x:clip; }

/* ── Hero: same title, dek, meta and photo, one notch more compact ─────── */
.bp-hero, .ht-hero{
  padding:44px var(--g-edge) 40px;
  text-align:start;
}
.bp-hero-inner, .ht-hero-inner{ max-width:900px; margin:0; }
.bp-h1{ font-size:clamp(32px,3.6vw,50px); }
.ht-h1{ font-size:clamp(30px,3.4vw,48px); }
.bp-preview-desc, .ht-preview-desc{ margin:14px 0 4px; max-width:720px; }
.ht-meta{ justify-content:flex-start; }
.bp-hero--preview .bp-cat::after, .ht-hero--preview .ht-eyebrow::after{ margin-inline:0 auto; }
/* a blog post's cover photo sits beside the title instead of under it */
/* styles.css forces header[class$="-hero"] to display:block !important */
header.bp-hero.bp-hero:has(> .bp-cover){
  display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:56px; align-items:center;
}
.bp-hero > .bp-cover{ max-width:none; margin:0; padding:0; }
.bp-hero > .bp-cover img{ width:100%; height:auto; aspect-ratio:1376 / 768; object-fit:cover; }
.bp-back, .ht-back{ max-width:var(--g-frame); margin:0 auto; padding:18px var(--g-pad) 0; }

/* ── The article and its rail ──────────────────────────────────────────── */
.dtr-guide{
  max-width:var(--g-frame); margin:0 auto; padding:0 var(--g-pad);
  display:grid; grid-template-columns:minmax(0,1fr) clamp(280px,26%,360px);
  column-gap:64px;
}
.dtr-guide > .bp-article, .dtr-guide > .ht-article, .dtr-guide > .aa-body-inner{
  max-width:none; margin:0; padding:32px 0 56px; min-width:0;
}
/* body copy sized for the wider column: 70-100 characters a line */
.dtr-guide .bp-article p, .dtr-guide .bp-article ul, .dtr-guide .bp-article ol,
.dtr-guide .ht-article p, .dtr-guide .ht-article ul, .dtr-guide .ht-article ol{ font-size:19px; line-height:1.7; }
.dtr-guide .bp-article h2{ font-size:34px; margin:52px 0 18px; }
.dtr-guide .ht-article h2{ font-size:32px; margin:52px 0 18px; }
.dtr-guide .bp-article > h2:first-child, .dtr-guide .ht-article > h2:first-child{ margin-top:8px; }
.dtr-guide .bp-callout p, .dtr-guide .ht-callout p, .dtr-guide .ht-mistakes ul{ font-size:17.5px; }
.dtr-guide .ht-step-block p, .dtr-guide .ht-step-block ul, .dtr-guide .ht-step-block ol{ font-size:18px; }
.dtr-guide .bp-faq .bp-faq-body p, .dtr-guide .ht-faq .ht-faq-body, .dtr-guide .ht-faq .ht-faq-body p{ font-size:18px; }
.dtr-guide .ht-tools-list ul{ font-size:16px; }
.dtr-guide .bp-article table, .dtr-guide .ht-article table{ width:100%; }
/* Short paragraphs (2026-10-12): scripts/split_paragraphs.py cuts a paragraph over 70 words at its
   sentence ends. A blog FAQ answer and a blog callout set their paragraphs to margin:0, written for
   one paragraph each, so the next paragraph gets the gap the how-to FAQ (12px) and the how-to
   callout (10px) already put between theirs. */
.bp-faq .bp-faq-body p + p{ margin-top:12px; }
.bp-callout p + p{ margin-top:10px; }

.dtr-guide-rail{ min-width:0; }
.dtr-guide-rail-in{
  position:sticky; top:74px;
  padding:36px 0 32px;
  display:flex; flex-direction:column; gap:18px;
}
.dtr-guide--aa .dtr-guide-rail-in{ top:96px; }

/* On this page. The list scrolls inside the rail and stops about 180px above the bottom of the
   screen, so the chat bubble and its greeting (bottom right) never sit on top of its links. */
.dtr-toc{ border-inline-start:2px solid rgba(184,135,35,.4); padding-inline-start:18px; }
.dtr-toc > summary{
  list-style:none; display:block;
  font:700 11px/1.3 'DM Sans',sans-serif; letter-spacing:.2em; text-transform:uppercase;
  color:#7d5a14; padding:2px 0 10px;
}
.dtr-toc > summary::-webkit-details-marker{ display:none; }
.dtr-toc ol{
  list-style:none; margin:0; padding:0;
  max-height:max(140px, calc(100vh - 500px)); overflow:auto; overscroll-behavior:contain; scrollbar-width:thin;
}
.dtr-toc li{ margin:0; }
/* Up to ~1400px wide the rail reaches the corner where the chat bubble sits; end the list's links
   short of it so the bubble never covers one. */
@media (min-width:1024px) and (max-width:1399px){ .dtr-toc ol{ padding-inline-end:56px; } }
.dtr-toc a{
  display:block; padding:6px 0;
  font:500 14px/1.45 'DM Sans',sans-serif; color:#3f4a56; text-decoration:none;
}
.dtr-toc a em{ font-style:normal; }
.dtr-toc a:hover, .dtr-toc a:focus-visible{ color:#7d5a14; }
@media (min-width:1024px){
  .dtr-toc > summary{ pointer-events:none; }
  .dtr-toc::details-content{ content-visibility:visible; }
}

/* Contact card: the page's own phone number and call to action */
.dtr-guide-card{
  background:#fff; border:1px solid rgba(10,15,20,.08); border-top:3px solid #b88723;
  border-radius:14px; padding:18px 22px 22px; box-shadow:0 10px 30px rgba(10,15,20,.06);
}
.dtr-guide-tel{
  display:flex; align-items:center; gap:10px;
  font-family:'Cormorant Garamond',Georgia,serif; font-size:26px; font-weight:500; line-height:1.25;
  color:#0a0f14; text-decoration:none; min-height:44px;
}
.dtr-guide-tel svg{ width:20px; height:20px; flex:none; color:#b88723; }
.dtr-guide-tel:hover{ color:#7d5a14; }
/* dtr-rtl.css makes every tel: link inline-block; keep the icon beside the number */
html[dir="rtl"] .dtr-guide-card a.dtr-guide-tel{ display:flex; justify-content:flex-end; }
.dtr-guide-cta{
  display:flex; align-items:center; justify-content:center; text-align:center;
  margin-top:12px; padding:13px 18px; min-height:46px; border-radius:999px;
  background:#b88723; color:#0a0f14; text-decoration:none;
  font:600 13px/1.3 'DM Sans',sans-serif; letter-spacing:.04em; transition:background .2s;
}
.dtr-guide-cta:hover{ background:#e0b862; }

/* ── After the article: CTA and related cards span the frame ───────────── */
.bp-cta{ max-width:none; margin:8px var(--g-edge) 64px; }
.bp-related, .ht-related{ padding-left:var(--g-pad); padding-right:var(--g-pad); }
.bp-related{ padding-top:64px; padding-bottom:72px; }
.bp-related-inner, .ht-related-inner{ max-width:var(--g-inner); }

/* ── Answer guides (renovate vs move, choosing a contractor, ...) ──────── */
/* These pages keep their own <style> in <body>, after this file, and dtr-layout.css frames
   .aa-body-inner with !important; hence the longer selectors. */
html body section.aa-hero.dtr-photo-hero.dtr-photo-hero.dtr-photo-hero:not(#dtr-x):not(#dtr-g){
  min-height:0 !important; padding:52px 0 44px !important;
}
html body .aa-body{ padding:8px 0 56px; }
html body .dtr-guide > .aa-body-inner.aa-body-inner{
  max-width:none !important; width:auto !important; margin:0 !important;
  padding:40px 0 16px !important;
}
html body .dtr-guide .aa-p{ font-size:19px; line-height:1.7; }
html body .dtr-guide :is(.aa-check,.aa-flags,.aa-qlist) li{ font-size:17px; }
html body .dtr-guide .aa-faq-a, html body .dtr-guide .aa-faq summary{ font-size:17px; }
html body .dtr-guide .aa-section{ margin-bottom:60px; }
html body .dtr-guide .aa-section:last-child{ margin-bottom:0; }
.dtr-guide--aa .dtr-guide-rail-in{ padding-top:40px; }

/* The floating "Free Quote" pill sat over the rail; on a desktop the rail's card carries the same
   link and stays in view, so the pill shows only where there is no rail. */
@media (min-width:1024px){ .bp-sticky{ display:none; } }

/* ── Dark theme ─────────────────────────────────────────────────────────── */
html.dtr-dark .dtr-toc > summary{ color:#e0b862; }
html.dtr-dark .dtr-toc a{ color:#c2c9d2 !important; -webkit-text-fill-color:#c2c9d2 !important; }
html.dtr-dark .dtr-toc a:hover{ color:#e0b862 !important; -webkit-text-fill-color:#e0b862 !important; }
html.dtr-dark .dtr-guide-card{ background:#121a24; border-color:rgba(255,255,255,.09); border-top-color:#b88723; box-shadow:none; }
html.dtr-dark .dtr-guide-tel{ color:#eef1f4 !important; -webkit-text-fill-color:#eef1f4 !important; }
html.dtr-dark .dtr-guide-cta{ color:#14181d !important; -webkit-text-fill-color:#14181d !important; }

/* ── Phones and small tablets: one column ──────────────────────────────── */
@media (max-width:1023px){
  .bp-hero, .ht-hero{ padding:32px var(--g-pad) 32px; }
  header.bp-hero.bp-hero:has(> .bp-cover){ display:block !important; }
  .bp-hero > .bp-cover{ margin-top:24px; }
  .dtr-guide{ display:flex; flex-direction:column; }
  .dtr-guide-rail, .dtr-guide-rail-in{ display:contents; }
  /* "On this page" sits under the title, closed; the card follows the article */
  .dtr-toc{
    order:-1; margin:20px 0 0; padding:0;
    border:1px solid rgba(184,135,35,.4); border-radius:12px; background:#fff;
  }
  html.dtr-dark .dtr-toc{ background:#121a24; }
  .dtr-toc > summary{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px; min-height:48px; cursor:pointer;
  }
  .dtr-toc > summary::after{ content:"+"; font-size:20px; font-weight:400; letter-spacing:0; line-height:1; }
  .dtr-toc[open] > summary::after{ content:"\2212"; }
  .dtr-toc ol{ max-height:none; padding:0 16px 10px; }
  .dtr-toc a{ padding:9px 0; font-size:15px; }
  .dtr-guide > .bp-article, .dtr-guide > .ht-article{ padding:24px 0 40px; }
  html body .dtr-guide > .aa-body-inner.aa-body-inner{ padding:24px 0 8px !important; }
  .dtr-guide-card{ margin:0 0 36px; }
  .dtr-guide .bp-article p, .dtr-guide .bp-article ul, .dtr-guide .bp-article ol,
  .dtr-guide .ht-article p, .dtr-guide .ht-article ul, .dtr-guide .ht-article ol, html body .dtr-guide .aa-p{ font-size:17px; line-height:1.72; }
  .dtr-guide .bp-article h2, .dtr-guide .ht-article h2{ font-size:28px; margin:40px 0 14px; }
  .dtr-guide .ht-step-block p, .dtr-guide .ht-step-block ul, .dtr-guide .ht-step-block ol,
  .dtr-guide .bp-faq .bp-faq-body p, .dtr-guide .ht-faq .ht-faq-body, .dtr-guide .ht-faq .ht-faq-body p{ font-size:16px; }
  .dtr-guide .bp-callout p, .dtr-guide .ht-callout p, .dtr-guide .ht-mistakes ul,
  html body .dtr-guide :is(.aa-check,.aa-flags,.aa-qlist) li, html body .dtr-guide .aa-faq-a, html body .dtr-guide .aa-faq summary{ font-size:15.5px; }
  .bp-cta{ margin:8px var(--g-pad) 48px; }
  html body section.aa-hero.dtr-photo-hero.dtr-photo-hero.dtr-photo-hero:not(#dtr-x):not(#dtr-g){ padding:36px 0 32px !important; }
}