/* ==========================================================================
   WPX SEO Digital — Base Styles
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--text);
    line-height: 1.6;
    background: var(--white);
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; transition: var(--trans); }

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
}
@media (max-width: 767px) { .container { padding: 0 16px; } }
@media (max-width: 380px) { .container { padding: 0 14px; } }

/* Typography scale */
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; color: var(--dark); }

h1 { font-size: clamp(36px, 5vw, 52px); line-height: 1.08; font-weight: 400; }
h1 strong { font-weight: 700; }

.page-banner h1 { font-family: var(--font-head); font-size: clamp(36px, 6vw, 72px); font-weight: 400; color: var(--white); }

.section-title { font-family: var(--font-head); font-size: clamp(28px, 4vw, 48px); font-weight: 400; color: var(--dark); }
.section-title strong { color: var(--red); font-weight: 400; }

h3 { font-size: 20px; font-weight: 700; }

p { margin: 0; }

.text-muted { color: var(--text-muted); font-size: 15px; line-height: 1.8; }

.section-label {
    display: inline-flex; align-items: center; gap: 10px;
    color: var(--red); font-size: 13px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 2px;
    margin-bottom: 16px;
}
.section-label::before { content: ''; width: 32px; height: 2px; background: var(--red); display: inline-block; }

/* Section rhythm */
section { padding: 80px 0; }
@media (max-width: 767px) { section { padding: 52px 0; } }

.bg-white { background: var(--white); }
.bg-gray  { background: var(--gray); }
.bg-dark  { background: var(--dark2); }
.bg-red   { background: var(--red); }

/* Buttons */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 30px; border-radius: var(--radius-pill);
    font-family: var(--font-body); font-size: 14px; font-weight: 600;
    border: 2px solid transparent; transition: var(--trans); cursor: pointer;
}
.btn-red { background: var(--red); color: var(--white); border-color: var(--red); }
.btn-red:hover { background: var(--red-dark); transform: translateY(-2px); box-shadow: var(--shadow); }

.btn-black { background: var(--black); color: var(--white); border-color: var(--black); }
.btn-black:hover { background: var(--dark2); transform: translateY(-2px); }

.btn-white { background: var(--white); color: var(--red); border-color: var(--white); }
.btn-white:hover { background: var(--gray); }

.btn-outline { background: transparent; color: var(--red); border-color: var(--red); }
.btn-outline:hover { background: var(--red); color: var(--white); }

.btn-outline-white { background: transparent; color: var(--white); border-color: var(--white); }
.btn-outline-white:hover { background: var(--white); color: var(--red); }

.btn-secondary { background: var(--gray); color: var(--dark); border-color: var(--gray2); }
.btn-secondary:hover { color: var(--red); border-color: var(--red); background: var(--red-light); }

.btn-link { background: none; color: var(--red); border: none; border-bottom: 2px solid var(--red); border-radius: 0; padding: 0 0 2px; gap: 8px; }
.btn-link:hover { gap: 14px; }

/* Cards */
.card { border-radius: var(--radius-lg); box-shadow: var(--shadow); transition: var(--trans); }
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }

/* Forms */
input, textarea, select {
    border-radius: var(--radius); border: 1px solid var(--gray2);
    font-family: var(--font-body); padding: 12px 16px; width: 100%;
}

/* Skip link accessibility */
.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 999999;
    background: var(--red); color: var(--white); padding: 12px 20px;
}
.skip-link:focus { left: 16px; top: 16px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}