/*
  File: css/guides.css
  Purpose: Page styles for the /guides library — the hub (Views/public/guides/
           index.php: intro column, the numbered six-pillar card grid, the
           permits companion card with its city chips, the "how these are
           written" / "where to start" columns, closing line, soft CTA band),
           the pillar article (Views/public/guides/pillar.php: reading column
           with a sticky "On this page" sidebar, the "In short" callout, H2
           sections with anchors, guide-table, citation superscripts, FAQ
           disclosures, the iSpec practice note, numbered sources, companion
           cards) and the permits companion + city pages (guides/permits.php,
           guides/permits_city.php: city-card grid, sibling nav, footnote).
           The photo hero above every guides page is the layout's
           .banner3[data-hero="tall"] band (css/main.css); this file only swaps
           the band photo via [data-page^="guide"]. Motion = the shared
           [data-reveal] scroll reveal (css/site-shell.css + js/site-reveal.js).
           Loaded through layouts/public's renderSection('head') after
           bootstrap-4.4.1.css, main.css and site-shell.css, so every rule
           restates font/size/spacing and every class is prefixed guide-.
           Design tokens (--band, --teal, --line, --display, --serif …) come
           from css/site-shell.css.
  Used by: Views/public/guides/{index,pillar,permits,permits_city}.php
*/

/* ── hero photo (the layout's .wrapper2 band; hub + every guide page) ──
   hero-guides.jpg = hands over drawings + house models (images/architect-1920.jpg,
   re-cut 2026-09-13; the finish-samples cut it replaced came from images/design.jpg). */
.wrapper2[data-page="guides"],
.wrapper2[data-page^="guide-"] {
  background-image: url(../images/home/hero-guides.jpg);
  background-attachment: scroll;
  background-position: center 50%;
}

/* the hub (/guides) gets its own photo (owner: "there are better images"):
   hero-guides-hub.jpg = rolled blueprints + pen (images/architecture-8098404_1920.jpg,
   16:9 cut, 2026-09-13). The pillars keep hero-guides.jpg above. */
.wrapper2[data-page="guides"] {
  background-image: url(../images/home/hero-guides-hub.jpg);
  background-position: center 50%;
}

/* the two design articles get the colour photo instead (owner's pick):
   hero-design.jpg = paint tubes, nudekarma stock library
   (devindex hero/provaaprendermi1976-paint-6696240_1920.jpg), 16:9 cut, added 2026-09-13.
   Any further design-topic guide: add its data-page here. */
.wrapper2[data-page="guide-design-consultation"],
.wrapper2[data-page="guide-choosing-by-feeling"] {
  background-image: url(../images/home/hero-design.jpg);
  background-position: center 50%;
}

/* ── page frame ───────────────────────────────────────── */
.guide-page {
  overflow-x: clip;
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink-soft);
  padding-bottom: clamp(4rem, 8vw, 6.5rem);
}

.guide-page p {
  text-indent: 0;
  margin: 0 0 1.1rem;
}

.guide-page h2 {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 1rem;
}

.guide-page h3 {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 1.6rem 0 .6rem;
}

.guide-rule {
  width: 72px;
  height: 3px;
  border: 0;
  background: var(--teal);
  margin: 0 0 1.3rem;
}

.guide-eyebrow {
  font-family: var(--display);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin: 0 0 .9rem;
}

.guide-wrap {
  width: min(1180px, 92vw);
  margin-inline: auto;
}

.guide-page a.a2 {
  color: var(--teal-deep);
}

/* arrow link shared by cards */
.guide-link {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--teal-deep);
  padding: .5rem 0;
  border-bottom: 1.5px solid rgba(42, 139, 130, .35);
  transition: border-color .25s var(--ease), color .25s var(--ease);
}

.guide-link svg {
  width: 14px;
  height: 14px;
  transition: transform .25s var(--ease);
}

.guide-link:hover,
.guide-link:focus {
  color: var(--teal-deep);
  border-bottom-color: var(--teal-deep);
  text-decoration: none;
}

.guide-link:hover svg {
  transform: translateX(3px);
}

/* ── hub: intro ───────────────────────────────────────── */
.guide-intro {
  max-width: 800px;
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 4.5rem) 1.25rem 0;
  text-align: center;
}

