/* Home (guest landing) styles migrated from UnQbdWeb Index landing CTA */

/* Landing-page scoping: avoid global resets in Home.razor HeadContent */
.page-index {
    margin-top: 0;
    padding-top: 0;
}

.page-index-shell {
    min-height: 100vh;
    overflow-x: hidden;
    background-color: var(--bg-color, #ffffff);
}

.extended-hero-section {
    position: relative;
    min-height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    background: transparent;
}

.extended-hero-container {
    position: relative;
    z-index: 10;
    max-width: 1400px;
    margin: 0 auto;
    padding: 3rem 2rem;
}

.extended-hero-header {
    text-align: center;
    width: 100%;
    max-width: 900px;
    margin: 0 auto 2rem auto;
}

.extended-hero-tagline {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 900;
    color: var(--primary-color, #00b4ff);
    margin: 0 0 0.75rem 0;
    line-height: 1.1;
    letter-spacing: -1.5px;
}

.extended-hero-tagline-sub {
    font-size: clamp(1rem, 2vw, 1.3rem);
    color: #6c757d;
    margin: 0;
    line-height: 1.5;
}

.extended-hero-cta-card {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.25rem 2rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(2, 6, 23, 0.08);
    box-shadow: 0 18px 45px rgba(2, 6, 23, 0.08);
    overflow: hidden;
}

.extended-hero-cta-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 6px;
    background: linear-gradient(90deg, #00b4ff 0%, #36d1dc 55%, #20c997 100%);
}

.extended-hero-cta-card::after {
    content: '';
    position: absolute;
    right: -70px;
    bottom: -70px;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(0, 180, 255, 0.16) 0%, rgba(0, 180, 255, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
}

.extended-hero-cta-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.extended-hero-cta-content {
    flex: 1;
    max-width: 650px;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.extended-hero-offer-inline {
    margin: 0;
    padding: 0;
}

.extended-hero-headline {
    font-size: clamp(1.4rem, 2.5vw, 1.9rem);
    font-weight: 800;
    color: #2c3e50;
    margin: 0 0 0.35rem 0;
    line-height: 1.2;
}

.extended-hero-subheadline {
    font-size: 1rem;
    color: #6c757d;
    margin: 0;
    line-height: 1.5;
}

.extended-hero-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: nowrap;
}

.extended-hero-btn {
    font-weight: 700 !important;
    font-size: 1rem !important;
    padding: 0.85rem 1.75rem !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    white-space: nowrap;
}

.extended-hero-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important;
}

.extended-hero-primary {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    border-color: transparent !important;
}

.extended-hero-primary:hover {
    background: linear-gradient(135deg, #239139 0%, #1cb386 100%) !important;
}

.extended-hero-secondary {
    background: transparent !important;
    border: 2px solid var(--primary-color, #00b4ff) !important;
    color: var(--primary-color, #00b4ff) !important;
}

.extended-hero-secondary:hover {
    background: rgba(0, 180, 255, 0.08) !important;
}

.extended-hero-cta-group {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.extended-hero-btn-hint {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.82rem;
    color: #6c757d;
}

.extended-hero-books-inline {
    flex: 0 0 auto;
    position: relative;
    width: 380px;
    height: 260px;
    display: block;
}

.extended-hero-book-inline {
    position: absolute;
    width: 120px;
    height: 180px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.2);
    display: block;
}

.extended-hero-book-inline.book-0 {
    left: 0;
    top: 40px;
    transform: rotate(-6deg);
    z-index: 1;
}

.extended-hero-book-inline.book-1 {
    left: 90px;
    top: 0;
    transform: rotate(4deg);
    z-index: 3;
}

.extended-hero-book-inline.book-2 {
    left: 180px;
    top: 50px;
    transform: rotate(-3deg);
    z-index: 2;
}

.extended-hero-book-inline.book-3 {
    left: 270px;
    top: 30px;
    transform: rotate(7deg);
    z-index: 4;
}

@media (max-width: 1100px) {
    .extended-hero-books-inline {
        width: 280px;
        height: 240px;
    }

    .extended-hero-book-inline {
        width: 100px;
        height: 150px;
    }

    .extended-hero-book-inline.book-1 {
        left: 70px;
    }

    .extended-hero-book-inline.book-2 {
        left: 140px;
    }

    .extended-hero-book-inline.book-3 {
        left: 100px;
    }
}

@media (max-width: 900px) {
    .extended-hero-container {
        padding: 2.5rem 1.5rem;
    }

    .extended-hero-header {
        margin-bottom: 2rem;
    }

    .extended-hero-cta-row {
        flex-direction: column;
        gap: 2rem;
    }

    .extended-hero-cta-content {
        max-width: 100%;
        text-align: center;
    }

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

    /* Keep books stacked/overlapped on tablets */
    .extended-hero-books-inline {
        width: 300px;
        height: 200px;
        margin: 0 auto;
    }

    .extended-hero-book-inline {
        width: 90px;
        height: 135px;
    }

    .extended-hero-book-inline.book-0 {
        left: 0;
        top: 30px;
    }

    .extended-hero-book-inline.book-1 {
        left: 70px;
        top: 0;
    }

    .extended-hero-book-inline.book-2 {
        left: 140px;
        top: 40px;
    }

    .extended-hero-book-inline.book-3 {
        left: 210px;
        top: 20px;
    }
}

@media (max-width: 600px) {
    .extended-hero-container {
        padding: 2rem 1rem;
    }

    .extended-hero-header {
        margin-bottom: 1.5rem;
    }

    .extended-hero-tagline {
        font-size: 2rem;
    }

    .extended-hero-tagline-sub {
        font-size: 1rem;
    }

    .extended-hero-headline {
        font-size: 1.3rem;
    }

    .extended-hero-subheadline {
        font-size: 0.9rem;
    }

    .extended-hero-actions {
        flex-direction: column;
        width: 100%;
        gap: 0.6rem;
    }

    .extended-hero-btn {
        width: 100%;
        max-width: 320px;
        justify-content: center;
        padding: 0.8rem 1.5rem !important;
    }

    /* Keep books stacked/overlapped on mobile */
    .extended-hero-books-inline {
        width: 260px;
        height: 170px;
    }

    .extended-hero-book-inline {
        width: 75px;
        height: 112px;
    }

    .extended-hero-book-inline.book-0 {
        left: 0;
        top: 25px;
    }

    .extended-hero-book-inline.book-1 {
        left: 60px;
        top: 0;
    }

    .extended-hero-book-inline.book-2 {
        left: 120px;
        top: 35px;
    }

    .extended-hero-book-inline.book-3 {
        left: 180px;
        top: 15px;
    }
}

/* Extra small phones - keep stacked but smaller */
@media (max-width: 380px) {
    .extended-hero-books-inline {
        width: 220px;
        height: 140px;
    }

    .extended-hero-book-inline {
        width: 60px;
        height: 90px;
    }

    .extended-hero-book-inline.book-0 {
        left: 0;
        top: 20px;
    }

    .extended-hero-book-inline.book-1 {
        left: 50px;
        top: 0;
    }

    .extended-hero-book-inline.book-2 {
        left: 100px;
        top: 30px;
    }

    .extended-hero-book-inline.book-3 {
        left: 150px;
        top: 10px;
    }
}

.section-title {
    color: #2c3e50;
    font-weight: 800;
    margin: 0;
}

.section-header {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    padding: 0 1rem 0.75rem 1rem;
}

/* Ensure headings inside the section header don't add extra spacing */
.section-header .section-title {
    margin: 0;
}

/* ===================================
   Testimonials + FAQ (landing sections)
   =================================== */

.page-index .contained-section {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
}

.page-index .contained-section.landing-narrow {
    max-width: 1200px;
}

.page-index .contained-section.landing-compact {
    max-width: 1000px;
}

.page-index .testimonials-card,
.page-index .faq-card {
    border-radius: 18px;
    border: 1px solid rgba(2, 6, 23, 0.08);
    background: rgba(255, 255, 255, 0.80);
    box-shadow: 0 18px 45px rgba(2, 6, 23, 0.08);
    padding: 2rem;
    margin: 2rem 0;
    overflow: hidden;
}

.page-index .testimonials-title,
.page-index .faq-title {
    margin: 0 0 1rem 0;
    font-weight: 900;
    color: var(--primary-color, #00b4ff);
    text-align: center;
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.page-index .testimonials-title-left {
    text-align: left;
}

.page-index .testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.page-index .testimonial-quote {
    border-radius: 14px;
    border: 1px solid rgba(2, 6, 23, 0.10);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.06);
    padding: 1.25rem;
}

.page-index .testimonial-quote-text {
    margin: 0 0 0.75rem 0;
    color: #2c3e50;
    line-height: 1.5;
}

.page-index .testimonial-quote-author {
    font-weight: 800;
    color: var(--primary-color, #00b4ff);
}

.page-index .faq-accordion {
    box-shadow: none;
}

@media (max-width: 900px) {
    .page-index .testimonials-grid {
        grid-template-columns: 1fr;
    }

    .page-index .testimonials-card,
    .page-index .faq-card {
        padding: 1.5rem 1.25rem;
    }
}

/* ===================================
   DARK MODE - HOMEPAGE
   =================================== */

body.dark-mode .page-index-shell {
    background: var(--bg-color, #121212);
    color: var(--text-color, #e0e0e0);
}

body.dark-mode .extended-hero-tagline {
    color: #4fc3f7;
}

body.dark-mode .extended-hero-tagline-sub {
    color: #b0bec5;
}

body.dark-mode .extended-hero-headline {
    color: #e0e0e0;
}

body.dark-mode .extended-hero-subheadline {
    color: #9e9e9e;
}

body.dark-mode .extended-hero-cta-card {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.35);
}

body.dark-mode .extended-hero-cta-card::after {
    background: radial-gradient(circle, rgba(79, 195, 247, 0.18) 0%, rgba(79, 195, 247, 0) 70%);
}

body.dark-mode .extended-hero-btn-hint {
    color: #b0bec5;
}

body.dark-mode .extended-hero-primary {
    background: linear-gradient(135deg, #22c55e 0%, #10b981 100%) !important;
}

/* MAUI-specific fixes */
/* Fix horizontal scroll */
/* This rule is GLOBAL: home.css is linked unconditionally in the web head (App.razor) and in
   unQbd.App/wwwroot/index.html, so it applies on every route of both hosts, not just Home.

   `clip`, not `hidden`, and that is load-bearing. `overflow-x: hidden` leaves the other axis
   specified `visible`, which the spec then coerces to `auto` -- so BODY becomes a scroll
   container. Body is content-height and never scrolls (the viewport does), so every
   `position: sticky` descendant on the site pinned to a scrollport that never moves and simply
   scrolled away. Measured on /coding-cohort before the fix: the sticky header sat at top
   -7362px after scrolling, i.e. entirely gone. `clip` is in the exempt set for that coercion,
   so overflow-y stays `visible`, body stops being a scroll container, and stickies resolve
   against the viewport again. Vertical page scrolling is unaffected: html still propagates its
   overflow to the viewport.

   BOTH declarations are required -- do not collapse them to one. iOS 15 is a supported target
   (unQbd.App.csproj SupportedOSPlatformVersion), and `overflow: clip` needs WebKit 16. On iOS 15
   the second declaration is invalid and dropped, leaving `hidden` -- so the horizontal-overflow
   guard this comment is named for survives on exactly the platform it was written for, and only
   the sticky repair is missing there. Deleting the first line silently removes that guard on
   older WKWebView; deleting the second reintroduces the sticky bug everywhere.

   Only `overflow-x` is set, never the `overflow` shorthand: the shorthand would clip the
   vertical axis too and kill page scrolling site-wide. */
html, body {
    overflow-x: hidden !important; /* fallback: WebKit < 16 has no `clip` */
    overflow-x: clip !important;   /* modern: clips without creating a scroll container */
    max-width: 100vw;
}

.page-index {
    overflow-x: hidden !important;
    max-width: 100vw;
}

/* Make button wider and more prominent */
.extended-hero-btn.extended-hero-primary {
    min-width: 220px !important;
    padding: 0.95rem 2.25rem !important;
    font-size: 1.05rem !important;
}

/* Ensure hero sections don't overflow */
.hero-billboard-container,
.extended-hero-section,
.content-rail {
    max-width: 100vw;
    overflow-x: hidden;
}

/* Fix book covers rendering */
.extended-hero-books-inline img {
    display: block;
}


body.dark-mode .extended-hero-primary:hover {
    background: linear-gradient(135deg, #1ea850 0%, #0e9f6e 100%) !important;
}

body.dark-mode .extended-hero-secondary {
    border-color: #4fc3f7 !important;
    color: #4fc3f7 !important;
}

body.dark-mode .extended-hero-secondary:hover {
    background: rgba(79, 195, 247, 0.1) !important;
}

body.dark-mode .section-title {
    color: #4fc3f7 !important;
}

/* Testimonials dark mode */
body.dark-mode .page-index .testimonials-card,
body.dark-mode .page-index .faq-card {
    background: rgba(30, 41, 59, 0.70);
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.35);
}

body.dark-mode .page-index .testimonial-quote {
    background: rgba(15, 23, 42, 0.55);
    border-color: rgba(255, 255, 255, 0.12);
}

body.dark-mode .page-index .testimonial-quote-text {
    color: #e0e0e0;
}

body.dark-mode .page-index .testimonials-title,
body.dark-mode .page-index .faq-title,
body.dark-mode .page-index .testimonial-quote-author {
    color: #4fc3f7;
}

/* Popular/rails dark mode */
body.dark-mode .page-index .content-rail,
body.dark-mode .page-index .free-rail,
body.dark-mode .page-index .full-bleed-section {
    background: transparent;
}

body.dark-mode .page-index .section-header {
    color: var(--text-color, #e0e0e0);
}

/* Carousel skeleton placeholders */
body.dark-mode .page-index .carousel-skeleton .skeleton-item {
    background: linear-gradient(90deg, rgba(55, 65, 81, 0.45) 25%, rgba(75, 85, 99, 0.55) 50%, rgba(55, 65, 81, 0.45) 75%);
}

/* If any Radzen cards are used inside rails, make them dark */
body.dark-mode .page-index .rz-card,
body.dark-mode .page-index .card {
    background: rgba(15, 23, 42, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: var(--text-color, #e0e0e0) !important;
}

/* Free rail section default text colors */
body.dark-mode .page-index .free-rail {
    color: var(--text-color, #e0e0e0);
}

/* FAQ (Radzen Accordion) dark mode */
body.dark-mode .page-index .faq-section .rz-accordion {
    background: transparent !important;
}

body.dark-mode .page-index .faq-section .rz-accordion-item {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

body.dark-mode .page-index .faq-section .rz-accordion-header {
    background: rgba(30, 41, 59, 0.70) !important;
    color: var(--text-color, #e0e0e0) !important;
}

body.dark-mode .page-index .faq-section .rz-accordion-header:hover {
    background: rgba(30, 41, 59, 0.82) !important;
}

body.dark-mode .page-index .faq-section .rz-accordion-content {
    background: rgba(7, 10, 18, 0.88) !important;
    color: var(--text-color, #e0e0e0) !important;
    border-top-color: rgba(255, 255, 255, 0.10) !important;
}

body.dark-mode .page-index .faq-section .rz-accordion-header *,
body.dark-mode .page-index .faq-section .rz-accordion-content * {
    color: inherit !important;
}