/*
Theme Name: Walifornia Graphics
Theme URI: https://waliforniagraphics.com
Author: Walifornia Graphics
Description: Custom one-page style business theme for Walifornia Graphics — vehicle wraps, window film, signage and large-format printing. Sister theme to Walifornia Murals.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: walifornia-graphics
*/

/* =========================================================
   0. Design tokens
========================================================= */
:root{
	--ink:        #221f1b;
	--ink-soft:   #4a443c;
	--cream:      #faf5ea;
	--cream-2:    #f1e9d8;
	--paper:      #ffffff;
	--gold:       #c9973f;
	--gold-dark:  #a97c2f;
	--rust:       #bf5b3d;
	--rust-dark:  #9e4830;
	--line:       #e4d9c3;

	--font-display: 'Playfair Display', Georgia, serif;
	--font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--radius: 14px;
	--radius-sm: 8px;
	--shadow: 0 20px 40px -20px rgba(34, 31, 27, 0.35);
	--shadow-sm: 0 8px 20px -12px rgba(34, 31, 27, 0.3);
	--container: 1180px;
}

/* =========================================================
   1. Reset / base
========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
	margin: 0;
	background: var(--cream);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 700; line-height: 1.15; margin: 0 0 .5em; color: var(--ink); }
p{ margin: 0 0 1em; }
.container{ width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
section{ padding: 96px 0; }
@media (max-width: 782px){ section{ padding: 64px 0; } }

.eyebrow{
	display: inline-block;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--gold-dark);
	margin-bottom: 14px;
}
.section-head{ max-width: 640px; margin: 0 0 48px; }
.section-head.center{ margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2{ font-size: clamp(28px, 3.4vw, 40px); }
.section-head p{ color: var(--ink-soft); font-size: 17px; }

/* Buttons */
.btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 30px;
	border-radius: 999px;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 14.5px;
	letter-spacing: .3px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, background .2s ease, color .2s ease;
	white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{ background: var(--rust); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover{ background: var(--rust-dark); }
.btn-dark{ background: var(--ink); color: var(--cream); }
.btn-dark:hover{ background: #34302a; }
.btn-outline{ background: transparent; border-color: currentColor; color: var(--ink); }
.btn-outline:hover{ background: var(--ink); color: var(--cream); }
.btn-outline-light{ background: transparent; border-color: rgba(250,245,234,.6); color: var(--cream); }
.btn-outline-light:hover{ background: var(--cream); color: var(--ink); }

/* =========================================================
   2. Logo
========================================================= */
.wb-logo{ height: 72px; width: auto; display: block; }
@media (max-width: 480px){ .wb-logo{ height: 52px; } }

/* =========================================================
   3. Header
========================================================= */
.site-header{
	position: sticky; top: 0; z-index: 100;
	background: rgba(250,245,234,.92);
	backdrop-filter: saturate(160%) blur(8px);
	border-bottom: 1px solid var(--line);
}
.site-header .container{ display: flex; align-items: center; justify-content: space-between; height: 92px; }
.nav-menu{ display: flex; align-items: center; gap: 34px; }
.nav-menu a{
	font-size: 14px; font-weight: 600; letter-spacing: .3px;
	color: var(--ink-soft);
	transition: color .15s ease;
}
.nav-menu a:hover{ color: var(--rust); }
.header-cta{ display: flex; align-items: center; gap: 18px; }
.header-phone{ display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; }
.header-phone svg{ width: 18px; height: 18px; flex: none; }
.nav-toggle{
	display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
	background: var(--paper); align-items: center; justify-content: center; cursor: pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
	content: ""; display: block; width: 18px; height: 2px; background: var(--ink); position: relative; transition: .2s;
}
.nav-toggle span::before{ position: absolute; top: -6px; }
.nav-toggle span::after{ position: absolute; top: 6px; }

@media (max-width: 900px){
	.site-header .container{ height: 76px; }
	.nav-menu{
		position: fixed; inset: 76px 0 0 0; height: calc(100vh - 76px);
		background: var(--cream); flex-direction: column; justify-content: flex-start;
		padding: 36px 24px; gap: 8px; transform: translateX(100%); transition: transform .25s ease;
		overflow-y: auto;
	}
	.nav-menu.is-open{ transform: translateX(0); }
	.nav-menu a{ display: block; width: 100%; padding: 14px 4px; font-size: 18px; border-bottom: 1px solid var(--line); }
	.header-phone span{ display: none; }
	.nav-toggle{ display: flex; }
}

/* =========================================================
   4. Hero
========================================================= */
.hero{
	position: relative;
	min-height: 88vh;
	display: flex;
	align-items: center;
	padding: 140px 0 100px;
	color: #fff;
	overflow: hidden;
}
.hero::before{
	content: ""; position: absolute; inset: 0;
	background-image: url('assets/img/hero/hero.jpg');
	background-size: cover; background-position: center;
}
.hero::after{
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(100deg, rgba(20,17,14,.88) 20%, rgba(20,17,14,.55) 55%, rgba(20,17,14,.35) 100%);
}
.hero .container{ position: relative; z-index: 2; }
.hero-content{ max-width: 660px; }
.hero-badge{
	display: inline-flex; align-items: center; gap: 8px;
	background: rgba(250,245,234,.14); border: 1px solid rgba(250,245,234,.3);
	padding: 7px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: 1.5px;
	text-transform: uppercase; margin-bottom: 22px;
}
.hero h1{ color: #fff; font-size: clamp(34px, 5.4vw, 60px); margin-bottom: 20px; }
.hero p.lead{ font-size: 18px; color: rgba(250,245,234,.88); max-width: 520px; margin-bottom: 34px; }
.hero-actions{ display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 44px; }
.hero-stats{ display: flex; flex-wrap: wrap; gap: 36px; }
.hero-stats div strong{ display: block; font-family: var(--font-display); font-size: 26px; }
.hero-stats div span{ font-size: 13px; color: rgba(250,245,234,.75); }

/* =========================================================
   5. Trust strip (placeholder client logos)
========================================================= */
.trust-strip{ padding: 40px 0; border-bottom: 1px solid var(--line); }
.trust-strip .container{ display: flex; align-items: center; gap: 28px; flex-wrap: wrap; justify-content: space-between; }
.trust-strip p{ margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.trust-logos{ display: flex; gap: 14px; flex-wrap: wrap; flex: 1; }
.trust-logo{
	flex: 1 1 120px; max-width: 150px; height: 44px;
	border: 1px dashed var(--line); border-radius: var(--radius-sm);
	display: flex; align-items: center; justify-content: center;
	font-size: 11px; font-weight: 700; letter-spacing: .5px; color: #b8ac97; text-transform: uppercase;
}

/* =========================================================
   6. Services
========================================================= */
.services{ background: var(--paper); }
.service-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 900px){ .service-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .service-grid{ grid-template-columns: 1fr; } }

.service-card{
	background: var(--cream);
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid var(--line);
	transition: transform .2s ease, box-shadow .2s ease;
	display: flex; flex-direction: column;
}
.service-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-sm); }
.service-card .thumb{
	height: 200px; background-size: cover; background-position: center; position: relative;
}
.service-card .thumb span.num{
	position: absolute; top: 14px; left: 14px;
	background: rgba(34,31,27,.75); color: var(--cream);
	font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; letter-spacing: 1px;
}
.service-card .thumb.placeholder{
	background: repeating-linear-gradient(135deg, var(--cream-2), var(--cream-2) 14px, #e9dfc9 14px, #e9dfc9 28px);
	display: flex; align-items: center; justify-content: center; text-align: center;
}
.service-card .thumb.placeholder .ph-label{
	background: var(--paper); border: 1px dashed #cbbd9c; border-radius: var(--radius-sm);
	padding: 10px 16px; font-size: 12px; font-weight: 700; color: var(--ink-soft); letter-spacing: .5px;
	max-width: 80%;
}
.service-card .body{ padding: 26px 26px 30px; flex: 1; display: flex; flex-direction: column; }
.service-card h3{ font-size: 20px; margin-bottom: 10px; }
.service-card p{ color: var(--ink-soft); font-size: 15px; margin-bottom: 18px; flex: 1; }
.service-card .card-link{ font-size: 13.5px; font-weight: 700; color: var(--rust); letter-spacing: .3px; }

/* =========================================================
   7. Process
========================================================= */
.process{ background: var(--ink); color: var(--cream); }
.process .section-head p{ color: rgba(250,245,234,.75); }
.process .section-head h2{ color: var(--cream); }
.process-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
@media (max-width: 900px){ .process-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .process-grid{ grid-template-columns: 1fr; } }
.process-step{ border-top: 2px solid rgba(250,245,234,.2); padding-top: 20px; }
.process-step .step-num{ font-family: var(--font-display); font-size: 34px; color: var(--gold); margin-bottom: 10px; display: block; }
.process-step h3{ color: var(--cream); font-size: 18px; }
.process-step p{ color: rgba(250,245,234,.7); font-size: 14.5px; }

/* =========================================================
   8. About (home teaser)
========================================================= */
.about-teaser .container{ display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 900px){ .about-teaser .container{ grid-template-columns: 1fr; gap: 36px; } }
.about-media{ position: relative; }
.about-media img{ border-radius: var(--radius); box-shadow: var(--shadow); }
.about-media .badge{
	position: absolute; bottom: -24px; left: -24px;
	background: var(--rust); color: #fff; padding: 18px 22px; border-radius: var(--radius-sm);
	font-family: var(--font-display); box-shadow: var(--shadow-sm);
}
@media (max-width: 560px){ .about-media .badge{ left: 0; bottom: -18px; padding: 14px 18px; } }
.about-media .badge strong{ display: block; font-size: 26px; line-height: 1; }
.about-media .badge span{ font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.about-copy .checklist{ margin: 24px 0 30px; }
.about-copy .checklist li{ display: flex; gap: 12px; margin-bottom: 12px; font-size: 15px; color: var(--ink-soft); }
.about-copy .checklist li svg{ flex: none; width: 20px; height: 20px; color: var(--rust); margin-top: 2px; }

/* =========================================================
   9. Gallery
========================================================= */
.gallery-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 900px){ .gallery-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px){ .gallery-grid{ grid-template-columns: repeat(2, 1fr); } }
.gallery-item{ position: relative; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4/5; background: var(--cream-2); }
.gallery-item img{ width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.gallery-item:hover img{ transform: scale(1.06); }
.gallery-item .tag{
	position: absolute; left: 10px; bottom: 10px;
	background: rgba(34,31,27,.75); color: var(--cream);
	font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 999px; letter-spacing: .5px;
}
.gallery-more{ text-align: center; margin-top: 44px; }

/* =========================================================
   10. Testimonials
========================================================= */
.testimonials{ background: var(--cream-2); }
.testi-track{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 900px){ .testi-track{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .testi-track{ grid-template-columns: 1fr; } }
.testi-card{ background: var(--paper); border-radius: var(--radius); padding: 30px; border: 1px solid var(--line); }
.testi-card .stars{ color: var(--gold); letter-spacing: 2px; margin-bottom: 14px; font-size: 14px; }
.testi-card p{ color: var(--ink-soft); font-size: 15px; }
.testi-card .who{ display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.testi-card .avatar{
	width: 42px; height: 42px; border-radius: 50%; background: var(--gold);
	color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: var(--font-display);
	flex: none;
}
.testi-card .who strong{ display: block; font-size: 14px; }
.testi-card .who span{ font-size: 12.5px; color: var(--ink-soft); }

/* =========================================================
   11. CTA band
========================================================= */
.cta-band{
	background: linear-gradient(120deg, var(--rust), var(--rust-dark));
	color: #fff; text-align: center;
}
.cta-band h2{ color: #fff; font-size: clamp(26px, 4vw, 38px); }
.cta-band p{ color: rgba(255,255,255,.85); max-width: 560px; margin: 0 auto 30px; }
.cta-actions{ display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.cta-band .btn-outline-light{ border-color: rgba(255,255,255,.55); }

/* =========================================================
   12. Contact
========================================================= */
.contact-grid{ display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: flex-start; }
@media (max-width: 900px){ .contact-grid{ grid-template-columns: 1fr; } }
.contact-info-card{ background: var(--ink); color: var(--cream); border-radius: var(--radius); padding: 38px; }
.contact-info-card h3{ color: var(--cream); font-size: 22px; }
.contact-line{ display: flex; gap: 14px; margin: 20px 0; align-items: flex-start; }
.contact-line svg{ flex: none; width: 20px; height: 20px; color: var(--gold); margin-top: 3px; }
.contact-line a, .contact-line span{ color: rgba(250,245,234,.9); font-size: 15px; }
.social-row{ display: flex; gap: 10px; margin-top: 26px; }
.social-row a{
	width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(250,245,234,.3);
	display: flex; align-items: center; justify-content: center; transition: background .15s ease;
}
.social-row a:hover{ background: rgba(250,245,234,.12); }
.social-row svg{ width: 18px; height: 18px; }

.contact-form-card{ background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 38px; }
.map-embed{ margin-top: 26px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.map-embed iframe{ width: 100%; height: 280px; border: 0; display: block; }
.map-placeholder{
	height: 220px; border-radius: var(--radius); border: 1px dashed var(--line);
	background: var(--cream-2); display: flex; align-items: center; justify-content: center;
	color: var(--ink-soft); font-size: 13px; font-weight: 600; text-align: center; padding: 20px;
}

/* Contact Form 7 look & feel (applies once CF7 is installed and its shortcode is pasted into the page content) */
.wpcf7-form p{ margin-bottom: 16px; }
.wpcf7-form label{ display: block; font-size: 13px; font-weight: 700; letter-spacing: .3px; margin-bottom: 6px; color: var(--ink); }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea{
	width: 100%; padding: 13px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line);
	background: var(--cream); font-family: var(--font-body); font-size: 14.5px; color: var(--ink);
}
.wpcf7-form textarea{ min-height: 130px; resize: vertical; }
.wpcf7-form input[type="submit"]{
	background: var(--rust); color: #fff; border: none; padding: 15px 30px; border-radius: 999px;
	font-weight: 700; font-size: 14.5px; cursor: pointer; transition: background .2s ease;
}
.wpcf7-form input[type="submit"]:hover{ background: var(--rust-dark); }
.wpcf7-not-valid-tip{ color: var(--rust); font-size: 12.5px; margin-top: 4px; }
.wpcf7-response-output{ border-radius: var(--radius-sm); padding: 12px 16px !important; font-size: 13.5px; }

/* =========================================================
   13. Page header (About / Gallery / Contact top banner)
========================================================= */
.page-hero{
	background: var(--ink); color: var(--cream);
	padding: 160px 0 70px; text-align: left;
}
.page-hero .eyebrow{ color: var(--gold); }
.page-hero h1{ color: var(--cream); font-size: clamp(32px, 5vw, 50px); margin-bottom: 12px; }
.page-hero p{ color: rgba(250,245,234,.75); max-width: 560px; font-size: 16px; }

/* =========================================================
   14. Footer
========================================================= */
.site-footer{ background: var(--ink); color: rgba(250,245,234,.8); padding: 76px 0 0; }
.footer-grid{ display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 56px; border-bottom: 1px solid rgba(250,245,234,.12); }
@media (max-width: 900px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns: 1fr; } }
.footer-brand p{ font-size: 14px; max-width: 300px; margin: 18px 0 22px; }
.footer-col h4{ color: var(--cream); font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 18px; }
.footer-col ul li{ margin-bottom: 12px; }
.footer-col a{ font-size: 14.5px; transition: color .15s ease; }
.footer-col a:hover{ color: var(--gold); }
.footer-social{ display: flex; gap: 10px; margin-top: 6px; }
.footer-social a{
	width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(250,245,234,.25);
	display: flex; align-items: center; justify-content: center;
}
.footer-social a:hover{ background: rgba(250,245,234,.1); }
.footer-social svg{ width: 17px; height: 17px; }
.footer-bottom{
	display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
	padding: 26px 0; font-size: 13px; color: rgba(250,245,234,.55);
}

/* =========================================================
   15. Utilities
========================================================= */
.reveal{ opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity: 1; transform: translateY(0); }