/* Zion Care Services — interior page brand layer
 *
 * home-brand.css carries the palette, header, footer and buttons for every
 * route. This file is the equivalent for the sections that only exist away
 * from the homepage: the CodeStitch interior banner, the long-form service
 * article, and the interior contact/FAQ/review blocks.
 *
 * Loaded after both the route's own stylesheet and home-brand.css, so it can
 * override the inherited dermatology template without specificity games.
 * Targets are attribute-prefix selectors ([id^="interior"]) rather than the
 * template's hand-written :is(#interior, #interior-2, … #interior-69) lists,
 * so a new page cannot fall outside the branding by picking an unused id.
 */

/* ------------------------------------------------------------------ Banner
 * A calm tinted band rather than a photograph. The inherited banner pulled a
 * wide background image, which is how the previous practice's signage ended
 * up across the top of every interior page; the brand mark at low opacity
 * does the same job without needing an image that fits a 4:1 crop.
 */
/* Banners are the <div id="interior*"> wrapper; the long-form article that
   follows is a <section> with a sibling id, so the two are told apart by
   element rather than by maintaining another id list. */
div[id^="interior"] {
  background: linear-gradient(
    180deg,
    var(--zion-cream) 0%,
    var(--zion-cream-deep) 100%
  );
  border: 0;
  border-image: none;
  position: relative;
  /* Three things have to be true for the heartbeat to straddle the bottom
     edge rather than be sliced off at it, and the template gets all three
     wrong for this purpose — hence !important throughout, since it sets them
     from id selectors.
       1. overflow must not clip, or the half hanging below is cut away.
       2. the banner already carries z-index:1, which makes it a stacking
          context; the trace can therefore never escape it, however high its
          own z-index goes.
       3. so the banner itself has to outrank the section beneath it. Both
          were z-index:1, and the section wins that tie on DOM order, which
          is what was painting over the lower half of every spike. */
  overflow: visible !important;
  z-index: 2 !important;
}

div[id^="interior"] .cs-container {
  position: relative;
  z-index: 1;
}

/* The brand mark, as a background layer rather than an <img>.
   A background is clipped to its own box for free, so the mark can bleed off
   the corner without the banner needing overflow:hidden — which is what lets
   the heartbeat below straddle the bottom edge instead of being sliced in
   half by it. Negative background-position does the bleeding. */
div[id^="interior"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/images/zion-mark.png") no-repeat;
  background-position: right -4rem bottom -6rem;
  background-size: 26rem auto;
  filter: grayscale(1);
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}

body.dark-mode div[id^="interior"]::before {
  filter: grayscale(1) invert(1);
  opacity: 0.05;
}

@media only screen and (max-width: 47.999rem) {
  div[id^="interior"]::before {
    background-position: right -5rem bottom -4rem;
    background-size: 17rem auto;
  }
}

/* The banner's bottom edge is the same ECG trace used between the reviews
   and FAQ bands, straddling the boundary so it reads as one device across
   the site rather than a second, unrelated gold rule. */
div[id^="interior"]::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1.875rem;
  width: 100%;
  height: 3.75rem;
  background: url("/assets/images/zion-divider-ekg.svg") repeat-x center center /
    auto 100%;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 15%,
    #000 85%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 15%,
    #000 85%,
    transparent 100%
  );
  opacity: 0.42;
  pointer-events: none;
  z-index: 3;
}

/* The content section that follows a banner is a plain white article ground */
section[id^="interior"] {
  background: var(--zion-white);
  border: 0;
  border-image: none;
}

[id^="interior"] .cs-int-title {
  color: var(--zion-charcoal);
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* Breadcrumbs — the trail is muted, the current page is not a link colour */
[id^="interior"] .cs-breadcrumbs {
  justify-content: flex-start;
  gap: 0.5rem;
  font-size: 0.9375rem;
}

[id^="interior"] .cs-breadcrumbs .cs-link {
  color: var(--zion-gold-deep);
  font-weight: 600;
  transition: color 0.2s;
}

[id^="interior"] .cs-breadcrumbs .cs-link:hover {
  color: var(--zion-charcoal);
}

[id^="interior"] .cs-breadcrumbs .cs-link.cs-active {
  color: var(--zion-ink-soft);
  font-weight: 500;
  pointer-events: none;
}

body.dark-mode [id^="interior"] {
  background: rgba(0, 0, 0, 0.2);
}

body.dark-mode [id^="interior"] .cs-int-title {
  color: var(--zion-white);
}

body.dark-mode section[id^="interior"] {
  background: var(--zion-black);
}

/* ------------------------------------------------------- Service article
 * Long-form copy in a readable measure beside a single portrait image.
 */
section[id^="interior"] .cs-container {
  align-items: flex-start;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}

section[id^="interior"] .cs-content {
  max-width: 44rem;
}

section[id^="interior"] .cs-content .cs-title {
  color: var(--zion-charcoal);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}

section[id^="interior"] .cs-content h2 {
  margin: 2.75rem 0 0.875rem;
  color: var(--zion-charcoal);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.25;
  position: relative;
  padding-top: 1.25rem;
}

/* A short gold rule above each heading — the same topper idiom the homepage
   uses, rather than another full-width coloured edge */
section[id^="interior"] .cs-content h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.25rem;
  height: 0.125rem;
  border-radius: 1px;
  background: var(--zion-gold);
}