.guide-intro .guide-rule {
  margin-inline: auto;
}

/* ── hub: the nine pillar cards ───────────────────────── */
.guide-grid {
  width: min(1180px, 92vw);
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

.guide-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem 1.75rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--teal);
  border-radius: 8px;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}

.guide-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 34px 60px -30px rgba(15, 26, 25, .45);
}

.guide-card-number {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--teal);
  margin: 0 0 .8rem;
}

.guide-card .guide-eyebrow {
  margin-bottom: .5rem;
}

.guide-card h3 {
  margin: 0 0 .7rem;
  font-size: 1.3rem;
}

.guide-card h3 a {
  color: inherit;
  text-decoration: none;
}

.guide-card h3 a:hover,
.guide-card h3 a:focus {
  color: var(--teal-deep);
  text-decoration: none;
}

.guide-card p {
  flex: 1;
  font-size: .97rem;
  line-height: 1.65;
  color: var(--muted);
  margin-bottom: 1.2rem;
}

.guide-card .guide-link {
  align-self: flex-start;
}

/* ── hub: permits companion card (wide, dark) ─────────── */
.guide-companion {
  width: min(1180px, 92vw);
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: 8px;
  background: var(--band);
  color: rgba(255, 255, 255, .85);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

.guide-companion h2 {
  color: #fff;
}

.guide-companion .guide-eyebrow {
  color: var(--teal);
}

.guide-companion p {
  color: rgba(255, 255, 255, .85);
}

.guide-companion .guide-link {
  color: var(--teal);
  border-bottom-color: rgba(87, 193, 182, .4);
}

.guide-companion .guide-link:hover,
.guide-companion .guide-link:focus {
  color: var(--teal-bright);
  border-bottom-color: var(--teal-bright);
}

.guide-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.guide-chips a {
  display: inline-block;
  padding: .55rem .95rem;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, .3);
  color: rgba(255, 255, 255, .88);
  font-family: var(--display);
  font-weight: 600;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}

.guide-chips a:hover,
.guide-chips a:focus {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--band);
  text-decoration: none;
}

/* ── hub: how written / where to start ────────────────── */
.guide-how,
.guide-start-wrap {
  width: min(1180px, 92vw);
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
}

.guide-how h2,
.guide-start-wrap h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
}

.guide-how-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

.guide-how-label {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  margin-bottom: .5rem;
}

.guide-how-grid p {
  margin: 0;
}

.guide-start {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 1.75rem) 1.5rem;
}

.guide-start li {
  padding-left: 1rem;
  border-left: 3px solid var(--teal);
}

.guide-start b {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
}

.guide-page .guide-closing {
  width: min(800px, 92vw);
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  text-align: center;
  font-style: italic;
  color: var(--muted);
}

/* ── soft CTA band (hub foot + article foot) ──────────── */
.guide-cta {
  width: min(1180px, 92vw);
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  padding: 2.5rem 1.75rem;
  border-radius: 8px;
  background: var(--band);
  color: rgba(255, 255, 255, .82);
  text-align: center;
}

.guide-cta h2 {
  color: #fff;
  margin-bottom: .6rem;
}

.guide-cta p {
  max-width: 640px;
  margin: 0 auto 1.4rem;
  color: rgba(255, 255, 255, .82);
}

.guide-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
}

.guide-cta-primary,
.guide-cta-secondary {
  display: inline-block;
  padding: .75rem 1.5rem;
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
}

.guide-cta .guide-cta-primary {
  background: var(--teal);
  border: 1px solid var(--teal);
  color: var(--band);
}

.guide-cta .guide-cta-primary:hover,
.guide-cta .guide-cta-primary:focus {
  background: var(--teal-bright);
  border-color: var(--teal-bright);
  color: var(--band);
  text-decoration: none;
}

.guide-cta .guide-cta-secondary {
  background: none;
  border: 1px solid rgba(255, 255, 255, .35);
  color: rgba(255, 255, 255, .85);
}

.guide-cta .guide-cta-secondary:hover,
.guide-cta .guide-cta-secondary:focus {
  border-color: var(--teal);
  color: #fff;
  text-decoration: none;
}

