/* homepage-laptop.css - Optimized for 1366x768 laptop screens */
/* This stylesheet adjusts the homepage design for medium-sized laptop displays */

/* === CSS VARIABLES FOR SPACE THEME === */
:root {
    --space-deep-1: #040617; /* near-black navy */
    --space-deep-2: #0b1a3a; /* deep space blue */
    --nebula-1: rgba(83, 60, 153, 0.12); /* soft purple nebula */
    --nebula-2: rgba(35, 160, 210, 0.08); /* soft teal nebula */
    --star-color: rgba(255,255,255,0.95);
}

/* === STARFIELD BACKGROUND (MUST BE PRESERVED) === */
/* Moving starfield layer - ensures stars are visible and animated */
body::before {
    content: '' !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background-image: radial-gradient(circle, rgba(255,255,255,0.95) 1px, transparent 1px),
                      radial-gradient(circle, rgba(255,255,255,0.6) 1px, transparent 1px) !important;
    background-size: 130px 130px, 210px 210px !important; /* Optimized for laptop */
    opacity: 0.92 !important; /* Increased visibility */
    mix-blend-mode: screen !important; /* makes stars pop on dark backgrounds */
    transform: translateZ(0) !important;
    animation: starScroll 180s linear infinite !important;
    display: block !important;
}

@keyframes starScroll {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 0 -1400px, 0 -800px; }
}

