/* Bi-Weekly Reports landing - refresh-look (Tier 49)
   Navy + gold palette pulled from design-system.css; matches the
   Activity Monitor strip on the homepage and the Basin Intelligence
   Reports homepage promo (docs/style_refresh_sample.png,
   docs/report_promo.png, docs/design_system.md). */

.wr-page {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  color: var(--c-color-text);
  background: var(--c-color-bg);
}

/* Hide the site-wide "News Alerts" email-signup banner on weekly-reports
   pages - it dilutes focus from our own CTAs. */
#EmailSignup { display: none !important; }

/* ---------- HERO (deep navy panel) ---------- */
.wr-hero {
  background:
    linear-gradient(135deg,
      var(--c-color-primary-deep-2) 0%,
      var(--c-color-primary-deep) 52%,
      var(--c-color-primary-mid) 100%);
  color: var(--c-color-text-onbrand);
  padding: 64px 24px 56px;
  border-bottom: 1px solid #123b61;
  position: relative;
  overflow: hidden;
}
.wr-hero::after {
  /* gold underline accent */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c-color-accent-gold), var(--c-color-accent-gold-light));
  opacity: 0.85;
}
.wr-hero-inner { max-width: 1180px; margin: 0 auto; }

.wr-eyebrow {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: var(--c-fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 900;
  color: var(--c-color-accent-gold-light);
  margin: 0 0 12px;
}
.wr-title {
  font-family: inherit;
  font-size: 44px;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  color: var(--c-color-text-onbrand);
  max-width: 880px;
}
.wr-title em {
  font-style: normal;
  color: var(--c-color-accent-gold-light);
  font-weight: 700;
}
.wr-lede {
  font-size: var(--c-fs-md);
  line-height: 1.6;
  max-width: 720px;
  color: var(--c-color-text-onbrand-soft);
  margin: 0 0 28px;
}

/* CTA buttons - match style_refresh_sample.html .kpi-button */
.wr-cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.wr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: var(--c-radius-md);
  font-weight: 800;
  font-size: var(--c-fs-sm);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform var(--c-speed-base) ease,
              box-shadow var(--c-speed-base) ease,
              background var(--c-speed-base) ease,
              color var(--c-speed-base) ease;
  border: 1px solid transparent;
  cursor: pointer;
  line-height: 1;
}
.wr-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,0.24); }

/* On the dark hero: gold primary, ghost-white secondary */
.wr-hero .wr-btn-primary,
.wr-final-cta .wr-btn-primary {
  background: linear-gradient(135deg, var(--c-color-accent-gold), var(--c-color-accent-gold-light));
  color: #fff !important;
}
.wr-hero .wr-btn-primary:hover,
.wr-final-cta .wr-btn-primary:hover {
  background: linear-gradient(135deg, var(--c-color-accent-gold-light), var(--c-color-accent-gold));
}
.wr-hero .wr-btn-outline {
  background: rgba(255,255,255,0.04);
  color: #fff !important;
  border-color: rgba(255,255,255,0.65);
}
.wr-hero .wr-btn-outline:hover {
  background: rgba(255,255,255,0.10);
  border-color: #fff;
}
.wr-hero .wr-btn-link {
  background: transparent;
  color: var(--c-color-accent-gold-light) !important;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  padding: 0 8px;
  border: 0;
  min-height: 0;
}
.wr-hero .wr-btn-link:hover { transform: none; box-shadow: none; text-decoration: underline; }

/* On light sections: navy primary, white outline */
.wr-btn-primary {
  background: var(--c-color-primary-deep);
  color: #fff !important;
}
.wr-btn-primary:hover { background: var(--c-color-primary-deep-2); }
.wr-btn-outline {
  background: #fff;
  color: var(--c-color-primary-deep) !important;
  border-color: var(--c-color-border-strong);
}
.wr-btn-outline:hover { border-color: var(--c-color-primary-deep); }
.wr-btn-link {
  background: transparent;
  color: var(--c-color-primary) !important;
  padding-left: 8px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  min-height: 0;
}
.wr-btn-link:hover { text-decoration: underline; transform: none; box-shadow: none; }

