/*
 * Colorado River Updates — page-scoped stylesheet.
 * Self-contained: everything the page needs lives in this file and this
 * folder's images/. Nothing here is meant to reach outside .cru-page, and
 * nothing from the site's global CSS is relied on beyond a normal reset.
 * Built from the client-provided wireframe (provided/Colorado River Updates
 * page /Colorado River Wireframes.dc.html) — same layout, fonts and colors,
 * with each two-column section made to stack on small screens.
 */

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@500;600;700&display=swap');

.cru-page {
  /* #2a3582 is custom.css's own .cta-button background — the site's real navy,
     used consistently for every blue on this page (kickers, buttons, resource
     cards, FAQ marker, links, focus rings). */
  --cru-accent: #2a3582;
  --cru-accent-dark: #1c2458; /* hover/active state for navy fills */
  /* Site's actual green (custom.css: sitewide link/button color, used 20+ times) —
     the wireframe's own #51A145 doesn't match what's live on the rest of azwater.com. */
  --cru-green: #276929;
  --cru-text: #231f20;
  --cru-text-soft: rgba(35, 31, 32, 0.78);
  --cru-divider: rgba(35, 31, 32, 0.14);
  --cru-tan-tint: rgba(201, 190, 161, 0.13);
  --cru-white: #f5f5f8;
  --cru-font-heading: "Barlow Condensed", system-ui, sans-serif;
  --cru-font-body: "Barlow", system-ui, sans-serif;

  max-width: 1080px;
  margin: 0 auto;
  background: #fff;
  color: var(--cru-text);
  font-family: var(--cru-font-body);
}

.cru-page *,
.cru-page *::before,
.cru-page *::after {
  box-sizing: border-box;
}

.cru-page img {
  display: block;
  max-width: 100%;
}

.cru-page h1,
.cru-page h2,
.cru-page h3 {
  font-family: var(--cru-font-heading);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 10px;
  color: var(--cru-text);
}

.cru-page p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--cru-text-soft);
  margin: 0 0 14px;
}

.cru-page a {
  color: var(--cru-accent);
}

.cru-page a:hover {
  color: var(--cru-accent-dark);
}

.cru-page :focus-visible {
  outline: 2px solid var(--cru-accent);
  outline-offset: 2px;
}

.cru-section {
  padding: 40px 32px;
  border-bottom: 1px solid var(--cru-divider);
}

.cru-section:last-child {
  border-bottom: none;
}

/* — two-column, image + copy sections — stack on small screens — */
.cru-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 28px;
  align-items: center;
}

.cru-grid--reverse {
  grid-template-columns: 1fr 1.2fr;
}

.cru-grid__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--cru-divider);
}

.cru-grid__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cru-kicker {
  font: 600 16px var(--cru-font-heading);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cru-accent);
  margin: 0 0 8px;
}

.cru-hero h1 {
  font-size: 35px;
  line-height: 1.15;
}

.cru-h2 {
  font-size: 20px;
}

/* — buttons — */
/* Specificity note: the base ".cru-page a" rule above is class+element
   (0,1,1), which outranks a single class like ".cru-btn" (0,1,0) — so
   these are qualified as ".cru-page .cru-btn" etc. to reliably win
   regardless of source order. */
.cru-page .cru-btn {
  display: inline-block;
  font: 600 16px var(--cru-font-heading);
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 12px 24px;
  margin-top: 18px;
  background: var(--cru-accent);
  color: var(--cru-white);
  border-radius: 5px; /* matches .cta-button in custom.css — the site's own CTA button class (not the vendor neko-framework .btn) */
}

.cru-page .cru-btn:hover {
  background: var(--cru-accent-dark);
  color: var(--cru-white);
}

.cru-page .cru-link-arrow {
  display: inline-block;
  font-weight: 600;
  font-size: 16px;
  color: var(--cru-green);
}

.cru-page .cru-link-arrow:hover {
  color: var(--cru-green);
  opacity: 0.85;
}

