/* ============================================================
   SILVER OAKS — Responsive
   ============================================================
   File:        assets/css/responsive.css
   Contains:    ALL media queries for the site.
   Breakpoints: 980px (tablet), 720px (small tablet), 520px (mobile)
   ============================================================ */


/* ------------------------------------------------------------
   ≤ 980px — Tablet
   ------------------------------------------------------------ */
@media (max-width: 980px) {

  /* Layout */
  .container,
  .container-narrow,
  .container-text       { padding: 0 24px; }

  /* Grids collapse to 2 columns */
  .product-grid         { grid-template-columns: repeat(2, 1fr); }
  .categories           { grid-template-columns: 1fr; gap: 18px; }
  .values               { grid-template-columns: 1fr; }
  .stats                { grid-template-columns: repeat(2, 1fr); }
  .contact-wrap         { grid-template-columns: 1fr; gap: 48px; }
  .footer-inner         { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand-panel   { grid-column: 1 / -1; max-width: 560px; }

  /* Brand header stacks */
  .brand-header         { flex-direction: column; align-items: flex-start; }
  .brand-header .blurb  { text-align: left; max-width: 100%; }

  /* Sections breathe less */
  .section              { padding: var(--space-lg) 0; }
  .hero                 { min-height: 70vh; }
  .ornate-frame         { padding: 56px 32px; }
}


/* ------------------------------------------------------------
   ≤ 720px — Small tablet / large phone
   ------------------------------------------------------------ */
@media (max-width: 720px) {

  /* Header — collapse left/right nav into a toggle */
  .site-header .nav-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 12px 18px;
    gap: 12px;
  }
  .nav-links            { display: none; }
  .site-header.is-open .nav-links .mobile-only { display: block; }
  .nav-toggle           { display: inline-flex; }

  /* When toggle is open, show menu as a stacked panel */
  .site-header.is-open .nav-links {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg-light);
    border-bottom: 1px solid var(--color-border);
    flex-direction: column;
    padding: 24px;
    gap: 18px;
  }
  .site-header.is-open .nav-links.right { display: none; }

  /* Contact is duplicated as a mobile-only item inside the left menu. */

  /* Brand text on mobile — show only wordmark, hide sub */
  .nav-brand .top       { display: none; }
  .nav-brand .sub:not(.nav-cert-note) { display: none; }
  .nav-brand .wordmark  { font-size: 13px; }
  .nav-brand img        { width: clamp(32px, 4.3vw, 55px); height: auto; }
  .nav-brand            { min-width: 0; width: 100%; }
  .sub.nav-cert-note {
    display: inline-flex !important;
    flex-wrap: nowrap;
    width: fit-content;
    max-width: min(100%, 300px);
    gap: 5px;
    padding: 3px 8px 4px 3px;
    font-size: 7.4px;
    line-height: 1.18;
    letter-spacing: 0.012em;
    white-space: nowrap;
  }
  .sub.nav-cert-note .cert-mini-mark {
    width: 26px;
    height: 19px;
  }
  .sub.nav-cert-note .cert-mini-mark img {
    width: 22px;
  }
  .sub.nav-cert-note > span:last-child {
    flex: 0 0 auto;
    height: auto;
    min-width: 0;
    line-height: 1.22;
    white-space: nowrap;
  }

  /* Hero scales down */
  .hero                 { min-height: 60vh; padding: 56px 20px; }
  .page-hero            { padding: 56px 20px 24px; }

  /* Forms — single column */
  .field-row            { grid-template-columns: 1fr; gap: 0; }
  .contact-form         { padding: 28px 20px; }
  .product-modal        { padding: 14px; align-items: flex-start; overflow: auto; }
  .product-modal-dialog { grid-template-columns: 1fr; height: auto; max-height: none; }
  .product-modal-media  { min-height: 320px; border-right: none; border-bottom: 1px solid var(--color-border); }
  .product-modal-zoom   { right: 14px; bottom: 14px; width: 40px; height: 40px; }
  .product-image-zoom   { padding: 16px 10px; }
  .product-image-zoom-img {
    max-width: calc(100vw - 20px);
    max-height: 84vh;
  }
  .product-image-zoom-close { top: 12px; right: 12px; }
  .product-detail-row   { grid-template-columns: 1fr; gap: 4px; }
  .product-modal-close  { top: 10px; right: 10px; }

  /* Footer */
  .footer-inner         { grid-template-columns: 1fr; gap: 36px; text-align: center; }
  .footer-bottom        { justify-content: center; text-align: center; }
  .footer-brand-panel   { margin: 0 auto; }
  .site-footer .lockup.small { align-items: center; text-align: center; }
  .footer-intro         { margin-left: auto; margin-right: auto; }
  .footer-certified-tagline { font-size: 8.6px; }
  .footer-certified-mark { width: 34px; height: 25px; }
  .footer-certified-mark img { width: 30px; }
  .footer-social-link   { justify-content: center; }
  .footer-trust-note    { justify-content: center; line-height: 1.45; }
}


/* ------------------------------------------------------------
   ≤ 520px — Phone
   ------------------------------------------------------------ */
@media (max-width: 520px) {

  :root                 { --fs-base: 16px; }

  .product-grid         { grid-template-columns: 1fr; }
  .stats                { grid-template-columns: 1fr 1fr; }

  .hero h1              { font-size: 44px; }
  .page-hero h1         { font-size: 44px; }

  .lockup .name         { font-size: 26px; }

  .btn                  { padding: 12px 22px; font-size: 10px; }

  .ornate-frame         { padding: 44px 20px; }
  .ornate-frame .corner { width: 80px; height: 80px; }
  .site-footer          { padding-left: 18px; padding-right: 18px; }
  .site-header .nav-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }
  .sub.nav-cert-note {
    width: fit-content;
    max-width: min(100%, 260px);
    gap: 4px;
    padding: 3px 7px 4px 3px;
    font-size: 6.8px;
    letter-spacing: 0;
  }
  .sub.nav-cert-note > span:last-child {
    flex-basis: auto;
    white-space: nowrap;
  }
  .footer-certified-tagline {
    padding-right: 0.85em;
    font-size: 7.8px;
  }
  .footer-bottom {
    font-size: 9.5px;
    letter-spacing: 0.12em;
  }
}


/* ------------------------------------------------------------
   Print
   ------------------------------------------------------------ */
@media print {
  .site-header,
  .site-footer,
  .nav-toggle,
  .contact-form         { display: none; }
  body                  { background: #fff; color: #000; }
}