/* -------------------------
   Global Brand Variables
   -------------------------
   Canonical brand tokens now live in assets/css/brand.css (loaded first).
   The legacy --brand-* names below are kept as ALIASES so existing rules in
   this file keep working, but they now resolve to approved Style Guide
   colours. Prefer the tokens from brand.css in any new CSS.
   ------------------------- */
:root {
  --brand-blue:  var(--brand-cyan-on-light);  /* was #26aae2 */
  --brand-green: var(--brand-cyan-on-light);  /* was #0c8b45 — green retired */
  --brand-navy:  var(--brand-gunmetal);       /* was #32586a */
  --brand-dark:  var(--brand-gunmetal);       /* was #003366 */
  --brand-gray:  var(--brand-grey);           /* was #b3b4b7 */
  --brand-black: var(--brand-gunmetal);       /* was #221e1f */
}

/* -------------------------
   Base Layout
   ------------------------- */
body {
  background: var(--brand-snow);
  font-family: var(--brand-font);
  color: var(--brand-gunmetal);
  line-height: 1.5;
  min-height: 100vh;
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.container.pb-5 {
  flex: 1; /* allows container to grow */
}

/* Headings */
h1, h2, h3 {
  font-weight: 600;
  color: var(--brand-dark);
  margin-bottom: 12px;
}
h2 { font-weight: 700; }
h4.underline {
  display: inline-block;
  padding-bottom: 5px;
  position: relative;
  text-transform: uppercase;
  font-size: 18px;
  margin-bottom: 10px;
}
h4.underline:before {
  content: "";
  position: absolute;
  width: 40px;
  height: 1px;
  bottom: 0;
}
h4.underline.blue:before { border-bottom: 1px solid var(--brand-blue); }
h4.underline.green:before { border-bottom: 1px solid var(--brand-green); }
h4.underline.white:before { border-bottom: 1px solid #fff; }
.subtitle {
  color: var(--brand-text-muted);
  font-weight: 300;
}
button i { margin: 0 4px; }

/* -------------------------
   Header & Navbar
   ------------------------- */
/* Banner: solid Gunmetal Blue. Per brand feedback (2026-08-26) the banner
   must NOT use a gradient — one solid dark colour or approved imagery. */
.header {
  padding: 26px 0;
  background-color: var(--brand-gunmetal);
  text-align: left;
  margin-bottom: 0;
}

/* Co-brand lockup: Gastops logo | MetalSCAN Cost Benefit Calculator.
   Flex so it wraps on narrow screens instead of squashing. */
.brand-lockup {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.brand-lockup .brand-logo-link { display: inline-flex; flex: 0 0 auto; }
.brand-lockup .brand-logo {
  height: 44px;
  width: auto;
  display: block;
}
/* Cyan divider between the Gastops mark and the product title. */
.brand-lockup .brand-divider {
  width: 1px;
  align-self: stretch;
  min-height: 44px;
  background-color: var(--brand-cyan);
  flex: 0 0 auto;
}
.header h1 {
  font-size: 34px;
  font-weight: 400;
  color: #fff;
  margin: 0;
  line-height: 1.15;
}
.header h1 strong { font-weight: 700; }
/* The lockup carries a single cyan rule, between the Gastops logo and the
   product name -- that is the meaningful boundary (company | product). The
   title itself reads as one product name, so it needs no second separator.
   .spacer is retained as a no-op in case older markup still emits it. */
.header h1 .spacer {
  display: none;
}

@media (max-width: 575.98px) {
  .brand-lockup { gap: 12px; }
  .brand-lockup .brand-logo { height: 34px; }
  .brand-lockup .brand-divider { display: none; }
  .header h1 { font-size: 24px; }
}

.navbar-light .navbar-text {
  font-size: 24px;
  color: var(--brand-blue);
}
.navbar-light .navbar-nav .nav-item .nav-link { 
  color: var(--brand-blue) !important; 
  font-weight: bold; 
  padding: 0 20px;
}

/* -------------------------
   Tab Buttons
   ------------------------- */
.custom-tab-buttons {
  justify-content: center;
  border-bottom: none;
  margin: 0 auto;
  gap: 20px;
  max-width: 600px;
}
#calculatorTab { padding: 10px 0; }

.custom-tab-buttons .nav-link {
  /* An inactive tab on the Snow page ground needs a visible edge, otherwise
     it reads as a heading rather than something you can click. */
  border: 1px solid var(--brand-pale-blue, #C5CEDB);
  border-radius: 8px;
  background-color: #fff;
  color: var(--brand-gunmetal);
  font-weight: 600;
  font-size: 1.1rem;
  padding: 8px 22px;
  transition: all 0.2s ease;
  min-width: 275px;
  text-align: center;
}
.custom-tab-buttons .nav-link.active {
  background-color: var(--brand-navy);
  border-color: var(--brand-navy);
  color: #fff;
}
.custom-tab-buttons .nav-link:hover {
  background-color: var(--brand-gunmetal-dark);
  color: #fff;
}

/* -------------------------
   Main Content
   ------------------------- */
.main-content {
  background-color: var(--brand-snow);
  padding: 20px 0 50px;
  color: var(--brand-navy);
  flex: 1;
}

/* -------------------------
   Cards & Panels
   ------------------------- */
.result-card, 
#teaserCard, 
#optInCard, 
#fullReportCard {
  background: #fff;
  border: none;
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
#teaserCard h4 {
  color: #fff;
  margin-bottom: 0;
}
.card-header {
  background: var(--brand-navy);
  color: #fff;
  font-weight: 600;
  font-size:1.2rem;
  border-radius: 6px 6px 0 0;
}
/* Gastops branding */
.section-title {
  color: var(--brand-gunmetal);
  border-bottom: 1px solid var(--brand-border);
  padding-bottom: 4px;
  font-size:1.1rem;
  font-weight:600;
}

/* Read-only MetalSCAN values */
.readonly-field {
  background-color: var(--brand-snow);
  border: 1px dashed var(--brand-border);
  color: var(--brand-text-muted);
}
.readonly-field:focus {
  outline: none;
  box-shadow: none;
}
.badge-monitored {
  font-size: 1rem; 
  padding: 0.5rem 1rem;
}
.step .form-label {
	margin-bottom:0;
	font-weight:500;
	padding-left:2px;
}
/* -------------------------
   Stepper Navigation
   ------------------------- */
.stepper-item {
  flex: 1;
  text-align: center;
  padding: 8px 5px;
  border-bottom: 3px solid var(--brand-border);
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
  font-size: 0.95rem;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Stepper circle badge */
.stepper-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--brand-snow);
  border: 2px solid var(--brand-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  position: relative;
  transition: all 0.3s ease;
  font-weight: bold;
  color: var(--brand-text-muted);
}

.stepper-number {
  font-size: 1.1rem;
}

.stepper-check {
  font-size: 1.2rem;
  position: absolute;
}

.stepper-label {
  font-size: 0.9rem;
}

.stepper-label i {
  font-size: 1.1rem;
  margin-right: 4px;
}

/* Stepper states, per brand feedback: "Cyan for when it's highlighted and
   Snow for when it's not". Inactive circles keep the Snow fill defined above
   with gunmetal-grey text; active/completed use the vivid cyan fill (white
   text on #00AEEF is a solid fill, which the guide permits). Labels beneath
   sit on a light page, so they use the accessible cyan variant. */
/* NOTE ON CONTRAST: white on vivid cyan (#00AEEF) measures only 2.53:1 and
   fails WCAG AA for the small step numerals. Gunmetal on cyan is 4.71:1 and
   passes, so the numeral/check uses gunmetal while the fill stays brand cyan. */
.stepper-item.active .stepper-circle {
  background-color: var(--brand-cyan);
  border-color: var(--brand-cyan);
  color: var(--brand-gunmetal);
  box-shadow: 0 2px 8px rgba(0, 174, 239, 0.3);
}

.stepper-item.active {
  font-weight: bold;
  border-bottom-color: var(--brand-cyan);
  color: var(--brand-cyan-on-light);
}

.stepper-item.completed .stepper-circle {
  background-color: var(--brand-cyan);
  border-color: var(--brand-cyan);
  color: var(--brand-gunmetal);
}

.stepper-item.completed {
  border-bottom-color: var(--brand-cyan);
  color: var(--brand-cyan-on-light);
}

.stepper-item.disabled {
  opacity: 0.8;
  cursor: not-allowed;
}
#stepper {
  position: relative;
  margin-bottom: 20px;
}
.progress-filled {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--brand-cyan);
  z-index: 1;
  transition: width 0.3s ease;
  border-radius: 2px;
}

/* -------------------------
   Buttons
   ------------------------- */
.next-step,
.prev-step,
.convert {
  padding: 10px 18px;
  margin: 10px 5px 0 0;
  border: none;
  border-radius: 4px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.next-step { background-color: var(--brand-blue); }
.prev-step { background-color: var(--brand-text-muted); }
.next-step:hover { background-color: var(--brand-cyan-dark); }
.prev-step:hover { background-color: var(--brand-gunmetal); }
.cta-btn { background-color: var(--brand-blue); }
.cta-btn:hover { background-color: var(--brand-gunmetal-dark); }

/* -------------------------
   Inputs / Forms
   ------------------------- */
input, select, textarea {
  width: 100%;
  padding: 8px 12px;
  margin: 0px 0;
  box-sizing: border-box;
  border: 1px solid var(--brand-border);
  border-radius: 6px;
  font-size: 0.95rem;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 0.2rem rgba(0, 119, 163, .25);
}
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 15px;
}
.form-check { margin-top: 10px; }
#optInForm .form-check-label { font-size: 13px; margin-left: 10px; }  

/* -------------------------
   Tables
   ------------------------- */
table thead th {
  background-color: var(--brand-gray);
  color: #fff;
  text-transform: uppercase;
  font-size: 14px;
  padding-left: 15px;
}
table tbody tr td {
  font-size: 14px;
  padding-left: 15px;
}

/* -------------------------
   JSON Output (Developer view)
   ------------------------- */
pre.jsonOut { 
  background: var(--brand-snow); 
  padding: 0.75rem; 
  border-radius: 4px; 
  border: 1px solid var(--brand-border);
  max-height: 150px; 
  overflow: auto; 
  font-size: 0.8em;
  color: var(--brand-text-muted);
}

/* -------------------------
   Charts
   ------------------------- */
#windResultsArea { margin-top: 20px; }
canvas { max-width: 100%; }
.chartjs-render-monitor { font-family: inherit; }
#windChartsContainer {
  display: flex;
  gap: 20px; /* space between charts */
  flex-wrap: wrap; /* allows wrapping on smaller screens */
}

