/*
Theme Name: Cooper Creative
Theme URI: https://coopercreative.co.za
Author: Cooper Creative
Description: The Cooper Creative website, built for the WordPress block editor. Pairs with the Cooper Creative Site plugin (projects, quote builder, enquiry form, hero animation, SEO). Edit every page and section in Appearance → Editor. No page builder needed.
Requires at least: 6.3
Tested up to: 6.6
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cooper-creative-theme
*/

/* ---------- page frame ---------- */
.wp-site-blocks > * { margin-block-start: 0; }

/* white sections that sit next to other white sections get a fine rule */
.cc-band-line { border-top: 1px solid #ECE6D3; }

/* ---------- header ---------- */
.cc-site-header { position: relative; z-index: 20; }
.cc-logo-link { display: inline-flex; align-items: center; gap: 10px; text-decoration: none !important; color: #141414 !important; }
.cc-logo-link svg { flex-shrink: 0; transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.cc-logo-link:hover svg { transform: rotate(180deg); }
.cc-logo-link b { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 22px; letter-spacing: -.03em; }
.cc-site-header .wp-block-navigation a { text-decoration: none; }
.cc-site-header .wp-block-navigation a:hover { text-decoration: underline; text-underline-offset: 4px; }
.cc-site-header .wp-block-button__link { padding: 11px 20px; font-size: 15px; }

/* ---------- section helpers ---------- */
.cc-eyebrow-p { font-family: var(--wp--preset--font-family--mono); font-size: 12px !important; letter-spacing: .14em; text-transform: uppercase; color: #5C5C5C; margin-bottom: 0 !important; }
.cc-on-dark .cc-eyebrow-p { color: #BDBDBD; }
.cc-display-h { font-size: clamp(52px, 7vw, 104px) !important; line-height: .92 !important; letter-spacing: -.04em !important; }

/* ---------- what we build ---------- */
.cc-svc-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.cc-svc { border: 1px solid #3a3a3a; border-radius: 16px; padding: 26px !important; margin: 0 !important; display: flex; flex-direction: column; gap: 12px; transition: border-color .25s, transform .3s cubic-bezier(.2,.8,.2,1); }
.cc-svc:hover { border-color: #F5DC7A; transform: translateY(-4px); }
.cc-svc > * { margin: 0 !important; }
.cc-svc .cc-svc__code { width: 44px; height: 44px; border-radius: 12px; background: #F5DC7A; color: #141414; display: flex; align-items: center; justify-content: center; font-family: var(--wp--preset--font-family--mono); font-size: 13px; }
.cc-svc h3 { color: #fff; }
.cc-svc p { color: #D4D4D4; font-size: 15px; line-height: 1.55; }
.cc-svc .cc-svc__eg { font-family: var(--wp--preset--font-family--mono); font-size: 12px; color: #F5DC7A; }

/* ---------- the method ---------- */
.cc-steps { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 32px; }
.cc-step { border-top: 2px solid #141414; padding-top: 20px !important; margin: 0 !important; display: flex; flex-direction: column; gap: 12px; }
.cc-step > * { margin: 0 !important; }
.cc-step .cc-step__n { font-family: var(--wp--preset--font-family--mono); font-size: 13px; }

/* ---------- Crewlo strip ---------- */
.cc-crewlo { border: 1.5px solid #141414; border-radius: 20px; }
.cc-crewlo h3 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.15; max-width: 30ch; }

/* ---------- footer ---------- */
.cc-site-footer a { color: #D4D4D4; }
.cc-site-footer a:hover { color: #F5DC7A; }
.cc-site-footer .cc-display-h { color: #fff; max-width: 12ch; }
.cc-footer-email { font-family: var(--wp--preset--font-family--mono); font-size: 14px; }

/* ---------- pages ---------- */
.cc-case-title { max-width: 1280px !important; font-size: clamp(48px, 8vw, 124px) !important; line-height: .92 !important; letter-spacing: -.045em; text-wrap: balance; margin-bottom: 28px !important; }
.cc-page-title { font-size: clamp(48px, 7vw, 96px) !important; }

@media (max-width: 781px) {
	.cc-site-header .wp-block-navigation__responsive-container-open { padding: 8px; }
	.cc-site-header > .wp-block-group { flex-wrap: nowrap !important; gap: 12px; }
	.cc-site-header .wp-block-group .wp-block-group { gap: 8px; }
	.cc-logo-link b { font-size: 19px; }
	.cc-logo-link svg { width: 28px; height: 28px; }
	.cc-site-header .wp-block-button__link { padding: 9px 15px; font-size: 14px; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
	.cc-logo-link svg, .cc-svc { transition: none; }
}