/* \wwwroot\css\HomePage\hero.css*/

.hero-container {
    background: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    height: auto !important;
}

.hero-content h2 {
    font-family: 'Merriweather', serif;
    font-size: 2rem;
    color: #fff;
    font-weight: 400;
    text-shadow: 0 2px 6px rgba(0,0,0,0.45);
}

.owner-photo {
    width: 160px;
    height: 160px;
    /*    object-fit: cover;
        border-radius: 50%;
    */ box-shadow: 0 0px 0px rgba(0,0,0,0.0);
}

.owner-left,
.owner-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.owner-left {
    left: 40px;
}

.owner-right {
    right: 40px;
}

.owner-name {
    text-align: center;
    margin-top: 10px;
    font-weight: 600;
    font-size: 1.1rem;
}

body {
    background: black !important;
}

.hero-block {
    position: relative;
    overflow: hidden;
    z-index: 0;
}

    /* Decorative masked image on a non-interactive pseudo-element so it never blocks clicks */
    .hero-block::before {
        content: "";
        position: absolute;
        inset: 0;
        /*background-image: var(--hero-image, url('/Images/homepage/hero-AI-4.png'));*/
        background-image: var(--hero-image);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        padding-bottom: 40px;
        /* PREVIOUSLY USED HERO BACKGROUND IMAGES in .hero-block:: before */
        /* .hero-bg-books {
        background-image: url('/homepage/hero-bg_3.png');
        background-image: url('/homepage/Books.png');
        background-image: url('/homepage/hero-bg_2.png');
    } */
        /* mask layers: use angles for consistency across engines */
        -webkit-mask-image: linear-gradient(180deg, black 80%, transparent 100%), linear-gradient(90deg, black 95%, transparent 100%), linear-gradient(270deg, black 90%, transparent 100%);
        mask-image: linear-gradient(180deg, black 80%, transparent 100%), linear-gradient(90deg, black 95%, transparent 100%), linear-gradient(270deg, black 90%, transparent 100%);
        -webkit-mask-composite: source-in;
        mask-composite: intersect;
        pointer-events: none; /* decorative layer won't intercept clicks */
        z-index: -1;
    }

/* If an overlay is covering the page it can intercept clicks (breaking modals).
   Ensure the hero overlay doesn't block pointer events for the rest of the page.
   Keep child elements interactive by re-enabling pointer-events for them if needed. */
.hero-overlay {
    pointer-events: none;
}

    .hero-overlay * {
        pointer-events: auto;
    }

/**/ /*Colors #b200ff==purple #ffffff== white #808080==gray #0078d4==bluish;*/
/*background: linear-gradient(135deg, #00d4ff 0%, #7b68ee 50%, #00d4ff 100%);*/
/* ── HERO TITLE ── */
/* ──────────────────────────────────────────────── */
/*  SHIMMERING GRADIENT HERO TITLE (KEEP THIS)      */
/* ──────────────────────────────────────────────── */
.hero-title {
    font-size: 4.5rem;
    font-weight: 800;
    letter-spacing: 0.10em;
    line-height: 1.1;
    background: linear-gradient( 135deg, #00d4ff 0%, /* cyan */
    #0078d4 10%, /* blue */
    #8a8a8a 18%, /* stronger silver */
    #d4b45a 22%, /* soft gold (thin) */
    #7a7a7a 26%, /* deeper gray */
    #e6c76b 30%, /* second thin gold highlight */
    #8a8a8a 34%, /* silver again */
    #0078d4 40%, /* blue */
    #00d4ff 45%, /* cyan */
    #7a7a7a 50%, /* deeper gray */
    #d4b45a 53%, /* soft gold (thin) */
    #8a8a8a 56%, /* silver again */
    #e6c76b 59%, /* second thin gold highlight */
    #7a7a7a 62%, /* deeper gray */
    #0078d4 70%, /* blue */
    #00d4ff 80%, /* cyan */
    #7a7a7a 88%, /* deeper gray */
    #d4b45a 92%, /* soft gold (thin) */
    #00d4ff 100% /* cyan */
    );
    background-size: 500% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 2px rgba(0, 0, 20, 0.35);
    filter: none; /* drop-shadow(0 2px 6px rgba(0, 0, 20, 0.7))*/
    /*drop-shadow(0 0 10px rgba(0, 0, 20, 0.5));*/
    animation: shimmer 45s linear infinite;
}