#windChartsContainer .flex-fill canvas {
  width: 100%;   /* canvas fills its parent */
  height: 300px; /* optional: fixed height to align charts */
}

/* -------------------------
   Footer
   ------------------------- */
.footer-full {
  width: 100%;
  background-color: var(--brand-black);
  padding: 30px 0 0 0;
  color: #fefefe;
  font-size: 14px;
}
.footer-full .footer-logo { 
  padding-bottom: 30px; 
  display: block;
} 
.footer-questions h3 {
  font-weight: 700;
  text-transform: none;
}
/* Footer sits on gunmetal, so cyan uses the VIVID tone here (dark surface),
   not the light-background variant. */
.footer-questions .blue { color: var(--brand-cyan); }
.footer-questions p {
  font-size: 24px;
  font-weight: 300;
}
.footer-full h4.underline {
  font-size: 14px;
  color: #fff;
  margin-bottom: 8px;
}
.footer-full h4.underline.blue:before { border-bottom: 1px solid var(--brand-cyan); }
.footer-contact p { margin-bottom: 0.6rem; line-height: 1.45; }
.footer-phone { margin-top: 0.5rem; }
.footer-phone a { color: var(--brand-cyan); text-decoration: none; }
.footer-phone a:hover { text-decoration: underline; }
.footer-separator {
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.15); /* soft contrast line */
  margin: 1.5rem 0 1rem 0; /* spacing above/below */
}
.footer-full .disclaimer {
  font-size: 0.85rem;
  line-height: 1.5;
  text-align: center;
  margin: 0 auto 0.75rem auto;
  padding: 0 1rem;
}

