/* Shared screen typography for Roofing pages. Loaded last by site_assets.py.
   Use rem units so browser font preferences and zoom remain effective.
   Printed quotations retain their separate compact layout. */
@media screen {
  body { font-size: 1.0625rem; line-height: 1.6; }

  /* Navigation and actions */
  .main-header nav a { font-size: .9375rem; line-height: 1.5; }
  .main-header .parent-link { font-size: .9375rem !important; }
  .button, .btn, .primary-button,
  .catalog-page .catalog-hero .button,
  .catalog-page .product-card .button,
  .quote-summary > .btn, .quote-summary #quote-send {
    font-size: 1rem; line-height: 1.45; min-height: 44px;
  }
  .text-link, .tile .tile-link, .category-feature a { font-size: 1rem; }
  .site-bottom p, .site-bottom a, .site-bottom nav a,
  .site-bottom .footer-brand > p:last-child { font-size: .9375rem; }
  .site-bottom .footer-tagline { font-size: 1.6875rem; }
  .site-bottom .bottom-line { font-size: .8125rem; line-height: 1.6; }

  /* Landing page and category descriptions */
  .hero-description { font-size: 1.125rem; line-height: 1.65; }
  .section-heading p:not(.eyebrow), .story p:not(.eyebrow),
  .contact-block p:not(.eyebrow), .catalog-callout p,
  .detail-choices > p, .specifications > div > p:last-child,
  .project-inspiration p:not(.eyebrow), .roof-static p,
  .catalog-page .catalog-hero > p:not(.eyebrow):not(.price-date) {
    font-size: 1.0625rem; line-height: 1.65;
  }
  .tile p, .category-feature p, .cta-panel p, .faq-list details p,
  .steps p, .intro-copy, .stage-heading p { font-size: 1rem; line-height: 1.6; }
  .eyebrow, .kicker, .stage-topline, .roofing-tools .view-eyebrow {
    font-size: .75rem; line-height: 1.5;
  }
  .experience-note, .intro-strip { font-size: .8125rem; line-height: 1.5; }

  /* Supporting information should still be comfortably readable. */
  .small-note, figcaption, .tile .tile-meta, .source-note, .stock-caption,
  .crumbs, .page-intro, .stage-foot, .screen-note, .selection-note,
  .sample-figure figcaption, .sample-figure > a:not(.detail-sample),
  .gallery-controls span, .roof-thumbnails button, .material-gallery button,
  .project-photo-link span, .roof-price > small, .roof-price p,
  .price-panel small, .roofing-photo-note, .catalog-page .sku,
  .catalog-page .catalog-hero .price-date, .results-bar p,
  .results-bar button, .results-actions > button, .sort-label,
  .more-ranges a, .more-ranges p, .hover-preview > p,
  .family-swatches span, .price-table caption, .quote-mini,
  .quote-mini small, .quote-line > p, .quote-line summary,
  .quote-line-title button, .quote-summary p, .quote-summary button,
  .quote-summary summary, .quote-summary details textarea,
  .quote-add-form [role=status], .quote-line form [role=status],
  .quote-edit-items > summary span, .request-heading span {
    font-size: .875rem; line-height: 1.5;
  }
  .project-inspiration .gallery-note { font-size: .875rem !important; }
  .chip, .catalog-page .product-category, .category-sidebar nav button span {
    font-size: .75rem; line-height: 1.5;
  }

  /* Catalog rows and product selectors */
  .catalog-page .product-card h2 { font-size: 1.125rem; line-height: 1.35; }
  .catalog-page .product-detail, .catalog-page .product-price small {
    font-size: .875rem; line-height: 1.5;
  }
  .catalog-page .product-price { font-size: 1rem; line-height: 1.5; }
  .category-sidebar summary { font-size: 1rem; }
  .category-sidebar nav button, .roofing-view-switch button {
    font-size: .9375rem; line-height: 1.5; min-height: 44px;
  }
  legend, .choice-label { font-size: 1rem; line-height: 1.5; }
  legend span { font-size: .8125rem; }
  .finish-options button, .option-btn, .collection-options button {
    font-size: .9375rem; line-height: 1.45; min-height: 44px;
  }
  .finish-options button small, .gauge-options button small,
  .color-option small { font-size: .8125rem; line-height: 1.5; }
  .color-option { font-size: .875rem; }
  .color-options { grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr)); }
  .roof-thumbnails button { min-width: 96px; }
  .gallery-controls button { width: 44px; height: 44px; flex: none; }
  .spec-table, .price-table, .specifications dt, .specifications dd {
    font-size: .9375rem; line-height: 1.6;
  }

  /* Enquiry fields and saved materials */
  .contact-form label, .inquiry-fields label, .quote-add-form label,
  .quote-summary label, .quote-line form > label, .length-fields label,
  .trim-color-field label, .catalog-controls label span { font-size: .9375rem; }
  .length-fields legend { font-size: .9375rem !important; }
  input, select, textarea, .sort-label select, .quote-measurements input,
  .quote-add-form input, .quote-add-form select, .quote-summary input,
  .quote-summary textarea, .quote-line input, .quote-line select,
  .contact-form input, .contact-form select, .contact-form textarea,
  .inquiry-fields input, .inquiry-fields select,
  .catalog-controls input, .catalog-controls select {
    font-size: 1rem; line-height: 1.5; max-width: 100%;
  }
  input:not([type=checkbox]):not([type=radio]), select { min-height: 44px; }
  .customer-materials-reference, .customer-materials li > p,
  .customer-materials dt, .customer-materials dd { font-size: .9375rem; }

  /* Let longer labels wrap instead of squeezing text on narrow screens. */
  .catalog-page .product-info { min-width: 0; }
  .results-bar, .results-actions { flex-wrap: wrap; }
  .main-header nav a, .button, .btn, .option-btn, .finish-options button,
  .category-sidebar nav button { white-space: normal; }
}

@media screen and (max-width: 760px) {
  .main-header nav { gap: 8px 18px; }
  .main-header nav a { padding-block: 10px; }
  .hero-description { font-size: 1rem; line-height: 1.6; }
  .roofing-hero .hero-copy { min-width: 0; }
  .roofing-hero .button { padding: 12px 18px; gap: 10px; }
  .catalog-page .product-card .button { width: auto; }
}

@media screen and (max-width: 760px) and (min-height: 540px) and (prefers-reduced-motion: no-preference) {
  /* The opening keeps its scroll effect, with more room for larger copy. */
  .slash-ready .roofing-hero:not([data-gallery]) { padding: 24px 26px 44px; }
}