@keyframes shimmer {
    0% {
        background-position: 500% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* WELCOME TITLE */
.welcome-title {
    font-family: 'Merriweather', serif;
    font-size: 3.2rem;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 4px 15px rgba(0,0,0,0.9) !important;
    line-height: 1.05;
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .welcome-title {
        font-size: 2.4rem;
    }

    .hero-block .hero-title {
        font-size: 1.9rem;
    }

    .hero-block .hero-subtitle {
        font-size: 1.05rem;
    }

    .featured-book-label, .featured-chapter-label {
        font-size: 1.05rem;
    }
}

/* Overlay removed completely */
.hero-overlay {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-content {
    text-align: center;
    max-width: 800px;
    padding: 20px 0px;
    transform: translateY(10px);
}

.hero-title {
    font-family: 'Georgia', serif;
    font-size: 2.4rem;
    font-weight: 600;
    color: #b07a3f; /* deep brown */
}

    .hero-title span {
        color: inherit !important;
    }

.hero-subtitle {
    font-style: italic;
    font-size: 1.3rem;
    margin-top: 10px;
    color: #4a2e1a; /* deep brown */
}

.btn-hero {
    background-color: #b07a3f;
    color: #fff;
    padding: 10px 28px;
    border-radius: 6px;
    font-weight: 600;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: background-color 0.3s ease;
}

    .btn-hero:hover {
        background-color: #8c5e2a;
    }

.hero-container,
.hero-section,
.hero-overlay {
    background: none !important;
    border-radius: 0 !important;
}

/* ── HOME PAGE LABELS & BUTTON STYLES ── */
/* Apply consistent, prominent styling for labels on the Home page */
.featured-book-label,
.featured-chapter-label {
    font-family: 'Merriweather', serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #f3d6a2; /* warm highlight */
    letter-spacing: 0.02em;
    text-shadow: 0 2px 6px rgba(0,0,0,0.65);
}

/* Variant used in top row */
.featured-chapter-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #ffffff;
    background: rgba(0,0,0,0.45); /* readable on all backgrounds */
    padding: 4px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

/* Layout for top row (Book of Week + Carousel + Chapter of Week) */
.home-top-row {
    background: none !important;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 0px;
    margin-top: 30px;
    margin-left: 60px;
    margin-right: 60px;
}

.home-top-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0px 60px 0px 60px;
}

    .home-top-label-row .label-left,
    .home-top-label-row .label-center,
    .home-top-label-row .label-right {
        font-size: 0.85rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #ffffff;
        background: rgba(0,0,0,0.45);
        padding: 4px 8px;
        border-radius: 4px;
        text-shadow: 0 2px 4px rgba(0,0,0,0.8);
        text-align: center;
    }

    /* Wrap ONLY Featured Book + Featured Chapter */
    .home-top-label-row .label-left,
    .home-top-label-row .label-right {
        max-width: 120px; /* controls wrapping */
        white-space: normal; /* allow wrapping */
    }

    /* Keep Featured Books on ONE line */
    .home-top-label-row .label-center {
        white-space: nowrap; /* prevent wrapping */
    }

/* USED FOR ANONYMOUS */
.btn-no-thanks {
    display: inline-block;
    background: transparent;
    border: 2px solid #b07a3f;
    color: #b07a3f;
    padding: 8px 14px;
    border-radius: 8px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.06s ease;
}

    .btn-no-thanks:hover,
    .btn-no-thanks:focus {
        background: #b07a3f;
        color: #fff;
        transform: translateY(-1px);
    }

/* MAKE ALL TEXT INSIDE THE HERO IMAGE MORE PROMINENT SO IT REMAINS READABLE ACROSS IMAGES */
.hero-block .hero-title,
.hero-block .hero-subtitle,
.hero-block .hero-content,
.hero-block .hero-overlay {
    color: #ffffff;
    text-shadow: 0 3px 10px rgba(0,0,0,0.7);
}

.hero-block .hero-title {
    font-size: 2.6rem; /* slightly larger than default */
    font-weight: 700;
}

.hero-block .hero-subtitle {
    font-size: 1.35rem;
    font-weight: 600;
}