.sub-footer {
  background-color: var(--brand-gunmetal-dark);
  text-align: center;
  font-size: 13px;
  color: #fefefe;
  padding: 8px 0;
}
.sub-footer a { font-size: 13px; color: var(--brand-cyan); }

/* -------------------------
   Responsive Adjustments
   ------------------------- */
@media (max-width: 768px) {
  .header h1 { font-size: 28px; }
  .stepper-item { font-size: 0.8rem; }
  .stepper-item i { font-size: 1rem; }
  .custom-tab-buttons {
    flex-direction: column;
    align-items: center;
  }
  .custom-tab-buttons .nav-link {
    width: 80%;
  }
  .footer-full { text-align: center; }
  .footer-full .footer-contact {
    margin-left: 25px;
    padding-top: 35px;
    border-top: 1px solid rgba(255,255,255,0.15);
  }

  /* Mobile optimization for With/Without MetalSCAN columns */
  /* Stack columns vertically on mobile */
  .step[data-step="2"] .row.align-items-center,
  .step[data-step="3"] .row.align-items-center {
    margin-bottom: 1.5rem;
  }

  /* Make column headers sticky on mobile for better context */
  .step[data-step="2"] .row.mb-3.align-items-center.border-bottom,
  .step[data-step="3"] .row.mb-3.align-items-center.border-bottom {
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }

  /* Reduce column header font size on mobile */
  .step[data-step="2"] .row.mb-3 .bg-danger,
  .step[data-step="2"] .row.mb-3 .bg-success,
  .step[data-step="3"] .row.mb-3 .bg-danger,
  .step[data-step="3"] .row.mb-3 .bg-success {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem !important;
  }

  /* Hide the column label text on very small screens, show only icons */
  @media (max-width: 576px) {
    .step[data-step="2"] .row.mb-3 small.text-nowrap,
    .step[data-step="3"] .row.mb-3 small.text-nowrap {
      font-size: 0.7rem;
    }
  }

  /* Make input groups stack better on mobile */
  .step[data-step="2"] .row.align-items-center .col-md-4,
  .step[data-step="3"] .row.align-items-center .col-md-4 {
    margin-bottom: 0.5rem;
  }

  /* Add mobile labels for context */
  .step[data-step="2"] .row.align-items-center .col-md-4:nth-child(2)::before,
  .step[data-step="3"] .row.align-items-center .col-md-4:nth-child(2)::before {
    content: "Without: ";
    font-weight: 600;
    color: var(--brand-alarm);
    font-size: 0.75rem;
    display: inline-block;
    margin-right: 0.25rem;
  }

  .step[data-step="2"] .row.align-items-center .col-md-4:nth-child(3)::before,
  .step[data-step="3"] .row.align-items-center .col-md-4:nth-child(3)::before {
    content: "With: ";
    font-weight: 600;
    color: var(--brand-cyan-on-light);
    font-size: 0.75rem;
    display: inline-block;
    margin-right: 0.25rem;
  }

  /* Hide the redundant column headers on mobile since we have inline labels */
  @media (max-width: 576px) {
    .step[data-step="2"] .row.border-bottom.pb-2 .col-md-4:not(:first-child),
    .step[data-step="3"] .row.border-bottom.pb-2 .col-md-4:not(:first-child) {
      display: none;
    }
  }
}

