/* =======================================================
   features-maintenance.css — Consolidated, ready to paste
   - Uses colours & font variables from your existing styles.css
   - No re-declaration of :root variables from styles.css
   - Single authoritative rules for header bar and hero
   ======================================================= */

/* -------------------------
   Feature section (scoped)
   ------------------------- */
   body .feature.maintenance { box-sizing: border-box; padding: 2.25rem 0; }
   body .feature.maintenance .feature-inner { display: grid; gap: 0.35rem; box-sizing: border-box; }
   body .feature.maintenance .feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; align-items: center; }
   body .feature.maintenance .feature-row .feature-media { order: 1; }
   body .feature.maintenance .feature-row .feature-content { order: 2; }
   body .feature.maintenance .feature-row.reverse .feature-media { order: 2; }
   body .feature.maintenance .feature-row.reverse .feature-content { order: 1; }
   body .feature.maintenance .feature-media { width: 100%; display: block; height: auto; overflow: visible; margin: 0; padding: 0; background: transparent; border: none; box-shadow: none; }
   body .feature.maintenance .feature-media img { display: block; width: 100%; height: auto; object-fit: contain; object-position: center center; margin: 0; padding: 0; border-radius: 6px; background: transparent; border: none; box-shadow: none; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.12));}
   @media (min-width: 901px) { body .feature.maintenance .feature-media img { max-height: 500px; } }
   body .feature.maintenance .feature-content { display: block; align-self: center; height: auto; padding: 12px 14px; margin: 0; max-width: 70ch; background: var(--white); border: 1px solid var(--light-grey); border-radius: 12px; box-shadow: 0 4px 12px rgba(8,18,16,0.035); }
   body .feature.maintenance .content-inner { display: flex; flex-direction: column; justify-content: center; gap: .5rem; }
   body .feature.maintenance h3, body .feature.maintenance h4.sub-title { margin: 0 0 .35rem; color: var(--dark-green); font-weight: 700; line-height: 1.12; }
   body .feature.maintenance h3 { font-size: clamp(1rem, 1.8vw, 1.15rem); }
   body .feature.maintenance h4.sub-title { margin-top: .6rem; margin-bottom: .25rem; font-size: .98rem; }
   body .feature.maintenance p { margin: 0 0 .5rem; color: var(--dark-grey); font-size: .95rem; line-height: 1.45; max-width: 70ch; }
   body .feature.maintenance .cta-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
   body .feature.maintenance .start-free { display: inline-block; padding: 10px 20px; border-radius: 999px; font-weight: 600; text-decoration: none; background: var(--dark-green); color: var(--white); border: 1px solid var(--dark-green); margin-top: 12px; }
   body .feature.maintenance .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
   
   /* Mobile adjustments for feature section */
   @media (max-width: 900px) {
     body .feature.maintenance .feature-row, body .feature.maintenance .cta-row { display: block; }
     body .feature.maintenance .feature-row .feature-media, body .feature.maintenance .feature-row .feature-content { order: initial; }
     body .feature.maintenance .feature-media { width: clamp(220px, 46vw, 320px); margin: 0 auto 1rem; }
     body .feature.maintenance .feature-media img { width: clamp(220px, 46vw, 320px); max-height: none; height: auto; }
     body .feature.maintenance .feature-content { padding: 14px; margin: 0 0 1rem; max-width: 100%; align-self: auto; }
     body .feature.maintenance .feature-inner { gap: 1rem; }
   }
   
   /* -------------------------
      Header bar (single authoritative block)
      ------------------------- */
   /* Use container sizing from your styles.css (.container max-width: 1120px) */
   .page-header.maintenance-page-header .container {
     max-width: 1120px;
     margin-left: auto;
     margin-right: auto;
     padding-left: 16px;
     padding-right: 16px;
     box-sizing: border-box;
   }
   
   /* Full-bleed bar: compute left inset using container math and explicit hero padding (28px) */
   header.page-header.maintenance-page-header .page-header-bar {
     width: 100vw;
     margin-left: calc(50% - 50vw); /* full-bleed centering trick */
     box-sizing: border-box;
     background: var(--bg);
     color: var(--dark-grey);
     border-radius: 0;
     box-shadow: none;
     display: flex;
     align-items: center;
     justify-content: flex-start;
     min-height: 44px; /* matches header height used elsewhere */
     border-bottom: 1px solid var(--light-grey);
     z-index: 100;
     /* left inset aligned with container left + hero padding (28px) */
     padding-left: calc((100vw - 1120px) / 2 + 28px);
     padding-right: 16px;
   }
   
   /* Label styling (matches header font/colour, 50% larger) */
   .page-header.maintenance-page-header .page-header-bar__label {
     font-family: var(--font-main);
     color: var(--dark-grey);
     font-weight: 700;
     font-size: calc(0.95rem * 1.5);
     line-height: 1;
     letter-spacing: 0.2px;
     margin: 0;
   }
   
   /* Mobile: add extra left inset on small screens (adjustable) */
   @media (max-width: 900px) {
     header.page-header.maintenance-page-header .page-header-bar {
       padding-left: calc((100vw - 1120px) / 2 + 28px + 28px); /* extra 16px on mobile */
       padding-right: 16px;
     }
   }

   @media (max-width: 900px) {
    header.page-header.maintenance-page-header .page-header-bar__label {
      display: inline-block;
      margin-left: 16px; /* adjust to taste */
      padding-left: 0;
    }
  }
  
   
   /* -------------------------
      Mint hero (single authoritative block)
      ------------------------- */
   .maintenance-hero {
     display: grid;
     grid-template-columns: 1fr;
     gap: 12px;
     align-items: start;
     justify-items: start;
     background: var(--mint);
     color: var(--dark-grey);
     border-radius: 12px;
     padding: calc(28px * 1.1);
     box-shadow: 0 12px 30px rgba(0, 163, 107, 0.12);
     overflow: hidden;
     margin-top: 16px;
     position: relative;
     z-index: 10;
   }
   
   /* Desktop layout for hero */
   @media (min-width: 901px) {
     .maintenance-hero {
       grid-template-columns: 1fr auto;
       width: 100%;
       max-width: 1120px;
       height: calc(360px * 0.7);
       align-items: center;
       gap: 24px;
       padding: 28px;
     }
   
     .maintenance-hero__content { align-self: center; }
   
     .maintenance-hero__media { display: flex; align-items: center; justify-content: center; }
   
     .maintenance-hero__media img,
     .maintenance-hero__img {
       display: block;
       width: auto;
       max-width: 85%;
       max-height: calc(360px * 0.7 - (28px * 2));
       object-fit: contain;
     }
   }
   
   /* Mobile hero behavior */
   @media (max-width: 900px) {
     .maintenance-hero { display: block; padding: 20px; height: auto; border-radius: 10px; }
     .maintenance-hero__title { font-size: 1.25rem; }
     .maintenance-hero__summary { font-size: 0.98rem; }
     .maintenance-hero__media { display: block; margin: 12px auto 0; text-align: center; }
     .maintenance-hero__media img,
     .maintenance-hero__img { width: 100%; max-width: 320px; height: auto; object-fit: contain; }
   }
   
   /* Title & summary */
   .maintenance-hero__title {
     margin: 0 0 8px 0;
     font-size: clamp(1.25rem, 2.6vw, 2rem);
     line-height: 1.05;
     font-weight: 800;
     color: var(--dark-grey);
     text-align: left;
     font-family: var(--font-main);
   }
   .maintenance-hero__summary {
     margin: 0;
     color: var(--dark-grey);
     font-size: clamp(0.95rem, 1.6vw, 1.05rem);
     line-height: 1.45;
     max-width: 70ch;
     text-align: left;
     font-family: var(--font-main);
   }
   .maintenance-hero__title, .maintenance-hero__summary { margin-left: 0; padding-left: 0; align-self: flex-start; box-sizing: border-box; }
   
   /* maintenance hero CTA layout */
.maintenance-hero__ctas {
  margin-top: 18px;                 /* space between summary and CTA */
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;     /* left align on desktop */
}

/* CTA appearance (small overrides to match hero) */
.maintenance-hero__cta {
  padding: 10px 20px;               /* comfortable tap target */
  border-radius: 999px;             /* pill shape */
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  min-height: 44px;                 /* accessible touch target */
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition: transform .12s ease, box-shadow .12s ease;
}

/* Hover / focus states */
.maintenance-hero__cta:hover,
.maintenance-hero__cta:focus {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  outline: none;
}

.maintenance-hero__cta:focus-visible {
  outline: 3px solid rgba(0,0,0,0.08);
  outline-offset: 3px;
}

/* Responsive: center CTA on small screens and limit width */
@media (max-width: 900px) {
  .maintenance-hero__ctas {
    justify-content: center;
    margin-top: 16px;
  }

  .maintenance-hero__cta {
    width: min(80%, 320px);
  }
}

/* Optional: place CTA inline with text on wide screens (uncomment to enable)
@media (min-width: 1200px) {
  .maintenance-hero { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
  .maintenance-hero__ctas { justify-self: start; }
}
*/