/* ========================
   File: public/css/custom-frontend.css
   ======================== */

/* Hero Section */
.hero-overlay {
    background: url('../storage/berita/depan_sekolah.jpg') center/cover no-repeat;
    min-height: 480px;
    position: relative;
    box-shadow: none;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    max-width: 100vw;
    border-radius: 0;
    padding-top: 0;
    padding-bottom: 0;
}
body > .hero-overlay {
    margin-top: 0; /* reset negative offset so header and hero/content have normal spacing */
}
.hero-overlay::before {
    content: "";
    position: absolute;
    inset: 0;

    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    z-index: 0;

}
/* left side gradient that matches header colors, sits above background but under content */
.hero-overlay::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 38%;
    background: linear-gradient(90deg, rgba(42,82,152,0.75) 0%, rgba(30,60,114,0.35) 60%, rgba(0,0,0,0) 100%);
    z-index: 0;
    pointer-events: none;
}
.hero-overlay .row {
    min-height: 480px;
    -webkit-backdrop-filter: brightness(0.8);
    backdrop-filter: brightness(0.8);
    position: relative;
    z-index: 1;
}
.hero-overlay img.bg-white {
    border: 3px solid #fff;
    box-shadow: 0 3px 24px rgba(0,0,0,0.07);
}

/* Sambutan */
.sambutan-card {
    background: #f7faff;
    border-radius: 1.2rem;
    box-shadow: 0 3px 18px rgba(44, 62, 80, 0.05);
    padding: 1.2rem 1rem;
}

/* Berita */
.card-news .card {
    transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
    position: relative;
}
.card-news .card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 24px rgba(33, 87, 189, 0.1);
}
.badge-news {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: #ff6f61;
    color: white;
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
    border-radius: 0.5rem;
    z-index: 2;
}
.row-news-scroll {
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 1rem;
}
.row-news-scroll::-webkit-scrollbar {
    height: 7px;
    background: #eee;
}
.row-news-scroll::-webkit-scrollbar-thumb {
    background: #adc7f7;
    border-radius: 5px;
}

