/* AP Serwis — base CSS variables, reset and typography
   Palette (z React/shadcn theme):
   - primary/accent: hsl(40 55% 50%) ≈ #C9974E (golden)
   - bg: hsl(0 0% 98%)
   - foreground: hsl(0 0% 10%)
   - secondary (dark): hsl(0 0% 15%)
*/

:root {
    --ap-primary: hsl(40 55% 50%);
    --ap-primary-dark: hsl(40 55% 40%);
    --ap-primary-foreground: #fff;
    --ap-bg: hsl(0 0% 98%);
    --ap-fg: hsl(0 0% 10%);
    --ap-secondary: hsl(0 0% 15%);
    --ap-muted: hsl(0 0% 92%);
    --ap-muted-fg: hsl(0 0% 45%);
    --ap-border: hsl(0 0% 90%);
    --ap-card: #fff;
    --ap-radius: 0.75rem;
    --ap-gradient: linear-gradient(135deg, hsl(40 55% 50%) 0%, hsl(40 55% 40%) 100%);
    --ap-shadow: 0 20px 60px -20px hsl(40 55% 50% / 0.4);
    --ap-glow: 0 0 60px hsl(40 55% 50% / 0.3);
    --ap-container: 1200px;
    --ap-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Force body typography to React 1:1 (theme overrides cause 20px) */
body, body.wp-singular {
    font-family: var(--ap-font) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
    color: var(--ap-fg);
}

/* Light scope reset for our widgets */
.ap-widget,
.ap-widget * {
    box-sizing: border-box;
}

.ap-widget {
    font-family: var(--ap-font);
    color: var(--ap-fg);
    line-height: 1.6;
    font-size: 15px;
}

.ap-container {
    max-width: var(--ap-container);
    margin: 0 auto;
    padding: 0 1.25rem;
}

.ap-section {
    padding: 5rem 0;
}

@media (max-width: 768px) {
    .ap-section { padding: 3rem 0; }
}

.ap-h1, .ap-h2, .ap-h3 {
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 1rem;
    color: var(--ap-fg);
}

.ap-h1 { font-size: 36px; font-weight: 200; line-height: 1.1; }
.ap-h2 { font-size: 30px; font-weight: 700; line-height: 1.2; }
.ap-h3 { font-size: 20px; font-weight: 700; line-height: 1.3; }

.ap-lead { font-size: 1.125rem; color: var(--ap-muted-fg); }

.ap-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.75rem;
    border-radius: var(--ap-radius);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    cursor: pointer;
    border: 0;
    line-height: 1;
}

.ap-btn--primary {
    background: var(--ap-gradient);
    color: var(--ap-primary-foreground);
    box-shadow: var(--ap-shadow);
}

.ap-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 25px 70px -15px hsl(40 55% 50% / 0.5);
}

.ap-btn--outline {
    background: transparent;
    color: var(--ap-fg);
    border: 2px solid var(--ap-border);
}

.ap-btn--outline:hover {
    border-color: var(--ap-primary);
    color: var(--ap-primary);
}

.ap-btn--ghost {
    background: transparent;
    color: var(--ap-fg);
}

.ap-btn--ghost:hover {
    background: var(--ap-muted);
}

.ap-section__head {
    text-align: center;
    margin-bottom: 3rem;
}

.ap-section__title {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 1rem;
}

@media (max-width: 768px) {
    .ap-section__title { font-size: 24px; }
}

.ap-section__title em {
    font-style: normal;
    background: var(--ap-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ap-section__sub {
    font-size: 1.125rem;
    color: var(--ap-muted-fg);
    max-width: 700px;
    margin: 0 auto;
}

.ap-card {
    background: var(--ap-card);
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius);
    padding: 1.75rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.ap-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ap-shadow);
    border-color: hsl(40 55% 50% / 0.3);
}

.ap-icon-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ap-gradient);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.ap-icon-circle svg {
    width: 28px;
    height: 28px;
}