/* — video — */
.cru-video {
  text-align: center;
}

.cru-video__frame {
  position: relative;
  display: block;
  max-width: 640px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--cru-divider);
  text-decoration: none;
  overflow: hidden;
}

.cru-video__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cru-video__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
}

.cru-video__play::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 22px solid #fff;
  margin-left: 4px;
}

.cru-video__caption {
  margin-top: 12px;
  font-weight: 600;
}

/* — FAQ — */
.cru-faq-heading {
  font-size: 22px;
  margin-bottom: 4px;
}

/*
 * The site's global custom.css already has an older, unrelated accordion
 * built on bare <details>/<summary> (teal color, flex summary row,
 * box-shadow + min-height on [open], a border on "details + details"
 * siblings). Class selectors like ".cru-faq" only outrank those bare
 * rules on the properties they redeclare — anything left unset here
 * still leaks through from that other component. So every property the
 * sitewide rules touch is redeclared below, and selectors are qualified
 * with the "details" type + ".cru-page" ancestor to out-specify them
 * outright rather than relying on source order.
 */
.cru-page details.cru-faq {
  width: 100%;
  max-width: none;
  border: none;
  border-bottom: 1px solid var(--cru-divider);
  background: none;
}

.cru-page details.cru-faq + details.cru-faq {
  margin-top: 0;
  border-top: none;
}

.cru-page details.cru-faq[open] {
  min-height: 0;
  background-color: transparent;
  box-shadow: none;
  transition: none;
}

.cru-page details.cru-faq summary {
  display: block;
  background: none;
  justify-content: normal;
  align-items: normal;
  cursor: pointer;
  font-family: var(--cru-font-heading);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.01em;
  padding: 14px 28px 14px 0;
  list-style: none;
  position: relative;
}

.cru-page details.cru-faq summary::-webkit-details-marker {
  display: none;
}

.cru-page details.cru-faq summary::before {
  content: "+";
  position: absolute;
  right: 4px;
  color: var(--cru-accent);
  font-weight: 700;
}

.cru-page details.cru-faq[open] summary::before {
  content: "\2013"; /* en dash, matches wireframe's open-state marker */
}

.cru-page details.cru-faq summary:focus {
  outline: none;
}

.cru-page details.cru-faq summary:focus-visible {
  outline: 2px solid var(--cru-accent);
  outline-offset: 2px;
}

.cru-page details.cru-faq p {
  margin: 0 0 18px;
}

.cru-contact-box {
  margin-top: 28px;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--cru-tan-tint);
}

.cru-contact-box p {
  margin: 0;
}

.cru-contact-box p:first-child {
  font-family: var(--cru-font-heading);
  font-weight: 600;
  font-size: 22px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.cru-contact-box .cru-email {
  color: var(--cru-green);
  font-weight: 700;
}

/* — resources — */
.cru-resources {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.cru-resource-card {
  padding: 16px 12px;
  background: var(--cru-accent);
  text-align: center;
}

.cru-resource-card a {
  color: var(--cru-white);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

.cru-resource-card a:hover {
  text-decoration: underline;
}

/* — responsive: stack every section — */
@media (max-width: 767px) {
  .cru-section {
    padding: 28px 20px;
  }

  .cru-grid,
  .cru-grid--reverse {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Default: source order is preserved when stacked (copy leads for
     .cru-grid, media leads for .cru-grid--reverse, matching each
     section's authored markup order). This modifier is for the one
     section whose desktop copy-left layout should still show its photo
     first once stacked. */
  .cru-grid--mobile-media-first .cru-grid__media {
    order: -1;
  }

  .cru-hero h1 {
    font-size: 26px;
  }

  .cru-h2 {
    font-size: 18px;
  }

  .cru-faq-heading {
    font-size: 19px;
  }

  .cru-resources {
    grid-template-columns: 1fr;
  }

  .cru-contact-box {
    flex-direction: column;
    align-items: flex-start;
  }
}