/* =========================================================================
   SURYONIX ENERGY - RESPONSIVE RULES
   =========================================================================
   Loaded AFTER style.css, so rules here win on equal specificity.

   Breakpoints used across the site. Keep to these three; adding more makes
   the layout harder to reason about.

     1024px and below  - tablet / small laptop
      940px and below  - nav collapses to hamburger. Set here rather than
                         lower because the enlarged brand lockup and seven
                         nav links together need ~1130px to sit comfortably.
      560px and below  - phone

   Most grids use auto-fit and reflow on their own, so only layouts with
   fixed column counts need overrides here.
   ========================================================================= */


/* =========================================================================
   1024px - TABLET
   ========================================================================= */

@media (max-width: 1024px) {

  /* Hero becomes a single column with the form directly below the pitch.
     The form must stay high on the page - it is the conversion goal. */
  .hero__inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .hero h1 { max-width: 20ch; }
  .hero__rays { right: -25%; opacity: 0.1; }

  .solution { grid-template-columns: 1fr; }

  /* Reset the alternating image order once stacked, so every block reads
     heading first, image second. */
  .solution:nth-child(even) .solution__media { order: 0; }

  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}


/* =========================================================================
   1200px - NAVIGATION COLLAPSES
   -------------------------------------------------------------------------
   Collapses to the menu button well before the full header (large logo,
   tagline, seven links and the CTA) would run out of room, so the bar never
   overflows on small laptops.
   ========================================================================= */

@media (max-width: 1200px) {

  .nav-toggle { display: flex; }

  /* Off-canvas panel. Hidden by default; script.js toggles .is-open and
     the aria-expanded state on the button. */
  .nav {
    position: fixed;
    inset: var(--header-height) 0 auto 0;
    margin-left: 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-line);
    box-shadow: var(--shadow-md);
    padding: var(--space-4) var(--container-pad) var(--space-5);
    display: none;
  }
  .nav.is-open { display: block; }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  /* Full-width tap targets, comfortably above the 44px minimum. */
  .nav__link {
    padding: 0.9rem 0.25rem;
    font-size: var(--text-base);
    border-bottom: 1px solid var(--color-line);
    border-radius: 0;
  }
  .nav__link.is-active {
    border-bottom-color: var(--color-line);
    color: var(--color-secondary);
  }

  /* The header CTA moves inside the mobile panel; a separate always-visible
     CTA is rendered in the header by index.html for small screens. */
  .header-cta { display: none; }
  .nav > .btn { display: flex !important; margin-top: var(--space-4); width: 100%; }

  .brand img { height: 70px; }
  .brand__name { font-size: 1.35rem; }
}


/* =========================================================================
   560px - PHONE
   ========================================================================= */

@media (max-width: 560px) {

  :root {
    --header-height: 94px;
  }

  /* Header strapline stays visible on phones, just a touch smaller. */
  .brand__tagline { font-size: 0.72rem; letter-spacing: 0.015em; }

  .footer__lockup img { height: 74px; }
  .footer__lockup .footer__name { font-size: 1.2rem; }
  .footer__lockup .footer__tagline { font-size: 0.85rem; }

  /* Process rail tightens so the text column keeps a usable width. */
  .process__step { grid-template-columns: 44px 1fr; gap: var(--space-4); }
  .process__num { width: 44px; height: 44px; font-size: 1.1rem; }

  .footer__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .footer__bottom { flex-direction: column; gap: var(--space-3); }

  /* Buttons go full width - easier to hit, and reads as more deliberate
     than two half-width buttons squeezed side by side. */
  .final-cta__actions .btn,
  .hero .btn { width: 100%; }

  /* The WhatsApp panel must never exceed the viewport. */
  .wa__panel { width: calc(100vw - 2rem); max-width: 300px; }

  .subsidy-table th,
  .subsidy-table td { padding: var(--space-3) var(--space-1); }

  .notice { flex-direction: column; gap: var(--space-3); }

  /* The scene illustrations scale down to fit the screen so the whole
     picture is visible at once - no horizontal swiping. The in-drawing
     labels get smaller at this width, which is the accepted trade-off. */
  .illustration img {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}


/* =========================================================================
   VERY SMALL PHONES
   -------------------------------------------------------------------------
   Trim the header lockup a touch so the menu button always fits at ~320px.
   ========================================================================= */

@media (max-width: 380px) {
  .brand img { height: 64px; }
  .brand__name { font-size: 1.2rem; }
}


/* =========================================================================
   FOOTER COLUMNS
   -------------------------------------------------------------------------
   4-up only on wide screens where the brand lockup fits on one line; 2-up
   below that; brand spans the full width on small tablets and phones so the
   wordmark never wraps.
   ========================================================================= */

@media (min-width: 561px) and (max-width: 1240px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 561px) and (max-width: 768px) {
  .footer__brand { grid-column: 1 / -1; }
}


/* =========================================================================
   PRINT
   -------------------------------------------------------------------------
   Customers do print quotes and reference pages. Strip the interactive
   furniture so the content prints cleanly.
   ========================================================================= */

@media print {
  .site-header,
  .wa,
  .nav-toggle,
  .lead-form,
  .final-cta__actions { display: none !important; }

  body { color: #000; font-size: 11pt; }
  .section { padding-block: 1.5rem; }
  .section--dark { background: none; }
  .section--dark h2,
  .section--dark h3,
  .section--dark p { color: #000; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; }
  [data-reveal] { opacity: 1; transform: none; }
}