/* ---------- SECTIONS ---------- */
.wr-section {
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px 24px;
}
.wr-section-tag {
  font-size: var(--c-fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 900;
  color: var(--c-color-primary-deep);
  margin: 0 0 12px;
}
.wr-section-title {
  font-size: var(--c-fs-2xl);
  font-weight: 700;
  color: var(--c-color-primary-deep);
  letter-spacing: -0.005em;
  margin: 0 0 8px;
}
.wr-section-lede {
  color: var(--c-color-text-muted);
  max-width: 760px;
  font-size: var(--c-fs-base);
  line-height: 1.6;
  margin: 0 0 28px;
}

/* ---------- KPI STRIP (in-report numbers) ---------- */
.wr-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 8px;
}
.wr-stat {
  background: linear-gradient(180deg, var(--c-color-card-grad-from), var(--c-color-card-grad-to));
  border: 1px solid var(--c-color-card-border);
  border-radius: var(--c-radius-lg);
  padding: 18px 16px;
  position: relative;
  overflow: hidden;
  transition: transform var(--c-speed-base) ease,
              border-color var(--c-speed-base) ease,
              box-shadow var(--c-speed-base) ease;
}
.wr-stat::after {
  content: "";
  position: absolute; left: 0; top: 0; right: 0;
  height: 3px;
  background: var(--c-color-accent-gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--c-speed-base) ease;
}
.wr-stat:hover {
  border-color: var(--c-color-accent-gold);
  transform: translateY(-2px);
  box-shadow: var(--c-shadow-md);
}
.wr-stat:hover::after { transform: scaleX(1); }
.wr-stat-num {
  font-size: 32px;
  font-weight: 900;
  color: var(--c-color-primary-deep);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 8px;
}
.wr-stat-lbl {
  font-size: var(--c-fs-xs);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-color-primary);
}

/* ---------- INCLUDES (4 "what's in every report" cards) ---------- */
.wr-includes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.wr-include {
  background: linear-gradient(180deg, var(--c-color-card-grad-from), var(--c-color-card-grad-to));
  border: 1px solid var(--c-color-card-border);
  border-left: 3px solid var(--c-color-accent-gold);
  padding: 18px 18px;
  border-radius: 0 var(--c-radius-lg) var(--c-radius-lg) 0;
  transition: transform var(--c-speed-base) ease, box-shadow var(--c-speed-base) ease;
}
.wr-include:hover { transform: translateY(-2px); box-shadow: var(--c-shadow-md); }
.wr-include h4 {
  margin: 0 0 6px;
  font-size: var(--c-fs-md);
  font-weight: 700;
  color: var(--c-color-primary-deep);
}
.wr-include p {
  margin: 0;
  color: var(--c-color-text-muted);
  font-size: var(--c-fs-sm);
  line-height: 1.55;
}

/* ---------- SAMPLE CARDS ---------- */
.wr-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.wr-card {
  background: linear-gradient(180deg, var(--c-color-card-grad-from), var(--c-color-card-grad-to));
  border: 1px solid var(--c-color-card-border);
  border-radius: var(--c-radius-lg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  transition: transform var(--c-speed-base) ease,
              box-shadow var(--c-speed-base) ease,
              border-color var(--c-speed-base) ease;
  position: relative;
  overflow: hidden;
}
.wr-card::after {
  content: "";
  position: absolute; left: 0; top: 0; right: 0;
  height: 3px;
  background: var(--c-color-accent-gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--c-speed-base) ease;
}
.wr-card:hover {
  box-shadow: var(--c-shadow-md);
  transform: translateY(-3px);
  border-color: var(--c-color-accent-gold);
}
.wr-card:hover::after { transform: scaleX(1); }
.wr-card-badge {
  display: inline-block;
  font-size: var(--c-fs-xs);
  letter-spacing: 0.04em;
  font-weight: 900;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--c-radius-md);
  color: #fff;
  margin-bottom: 12px;
  align-self: flex-start;
}
.wr-card-title {
  font-size: var(--c-fs-xl);
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--c-color-primary-deep);
}
.wr-card-sub {
  font-size: var(--c-fs-sm);
  color: var(--c-color-text-muted);
  margin: 0 0 12px;
}
.wr-card-issue {
  font-size: var(--c-fs-xs);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-color-primary);
  margin-bottom: 14px;
}
.wr-card-hl {
  color: var(--c-color-text-muted);
  font-size: var(--c-fs-sm);
  line-height: 1.55;
  margin: 0 0 18px;
  flex: 1;
}
.wr-card-action { margin-top: auto; }

