/* /css/maintenance.css — v1 (scoped to the maintenance page) */

/* --- Form + FAQ (same look as Installations) --- */
.install-form { display:grid; gap:14px; }
.install-form .form-group { display:grid; gap:6px; }
.install-form label { font-weight:600; color:var(--navy); font-size:.95rem; }
.install-form input,
.install-form select,
.install-form textarea{
  width:100%;
  border:1px solid #e6eef7;
  border-radius:8px;
  padding:10px 12px;
  font: inherit;
  font-size:.95rem;
  background:#fff;
  transition:border-color .2s, box-shadow .2s;
}
.install-form input:focus,
.install-form select:focus,
.install-form textarea:focus{
  outline:none; border-color:var(--blue);
  box-shadow:0 0 0 2px rgba(0,123,255,.15);
}
.install-form textarea{ resize:vertical; }
.install-form .btn-block{ width:100%; text-align:center; }

.faq-list{ display:grid; gap:18px; }
.faq-item{
  background:#fff; border:1px solid #e6eef7; border-radius:14px;
  padding:18px; box-shadow:0 8px 18px rgba(15,34,57,.06);
}
.faq-item h3{ margin-top:0; color:var(--navy); }
.faq-item p{ margin:0; color:var(--muted); }

/* --- Page-scoped mobile containment & grids --- */
body[data-page="maintenance"] .container{ padding-inline:20px; }

/* Keep grid children from pushing outside on small screens */
body[data-page="maintenance"] .about-hero__grid,
body[data-page="maintenance"] .story-grid,
body[data-page="maintenance"] .values-grid,
body[data-page="maintenance"] .cta-grid{
  grid-auto-flow: row;
}

/* --- CTA/hero buttons: compact by default, full-width on phones --- */
body[data-page="maintenance"] .about-hero .hero-ctas,
body[data-page="maintenance"] .cta-banner .cta-actions{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
}
body[data-page="maintenance"] .about-hero .hero-ctas .btn,
body[data-page="maintenance"] .cta-banner .cta-actions .btn{
  flex: 0 0 auto;       /* size to content on desktop/tablet */
  min-width: auto;
  max-width: 100%;
  white-space: nowrap;
  box-sizing: border-box;
}
@media (max-width: 560px){
  body[data-page="maintenance"] .about-hero .hero-ctas .btn,
  body[data-page="maintenance"] .cta-banner .cta-actions .btn{
    width:100%;         /* stack + stretch on small phones */
    white-space: normal;
  }
}

/* --- CTA banner hardening (bg image + overlay always visible) --- */
body[data-page="maintenance"] .cta-banner{
  position:relative; isolation:isolate; color:#fff;
  padding-block: clamp(36px, 8vw, 72px);
}
body[data-page="maintenance"] .cta-banner::before{
  content:""; position:absolute; inset:0;
  background-image: var(--cta-bg-image, none);
  background-size: cover; background-position: center;
  z-index: 0;
}
body[data-page="maintenance"] .cta-banner::after{
  content:""; position:absolute; inset:0;
  background: rgba(0,0,0, var(--overlay-alpha, .72));
  z-index: 0;
}
body[data-page="maintenance"] .cta-banner > .container{ position:relative; z-index:1; }

/* Side card containment + hide on phones (mirrors Installations) */
body[data-page="maintenance"] .cta-card{
  box-sizing:border-box; width:100%; max-width:420px; justify-self:end;
  background:#fff; color:#111; border:1px solid #e6eef7; border-radius:14px;
  padding:18px; display:grid; gap:12px; align-content:start;
  box-shadow:0 16px 28px rgba(15,34,57,.12);
}
@media (max-width: 992px){
  body[data-page="maintenance"] .cta-grid{ grid-template-columns:1fr; gap:20px; }
  body[data-page="maintenance"] .cta-card{ justify-self:stretch; max-width:100%; margin:0; }
}
@media (max-width: 560px){
  body[data-page="maintenance"] .cta-banner .container{ padding-inline:16px; }
  body[data-page="maintenance"] .cta-grid .cta-card{ display:none !important; }
}

/* --- Values icons: ensure FA glyphs show --- */
body[data-page="maintenance"] .value-card i{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:10px; line-height:1; font-size:20px;
  color:#fff; background:linear-gradient(135deg, var(--blue), var(--blue-dark));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.18), 0 8px 18px rgba(15,34,57,.12);
}

/* --- Tablet stacks --- */
@media (max-width: 992px){
  body[data-page="maintenance"] .about-hero__grid{ grid-template-columns:1fr; gap:18px; }
  body[data-page="maintenance"] .story-grid{ grid-template-columns:1fr; gap:24px; }
  body[data-page="maintenance"] .values-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
  body[data-page="maintenance"] #maintenance-form.story-card{
    width:100%; max-width:100%; box-sizing:border-box; justify-self:stretch; margin:0;
  }
}

/* --- Phones --- */
@media (max-width: 560px){
  body[data-page="maintenance"] .values-grid{ grid-template-columns:1fr; }
  body[data-page="maintenance"] .story-card{ padding:16px; border-radius:12px; }
  body[data-page="maintenance"] .about-hero{ padding-block: clamp(36px, 12vw, 60px); }
  body[data-page="maintenance"] .about-hero__grid{ grid-template-columns:1fr; }
}

/* --- Header safety: keep it solid even if JS toggles classes --- */
#site-header, .site-header{ background: var(--c-navy) !important; }
#site-header .nav-bar, .site-header .nav-bar{
  background: var(--c-blue) !important;
  box-shadow: 0 5px 15px rgba(0,0,0,.1);
}

.install-form, .install-form .form-group,
.install-form input, .install-form select, .install-form textarea{
  width:100%; max-width:100%; box-sizing:border-box;
}
.story-card{ max-width:100%; box-sizing:border-box; }