/* ── article layout: reading column + sticky TOC ──────── */
.guide-layout {
  width: min(1180px, 92vw);
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.guide-article {
  max-width: 780px;
  min-width: 0;
}

.guide-article h2 {
  margin-top: 2.75rem;
  scroll-margin-top: 90px;
}

.guide-article section:first-of-type h2 {
  margin-top: 0;
}

.guide-meta {
  font-family: var(--display);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.4rem;
}

.guide-meta span + span::before {
  content: "·";
  margin: 0 .6rem;
  color: var(--teal);
}

/* the answer-first callout (snippet target) */
.guide-inshort {
  margin: 0 0 2rem;
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--teal);
  background: var(--teal-tint);
  border-radius: 0 8px 8px 0;
}

.guide-inshort-label {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin-bottom: .4rem;
}

.guide-inshort p {
  margin: 0;
  font-size: 1.05rem;
  color: var(--ink);
}

.guide-article ul,
.guide-article ol {
  margin: 0 0 1.2rem;
  padding-left: 1.4rem;
}

.guide-article li {
  margin-bottom: .45rem;
}

.guide-article strong {
  color: var(--ink);
}

.guide-article table.guide-table {
  width: 100%;
  border-collapse: collapse;
  margin: .5rem 0 1.6rem;
  font-size: .95rem;
  line-height: 1.5;
}

.guide-article .guide-table th,
.guide-article .guide-table td {
  padding: .65rem .8rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.guide-article .guide-table th {
  font-family: var(--display);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--ground);
}

.guide-table-wrap {
  overflow-x: auto;
}

/* in-copy links: main.css paints bare <a> white, so every plain link inside
   the article gets the site's copy-link look (teal, thin underline). Cites,
   cards, arrow links and the sources list keep their own treatment below. */
.guide-article p a,
.guide-article li a,
.guide-article td a,
.guide-article th a,
.guide-inshort a,
.guide-note a,
.guide-closing-line a,
.guide-faq p a {
  color: var(--teal-deep);
  text-decoration: underline;
  text-decoration-color: rgba(42, 139, 130, .35);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color .2s;
}

.guide-article p a:hover,
.guide-article li a:hover,
.guide-article td a:hover,
.guide-inshort a:hover,
.guide-note a:hover,
.guide-closing-line a:hover,
.guide-faq p a:hover {
  color: var(--teal-deep);
  text-decoration-color: var(--teal-deep);
}

.guide-article p a.a2,
.guide-article li a.a2,
.guide-article td a.a2 {
  text-decoration-style: dotted;   /* glossary terms: dotted = "has a tooltip" */
}

.guide-article .guide-cite a,
.guide-article .guide-card h3 a,
.guide-article .guide-link,
.guide-article .guide-cta a,
.guide-article .guide-city-card,
.guide-article .guide-chips a,
.guide-article .guide-crumb a {
  text-decoration: none;
}

/* citation superscripts */
.guide-cite {
  font-family: var(--display);
  font-size: .68em;
  line-height: 0;
  vertical-align: super;
}

.guide-cite a {
  color: var(--teal-deep);
  text-decoration: none;
  padding: 0 .1em;
}

.guide-cite a:hover,
.guide-cite a:focus {
  text-decoration: underline;
}

/* FAQ disclosures */
.guide-faq {
  border-bottom: 1px solid var(--line);
  padding: .2rem 0;
}

.guide-faq summary {
  display: list-item;
  cursor: pointer;
  list-style: disclosure-closed;
  margin-left: 1.1rem;
  padding: .85rem 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink);
}

.guide-faq[open] summary {
  list-style: disclosure-open;
  color: var(--teal-deep);
}

.guide-faq p {
  margin: 0 0 1rem;
  padding-left: 1.1rem;
}

/* iSpec practice note */
.guide-note {
  margin: 2.5rem 0 0;
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal-deep);
  border-radius: 0 8px 8px 0;
  background: var(--ground);
}

.guide-note-label {
  font-family: var(--display);
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin: 0 0 .5rem;
}

.guide-note p:last-child {
  margin-bottom: 0;
}

.guide-closing-line {
  margin-top: 2rem;
  color: var(--muted);
}

/* sources */
.guide-sources {
  font-size: .92rem;
  line-height: 1.55;
  padding-left: 1.6rem;
}

.guide-sources li {
  margin-bottom: .6rem;
  scroll-margin-top: 90px;
}