/* ---------- FINAL CTA STRIP (deep navy) ---------- */
.wr-final-cta {
  background:
    linear-gradient(135deg,
      var(--c-color-primary-deep-2) 0%,
      var(--c-color-primary-deep) 52%,
      var(--c-color-primary-mid) 100%);
  color: var(--c-color-text-onbrand);
  padding: 52px 24px;
  text-align: center;
  border-top: 1px solid #123b61;
  border-bottom: 1px solid #123b61;
}
.wr-final-cta h3 {
  font-size: var(--c-fs-2xl);
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--c-color-text-onbrand);
  letter-spacing: -0.005em;
}
.wr-final-cta p {
  color: var(--c-color-text-onbrand-soft);
  margin: 0 0 24px;
  font-size: var(--c-fs-md);
}
.wr-final-cta .wr-btn-outline {
  background: rgba(255,255,255,0.04);
  color: #fff !important;
  border-color: rgba(255,255,255,0.65);
}
.wr-final-cta .wr-btn-outline:hover { background: rgba(255,255,255,0.10); border-color: #fff; }

/* ---------- FORMS (trial / demo) ---------- */
.wr-form-wrap {
  width: min(calc(100vw - 32px), 640px);
  max-width: 640px;
  margin: 48px auto;
  padding: 0;
  box-sizing: border-box;
}
.wr-form-card {
  background: linear-gradient(180deg, var(--c-color-card-grad-from), var(--c-color-card-grad-to));
  border: 1px solid var(--c-color-card-border);
  padding: 32px;
  border-radius: var(--c-radius-lg);
  box-shadow: var(--c-shadow-sm);
  box-sizing: border-box;
  max-width: 100%;
}
.wr-form-title {
  font-size: var(--c-fs-2xl);
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--c-color-primary-deep);
  letter-spacing: -0.005em;
}
.wr-form-sub {
  color: var(--c-color-text-muted);
  margin: 0 0 24px;
  font-size: var(--c-fs-base);
  line-height: 1.55;
  overflow-wrap: break-word;
}
.wr-form-row { margin-bottom: 16px; }
.wr-form-row label {
  display: block;
  font-size: var(--c-fs-xs);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-color-primary-deep);
  margin-bottom: 6px;
}
.wr-form-row input[type=text],
.wr-form-row input[type=email],
.wr-form-row input[type=password],
.wr-form-row input[type=tel],
.wr-form-row input[type=date],
.wr-form-row select,
.wr-form-row textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--c-color-border);
  border-radius: var(--c-radius-md);
  font-family: inherit;
  font-size: var(--c-fs-base);
  box-sizing: border-box;
  background: #fff;
  transition: border-color var(--c-speed-fast) ease, box-shadow var(--c-speed-fast) ease;
  color: var(--c-color-text);
}
.wr-form-row input:focus,
.wr-form-row select:focus,
.wr-form-row textarea:focus {
  outline: none;
  border-color: var(--c-color-primary);
  box-shadow: 0 0 0 3px rgba(3, 73, 126, 0.12);
}
.wr-form-row input[type=date] { min-height: 42px; }
.wr-form-row select { -webkit-appearance: menulist; appearance: menulist; }
.wr-form-row textarea { min-height: 88px; resize: vertical; }
.wr-form-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wr-form-error {
  background: var(--c-color-error-bg);
  border: 1px solid #f4b09b;
  color: var(--c-color-error-fg);
  padding: 12px 14px;
  border-radius: var(--c-radius-md);
  margin-bottom: 18px;
  font-size: var(--c-fs-sm);
}
.wr-form-success {
  background: var(--c-color-success-bg);
  border: 1px solid #a3c8a9;
  color: var(--c-color-success-fg);
  padding: 12px 14px;
  border-radius: var(--c-radius-md);
  margin-bottom: 18px;
}
.wr-form-help { font-size: var(--c-fs-xs); color: var(--c-color-text-muted); margin: 6px 0 0; }
.wr-consent {
  font-size: var(--c-fs-xs);
  color: var(--c-color-text-muted);
  margin: 14px 0 6px;
  line-height: 1.5;
}
.wr-consent a { color: var(--c-color-primary); text-decoration: underline; }
.wr-time-row {
  background: var(--c-color-bg-alt);
  padding: 16px;
  border: 1px solid var(--c-color-border);
  border-radius: var(--c-radius-md);
  margin-bottom: 12px;
}
.wr-time-row label { color: var(--c-color-primary-deep); }
.wr-required-mark { color: var(--c-color-accent-gold); font-weight: 700; margin-left: 2px; }