section[id^="interior"] .cs-content h3 {
  margin: 1.75rem 0 0.5rem;
  color: var(--zion-charcoal);
  font-size: 1.125rem;
  font-weight: 700;
}

section[id^="interior"] .cs-content p {
  margin: 0 0 1rem;
  color: var(--zion-ink);
  font-size: 1rem;
  line-height: 1.7;
}

section[id^="interior"] .cs-content .cs-button-solid {
  margin-top: 1.75rem;
}

body.dark-mode section[id^="interior"] .cs-content .cs-title,
body.dark-mode section[id^="interior"] .cs-content h2,
body.dark-mode section[id^="interior"] .cs-content h3 {
  color: var(--zion-white);
}

body.dark-mode section[id^="interior"] .cs-content p {
  color: rgba(255, 255, 255, 0.78);
}

/* Checklists — gold ticks drawn with a pseudo-element so the marker colour is
   independent of the text colour and survives dark mode. */
.zion-list {
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.625rem;
}

.zion-list li {
  position: relative;
  padding-left: 1.875rem;
  color: var(--zion-ink);
  font-size: 1rem;
  line-height: 1.6;
}

/* Same id-specificity problem as the photo frames: the template paints a 3px
   round bullet on every list item from an id-carrying selector. */
.zion-list li::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0.34em !important;
  width: 0.8125rem !important;
  height: 0.4375rem !important;
  background: none !important;
  border: 0 !important;
  border-left: 2.5px solid var(--zion-gold) !important;
  border-bottom: 2.5px solid var(--zion-gold) !important;
  border-radius: 1px !important;
  transform: rotate(-45deg) !important;
}

body.dark-mode .zion-list li {
  color: rgba(255, 255, 255, 0.78);
}

body.dark-mode .zion-list li::before {
  border-color: var(--zion-gold-bright);
}

/* --------------------------------------------------------- Article imagery
 * One portrait photo, framed the way homepage images are framed, with a
 * single brand decoration tucked behind its corner.
 */
section[id^="interior"] .cs-image-group {
  width: min(26rem, 100%);
  height: auto;
  font-size: 1rem;
  margin: 0;
  position: relative;
  flex: none;
  order: 2;
  z-index: 1;
}

/* !important throughout this block: the template frames these photos as
   285px-radius arches with a 12px peach border, and it does so from
   :is(#interior, #interior-2, … #interior-69) selectors carrying an id, which
   no class selector here can outrank. */
section[id^="interior"] .cs-image-group .cs-picture {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--zion-r-lg) !important;
  overflow: hidden;
  box-shadow: var(--zion-shadow);
}

section[id^="interior"] .cs-image-group .cs-picture img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  position: static !important;
  object-fit: cover;
}

section[id^="interior"] .zion-svc-deco {
  position: absolute;
  width: 9rem;
  height: auto;
  top: -3.25rem;
  right: -2.5rem;
  opacity: 0.22;
  transform: none;
  pointer-events: none;
  user-select: none;
  z-index: -1;
}

/* The pulse mark is wide rather than tall, so it hangs off the lower edge */
section[id^="interior"] img.zion-svc-deco[src*="pulse"] {
  width: 15rem;
  top: auto;
  right: -2rem;
  bottom: -2.75rem;
}

@media only screen and (max-width: 63.999rem) {
  section[id^="interior"] .cs-image-group {
    width: 100%;
    max-width: 28rem;
    order: -1;
    margin-bottom: 2.5rem;
  }

  section[id^="interior"] .zion-svc-deco {
    display: none;
  }
}

/* -------------------------------------------------- Interior contact + FAQ
 * The homepage rules are scoped to #contact / #faq; the interior variants
 * carry suffixed ids, so the brand treatment is repeated for them here.
 */
[id^="contact"] .cs-form {
  background: linear-gradient(
      180deg,
      rgba(224, 178, 63, 0.09) 0%,
      rgba(224, 178, 63, 0) 9rem
    ),
    var(--zion-white);
  border: 1px solid var(--zion-rule);
  border-radius: var(--zion-r-lg);
  box-shadow: var(--zion-shadow);
}

[id^="contact"] .cs-input,
[id^="contact"] .cs-select,
[id^="contact"] .cs-textarea {
  background: var(--zion-cream);
  color: var(--zion-charcoal);
  border: 1px solid var(--zion-rule);
  border-radius: var(--zion-r-sm);
  transition: border-color 0.2s, background-color 0.2s;
}

