/* ==========================================
   PROVIDER WEBSITES - BASE STYLES
   ==========================================
   Uses CSS custom properties set per-provider:
   --pw-primary, --pw-secondary
   ========================================== */

:root {
    --pw-primary: #4a6cf7;
    --pw-secondary: #6c63ff;
    --pw-text: #333;
    --pw-text-muted: #596068; /* 5.9:1 on white; stays above AA on the tinted bands */
    --pw-bg-alt: #f8f9fa;
    --pw-radius: 0.5rem;
    --pw-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    /* Overridden per provider by the inline :root block in Site.razor / SubPage.razor.
       These defaults are what renders if that block is ever absent. */
    --pw-font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --pw-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---- Global ---- */
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--pw-font-body);
    color: var(--pw-text);
    margin: 0;
    padding: 0;
}

/* Headings take the heading face. Scoped to the public site's own chrome and sections —
   AI-generated section CSS sets its own type and must keep winning inside .pw-ai-content. */
h1, h2, h3, h4, h5, h6,
.pw-navbar .navbar-brand,
.pw-hero .display-3 {
    font-family: var(--pw-font-heading);
}

/* ---- Palette everywhere: text links and every button follow the site's tokens ---- */
.pw-site a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item) {
    color: var(--pw-primary);
}

.pw-site .btn {
    border-radius: var(--pw-btn-radius, var(--pw-radius));
}

.pw-site h1, .pw-site h2, .pw-site h3, .pw-site .pw-hero-title, .pw-site .pw-block-title {
    text-wrap: balance;
}

/* Centred intros keep a readable measure under a narrow standfirst. */
.pw-site .pw-intro {
    max-width: 72ch;
    margin-left: auto;
    margin-right: auto;
}

.pw-hero .justify-content-center .pw-hero-actions {
    justify-content: center;
}

/* ---- Primary Button ---- */
.pw-btn-primary {
    --bs-btn-bg: var(--pw-primary);
    --bs-btn-border-color: var(--pw-primary);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--pw-primary);
    --bs-btn-hover-border-color: var(--pw-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--pw-primary);
    --bs-btn-active-border-color: var(--pw-primary);
    --bs-btn-active-color: #fff;
    --bs-btn-focus-shadow-rgb: 0, 0, 0;
    background-color: var(--pw-primary);
    border-color: var(--pw-primary);
    color: var(--pw-on-primary, #fff);
    border-radius: var(--pw-btn-radius, var(--pw-radius));
    padding: 0.5rem 1.5rem;
    text-decoration: none;
    display: inline-block;
    transition: opacity 0.2s, transform 0.2s, filter 0.2s;
}

.pw-btn-primary:hover,
.pw-btn-primary:focus {
    background-color: var(--pw-primary) !important;
    border-color: var(--pw-primary) !important;
    color: var(--pw-on-primary, #fff) !important;
    filter: brightness(0.85);
    transform: translateY(-1px);
}

/* ---- Outline Primary Button ---- */
.pw-btn-outline-primary {
    --bs-btn-bg: transparent;
    --bs-btn-color: var(--pw-primary);
    --bs-btn-border-color: var(--pw-primary);
    --bs-btn-hover-bg: var(--pw-primary);
    --bs-btn-hover-border-color: var(--pw-primary);
    --bs-btn-hover-color: #fff;
    background-color: transparent;
    /* Padding matches .pw-btn-primary so the two sit at identical heights when they
       alternate across a row of service cards; a 0.125rem difference is enough to
       misalign the card bottoms this variant exists to keep aligned. */
    border: 1px solid var(--pw-primary);
    color: var(--pw-primary);
    border-radius: var(--pw-btn-radius, var(--pw-radius));
    padding: 0.5rem 1.5rem;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s;
}

.pw-btn-outline-primary:hover,
.pw-btn-outline-primary:focus {
    background-color: var(--pw-primary) !important;
    border-color: var(--pw-primary) !important;
    color: #fff !important;
}

/* ---- Secondary Button (on-image / on-gradient) ----
   Used for the hero's companion CTA, which always sits over a photographic
   background or the brand gradient. Deliberately NOT filled with
   --pw-secondary: a provider whose two brand colours are close would get two
   near-identical filled buttons. A light translucent fill with a solid white
   edge reads as secondary and stays legible over any backdrop. */
.pw-btn-secondary {
    --bs-btn-bg: rgba(255, 255, 255, 0.15);
    --bs-btn-color: #fff;
    --bs-btn-border-color: rgba(255, 255, 255, 0.9);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-hover-color: var(--pw-primary);
    background-color: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.9);
    color: #fff;
    border-radius: var(--pw-radius);
    padding: 0.5rem 1.5rem;
    text-decoration: none;
    display: inline-block;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background-color 0.2s, color 0.2s, transform 0.2s;
}

