/* BuildBright Home Supply — shared external stylesheet */
/* Page foundation and centered 1000px wrapper */
* { box-sizing: border-box; }
body { margin: 0; background: #eeeee8; color: #273b32; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.6; }
a { color: #28543c; text-underline-offset: 4px; }
a:hover { color: #704a20; }
a:focus-visible { outline: 3px solid #b66b12; outline-offset: 4px; }
img { max-width: 100%; display: block; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: 38px; line-height: 1.15; margin-bottom: 20px; }
h2 { font-size: 26px; line-height: 1.25; margin-bottom: 14px; }
h3 { font-size: 19px; line-height: 1.3; margin-bottom: 10px; }
#wrapper { width: 100%; max-width: 1000px; margin: 0 auto; background: #fff; box-shadow: 0 8px 35px #203d3012; }
.top-banner { background: #234638; color: #fff; text-align: center; padding: 10px 16px; font-size: 12px; letter-spacing: 1px; }
.skip-link { position: absolute; top: -100px; background: white; padding: 12px; z-index: 20; }
.skip-link:focus { top: 0; }
/* Header and box-style navigation */
#header { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 32px; }
.brand { width: 430px; max-width: 75%; }
.brand img { width: 100%; height: auto; }
.header-note { margin: 0; font-size: 13px; text-align: right; }
#nav { padding: 0 32px 20px; position: relative; z-index: 5; }
.menu { display: flex; gap: 5px; list-style: none; padding: 0; margin: 0; }
.menu > li { flex: 1; position: relative; }
.menu > li > a { display: block; padding: 12px 5px; background: #2d513e; border: 1px solid #2d513e; color: white; text-align: center; text-decoration: none; font-weight: bold; border-radius: 3px; transition: background .15s; }
.menu > li > a:hover, .menu > li:focus-within > a { background: #f1c16b; border-color: #f1c16b; color: #243b2e; }
.dropdown { display: none; position: absolute; top: 100%; left: 0; width: 230px; padding: 6px; margin: 0; list-style: none; background: #fff; border: 1px solid #d2d9cc; box-shadow: 0 10px 20px #132b3026; border-radius: 3px; }
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { display: block; }
.dropdown a { display: block; padding: 11px 12px; text-decoration: none; border-bottom: 1px solid #e9ede7; }
.dropdown a:hover, .dropdown a:focus { background: #f5e7c9; }
/* Main content, hero and buttons */
#main { padding: 8px 32px 36px; }
.hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; padding: 36px; background: linear-gradient(115deg, #f4efdf, #e3e9d9); border: 1px solid #e1e4d5; border-radius: 5px; }
.hero h1 { font-size: 46px; letter-spacing: -1.5px; }
.hero p { max-width: 440px; }
.eyebrow { font-size: 11px; font-weight: bold; letter-spacing: 1.6px; margin-bottom: 12px; color: #516341; }
.button { display: inline-block; background: #edb75e; border: 1px solid #d69d43; color: #263629; border-radius: 3px; padding: 11px 20px; font-weight: bold; text-align: center; text-decoration: none; transition: background .15s, transform .15s; }
.button:hover { background: #f6ca80; color: #263629; transform: translateY(-2px); }
.text-button { display: inline-block; margin: 14px 0 0 14px; font-size: 14px; }
.hero-art { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hero-art img { width: 100%; height: auto; }
.hero-art span { font-size: 14px; font-weight: bold; letter-spacing: 2px; }
.benefits { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid #dde3d8; padding: 22px 0; gap: 16px; text-align: center; }
.benefits p { margin: 0; font-size: 12px; }
.benefits strong { font-size: 14px; }
.benefits p + p { border-left: 1px solid #dde3d8; }
/* Department and product cards */
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin: 30px 0 18px; }
.section-heading h2 { margin-bottom: 0; }
.section-heading a { font-size: 13px; }
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.category-card { display: block; border: 1px solid #dce0d5; border-radius: 5px; overflow: hidden; text-decoration: none; color: #273b32; transition: box-shadow .15s, transform .15s; }
.category-card:hover { box-shadow: 0 7px 15px #23463820; transform: translateY(-3px); }
.category-card img { background: #f4f3eb; width: 100%; height: 160px; object-fit: contain; }
.category-card > div { padding: 18px; }
.category-card p { font-size: 13px; }
.category-card span { font-size: 13px; font-weight: bold; text-decoration: underline; }
.project-banner { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 30px 0; background: #294b3c; color: white; border-radius: 5px; padding: 28px; }
.project-banner .eyebrow { color: #f5c67a; }
.project-banner p:last-child { margin: 0; font-size: 14px; }
.project-banner .button { flex-shrink: 0; }
.company-box { padding: 24px; background: #f8f7f1; border: 1px solid #e2e3d8; border-left: 4px solid #d99a34; margin: 24px 0; }
.company-box p { font-size: 15px; }
.intro { color: #58675f; }
.catalog-section { margin: 32px 0; scroll-margin-top: 20px; }
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.product-card { border: 1px solid #dce0d5; border-top: 4px solid #d99a34; border-radius: 5px; padding: 24px; background: #fafaf6; }
.price { font-size: 26px; font-weight: bold; margin-bottom: 0; }
.catalog-note { font-size: 12px; color: #5a675f; }
.guide { display: flex; gap: 24px; padding: 28px 0; border-bottom: 1px solid #dce0d5; }
.step { font-size: 32px; font-weight: bold; color: #92703a; }
/* Footer */
#footer { display: grid; grid-template-columns: 1fr 1.3fr; gap: 24px; background: #203f32; color: #f5f4ea; padding: 28px 32px; font-size: 12px; }
#footer strong { font-size: 17px; }
#footer a { color: #f5ce90; }
#footer p { margin: 8px 0; }
#footer small { color: #d5dfd4; }
/* Smaller screens: wrapping boxes and single-column content */
@media (max-width: 700px) {
 #header { padding: 18px; } #nav { padding: 0 18px 18px; } #main { padding: 0 18px 24px; }
 .header-note { display: none; } .brand { max-width: 100%; }
 .menu { flex-wrap: wrap; } .menu > li { flex: 1 1 30%; } .menu > li > a { font-size: 13px; }
 .dropdown { width: 210px; left: auto; right: 0; }
 .hero { grid-template-columns: 1fr; padding: 26px; } .hero h1 { font-size: 38px; } .hero-art { display: none; }
 .card-grid { grid-template-columns: 1fr; } .category-card img { height: 180px; }
 .project-banner { flex-direction: column; align-items: flex-start; }
 .section-heading { align-items: flex-start; flex-direction: column; }
 .product-grid { grid-template-columns: 1fr; } #footer { grid-template-columns: 1fr; padding: 24px; }
 .benefits { gap: 8px; } .benefits strong { font-size: 12px; } .benefits p { font-size: 11px; }
 h1 { font-size: 32px; } .text-button { margin-left: 0; display: block; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }