/* =========================================================================
   CUSTOM RESPONSIVE OVERRIDES — FRONTEND (PUBLIK)
   Fakultas Ilmu Ekonomi - Universitas Ichsan Satya
   File terpisah dari style.css bawaan tema agar aman saat tema di-update.
   Muat file ini SETELAH style.css di Header.php.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. GLOBAL SAFETY NET
   Mencegah elemen apa pun (gambar, tabel, iframe, teks panjang) melebihi
   lebar layar dan menyebabkan horizontal scroll di HP/tablet.
   ------------------------------------------------------------------------- */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

/* -------------------------------------------------------------------------
   2. KONTEN DINAMIS (TinyMCE / WYSIWYG)
   Konten dari editor CMS (Profil, Content.php, Widget Footer, dsb) di-render
   sebagai HTML mentah dan tidak otomatis mengikuti class Bootstrap.
   Aturan berikut memastikan tabel, gambar, dan embed dari editor tetap
   responsif di semua ukuran layar.
   ------------------------------------------------------------------------- */
.content,
.card-body,
footer .col-lg-3,
footer .col-lg-6 {
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Tabel dari TinyMCE: bungkus otomatis agar bisa discroll horizontal
   alih-alih memaksa lebar penuh dan merusak layout */
.content table,
.card-body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
}

.content table td,
.content table th,
.card-body table td,
.card-body table th {
    white-space: normal;
}

/* Gambar dari TinyMCE kadang punya atribut width/height inline dari editor */
.content img,
.card-body img {
    max-width: 100% !important;
    height: auto !important;
}

/* Embed iframe (mis. Google Maps / YouTube) yang ditempel manual di editor */
.content iframe,
.card-body iframe,
footer iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
}

/* Blok kode/preformatted text agar tidak mendorong lebar halaman */
.content pre,
.content code {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* -------------------------------------------------------------------------
   3. NAVBAR & HEADER
   ------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .navbar-collapse {
        max-height: 80vh;
        overflow-y: auto;
    }

    .navbar-nav .dropdown-menu {
        box-shadow: none;
        border: none;
        padding-left: 1rem;
    }
}

@media (max-width: 575.98px) {
    .navbar-brand-item {
        max-height: 40px;
        width: auto;
    }
}

/* -------------------------------------------------------------------------
   4. HERO / SLIDER (Banner Utama)
   ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .tiny-slider {
        max-height: 220px !important;
    }

    .tiny-slider img {
        max-height: 220px !important;
        object-fit: cover;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .tiny-slider {
        max-height: 320px !important;
    }

    .tiny-slider img {
        max-height: 320px !important;
        object-fit: cover;
    }
}

/* -------------------------------------------------------------------------
   5. GRID KONTEN (Beranda / Informasi / Aside)
   ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    /* Sidebar Aside pindah ke bawah konten utama secara alami lewat grid,
       tambahkan jarak agar tidak menempel */
    .col-md-4 {
        margin-top: 2rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    .card-title {
        font-size: 1rem;
    }
}

@media (max-width: 575.98px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    h2 {
        font-size: 1.3rem;
    }
}

/* -------------------------------------------------------------------------
   6. FOOTER
   ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    footer .col-6 {
        margin-bottom: 1.5rem;
    }
}

/* -------------------------------------------------------------------------
   7. TABEL UMUM DI LUAR ADMIN (jika ada tabel biasa di halaman publik,
      misalnya di halaman Prodi/Kurikulum)
   ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    table:not(.dataTable) {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}