.pw-btn-secondary:hover,
.pw-btn-secondary:focus {
    background-color: #fff !important;
    border-color: #fff !important;
    color: var(--pw-primary) !important;
    transform: translateY(-1px);
}

/* ---- Navbar ---- */
.pw-navbar {
    z-index: 1030;
}

.pw-navbar .navbar-brand {
    color: var(--pw-text);
}

.pw-navbar .nav-link {
    color: var(--pw-text);
    font-weight: 500;
    padding: 0.5rem 1rem;
    transition: color 0.2s;
}

.pw-navbar .nav-link:hover {
    color: var(--pw-primary);
}

/* ---- Sections ----
   These are the PLATFORM-RENDERED sections (Services, Plans, Team, Testimonials, FAQ).
   They sit directly above and below AI-generated editorial sections, which arrive with
   their own considered typography and generous whitespace. Stock Bootstrap defaults read
   as a different website next to that, so the rules below give the data-driven sections
   the same restraint: a real type scale, hairline borders instead of heavy shadows, and
   space doing the work that boxes used to. */
.pw-section {
    padding: var(--pw-section-pad, 5.5rem) 0;
}

.pw-section-alt {
    background-color: var(--pw-bg-alt);
}

/* Section heading — the anchor for the whole block. */
.pw-section > .container > h2 {
    font-family: var(--pw-font-heading);
    font-size: var(--pw-h2, clamp(1.85rem, 3.4vw, 2.6rem));
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 0.75rem;
}

/* Short accent rule beneath a centred section heading. Ties the block to the brand
   without another slab of colour, and echoes how the generated sections mark a heading. */
.pw-section > .container > h2.text-center::after {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    margin: 1rem auto 0;
    border-radius: 2px;
    background: var(--pw-primary);
}

/* Section subheading — quieter and narrower than full width, so it reads as a standfirst
   rather than a paragraph. */
.pw-section > .container > p.text-center {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.05rem;
    line-height: 1.65;
}

/* ---- Hero ---- */
.pw-hero {
    position: relative;
}

.pw-hero-overlay {
    background: rgba(0, 0, 0, 0.15);
    z-index: 1;
}

.pw-hero-overlay-image {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.40) 50%, rgba(0, 0, 0, 0.60) 100%);
    z-index: 1;
}

.pw-hero .container {
    z-index: 2;
}