[id^="contact"] .cs-input:hover,
[id^="contact"] .cs-select:hover {
  border-color: var(--zion-rule-gold);
}

[id^="contact"] .cs-input:focus,
[id^="contact"] .cs-select:focus {
  background: var(--zion-white);
  border-color: var(--zion-gold);
  outline: none;
}

[id^="contact"] .cs-label {
  color: var(--zion-charcoal);
  font-weight: 600;
}

body.dark-mode [id^="contact"] .cs-form {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

body.dark-mode [id^="contact"] .cs-input,
body.dark-mode [id^="contact"] .cs-textarea {
  background: rgba(255, 255, 255, 0.05);
  color: var(--zion-white);
  border-color: rgba(255, 255, 255, 0.14);
}

body.dark-mode [id^="contact"] .cs-label {
  color: var(--zion-white);
}

/* ----------------------------------------------------------- Interior FAQ
 * The homepage rules are scoped to #faq; the interior variant is #faq-2, so
 * the same treatment is repeated for the whole family here. !important is
 * needed because the template paints these from id selectors that no
 * attribute selector can outrank.
 */
[id^="faq"] .cs-picture {
  border-radius: var(--zion-r-lg) !important;
  border: 0 !important;
  background: transparent !important;
}

[id^="faq"] .cs-faq-group {
  gap: 0.625rem;
}

[id^="faq"] .cs-faq-item {
  background: var(--zion-white) !important;
  border: 1px solid var(--zion-rule);
  border-radius: var(--zion-r-md);
  overflow: hidden;
  transition: border-color 0.25s;
}

[id^="faq"] .cs-faq-item:hover {
  border-color: var(--zion-rule-gold);
}

[id^="faq"] .cs-button {
  background: var(--zion-white) !important;
  color: var(--zion-charcoal) !important;
  font-weight: 600;
  border-radius: 0 !important;
}

[id^="faq"] .cs-faq-item.active .cs-button {
  background: var(--zion-charcoal) !important;
  color: var(--zion-white) !important;
  box-shadow: none;
}

[id^="faq"] .cs-faq-item.active .cs-button::before,
[id^="faq"] .cs-faq-item.active .cs-button::after {
  background: var(--zion-gold) !important;
}

[id^="faq"] .cs-item-text {
  background: var(--zion-white) !important;
  border-radius: 0 !important;
  color: var(--zion-ink);
}

/* The FAQ art is a portrait photo with one decoration behind it, matching
   the service pages rather than the template's arch-and-leaves cluster. */
.zion-faq-deco {
  position: absolute;
  width: 15rem;
  height: auto;
  right: -3rem;
  bottom: -2.5rem;
  opacity: 0.22;
  pointer-events: none;
  user-select: none;
  z-index: -1;
}

@media only screen and (max-width: 63.999rem) {
  .zion-faq-deco {
    display: none;
  }
}

body.dark-mode [id^="faq"] .cs-faq-item,
body.dark-mode [id^="faq"] .cs-button,
body.dark-mode [id^="faq"] .cs-item-text {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--zion-white) !important;
}

/* ------------------------------------------------------------- Section tone
 * The template alternates its own cream (#faf6f2 / #f6eddf) between bands.
 * Remap those to the brand's neutral so interior pages match the homepage.
 * !important again: these are id-painted in the inherited stylesheets.
 */
[id^="side-by-side"],
[id^="services"],
[id^="reviews"],
[id^="faq"],
[id^="gallery"],
[id^="team"],
[id^="misc"] {
  background-color: var(--zion-cream) !important;
  background-image: none !important;
}

[id^="contact"]:not([id*="-cs-"]) {
  background-color: var(--zion-white) !important;
  background-image: none !important;
}

[id^="services"] .cs-title,
[id^="reviews"] .cs-title,
[id^="faq"] .cs-title,
[id^="team"] .cs-title,
[id^="side-by-side"] .cs-title {
  color: var(--zion-charcoal);
  font-weight: 700;
  letter-spacing: -0.015em;
}

body.dark-mode [id^="side-by-side"],
body.dark-mode [id^="services"],
body.dark-mode [id^="reviews"],
body.dark-mode [id^="faq"],
body.dark-mode [id^="gallery"],
body.dark-mode [id^="team"],
body.dark-mode [id^="misc"] {
  background-color: rgba(0, 0, 0, 0.2);
}

/* Template photo frames: peach borders and 260px arches, replaced with the
   same soft frame the homepage uses. */
[id^="side-by-side"] .cs-picture,
[id^="team"] .cs-picture,
[id^="gallery"] .cs-image,
[id^="reviews"] .cs-picture {
  border: 0 !important;
  border-radius: var(--zion-r-lg) !important;
  background: transparent !important;
  box-shadow: var(--zion-shadow);
  overflow: hidden;
}