/*
Theme Name: ELMoro Knowledge Hub
Theme URI: https://elmoro.id
Author: ELMoro Digital
Author URI: https://elmoro.id
Description: A Practical Premium Block Theme for ELMoro, based on the theme.json editorial system.
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
Version: 1.0.0
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: elmoro
Tags: block-theme, full-site-editing, custom-background, post-formats, education
*/

/*
 * This is a block theme. All styles are generated via theme.json.
 * Any custom CSS overrides should be kept sparse and added here only when theme.json is insufficient.
 */

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Mencegah layar bisa digeser ke samping (Horizontal scroll) */
}

/* Base media constraints untuk mencegah gambar "jebol" keluar frame */
img, picture, video, canvas, svg, iframe, figure {
    max-width: 100%;
    height: auto;
}

/* Proteksi agar teks super panjang tidak menjebol layar */
h1, h2, h3, h4, h5, h6, p, a {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

/* Proteksi lebar layar terkecil */
.wp-site-blocks {
    width: 100%;
    max-width: 100vw;
}

/* Utility tambahan dari WordPress jika diperlukan konten penuh */
.alignwide {
    max-width: 1000px;
}

.alignfull {
    max-width: none;
}

/* ==========================================================================
   Mobile Menu Overlay Customization
   ========================================================================== */
.wp-block-navigation__responsive-container.is-menu-open {
    padding-top: max(4rem, 10vh) !important; /* Memberi ruang bernapas di atas */
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    align-items: center !important; /* Menengahkan menu secara horizontal */
    text-align: center;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    gap: 2rem !important; /* Jarak antar menu lebih lega */
}

/* Typography untuk item menu di mobile overlay */
.wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
    font-family: var(--wp--preset--font-family--heading);
    font-weight: 600;
    transition: color 0.3s ease;
}

/* Hover state di mobile (berguna untuk tablet atau tap UX) */
.wp-block-navigation__responsive-container-content .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container-content .wp-block-navigation-item__content:focus {
    color: var(--wp--preset--color--accent-terracotta) !important;
}

/* Styling letak & warna tombol Close Menu (X) */
.wp-block-navigation__responsive-container-close {
    top: 1.5rem !important;
    right: clamp(1.25rem, 5vw, 2rem) !important; /* Sesuai padding global web */
    color: var(--wp--preset--color--accent-terracotta) !important;
    transform: scale(1.2); /* Sedikit diperbesar agar mudah ditap */
}