/* Outer-space themed background with adjusted nebula sizes for laptop */
body {
    background-color: #040617 !important;
    background-image: radial-gradient(750px 300px at 15% 22%, rgba(83, 60, 153, 0.12), transparent 30%),
                      radial-gradient(650px 260px at 82% 72%, rgba(35, 160, 210, 0.08), transparent 28%),
                      linear-gradient(180deg, #0b1a3a 0%, #040617 100%) !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    color: #e6eef8 !important; /* brighter default text for readability on dark bg */
}

/* Reduced motion preference: stop star animation but keep visible */
@media (prefers-reduced-motion: reduce) {
    body::before { 
        animation: none; 
        opacity: 0.85;
    }
}

/* Ensure the star layer does not affect printing */
@media print {
    body::before { display: none; }
}

/* === END STARFIELD === */

/* Adjust header logo sizes for laptop screen */
.site-header .brand img { 
    height: 58px;
}
.site-header .brand .sublogo {
    height: 32px;
}

/* Header badge sizing */
.header-badge {
    padding: 3px 7px;
    font-size: 0.72rem;
}

/* Navbar adjustments */
.navbar {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

/* Header actions font size */
.header-actions a {
    font-size: 0.95rem;
}

/* Hero carousel height constraint */
.hero-banner {
    max-height: 380px;
}

/* Large banner text sizing */
.large-banner {
    padding: 20px 24px;
    font-size: 1.05rem;
    line-height: 1.55;
}

.large-banner .lead-text {
    padding: 11px 16px;
    font-size: 1rem;
}

.large-banner .sticker {
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
}

/* Confetti dots in large banner */
.large-banner::before {
    width: 110px;
    height: 38px;
}

/* Intro full section adjustments */
.intro-full {
    padding: 16px 20px;
    border-radius: 13px;
}

.intro-full .intro-box {
    padding: 13px;
}

.intro-full h3,
.intro-full .intro-title {
    font-size: 2rem;
    margin-bottom: 7px;
}

.intro-full p,
.intro-full .intro-text {
    font-size: 0.98rem;
    line-height: 1.55;
}

/* Kid icons sizing */
.intro-full .kid-icons {
    left: -16px;
    top: -20px;
    gap: 5px;
}

.intro-full .kid-icons span {
    width: 26px;
    height: 26px;
}

/* Flip card adjustments */
.flip-card .flip-card-inner {
    max-height: 340px;
}

/* Card body bottom overlay */
.card-body-bottom {
    left: 11px;
    right: 11px;
    bottom: 95px;
    padding: 0.75rem 0.95rem;
    border-radius: 11px;
}

.card-body-bottom h5 {
    font-size: 1.05rem;
    margin-bottom: 0.4rem;
}

.card-body-bottom p {
    font-size: 0.92rem;
}

/* Vertical rainbow accent */
.card-body-bottom::before {
    width: 7px;
}

/* Confetti dots */
.card-body-bottom::after {
    width: 52px;
    height: 34px;
    right: 7px;
    top: 7px;
}

/* Hover effects */
.flip-card:hover .card-body-bottom,
.flip-card:focus .card-body-bottom {
    transform: translateY(-5px) scale(1.008);
}

/* Back card text */
.flip-card-back .card {
    padding: 0.9rem;
}

.flip-card-back .card h5 {
    font-size: 1.05rem;
}

.flip-card-back .card p {
    font-size: 0.92rem;
}

/* Icon circle sizing */
.icon-circle {
    width: 60px;
    height: 60px;
}

/* Footer adjustments */
footer {
    padding-top: 1.15rem;
    padding-bottom: 1.15rem;
}

footer i {
    font-size: 1.2rem;
}

.footer-icon {
    width: 42px;
    height: 42px;
}

.footer-icon i {
    font-size: 1.3rem;
}

.footer-icon.location .footer-icon-text {
    font-size: 0.75rem;
    max-width: 190px;
}

/* Modal adjustments */
.modal-content.login-modal {
    max-width: 500px;
}

.modal-dialog {
    max-width: 500px;
}

.modal-content.login-modal .modal-body {
    padding: 1.2rem 1.4rem;
}

.modal-content.login-modal .form-control {
    padding: 0.85rem 0.95rem;
}

.modal-content.login-modal .btn-salmon {
    padding: 0.85rem 1.2rem;
    font-size: 1.02rem;
}

/* FAQ modal for laptop */
.modal-content.faq-modal {
    max-width: 880px;
}

.modal-dialog.modal-lg {
    max-width: 880px;
}

.modal-content.faq-modal .modal-body {
    padding: 0.95rem 1.2rem 1.4rem;
}

.modal-content.faq-modal .modal-body .faq-list {
    padding: 0.95rem;
}

/* Button sizing */
.btn-login {
    font-size: 0.95rem;
    padding: 0.4rem 0.9rem;
}

/* Decorative header shapes sizing (note: these are hidden in space theme) */
.header-decor {
    height: 56px;
}

.header-decor .shape {
    width: 60px;
    height: 60px;
}

.header-decor .shape.circle {
    width: 68px;
    height: 68px;
    left: 6%;
    bottom: -24px;
}

.header-decor .shape.star {
    width: 52px;
    height: 52px;
    left: 28%;
    bottom: -17px;
}

.header-decor .shape.blob {
    width: 80px;
    height: 80px;
    right: 6%;
    bottom: -30px;
}

/* Container adjustments for better use of laptop screen width */
.container {
    max-width: 1280px;
}

/* Card column spacing */
.col-lg-4 {
    margin-bottom: 1.2rem;
}

/* Carousel controls sizing */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 2.5rem;
    height: 2.5rem;
}

/* Carousel indicators */
.carousel-indicators [data-bs-slide-to] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* Spacing adjustments */
.container-fluid.py-4 {
    padding-top: 1.8rem !important;
    padding-bottom: 1.8rem !important;
}

.container.my-4 {
    margin-top: 1.8rem !important;
    margin-bottom: 1.8rem !important;
}

/* Large banner row spacing */
.row.mt-5 {
    margin-top: 2.5rem !important;
}

/* Ensure smooth rendering on laptop screens */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Optimize transition performance */
.flip-card-inner {
    will-change: transform;
}

.card-body-bottom {
    will-change: transform, box-shadow;
}

/* Ensure content is properly layered above stars */
.site-header,
.container,
.container-fluid,
.flip-card,
.intro-full,
footer {
    position: relative;
    z-index: 1;
}

/* Force intro text to black for readability */
.intro-full, 
.intro-full .intro-box, 
.intro-full h3, 
.intro-full p, 
.intro-full .intro-box * {
    color: #000 !important;
}

/* Ensure cards have proper background on dark theme */
.intro-box, 
.card { 
    background-color: rgba(10,12,25,0.92) !important; 
    color: #f3f7ff !important; 
}