/* -------------------------
   Print Styles
   ------------------------- */
@media print {
  /* Hide navigation, header, footer, and UI elements */
  .header,
  .navbar,
  .footer-full,
  .sub-footer,
  .feedback-widget,
  .step:not(.active),
  .stepper-container,
  .d-print-none,
  button:not(.d-print-inline),
  .btn:not(.d-print-inline) {
    display: none !important;
  }

  /* Ensure results are visible */
  #windResultsArea {
    display: block !important;
  }

  /* Clean layout for print */
  body {
    background: white;
    font-size: 11pt;
    color: black;
  }

  .container {
    width: 100%;
    max-width: none;
    padding: 0;
  }

  /* Card styling for print */
  .card {
    break-inside: avoid;
    box-shadow: none !important;
    border: 1px solid var(--brand-border);
    margin-bottom: 1rem;
    page-break-inside: avoid;
  }

  .card-header {
    background-color: var(--brand-snow) !important;
    color: black !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Tables */
  table {
    break-inside: avoid;
    width: 100%;
  }

  thead {
    display: table-header-group;
  }

  /* Charts - try to preserve */
  canvas {
    max-width: 100%;
    page-break-inside: avoid;
  }

  /* Add header on print */
  @page {
    margin: 1cm;
    @top-center {
      content: "MetalSCAN Cost-Benefit Analysis";
    }
  }

  /* Print-specific title */
  #windResultsArea::before {
    content: "MetalSCAN Wind Turbine Cost-Benefit Analysis";
    display: block;
    font-size: 18pt;
    font-weight: bold;
    text-align: center;
    margin-bottom: 1cm;
    padding-bottom: 0.5cm;
    border-bottom: 2px solid var(--brand-cyan-on-light);
  }

  /* Result cards in grid */
  .result-card {
    break-inside: avoid;
  }

  /* Ensure custom costs table prints well */
  #customCostsSection {
    display: block !important;
    page-break-inside: avoid;
  }
}