.card-profile, .card-fasilitas {
    border-radius: 0 !important;
    background: #f7faff;
}
.card-profile { border-left: 4px solid #367fff; }
.card-fasilitas { border-left: 4px solid #2db14b; }

/* Ensure inner elements also have square corners */
.card-profile .card-body,
.card-fasilitas .card-body,
.card-profile::before,
.card-fasilitas::before,
.card-profile::after,
.card-fasilitas::after {
    border-radius: 0 !important;
}

/* Carousel */
.carousel-inner img {
    box-shadow: 0 3px 18px rgba(44, 62, 80, 0.09);
    transition: transform 0.3s ease-in-out;
}
.carousel-inner img:hover {
    transform: scale(1.03);
}
.carousel-caption {
    background: rgba(0,37,92,0.5);
    border-radius: 0.8rem;
    padding: .5rem 1.2rem;
}

/* Home page: hero tweaks */
.hero-title { font-size: 2.4rem; line-height:1.05; font-weight:800; }
.hero-sub { font-size:1.05rem; opacity:0.95; }
.hero-cta .btn-warning {
    background: #f6b31a; /* warm yellow */
    border-color: #e0a816;
    color: #111;
}
.hero-cta .btn-outline-warning {
    border-color: #f6b31a;
    color: #f6b31a;
}

/* Feature cards */
.feature-card {
    background: #fff; border-radius: .6rem; box-shadow: 0 8px 28px rgba(33,44,66,0.06); min-height:160px;
}
.feature-icon { font-size: 1.6rem; display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; background:linear-gradient(90deg,#eef6ff,#f7fbff); color:#0b5ed7; margin:0 auto; }

/* Sambutan wrapper */
.sambutan-wrapper { max-width:920px; width:100%; }
.sambutan-card { background: #fff; border-radius: .6rem; padding:1rem; box-shadow:0 10px 36px rgba(33,44,66,0.06); }

/* Berita small horizontal cards */
.berita-row { display:flex; gap:1rem; overflow-x:auto; padding-bottom:6px; }
.berita-card { min-width:260px; max-width:300px; position:relative; border-radius:.5rem; overflow:hidden; box-shadow:0 6px 20px rgba(33,44,66,0.06); }
.berita-card img { width:100%; height:140px; object-fit:cover; display:block; }
.berita-caption { position:absolute; left:0; right:0; bottom:0; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.62) 100%); color:#fff; padding:10px 12px; }

@media (max-width: 768px) {
    .hero-title { font-size: 1.6rem; }
    .hero-sub { font-size: .95rem; }
    .feature-card { min-height:140px; }
}

/* Footer */
footer {
    background: linear-gradient(90deg, #2a5298 0%, #1e3c72 100%);
    color: #fff !important;
    font-weight: 500;
    letter-spacing: 0.01em;
    box-shadow: 0 2px 18px rgba(0,0,0,0.05);
}

/* Social Icons */
.social-icon {
    color: #eee;
    transition: transform 0.2s ease-in-out;
}
.social-icon:hover {
    color: #1da1f2;
    transform: scale(1.15);
}

/* Responsive */
@media (max-width: 600px) {
    .hero-overlay, .hero-overlay .row { min-height: 260px; }
    .hero-overlay {
        width: 100vw;
        margin-left: -50vw;
        left: 50%;
        border-radius: 0;
        box-shadow: none;
    }
    .card-profile, .card-fasilitas, .sambutan-card {
        border-radius: .8rem;
        padding: .8rem .5rem;
    }
    footer {

        font-size: .98rem;
    }
}

/* Spacing for auth maintenance pages to clear sticky header */
.auth-maintenance { padding-top: 3.5rem; padding-bottom: 2.25rem; }
.auth-maintenance .card { margin-top: .5rem; }

@media (max-width: 900px) {
    .auth-maintenance { padding-top: 2.5rem; padding-bottom: 1.75rem; }
}

@media (max-width: 600px) {
    .auth-maintenance { padding-top: 1.5rem; padding-bottom: 1rem; }
}

/* Global spacing: give consistent gap between sticky header and page content */
/* Increased top padding so page content clears sticky header */
main { padding-top: 4rem; }

@media (max-width: 900px) {
    main { padding-top: 2.5rem; }
}

@media (max-width: 600px) {
    main { padding-top: 1.5rem; }
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    body { background-color: #121212; color: #ddd; }
    .card, .sambutan-card, .card-profile, .card-fasilitas { background-color: #1e1e1e; color: #ddd; }
    footer { background: #1c1c1c; }
}

/* Override: make layout strictly boxy (remove rounded corners from containers) */
/* Preserve rounded-circle (avatars/logos) by not targeting that class explicitly */
.card,
.card-profile,
.card-fasilitas,
.sambutan-card,
.card-news .card,
.carousel-caption,
.badge-news,
.hero-overlay,
.btn,
.navbar,
.footer,
.modal-content,
.dropdown-menu {
    border-radius: 0 !important;
}

/* Also remove border-radius from utility rounded classes except rounded-circle */
.rounded:not(.rounded-circle),
[class*="rounded-"] {
    border-radius: 0 !important;
}

/* Tweak small UI bits */
.badge-news { border-radius: 0.2rem !important; }

/* Galeri: make any .text-primary and titles black on gallery page */
.galeri-page .text-primary,
.galeri-page h2.text-primary,
.galeri-page .card-title.text-primary,
.galeri-page .card-title {
    color: #000 !important;
}

/* Fasilitas: make any .text-primary and titles black on fasilitas page */
.fasilitas-page .text-primary,
.fasilitas-page h2.text-primary,
.fasilitas-page .card-title.text-primary,
.fasilitas-page .card-title {
    color: #000 !important;
}

/* Guru: make any .text-primary and titles black on guru page */
.guru-page .text-primary,
.guru-page h2.text-primary,
.guru-page .card-title.text-primary,
.guru-page .card-title {
    color: #000 !important;
}

/* Kegiatan: make any .text-primary and titles black on kegiatan page */
.kegiatan-page .text-primary,
.kegiatan-page h2.text-primary,
.kegiatan-page .card-title.text-primary,
.kegiatan-page .card-title {
    color: #000 !important;
}