/*
Theme Name: Sunwood Velocity
Theme URI: https://sunwood.example
Author: Sunwood Pergola & Winter Garden
Description: Bold, motorsport-inspired one-page theme for Sunwood Carports — aggressive diagonal cuts, italic display type, red/onyx palette.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: sunwood-velocity
*/

:root{
  --red:#C41E2A;
  --red-deep:#8F1620;
  --ink:#141213;
  --ink-deep:#0D0B0C;
  --paper:#F4F1EE;
  --line:rgba(255,255,255,0.08);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--ink); color:var(--paper); font-family:'Inter',sans-serif;}
h1,h2,h3{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.02em; margin:0;}
img{max-width:100%; display:block;}
a{color:var(--red); text-decoration:none;}
a:hover{opacity:0.8;}
button, .btn-primary, .btn-ghost, .submit{cursor:pointer; font-family:'Oswald',sans-serif;}

.ph{
  background: repeating-linear-gradient(115deg, rgba(0,0,0,0.10) 0 18px, rgba(0,0,0,0.02) 18px 36px);
  background-color:#242123;
  position:relative; overflow:hidden;
}
.ph::after{
  content:attr(data-label);
  position:absolute; left:16px; bottom:14px;
  font-family:'Inter',sans-serif; font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  color:rgba(244,241,238,0.8); background:rgba(0,0,0,0.4); padding:6px 10px; border-radius:2px;
}

.wrap{max-width:1440px; margin:0 auto;}

/* ---------- header / nav ---------- */
.site-header{background:transparent; position:fixed; top:0; left:0; right:0; z-index:20; transition:background-color 0.15s ease;}
body.admin-bar .site-header{top:32px;}
@media screen and (max-width:782px){
  body.admin-bar .site-header{top:46px;}
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:5px 64px;}
.nav .custom-logo-link{display:flex; align-items:center;}
.nav .custom-logo-link img{height:104px; width:auto;}
.site-title{font-family:'Oswald',sans-serif; font-size:20px; letter-spacing:0.05em; color:#fff; text-transform:uppercase;}
.nav-links{display:flex; gap:36px; list-style:none; margin:0; padding:0;}
.nav-links a{color:var(--paper); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; opacity:0.7;}
.nav-links a:hover{opacity:1;}
.nav-cta{
  background:var(--red); color:#fff; border:none; padding:12px 26px;
  font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
  clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);
  display:inline-block;
}

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:640px; display:flex; align-items:center;
  background:linear-gradient(100deg, var(--ink) 30%, var(--red-deep) 130%); overflow:hidden;
}
.hero::before{content:''; position:absolute; top:0; bottom:0; left:58%; width:220px; background:rgba(255,255,255,0.03); transform:skewX(-12deg);}
.hero-copy{padding:190px 64px 80px; max-width:680px; position:relative; z-index:1;}
.kicker{color:var(--red); font-size:13px; letter-spacing:0.3em; margin-bottom:20px; font-style:italic; font-family:'Oswald',sans-serif;}
.hero h1{font-size:64px; line-height:1.02; margin:0 0 24px; font-weight:700; font-style:italic;}
.hero h1 em{font-style:italic; color:var(--red);}
.hero p{font-size:16px; line-height:1.7; color:rgba(244,241,238,0.65); max-width:440px; margin:0 0 36px; font-weight:300; font-style:normal;}
.hero-actions{display:flex; gap:14px;}
.btn-primary{
  background:var(--red); color:#fff; border:none; padding:16px 32px; font-size:13px;
  letter-spacing:0.1em; text-transform:uppercase; clip-path:polygon(6% 0,100% 0,94% 100%,0 100%);
}
.btn-ghost{background:transparent; color:var(--paper); border:1px solid rgba(255,255,255,0.3); padding:16px 32px; font-size:13px; letter-spacing:0.1em; text-transform:uppercase;}

