/* Helper CSS for the CreekWest widgets. The design system itself lives in the
   child theme's main.css — nothing here may restyle the frontend. */

/* main.js reveals sections by adding .in once they intersect. The editor preview
   re-renders a widget in place without re-running that observer, so an edited
   section would stay at opacity:0 and look deleted. Force the revealed state
   inside the editor only. Same for the hero's CSS-animation variant, which never
   replays after a re-render. */
body.elementor-editor-active .rv,
body.elementor-editor-active .hero-reveal {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* The header is position:fixed. In the Theme Builder it would float over the
   editor's own canvas and make the template impossible to click. */
body.elementor-editor-active .site-header {
  position: relative;
  transform: none !important;
}

body.elementor-editor-active .mobile-nav {
  display: none;
}

/* The hero is 100svh. In the editor that pushes everything below it out of the
   first screen for no benefit, so cap it. */
body.elementor-editor-active .hero {
  min-height: 70vh;
}

/* Elementor prints .elementor-widget-container around every widget. Our sections
   set their own vertical rhythm, so the wrapper must stay dimensionless.
   Matched by prefix: the real class is elementor-widget-creekwest-<section>. */
[class*="elementor-widget-creekwest-"] > .elementor-widget-container {
  margin: 0;
  padding: 0;
}

/* The static build carries this as an inline style on every page-hero lede.
   Kept here instead so the widget's colour control can ship with no default,
   which would otherwise outrank the on-photo and on-dark variants. */
.page-hero .lede {
  color: var(--cream-dim);
}

/* Elementor's frontend reset blankets `.elementor video` and `.elementor iframe`
   with max-width:100% and line-height:1; the static build leaves both at their
   initial/inherited value. Undone here at a higher specificity than Elementor's
   own rule. */
.elementor .md-media video,
.elementor .map-embed iframe,
.elementor .ghl-form iframe {
  max-width: none;
  line-height: inherit;
}

/* Elementor also resets `.elementor a{box-shadow:none}`, which outranks a plain
   class and so strips the shadow from any shadowed element we render as a link:
   the result CTAs (their style is a control, so Pine and Terracotta are both
   reachable) and the matched-model cards calc.js builds. Values restated from
   calc.css; the hover rules have to come along or this block would outrank them.
   A shadow set on the widget's own Style tab still wins over all of these. */
.elementor a.cwc-btn-primary {
  box-shadow: 0 8px 22px rgba(54, 81, 80, .3);
}

.elementor a.cwc-btn-primary:hover:not(:disabled) {
  box-shadow: 0 12px 32px rgba(54, 81, 80, .42);
}

.elementor a.cwc-btn-accent {
  box-shadow: 0 8px 22px rgba(140, 81, 59, .34);
}

.elementor a.cwc-btn-accent:hover {
  box-shadow: 0 12px 32px rgba(140, 81, 59, .45);
}

.elementor a.rm-card {
  box-shadow: 0 2px 12px rgba(27, 41, 40, .06);
}

.elementor a.rm-card:hover {
  box-shadow: 0 14px 36px rgba(27, 41, 40, .12);
}

/* Corner rules are ::before pseudos the client can turn off per section. */
.split .media.no-rule::before,
.guide-media.no-rule::before {
  display: none;
}

/* The band is narrower than .wrap, so it has to centre itself. Its width is a
   real control; everything else about it — alignment, colour, the lede's
   measure — is one too, because the two bands in the build disagree on them. */
.form-band {
  margin: 0 auto;
}

/* GHL's form_embed.js keeps its iframe hidden until an iframe-resizer handshake
   lands, which never happens behind this host's CDN. */
.ghl-form iframe {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  border: 0;
}

/* ---------------------------------------------------------------------------
   Single post — table of contents

   Built from the post's own headings, so it is the one block on the page with
   no static counterpart. Everything below is the design language of the reading
   column expressed in classes of its own, and every value here is also a real
   control on the CW Post Body widget.
   --------------------------------------------------------------------------- */
.post-toc {
  max-width: 72ch;
  margin: 0 auto clamp(30px, 3.5vw, 44px);
}

/* The header is fixed, so an untouched anchor jump parks the heading underneath
   it. The Anchor Stop Offset control overrides this per post. */
.post-col h2,
.post-col h3,
.post-col h4 {
  scroll-margin-top: 110px;
}

.post-toc-title {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 16px;
}

.post-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.post-toc-list li {
  position: relative;
  margin: 0 0 12px;
  padding-left: 26px;
  line-height: 1.5;
  border-bottom: 0 solid var(--line);
}

.post-toc-list li:last-child {
  margin-bottom: 0;
}

.post-toc-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 9px;
  height: 1px;
  background: var(--terra);
}

.post-toc-list li.lvl-3 {
  padding-left: 44px;
}