.wr-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.wr-check-card {
  display: flex !important;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  margin: 0 !important;
  padding: 10px 12px;
  border: 1px solid var(--c-color-card-border);
  border-radius: var(--c-radius-md);
  background: linear-gradient(180deg, #fff, #f7fafc);
  color: var(--c-color-primary-deep) !important;
  font-size: var(--c-fs-sm) !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer;
}
.wr-check-card input {
  width: auto !important;
  margin: 0;
  accent-color: var(--c-color-accent-gold);
}
.wr-check-card:has(input:checked) {
  border-color: var(--c-color-accent-gold);
  box-shadow: 0 0 0 2px rgba(217,144,0,0.16);
}

.wr-thanks-hero {
  padding-top: 54px;
  padding-bottom: 48px;
}
.wr-download-grid .wr-card-action {
  margin-top: auto;
}

/* ---------- DOWNLOAD-GATE MODAL ---------- */
.wr-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(4, 25, 45, 0.62);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
  box-sizing: border-box;
  animation: wr-fadein .15s ease;
}
.wr-modal-backdrop.open { display: flex; }
@keyframes wr-fadein { from { opacity: 0; } to { opacity: 1; } }
.wr-modal {
  background: #fff;
  border-radius: var(--c-radius-lg);
  max-width: 480px;
  width: 100%;
  padding: 28px;
  box-shadow: var(--c-shadow-xl);
  position: relative;
  animation: wr-pop .18s ease;
  border-top: 4px solid var(--c-color-accent-gold);
}
@keyframes wr-pop { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.wr-modal-close {
  position: absolute; top: 12px; right: 14px; background: transparent; border: 0;
  font-size: 22px; color: var(--c-color-text-muted); cursor: pointer; line-height: 1; padding: 4px 8px;
}
.wr-modal-close:hover { color: var(--c-color-primary-deep); }
.wr-modal-eyebrow {
  font-size: var(--c-fs-xs);
  letter-spacing: 0.04em;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--c-color-accent-gold);
  margin: 0 0 10px;
}
.wr-modal-title {
  font-size: var(--c-fs-xl);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 6px;
  color: var(--c-color-primary-deep);
}
.wr-modal-sub { font-size: var(--c-fs-sm); color: var(--c-color-text-muted); margin: 0 0 18px; line-height: 1.5; }
.wr-modal-skip {
  display: inline-block; margin-top: 10px;
  font-size: var(--c-fs-xs);
  color: var(--c-color-text-muted);
  text-decoration: underline;
}
.wr-modal-skip:hover { color: var(--c-color-primary); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .wr-stats     { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wr-includes  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wr-cards     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 920px) {
  .wr-title { font-size: 34px; }
  .wr-hero { padding: 48px 20px 40px; }
  .wr-section { padding: 44px 20px; }
  .wr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wr-form-wrap {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
  }
}
@media (max-width: 640px) {
  .wr-title { font-size: 26px; line-height: 1.15; }
  .wr-lede { font-size: var(--c-fs-base); }
  .wr-hero { padding: 36px 16px 32px; }
  .wr-section { padding: 36px 16px; }
  .wr-section-title { font-size: var(--c-fs-xl); }
  .wr-cta-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .wr-cta-row .wr-btn { text-align: center; padding: 14px 18px; font-size: var(--c-fs-base); }
  .wr-btn-link { text-align: left !important; padding-left: 0; }
  .wr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .wr-stat { padding: 16px 14px; }
  .wr-stat-num { font-size: 26px; }
  .wr-cards { grid-template-columns: 1fr; }
  .wr-includes { grid-template-columns: 1fr; gap: 12px; }
  .wr-final-cta { padding: 36px 16px; }
  .wr-final-cta h3 { font-size: var(--c-fs-xl); }
  .wr-form-wrap {
    width: calc(100vw - 32px) !important;
    padding: 0;
    margin: 28px 16px;
  }
  .wr-form-card { padding: 22px 18px; }
  .wr-form-title { font-size: var(--c-fs-xl); }
  .wr-form-row-2col { grid-template-columns: 1fr; gap: 0; }
  .wr-check-grid { grid-template-columns: 1fr; }
  .wr-time-row { padding: 12px; }
  .wr-modal { padding: 22px 18px; }
  .wr-modal-title { font-size: var(--c-fs-lg); }
  .wr-btn { padding: 14px 18px; }
}

/* The site-wide screen.css sets .wrapper { width: 960px } and
   header .wrapper { width: 1010 }, which force horizontal overflow on
   phones. These overrides only apply on weekly-reports pages because
   this stylesheet isn't loaded anywhere else. */
@media (max-width: 920px) {
  html, body { overflow-x: hidden; }
  .wrapper, header .wrapper, #content .wrapper, footer .wrapper {
    width: auto !important; max-width: 100% !important;
    padding-left: 12px !important; padding-right: 12px !important;
    box-sizing: border-box;
  }
  img, iframe, video { max-width: 100%; height: auto; }
}