/*
Theme Name: BALANCE Centrum Psychoterapii
Theme URI: https://balancepsychoterapia.pl
Author: KacperOS
Description: Custom theme for BALANCE Centrum Psychoterapii — psychotherapy practice in Jaworzno. Built from Next.js static export.
Version: 1.1.0
License: Private
Text Domain: balance-theme
*/

/* WordPress admin bar fix */
body.admin-bar .fixed.top-0 {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .fixed.top-0 {
        top: 46px;
    }
}

/* === Reset WP default styles that conflict with Tailwind === */

/* WP adds margin to paragraphs */
:where(.balance-site) p {
    margin: 0;
}

/* WP adds list styles */
:where(.balance-site) ul, :where(.balance-site) ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* WP adds underline to links */
:where(.balance-site) a {
    text-decoration: none;
    color: inherit;
}

/* WP img defaults */
:where(.balance-site) img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    display: block;
}

/* WP heading defaults — reset to inherit (Tailwind handles sizing) */
:where(.balance-site) h1, :where(.balance-site) h2, :where(.balance-site) h3,
:where(.balance-site) h4, :where(.balance-site) h5, :where(.balance-site) h6 {
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
}

/* WP button reset */
:where(.balance-site) button {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

/*
 * CRITICAL: Tailwind CSS 4 uses @layer which has LOWER priority than
 * non-layered CSS. WordPress injects non-layered styles that override
 * all our Tailwind classes. Fix: re-declare critical styles WITHOUT @layer.
 */

/* === Font sizes (WP resets heading sizes) === */
.balance-site .text-3xl { font-size: 1.875rem !important; line-height: 2.25rem !important; }
.balance-site .text-4xl { font-size: 2.25rem !important; line-height: 2.5rem !important; }
.balance-site .text-6xl { font-size: 3.75rem !important; line-height: 1 !important; }
.balance-site .text-xl { font-size: 1.25rem !important; line-height: 1.75rem !important; }
.balance-site .text-lg { font-size: 1.125rem !important; line-height: 1.75rem !important; }
.balance-site .text-base { font-size: 1rem !important; line-height: 1.5rem !important; }
.balance-site .text-sm { font-size: 0.875rem !important; line-height: 1.25rem !important; }
.balance-site .text-xs { font-size: 0.75rem !important; line-height: 1rem !important; }
.balance-site .text-\[10px\] { font-size: 10px !important; }
.balance-site .text-\[11px\] { font-size: 11px !important; }

/* === Colors (WP overrides link/text colors) === */
.balance-site .text-white { color: #fff !important; }
.balance-site .text-brand-olive { color: #6b6b4e !important; }
.balance-site .text-brand-text { color: #5a5347 !important; }
.balance-site .text-brand-warm { color: #8b7d6b !important; }
.balance-site .text-brand-taupe { color: #7a7062 !important; }
.balance-site .text-olive-200 { color: #d5dbd0 !important; }
.balance-site .text-olive-300 { color: #b5c0ac !important; }
.balance-site .text-olive-400 { color: #8fa184 !important; }

/* === Background colors === */
.balance-site .bg-brand-cream { background-color: #faf9f6 !important; }
.balance-site .bg-brand-olive { background-color: #6b6b4e !important; }
.balance-site .bg-brand-text { background-color: #5a5347 !important; }
.balance-site .bg-white { background-color: #fff !important; }
.balance-site .bg-olive-50 { background-color: #f6f7f5 !important; }
.balance-site .bg-olive-100 { background-color: #eaede7 !important; }
.balance-site .bg-white\/90 { background-color: rgba(255,255,255,0.9) !important; }

/* === Font families === */
.balance-site .font-serif { font-family: 'Playfair Display', Georgia, serif !important; }
.balance-site { font-family: 'DM Sans', system-ui, sans-serif !important; }

/* === Font weights === */
.balance-site .font-medium { font-weight: 500 !important; }
.balance-site .font-bold { font-weight: 700 !important; }

/* === Responsive overrides === */
@media (min-width: 40rem) {
    .balance-site .sm\:text-4xl { font-size: 2.25rem !important; line-height: 2.5rem !important; }
    .balance-site .sm\:text-xl { font-size: 1.25rem !important; }
    .balance-site .sm\:text-lg { font-size: 1.125rem !important; }
    .balance-site .sm\:text-sm { font-size: 0.875rem !important; }
    .balance-site .sm\:text-xs { font-size: 0.75rem !important; }
}
@media (min-width: 64rem) {
    .balance-site .lg\:text-6xl { font-size: 3.75rem !important; line-height: 1 !important; }
}

/* === Border colors (WP changes borders) === */
.balance-site .border-brand-olive { border-color: #6b6b4e !important; }
.balance-site .border-olive-100 { border-color: #eaede7 !important; }
.balance-site .border-olive-200 { border-color: #d5dbd0 !important; }

/* === Shadows === */
.balance-site .shadow-md { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1) !important; }
.balance-site .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1) !important; }
.balance-site .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25) !important; }

/* === Layout that WP might break === */
.balance-site .rounded-full { border-radius: 9999px !important; }
.balance-site .rounded-2xl { border-radius: 1rem !important; }
.balance-site .rounded-xl { border-radius: 0.75rem !important; }

/* === Italic === */
.balance-site .italic { font-style: italic !important; }

/* === Tracking === */
.balance-site .tracking-widest { letter-spacing: 0.1em !important; }
.balance-site .tracking-wide { letter-spacing: 0.025em !important; }

/* === Uppercase === */
.balance-site .uppercase { text-transform: uppercase !important; }

/* === Leading === */
.balance-site .leading-tight { line-height: 1.25 !important; }
.balance-site .leading-relaxed { line-height: 1.625 !important; }

/* FAQ content transition */
.faq-content {
    transition: height 0.3s ease, opacity 0.3s ease;
    overflow: hidden;
}

/* FAQ icon transition */
.faq-icon {
    transition: transform 0.3s ease;
}

/* Smooth page scroll */
html {
    scroll-behavior: smooth;
}

/* Selection color matching brand */
::selection {
    background-color: #d5dbd0;
    color: #5a5347;
}

/* Nav shadow transition */
nav.fixed {
    transition: box-shadow 0.3s ease;
}

/* Reveal — JS handles all animation via IntersectionObserver.
   Elements start hidden via opacity-0 class in HTML.
   No CSS fallback needed — avoids flash race condition. */

/* === WP page content (polityka prywatnosci, etc.) === */
/* Restores readable typography for raw WP HTML output inside .balance-content */

.balance-content {
    color: #7a7062; /* brand-taupe */
    font-size: 1rem;
    line-height: 1.75;
}

.balance-content h1,
.balance-content h2,
.balance-content h3,
.balance-content h4 {
    font-family: 'Playfair Display', Georgia, serif;
    color: #5a5347; /* brand-text */
    font-weight: 500;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.balance-content h2 { font-size: 1.5rem; }
.balance-content h3 { font-size: 1.25rem; }
.balance-content h4 { font-size: 1.1rem; }

.balance-content p {
    margin-top: 0;
    margin-bottom: 1rem;
}

.balance-content ul,
.balance-content ol {
    list-style: revert;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.balance-content li {
    margin-bottom: 0.375rem;
}

.balance-content a {
    color: #6b6b4e; /* brand-olive */
    text-decoration: underline;
    text-underline-offset: 3px;
}

.balance-content a:hover {
    color: #5a5347; /* brand-text */
}

.balance-content strong,
.balance-content b {
    font-weight: 600;
    color: #5a5347;
}

.balance-content em {
    font-style: italic;
}

.balance-content hr {
    border: none;
    border-top: 1px solid #eaede7; /* olive-100 */
    margin: 2rem 0;
}

/* Manager section — horizontal card: photo left, text right */
.balance-manager-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.06);
    transition: box-shadow 0.2s ease;
    max-width: 280px;
    margin: 0 auto;
}
.balance-manager-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
}
.balance-manager-photo {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
}
.balance-manager-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: transform 0.5s;
}
.balance-manager-card:hover .balance-manager-photo img {
    transform: scale(1.05);
}
.balance-manager-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.3) 50%, transparent);
    opacity: 0;
    transition: opacity 0.3s;
}
.balance-manager-card:hover .balance-manager-overlay {
    opacity: 1;
}
.balance-manager-bio {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.25rem;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.625;
    opacity: 0;
    transition: opacity 0.3s;
}
.balance-manager-card:hover .balance-manager-bio {
    opacity: 1;
}
.balance-manager-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem;
}
@media (min-width: 768px) {
    .balance-manager-card {
        flex-direction: row;
        max-width: none;
        margin: 0;
    }
    .balance-manager-photo {
        width: 280px;
        min-width: 280px;
        aspect-ratio: auto;
    }
    .balance-manager-body {
        padding: 2rem 3rem;
    }
}