/* -------------------------
   Year-by-Year Cards
   ------------------------- */
/* Custom 5-column layout (20% each) */
@media (min-width: 768px) {
  .col-md-2dot4 {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

/* Year card hover effect */
.year-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.year-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

/* -------------------------
   Bootstrap Info Colour — Gastops Cyan
   -------------------------
   Previously overrode Bootstrap cyan with an off-brand indigo (#6366f1).
   Now mapped to the approved brand cyan. Text uses the accessible variant
   (#0077A3) on light surfaces; solid fills use the vivid #00AEEF.
   ------------------------- */

/* Text color */
.text-info {
  color: var(--brand-cyan-on-light) !important;
}

/* Background color */
.bg-info {
  background-color: var(--brand-cyan) !important;
}

/* Background with opacity */
.bg-info.bg-opacity-10 {
  background-color: rgba(0, 174, 239, 0.1) !important;
}

.bg-info.bg-opacity-25 {
  background-color: rgba(0, 174, 239, 0.25) !important;
}

/* Border color */
.border-info {
  border-color: var(--brand-cyan) !important;
}

/* Badge */
.badge.bg-info {
  background-color: var(--brand-cyan-on-light) !important;
  color: white !important;
}

/* Card header — white text, so it uses the accessible cyan (5.04:1).
   The vivid #00AEEF would only reach 2.53:1 behind white text. */
.card-header.bg-info {
  background-color: var(--brand-cyan-on-light) !important;
  color: white !important;
}

/* Session restore notification - brand-aligned design */
.alert-session-restore {
  background-color: var(--brand-navy) !important;
  border-color: var(--brand-dark) !important;
  border-left: 4px solid var(--brand-blue) !important;
  color: #ffffff !important;
}
.alert-session-restore .btn-close {
  filter: invert(1);
}
.alert-session-restore i {
  color: var(--brand-blue);
}


/* U-7: the fixed feedback bubble overlaps form fields on narrow viewports.
   Reserve space beneath the panel so it can never cover an input. */
@media (max-width: 575.98px) {
  .main-content .tab-content { padding-bottom: 88px; }
}

/* U-9: manual-override toggles were 40x31, under the 44px touch guideline.
   Grow the hit area without changing the button's visual weight. */
.toggle-manual-override,
#toggleDailyRevenueManual {
  min-width: 44px;
  min-height: 44px;
}

/* Respect the operating-system "reduce motion" preference. Users who set it
   often do so for vestibular reasons, and the portal animates step
   transitions, chart draws and tooltip fades. Motion is reduced to a near-zero
   duration rather than removed outright, so state changes still register. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}