/* ---------- ticker ---------- */
.ticker{display:flex; background:var(--red); padding:16px 64px; gap:60px; overflow:hidden; flex-wrap:wrap;}
.ticker span{font-family:'Oswald',sans-serif; font-size:13px; letter-spacing:0.14em; text-transform:uppercase; color:#fff; white-space:nowrap; opacity:0.9;}

/* ---------- sections ---------- */
.section{padding:100px 64px;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:56px; gap:30px; flex-wrap:wrap;}
.section-head .kicker{margin-bottom:14px;}
.section-head h2{font-size:36px; margin:0; font-weight:700; font-style:italic;}
.section-head p{max-width:380px; font-size:14px; color:rgba(244,241,238,0.5); font-weight:300; line-height:1.65; margin:0; font-style:normal;}

/* ---------- gallery ---------- */
.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
@media (max-width:1100px){ .gallery{grid-template-columns:repeat(2,1fr);} }
.g-card{position:relative; clip-path:polygon(0 0,100% 0,100% 92%,92% 100%,0 100%); background:#1C1A1B;}
.g-card .ph{height:250px;}
.g-card .g-body{padding:22px;}
.g-card .num{font-family:'Oswald',sans-serif; font-style:italic; font-size:13px; color:var(--red); margin-bottom:10px;}
.g-card h3{font-size:17px; margin:0 0 8px; font-weight:600; font-style:normal;}
.g-card p{font-size:12.5px; color:rgba(244,241,238,0.5); margin:0; line-height:1.6; font-weight:300;}

/* ---------- specs ---------- */
.specs{background:var(--ink-deep);}
.specs-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); margin-top:56px;}
@media (max-width:1100px){ .specs-grid{grid-template-columns:repeat(2,1fr);} }
.spec-item{background:var(--ink-deep); padding:34px 26px;}
.spec-num{color:var(--red); font-family:'Oswald',sans-serif; font-size:24px; font-style:italic; margin-bottom:14px;}
.spec-item h3{font-size:17px; margin:0 0 10px; font-weight:600; font-style:normal;}
.spec-item p{font-size:13.5px; color:rgba(244,241,238,0.5); line-height:1.6; margin:0; font-weight:300;}

/* ---------- quote ---------- */
.quote{display:grid; grid-template-columns:0.9fr 1.1fr; background:linear-gradient(100deg,var(--ink) 40%, var(--red-deep) 140%);}
@media (max-width:900px){ .quote{grid-template-columns:1fr;} }
.quote-side{padding:80px 64px; display:flex; flex-direction:column; justify-content:center;}
.quote-side h2{font-size:34px; margin:0 0 18px; font-weight:700; font-style:italic;}
.quote-side p{color:rgba(244,241,238,0.7); font-size:15px; line-height:1.7; max-width:380px; font-weight:300;}
.quote-form{padding:80px 64px; display:grid; grid-template-columns:1fr 1fr; gap:20px;}
@media (max-width:600px){ .quote-form{grid-template-columns:1fr; padding:50px 32px;} }
.field{display:flex; flex-direction:column; gap:8px;}
.field.full{grid-column:1/-1;}
.field label{font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:rgba(244,241,238,0.5);}
.field input, .field select, .field textarea{
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.15); border-radius:2px; color:var(--paper);
  font-family:'Inter',sans-serif; font-size:15px; padding:11px 12px; outline:none;
}
.field textarea{resize:none; min-height:70px;}
.quote-form .submit{
  grid-column:1/-1; margin-top:10px; background:#fff; color:var(--ink); border:none; padding:15px;
  font-family:'Oswald',sans-serif; font-size:13px; letter-spacing:0.1em; text-transform:uppercase;
  clip-path:polygon(4% 0,100% 0,96% 100%,0 100%);
}
.form-note{grid-column:1/-1; font-size:13px; color:rgba(244,241,238,0.7); padding:14px 0;}

/* ---------- footer ---------- */
.site-footer{padding:44px 64px; background:var(--ink-deep); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;}
.site-footer .custom-logo-link img{height:104px; width:auto;}
.foot-links{display:flex; gap:30px; list-style:none; margin:0; padding:0; flex-wrap:wrap;}
.foot-links a{color:rgba(244,241,238,0.5); text-decoration:none; font-size:13px;}
.copyright{font-size:12px; color:rgba(244,241,238,0.35);}

/* ---------- mobile nav ---------- */
.menu-toggle{display:none;}
@media (max-width:900px){
  .nav{padding:22px 24px;}
  .nav-links{display:none;}
  .menu-toggle{display:inline-block; background:transparent; border:1px solid rgba(255,255,255,0.3); color:#fff; padding:8px 14px; font-size:12px;}
  .hero-copy{padding:60px 24px;}
  .hero h1{font-size:42px;}
  .section{padding:60px 24px;}
  .quote-side, .quote-form{padding:50px 24px;}
  .site-footer{padding:32px 24px;}
}