/* A shadow earns its place only when the headline sits on a photograph. */
.pw-hero[style*="background-image"] h1 {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.pw-hero[style*="background-image"] p {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* ---- Cards ---- */
.pw-card {
    /* Slightly softer than the global radius — large cards need a larger curve to look
       intentional rather than merely rounded. */
    border-radius: var(--pw-radius-lg, 14px);
    /* A hairline edge keeps white cards from dissolving into the alt-grey section
       background. Deliberately NOT a drop shadow at rest: stacked shadows are what make
       a Bootstrap grid look like an admin panel rather than a marketing page. */
    border: 1px solid rgba(0, 0, 0, 0.07) !important;
    background-color: #fff;
    box-shadow: none !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.pw-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
}

.pw-card .card-body {
    padding: 1.75rem 1.6rem;
}

.pw-card .card-title {
    font-family: var(--pw-font-heading);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin-bottom: 0.6rem;
    /* Service names routinely start with a number ("30 Minute Session"). Display faces
       default to oldstyle figures, which read as lowercase letters mid-title. */
    font-variant-numeric: lining-nums;
}

/* Card body copy — measurably more readable than Bootstrap's .small at these widths. */
.pw-card .card-body p {
    font-size: 0.94rem;
    line-height: 1.65;
}

/* ---- Service Description Clamp ---- */
.pw-service-description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
}

/* ---- Service Detail Pills ---- */
.pw-service-details {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* Filled grey chips read as UI state, not as editorial detail — they were the single most
   "admin panel" element on the page. A hairline outline on the card's own background keeps
   the scannability of a chip without the weight. */
.pw-service-detail {
    display: inline-flex;
    align-items: center;
    font-size: 0.78rem;
    letter-spacing: 0.01em;
    color: var(--pw-text-muted);
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.09);
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    white-space: nowrap;
}

.pw-service-detail i {
    font-size: 0.72rem;
    opacity: 0.55;
}

/* ---- Service Price ---- */
.pw-service-price {
    /* Deliberately the BODY font, not the heading font. A display face such as Playfair
       renders oldstyle figures, turning "$95.00" into something closer to "$95.oo" — a
       price is data the visitor must read exactly, not display type. */
    font-family: var(--pw-font-body);
    color: var(--pw-text);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.15;
    margin-bottom: 0.2rem;
    /* Tabular for column alignment; lining so digits sit on the baseline at full height. */
    font-variant-numeric: tabular-nums lining-nums;
}

/* Reserves a consistent height for the price block so prices line up ACROSS a row even
   when one service has no fee-type caption. :not(:empty) means a card with no pricing at
   all still collapses instead of holding open a gap. */
.pw-service-pricing:not(:empty) {
    min-height: 3.15rem;
}

/* ---- Service Category Group ----
   Reads as an editorial eyebrow rather than a heavy admin divider: a fine accent bar
   carrying the category's own colour, and a heading at a size that clearly sits BELOW
   the section heading rather than competing with it. */
.pw-service-group-header {
    border-left: 3px solid var(--pw-primary);
    padding-left: 1rem;
    /* Categories are the section's second-level rhythm — room to breathe so a long list
       reads as grouped rather than as one undifferentiated grid. */
    margin-top: 3.25rem !important;
    margin-bottom: 1.5rem !important;
}

.pw-service-group-header h4 {
    font-family: var(--pw-font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pw-text);
}

.pw-service-group-header p {
    font-size: 0.92rem;
}

/* The first group sits directly under the section intro and needs no extra gap. */
.pw-service-group-header:first-of-type {
    margin-top: 0 !important;
}

/* ---- Card actions ----
   Cards carry many repeated actions, so they are deliberately lighter than the single
   section-level CTA at the foot of the block. That contrast is what creates hierarchy;
   a grid of identical full-strength buttons flattens it. */
.pw-card .pw-btn-primary,
.pw-card .pw-btn-outline-primary {
    padding: 0.55rem 1.1rem;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 10px;
}

/* The one section-level CTA — the loud end of that hierarchy. */
.pw-section > .container > .text-center > .pw-btn-primary {
    padding: 0.85rem 2.4rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px;
}

/* ---- Body Content (Rich HTML) ---- */
.pw-body-content {
    line-height: 1.8;
}

.pw-body-content p {
    margin-bottom: 1rem;
}

.pw-body-content ul,
.pw-body-content ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

/* ---- Gallery images placed inside section bodies ----
   Resolved at render time from <img data-sf-gallery="…"> tokens (see WebsiteGalleryImages).
   The AI's own scoped CSS sets the layout; these are the floor that keeps a large photo from
   ever overflowing a phone, whatever the generated stylesheet forgot. Selected by attribute
   because the section's scope class is rewritten per section. */
img[data-sf-gallery] {
    max-width: 100%;
    height: auto;
    display: block;
}

.pw-body-content img {
    max-width: 100%;
    height: auto;
}

/* ---- Gallery ---- */
.pw-gallery-item {
    transition: transform 0.3s;
    border-radius: var(--pw-radius);
}

.pw-gallery-item:hover {
    transform: scale(1.03);
}

.pw-gallery-caption {
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    opacity: 0;
    transition: opacity 0.3s;
}

.pw-gallery-item:hover .pw-gallery-caption {
    opacity: 1;
}

/* ---- FAQ Accordion ---- */
.pw-accordion .accordion-button {
    background-color: #fff;
    border-radius: var(--pw-radius) !important;
}

.pw-accordion .accordion-button:not(.collapsed) {
    color: var(--pw-primary);
    background-color: #fff;
    box-shadow: none;
}

.pw-accordion .accordion-button:focus {
    box-shadow: 0 0 0 0.15rem rgba(74, 108, 247, 0.15);
}

.pw-accordion .accordion-item {
    border-radius: var(--pw-radius) !important;
    overflow: hidden;
}

/* ---- CTA Section ---- */
.pw-cta-section {
    position: relative;
}

.pw-cta-section .btn-light {
    color: var(--pw-primary);
    font-weight: 600;
}

.pw-cta-section .btn-light:hover,
.pw-cta-section .btn-light:focus {
    background-color: #fff !important;
    color: var(--pw-primary) !important;
    filter: brightness(0.95);
}

/* ---- Footer ---- */
.pw-footer .opacity-50 { opacity: 0.8 !important; }
.pw-footer .opacity-75 { opacity: 0.9 !important; }

.pw-footer a {
    color: #ddd;
    text-decoration: none;
    transition: color 0.2s;
}

.pw-footer a:hover {
    color: #fff;
}

/* ---- Social Links ---- */
.pw-social-links a {
    color: var(--pw-primary);
    text-decoration: none;
    transition: opacity 0.2s;
}

.pw-social-links a:hover {
    opacity: 0.7;
}

/* ---- Contact Form ---- */
.pw-section .form-control:focus {
    border-color: var(--pw-primary);
    box-shadow: 0 0 0 0.15rem rgba(74, 108, 247, 0.15);
}

/* ---- Not Published Page ---- */
.pw-not-published {
    min-height: 100vh;
}

/* ---- Responsive ---- */
@media (max-width: 767.98px) {
    .pw-section {
        padding: var(--pw-section-pad-sm, 3rem) 0;
    }

    .pw-hero {
        min-height: 60vh !important;
    }

    .pw-hero h1 {
        font-size: 2rem;
    }
}