.post-toc-list li.lvl-3::before {
  left: 22px;
  width: 7px;
}

.post-toc a {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 500;
  color: var(--brown);
  border-bottom: 1px solid transparent;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}

.post-toc a:hover {
  color: var(--terra);
  border-bottom-color: var(--terra);
}

.post-toc-list li.lvl-3 a {
  font-size: 14px;
  color: var(--ink-soft);
}

/* Numbers count main headings only — a sub-heading is part of the entry above
   it, not a step of its own. */
.post-toc--numbered .post-toc-list,
.post-toc--style-3 .post-toc-list {
  counter-reset: cw-toc;
}

.post-toc--numbered .post-toc-list li.lvl-2,
.post-toc--style-3 .post-toc-list li.lvl-2 {
  counter-increment: cw-toc;
  padding-left: 34px;
}

.post-toc--numbered .post-toc-list li.lvl-2::before,
.post-toc--style-3 .post-toc-list li.lvl-2::before {
  content: counter(cw-toc, decimal-leading-zero);
  background: none;
  width: auto;
  height: auto;
  left: 0;
  top: 1px;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--terra);
}

.post-toc--style-1 {
  background: #fff;
  border: 1px solid var(--line);
  padding: clamp(22px, 2.6vw, 32px) clamp(24px, 2.8vw, 36px);
}

.post-toc--style-2 {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 26px 0;
}

.post-toc--style-3 {
  background: var(--cream-soft);
  border-left: 2px solid var(--terra);
  padding: clamp(22px, 2.6vw, 32px) clamp(24px, 2.8vw, 36px);
}

.post-toc--style-3 .post-toc-list li {
  border-bottom-width: 1px;
  padding-bottom: 12px;
}

.post-toc--style-3 .post-toc-list li:last-child {
  border-bottom-width: 0;
  padding-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Single post — author block

   The design signs a post with the business rather than a person, so this is a
   logo, a name and a line about the company.
   --------------------------------------------------------------------------- */
.post-author-wrap .wrap {
  max-width: 1000px;
}

.post-author-wrap .wrap.pa-rule {
  border-top: 1px solid var(--line);
  padding-top: clamp(36px, 4vw, 56px);
}

.post-author {
  max-width: 72ch;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: clamp(22px, 2.6vw, 34px);
}

.post-author .pa-logo {
  flex: none;
  width: 120px;
  display: grid;
  place-items: center;
}

.post-author .pa-logo img {
  width: 100%;
  height: auto;
  display: block;
}

.post-author .pa-bd {
  min-width: 0;
}

.post-author .pa-eyebrow {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--terra);
  display: flex;
  align-items: center;
  gap: 14px;
}

.post-author .pa-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--terra);
  flex: none;
}

.post-author .pa-name {
  font-family: var(--display);
  font-weight: 500;
  color: var(--brown);
  font-size: clamp(19px, 1.8vw, 23px);
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1.3;
  margin: 12px 0 10px;
}

.post-author .pa-bio {
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.75;
  margin: 0;
}

.post-author .link-more {
  margin-top: 20px;
}

/* The brand mark is cream on transparent — it is drawn for the dark header. On
   the light variants it needs a dark tile behind it or it disappears. */
.post-author--style-1 .pa-logo,
.post-author--style-2 .pa-logo {
  background: var(--brown);
  padding: 14px;
}

.post-author--style-1 {
  background: #fff;
  border: 1px solid var(--line);
  padding: clamp(24px, 2.8vw, 36px);
  align-items: center;
}

.post-author--style-2 {
  flex-direction: column;
  align-items: center;
}

.post-author--style-2 .pa-bd {
  text-align: center;
}

.post-author--style-2 .pa-eyebrow {
  justify-content: center;
}

.post-author--style-2 .pa-eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--terra);
  flex: none;
}

.post-author--style-2 .pa-bio {
  max-width: 60ch;
  margin: 0 auto;
}

.post-author--style-3 {
  background: var(--brown);
  color: var(--cream);
  align-items: center;
  padding: clamp(28px, 3.2vw, 44px);
}

.post-author--style-3 .pa-logo {
  background: rgba(249, 245, 243, .06);
  padding: 14px;
}

.post-author--style-3 .pa-eyebrow {
  color: var(--stone);
}

.post-author--style-3 .pa-name {
  color: var(--cream);
}

.post-author--style-3 .pa-bio {
  color: rgba(249, 245, 243, .72);
}

@media (max-width: 640px) {
  .post-author {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .post-author .pa-logo {
    width: 96px;
  }

  /* Stacked, the body has to hold the full width or a centring rule from the
     row layout leaves the text sitting in a narrow column of its own. */
  .post-author .pa-bd {
    width: 100%;
  }

  .post-author--style-2 {
    align-items: center;
  }
}