/*
Theme Name: Agency Creative
Theme URI: https://starter-templates.dev/agency-creative
Author: Starter Templates Library
Author URI: https://starter-templates.dev
Description: Vibrant creative agency theme - A premium WordPress starter template for agency websites. Ready for Elementor customization with multiple design presets, responsive layouts, and SEO-optimized structure.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: business, agency, starter-template, responsive, elementor-ready
Text Domain: agency_creative
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
Template ID: 003
*/

:root {
    --color-primary: #DC2626;
    --color-secondary: #B91C1C;
    --color-accent: #FBBF24;
    --color-bg: #FFFFFF;
    --color-surface: #FEF2F2;
    --color-text: #1C1917;
    --color-text-light: #78716C;
    --color-border: #FEE2E2;
    --color-hero-bg: #FFF5F5;
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Nunito', sans-serif;
    --font-weight-heading: 600;
    --font-weight-body: 400;
    --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem;
    --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem;
    --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; --text-6xl: 3.75rem;
    --space-1: 6px; --space-2: 10px; --space-3: 14px; --space-4: 20px;
    --space-5: 28px; --space-6: 36px; --space-7: 52px; --space-8: 68px;
    --space-9: 88px; --space-10: 112px;
    --radius-none: 0; --radius-sm: 6px; --radius-md: 12px;
    --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 28px; --radius-full: 9999px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
    --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 350ms ease;
    --container-max: 1200px; --container-narrow: 800px; --container-wide: 1400px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-body); font-weight: var(--font-weight-body); color: var(--color-text); background-color: var(--color-bg); line-height: 1.65; -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); font-weight: var(--font-weight-heading); line-height: 1.2; color: var(--color-text); margin-bottom: var(--space-4); }
h1 { font-size: var(--text-5xl); } h2 { font-size: var(--text-4xl); } h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); } h5 { font-size: var(--text-xl); } h6 { font-size: var(--text-lg); }
p { margin-bottom: var(--space-4); max-width: 72ch; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-secondary); }
a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
img { max-width: 100%; height: auto; display: block; }
.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-5); }
.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: var(--container-wide); }
.section { padding-block: var(--space-9); }
.section--sm { padding-block: var(--space-7); }
.section--lg { padding-block: var(--space-10); }
.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }
@media (min-width: 769px) and (max-width: 1024px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; border: 2px solid transparent; border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-base); text-decoration: none; line-height: 1.4; }
.btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.btn--primary { background-color: var(--color-primary); color: #FFFFFF; }
.btn--primary:hover { background-color: var(--color-secondary); color: #FFFFFF; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--secondary { background-color: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn--secondary:hover { background-color: var(--color-primary); color: #FFFFFF; }
.btn--lg { padding: var(--space-4) var(--space-6); font-size: var(--text-lg); }
.btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.card { background: var(--color-surface); border-radius: var(--radius-lg); overflow: hidden; transition: all var(--transition-base); border: 1px solid var(--color-border); }
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.card__image { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.card__body { padding: var(--space-5); }
.card__title { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.card__text { color: var(--color-text-light); font-size: var(--text-sm); }
.form-group { margin-bottom: var(--space-4); }
.form-label { display: block; margin-bottom: var(--space-2); font-weight: 600; font-size: var(--text-sm); }
.form-input, .form-textarea, .form-select { width: 100%; padding: var(--space-3) var(--space-4); font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text); background-color: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: border-color var(--transition-fast); }
.form-input:focus, .form-textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0,0,0,0.08); }
.site-header { position: sticky; top: 0; z-index: 100; background: var(--color-bg); border-bottom: 1px solid var(--color-border); padding: var(--space-3) 0; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--space-5); }
.site-logo { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--font-weight-heading); color: var(--color-text); text-decoration: none; }
.site-nav { display: flex; gap: var(--space-5); align-items: center; }
.site-nav a { color: var(--color-text); font-weight: 500; font-size: var(--text-sm); transition: color var(--transition-fast); }
.site-nav a:hover { color: var(--color-primary); }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: var(--space-2); }
@media (max-width: 768px) { .nav-toggle { display: block; } .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: var(--color-bg); padding: var(--space-5); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-lg); } .site-nav.active { display: flex; } }
.site-footer { background: var(--color-text); color: var(--color-bg); padding: var(--space-9) 0 var(--space-5); }
.site-footer a { color: var(--color-border); transition: color var(--transition-fast); }
.site-footer a:hover { color: var(--color-accent); }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); margin-bottom: var(--space-8); }
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-col__title { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-4); color: var(--color-bg); }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: var(--space-2); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: var(--space-5); text-align: center; font-size: var(--text-sm); color: var(--color-text-light); }
.text-center { text-align: center; } .text-primary { color: var(--color-primary); }
.text-light { color: var(--color-text-light); } .bg-surface { background-color: var(--color-surface); }
.mx-auto { margin-inline: auto; } .mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); } .mb-8 { margin-bottom: var(--space-8); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }
.wp-block-button .wp-block-button__link { background-color: var(--color-primary); color: #FFFFFF; padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); font-weight: 600; }