/*
Theme Name: MPM Pembangunan
Theme URI: https://penamasmotivator.org/
Description: Child theme for the MPM WordPress site using the new MPM frontend.
Author: MPM
Template: motivator_penamas
Version: 0.1.0
Text Domain: motivator-pembangunan
*/

/* The visual system is supplied by assets/css/style.css. */

.site-header { position: sticky; top: 0; z-index: 1000; }
.site-header__desktop-nav > ul { display: flex; align-items: center; justify-content: center; gap: clamp(.65rem, 1.1vw, 1.25rem); }
.site-header__desktop-nav .menu-item { position: relative; }
.site-header__desktop-nav .sub-menu { display: none; position: absolute; left: 0; top: 100%; min-width: 14rem; padding: .5rem 0; background: #fff; border: 1px solid #eef2ef; box-shadow: 0 10px 24px rgba(20, 82, 36, .12); }
.site-header__desktop-nav .menu-item-has-children:hover > .sub-menu,
.site-header__desktop-nav .menu-item-has-children:focus-within > .sub-menu { display: block; }
.site-header__desktop-nav .sub-menu a { display: block; padding: .55rem 1rem; white-space: nowrap; }
.site-header__mobile-menu .sub-menu { display: none; padding-left: 1rem; }
.site-header__mobile-menu .menu-item-has-children:focus-within > .sub-menu { display: block; }
.site-header__mobile-menu .menu-item a { display: block; padding: .75rem 1.5rem; }

.site-header__brand { order: 1; }
.site-header__desktop-nav { order: 2; flex: 1 1 auto; justify-content: center; }
.site-header__actions { order: 3; display: flex; align-items: center; gap: .65rem; margin-left: auto; }
.site-header__menu-button { order: 4; display: inline-flex; align-items: center; justify-content: center; padding: .55rem; color: #374151; font-size: 1.35rem; line-height: 1; }
.site-header__menu-button:hover { color: #1F6B3A; }
.search-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: .55rem; color: #374151; background: transparent; border: 0; border-radius: .5rem; cursor: pointer; font-size: 0; }
.search-toggle { color: transparent; text-indent: -9999px; overflow: hidden; }
.search-toggle::before { content: '⌕'; display: block; color: #374151; font-family: Arial, sans-serif; font-size: 1.65rem; line-height: 1; text-indent: 0; }
.search-toggle:hover, .search-toggle:focus-visible { color: #1F6B3A; background: #eef8f0; }
.search-toggle svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.language-switcher { position: relative; }
.language-toggle { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; padding: .4rem .7rem; color: #374151; background: #fff; border: 1px solid #dce8df; border-radius: .6rem; cursor: pointer; font-size: .875rem; font-weight: 600; line-height: 1; list-style: none; white-space: nowrap; transition: color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.language-toggle::-webkit-details-marker { display: none; }
.language-toggle:hover, .language-switcher[open] > .language-toggle { color: #1F6B3A; border-color: #1F6B3A; box-shadow: 0 0 0 1px rgba(31,107,58,.06); }
.language-chevron { display: none; }
.language-chevron-icon { display: block; width: 1rem; height: 1rem; flex: 0 0 auto; align-self: center; margin: 0; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.language-switcher[open] .language-chevron-icon { transform: translateY(0) rotate(180deg); }
.language-flag { display: inline-block; width: 1.875rem; height: 1.25rem; flex: 0 0 auto; border-radius: .15rem; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.language-flag--id { background: linear-gradient(#e31b23 0 50%, #fff 50%); }
.language-flag--en { background-color: #fff; background-image: url('https://cdn.pixabay.com/photo/2020/04/26/09/33/flag-5094405_1280.png'); background-position: center; background-size: cover; }
.language-flag--de { background: linear-gradient(#000 0 33%, #dd0000 33% 66%, #ffce00 66%); }
.language-dropdown { display: none; position: absolute; top: calc(100% + .5rem); right: 0; z-index: 1100; width: 13rem; padding: .4rem; background: #fff; border: 1px solid #dce8df; border-radius: .65rem; box-shadow: 0 12px 30px rgba(20,82,36,.16); }
.language-switcher[open] > .language-dropdown { display: grid; gap: .2rem; }
.language-option { display: flex; align-items: center; gap: .55rem; padding: .45rem; color: #374151; border-radius: .4rem; }
.language-option:hover { background: #eef8f0; }
.language-option.is-active { color: #1F6B3A; background: #eef8f0; font-weight: 700; }
.language-option[aria-current="true"]::after { content: '✓'; margin-left: auto; color: #1F6B3A; font-weight: 700; }
.language-option a { color: inherit; text-decoration: none; }
.search-overlay { position: fixed; inset: 0; z-index: 2000; display: flex !important; align-items: center; justify-content: center; padding: clamp(1.25rem, 5vw, 4rem); background: rgba(1, 15, 7, .84); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility .25s ease; }
.search-overlay:not(.hidden), .search-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.search-overlay__backdrop { position: absolute; inset: 0; }
.search-overlay__content { position: relative; z-index: 1; width: min(100%, 40rem); }
.search-overlay__form { width: 100%; }
.search-overlay__field { display: flex; align-items: center; border-bottom: 2px solid #1F6B3A; }
.search-overlay__field input { flex: 1 1 auto; min-width: 0; min-height: 4rem; padding: .65rem 0; color: #fff; background: transparent; border: 0; border-radius: 0; box-shadow: none; font-size: clamp(1.5rem, 3.2vw, 2.35rem); }
.search-overlay__field input::placeholder { color: rgba(226,232,240,.68); }
.search-overlay__field input:focus { outline: none; box-shadow: none; }
.search-overlay__submit { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 3.5rem; height: 3.5rem; color: #fff; background: transparent; border: 0; cursor: pointer; }
.search-overlay__submit svg { width: 2.25rem; height: 2.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.search-overlay__submit:hover, .search-overlay__submit:focus-visible { color: #a7e3b7; }
.search-overlay__close { position: absolute; top: -3.25rem; right: 0; width: 2.25rem; height: 2.25rem; padding: 0; color: #fff; background: transparent; border: 0; font-size: 2rem; line-height: 1; cursor: pointer; }
.search-overlay__close:hover, .search-overlay__close:focus-visible { color: #a7e3b7; }
body.search-overlay-open { overflow: hidden; }

.site-footer.bg-dark { background: #1F6B3A; }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, .85fr)) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
.site-footer__column { min-width: 0; }
.site-footer__column h2 { margin: 0 0 1.2rem; color: #fff; font-size: 1.05rem; font-weight: 700; }
.site-footer__description, .site-footer__column li, .site-footer__column a { color: rgba(255,255,255,.82); line-height: 1.65; }
.site-footer__column ul { margin: 0; padding: 0; list-style: none; }
.site-footer__column li + li { margin-top: .55rem; }
.site-footer__column a { text-decoration: none; }
.site-footer__column a:hover { color: #fff; }
.site-footer__column[aria-label] > ul a { display: inline-flex; align-items: center; gap: .65rem; }
.site-footer__link-chevron { width: .8rem; height: .8rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .82; transition: transform .2s ease, opacity .2s ease; }
.site-footer__column[aria-label] > ul a:hover .site-footer__link-chevron { transform: translateX(.15rem); opacity: 1; }
.site-footer__socials { display: flex; flex-wrap: wrap; gap: .5rem; }
.site-footer__social-link { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; color: #fff !important; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; }
.site-footer__social-link svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.site-footer__social-link:hover { background: rgba(255,255,255,.16); }
.site-footer__contact-list li { display: grid; grid-template-columns: 1.4rem minmax(0,1fr); gap: .5rem; align-items: start; }
.site-footer__contact-icon { display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.site-footer__contact-icon svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.site-footer__contact-list-legacy { display: none; }
.site-footer__bottom { margin-top: 2.5rem; padding-top: 1.2rem; color: rgba(255,255,255,.75); border-top: 1px solid rgba(255,255,255,.24); text-align: center; font-size: .85rem; }
@media (min-width: 1360px) {
    .site-header__actions { margin-left: clamp(1.5rem, 2.2vw, 2.5rem); }
    .site-header__menu-button { display: none; }
}
@media (max-width: 1359px) {
    .site-header__desktop-nav { display: none !important; }
    .site-header__actions { gap: .35rem; }
}
@media (max-width: 1023px) and (min-width: 768px) {
    .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .site-header__brand { max-width: 9.5rem; }
    .site-header__actions { gap: .15rem; }
    .language-toggle { gap: .45rem; padding: .4rem .55rem; }
    .search-overlay { padding: 1.25rem; }
    .search-overlay__close { top: -3rem; }
    .site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}

.mpm-primary-menu { list-style: none; margin: 0; padding: 0; }
.mpm-primary-menu--desktop { display: flex; align-items: center; gap: 1.25rem; }
.mpm-primary-menu__item { position: relative; list-style: none; }
.mpm-primary-menu__item > a,
.mpm-primary-menu__dropdown > summary { display: inline-flex; align-items: center; gap: .35rem; color: #374151; cursor: pointer; padding: .75rem 0; white-space: nowrap; }
.mpm-primary-menu__dropdown > summary { list-style: none; }
.mpm-primary-menu__dropdown > summary::-webkit-details-marker { display: none; }
.mpm-primary-menu__chevron { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.mpm-primary-menu__dropdown[open] > summary > .mpm-primary-menu__chevron { transform: rotate(180deg) !important; rotate: 180deg !important; }
.mpm-primary-menu__submenu { display: none; position: absolute; z-index: 60; left: 0; top: 100%; min-width: 15rem; margin: 0; padding: .5rem 0; list-style: none; background: #fff; border: 1px solid #eef2ef; box-shadow: 0 10px 24px rgba(20, 82, 36, .12); }
.mpm-primary-menu__dropdown[open] .mpm-primary-menu__submenu { display: block; }
.mpm-primary-menu__submenu a { display: block; padding: .55rem 1rem; color: #374151; white-space: nowrap; }
.mpm-primary-menu__submenu a:hover { background: #f0fdf4; color: #1b6b2f; }
.mpm-primary-menu--mobile { display: flex; flex-direction: column; padding: 1rem 0; }
.mpm-primary-menu--mobile .mpm-primary-menu__item > a,
.mpm-primary-menu--mobile .mpm-primary-menu__dropdown > summary { display: flex; width: 100%; justify-content: space-between; padding: .75rem 1.5rem; }
.mpm-primary-menu--mobile .mpm-primary-menu__submenu { position: static; min-width: 0; border: 0; box-shadow: none; padding: 0 0 .25rem 1rem; background: #f8faf8; }
.mpm-primary-menu--mobile .mpm-primary-menu__submenu a { padding: .65rem 1.5rem; white-space: normal; }
.site-header__desktop-controls .gtranslate_wrapper { min-width: 7rem; }
.site-header__actions .language-switcher { display: block; }
.language-switcher a[data-gt-lang] { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; padding: .25rem .4rem; color: #4b5563; font-size: .75rem; font-weight: 600; text-decoration: none; border-radius: .25rem; }
.language-switcher a[data-gt-lang]:hover, .language-switcher a.gt-current-lang { color: #1b6b2f; background: #f0fdf4; }
@media (max-width: 1279px) {
    .site-header__desktop-nav, .site-header__desktop-controls { display: none !important; }
    .site-header__menu-button { display: inline-flex !important; }
}
@media (max-width: 420px) {
    .site-header__brand { max-width: 8rem; }
    .language-toggle > span:nth-of-type(2) { display: none; }
    .language-toggle { padding-inline: .4rem; }
}