.guide-sources a {
  color: var(--teal-deep);
  word-break: break-word;
}

.guide-source-note {
  display: block;
  color: var(--muted);
  font-size: .85rem;
}

/* companion guide cards under the article */
.guide-related {
  margin-top: 3rem;
}

.guide-related ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}

.guide-related .guide-card {
  padding: 1.5rem 1.4rem 1.4rem;
}

.guide-related .guide-card h3 {
  font-size: 1.1rem;
}

/* sticky "On this page" sidebar */
.guide-toc {
  position: sticky;
  top: calc(62px + 1.25rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.guide-toc-title {
  margin: 0;
  padding: 1rem 1.25rem;
  background: var(--band);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.guide-toc ol {
  list-style: none;
  margin: 0;
  padding: .5rem 0;
  counter-reset: toc;
}

.guide-toc li a {
  display: flex;
  gap: .6rem;
  padding: .55rem 1.25rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: .8rem;
  line-height: 1.35;
  color: var(--ink-soft);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background .2s var(--ease), color .2s var(--ease);
}

.guide-toc li a::before {
  counter-increment: toc;
  content: counter(toc, decimal-leading-zero);
  color: var(--teal);
  flex: 0 0 auto;
}

.guide-toc li a:hover,
.guide-toc li a:focus {
  background: var(--teal-tint);
  color: var(--teal-deep);
  text-decoration: none;
}

.guide-toc-top {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .9rem 1.25rem;
  border-top: 1px solid var(--line);
  font-family: var(--display);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--teal-deep);
  text-decoration: none;
}

.guide-toc-top:hover,
.guide-toc-top:focus {
  background: var(--teal-tint);
  color: var(--teal-deep);
  text-decoration: none;
}

.guide-toc-top svg {
  width: 14px;
  height: 14px;
}

/* ── permits companion + city pages ───────────────────── */
.guide-city-grid {
  list-style: none;
  margin: 1.5rem 0 2rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.guide-city-card {
  display: block;
  height: 100%;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--line);
  border-top: 3px solid var(--teal);
  border-radius: 8px;
  background: var(--paper);
  color: inherit;
  text-decoration: none;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}

.guide-city-card:hover,
.guide-city-card:focus {
  transform: translateY(-4px);
  box-shadow: 0 24px 40px -24px rgba(15, 26, 25, .45);
  color: inherit;
  text-decoration: none;
}

.guide-city-card h3 {
  margin: 0 0 .4rem;
  font-size: 1.05rem;
}

.guide-city-card p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--muted);
}

.guide-crumb {
  font-family: var(--display);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.4rem;
}

.guide-crumb a {
  color: var(--teal-deep);
  text-decoration: none;
}

.guide-siblings {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.guide-siblings p {
  font-family: var(--display);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .8rem;
}

.guide-siblings .guide-chips a {
  border-color: var(--line);
  color: var(--ink-soft);
}

.guide-siblings .guide-chips a[aria-current="page"] {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--band);
}

.guide-siblings-back {
  margin: 1.4rem 0 0;
}

.guide-siblings .guide-chips a:hover,
.guide-siblings .guide-chips a:focus {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--band);
}

.guide-footnote {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: .88rem;
  color: var(--muted);
}

.guide-footnote p:last-child {
  margin-bottom: 0;
}

/* ── responsive ───────────────────────────────────────── */
@media (max-width: 1000px) {
  .guide-grid,
  .guide-city-grid,
  .guide-how-grid,
  .guide-start {
    grid-template-columns: repeat(2, 1fr);
  }

  .guide-companion,
  .guide-layout {
    grid-template-columns: 1fr;
  }

  /* nine cards in a 2-col grid leave the last one orphaned in its own
     row with a void beside it — spanning it closes that gap */
  .guide-grid li:last-child {
    grid-column: 1 / -1;
  }

  /* on phones the TOC becomes a compact box above the article */
  .guide-layout .guide-toc {
    order: -1;
    position: static;
  }

  .guide-toc ol {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: .5rem;
  }

  .guide-toc-top {
    display: none;
  }
}

@media (max-width: 620px) {
  .guide-grid,
  .guide-city-grid,
  .guide-toc ol,
  .guide-how-grid,
  .guide-start {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .guide-card,
  .guide-city-card,
  .guide-link svg {
    transition: none;
  }
}