/*
 * Simple visual adjustments.
 * Save this file to see changes right away; no Python build is required.
 * Main layout rules remain in style.css.
 */

/* Desktop menu: change 17px and 700 to adjust text size and boldness. */
@media (min-width: 1201px) {
  .site-header nav { font-size: 17px; font-weight: 700; }
}

/* Smaller laptop menu. */
@media (min-width: 1001px) and (max-width: 1200px) {
  .site-header nav { font-size: 15px; font-weight: 700; }
}

/* Phone and tablet menu. */
@media (max-width: 1000px) {
  .site-header nav.open { font-size: 16px; font-weight: 700; }
}

/* Homepage message: keep the three-line headline readable over the photo. */
.home-message { max-width: 1040px; padding-top: clamp(54px, 6vw, 80px); }
.hero-content.home-message h1 { font-size: clamp(42px, 5vw, 74px); line-height: 1.08; }
.hero-content.home-message p { max-width: 700px; font-size: clamp(16px, 1.3vw, 19px); }
@media (max-width: 700px) {
  .home-message { padding-top: 54px; padding-bottom: 130px; }
  .hero-content.home-message h1 { font-size: clamp(36px, 9vw, 56px); overflow-wrap: normal; }
}

/* Five flooring categories across on larger desktop screens. */
@media (min-width: 1201px) {
  .home-products { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
}
.home-products .product-card[href="luxury-vinyl-plank.html"] .card-image img,
.home-products .product-card[href="laminate.html"] .card-image img {
  object-fit: cover;
  object-position: center;
}

/* Keep the complete-space description directly beneath its heading. */
.complete-space .section-heading { grid-template-columns: 1fr; gap: 0; }
.complete-space .section-heading > div > p {
  max-width: 650px;
  margin: 20px 0 0;
}

/* Keep the lower action buttons legible and consistent with the brand palette. */
.lvp-visit .button.red,
.wall2-finish .button.red {
  background: #a32d25;
  color: #fff;
}
.lvp-visit .button.red:hover,
.wall2-finish .button.red:hover {
  background: #842019;
  color: #fff;
}

/* Hero action colors on the LVP and Wall Panels pages. */
.lvp-hero .button.red,
.wall2-hero .button.red {
  background: #a32d25;
  color: #fff;
}
.lvp-hero .button.red:hover,
.wall2-hero .button.red:hover {
  background: #842019;
  color: #fff;
}

/* Carpet underlay: keep the copy wide enough on large desktop screens. */
@media (min-width: 701px) {
  .carpet-underlay-copy {
    width: min(100%, calc(50% + 140px));
    padding-right: 24px;
  }
}

/* Static header: it stays in the page flow and scrolls away with the content. */
html { scroll-padding-top: 24px; }
.site-header {
  position: relative;
  top: auto;
  height: 110px;
  background: #fff;
  box-shadow: 0 1px 0 var(--line);
}
.site-header .brand { width: 132px; height: 102px; }
.site-header .brand img {
  width: 172px;
  height: 172px;
  left: -20px;
  top: -35px;
}
.site-header nav { gap: clamp(10px, 1.25vw, 18px); font-size: clamp(14px, 1.1vw, 16px); font-weight: 650; }
.site-header .nav-cta { padding: 12px 15px; margin-left: 0; }
.product-detail aside, .split-story > div:first-child { top: 24px; }
.wall2-card-grid article { scroll-margin-top: 24px; }

@media (min-width: 1001px) and (max-width: 1150px) {
  .site-header nav { font-size: 13px; gap: 8px; }
  .site-header .brand { width: 116px; }
  .site-header .nav-cta { padding: 10px; }
}
@media (max-width: 1000px) {
  .site-header { height: 84px; }
  .site-header .brand { width: 112px; height: 78px; }
  .site-header .brand img { width: 148px; height: 148px; left: -18px; top: -35px; }
  .site-header nav { max-height: calc(100dvh - 84px); }
}
@media (max-width: 700px) {
  .site-header { height: 76px; }
  .site-header .brand { width: 106px; height: 70px; }
  .site-header .brand img { width: 140px; height: 140px; left: -17px; top: -35px; }
  .site-header nav { max-height: calc(100dvh - 76px); }
}