/*
 * Penyuluhan Faperta brand/layout overrides.
 * Full-width site canvas and explicit pointer affordances for navigation controls.
 */

/* Full-width page canvas with one shared content rail.
 * The header/footer backgrounds remain 100% wide, while all inner content
 * uses the same 1280px rail so nothing can exceed the footer width.
 */
html,
body,
.site-main,
.site-footer {
  width: 100%;
  max-width: 100%;
}

html,
body {
  overflow-x: clip;
}

@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}

.container {
  width: min(var(--penyuluhan-container), calc(100% - 40px));
  max-width: var(--penyuluhan-container);
  margin-inline: auto;
  padding-inline: 0;
  box-sizing: border-box;
}

/* Reading layouts intentionally remain constrained for comfortable text measure. */
.container--reading {
  width: 100%;
  max-width: 1050px;
  margin-inline: auto;
}

/* Make every navigation/menu control expose a clear pointer affordance. */
.site-navigation a,
.mobile-navigation a,
.menu-toggle,
.drawer-close,
.mobile-drawer__overlay,
.site-navigation .menu-item,
.mobile-navigation .menu-item {
  cursor: pointer;
}

.site-navigation .menu-item > a,
.mobile-navigation .menu-item > a {
  cursor: pointer;
}

/* Header/main navigation uses the same full-width canvas and horizontal gutters as the footer. */
.site-header__inner {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: clamp(20px, 4vw, 64px);
  box-sizing: border-box;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.site-navigation {
  width: 100%;
  min-width: 0;
  justify-self: stretch;
}

.site-navigation .menu {
  width: 100%;
  justify-content: flex-end;
  flex-wrap: nowrap;
}

@media (max-width: 1100px) and (min-width: 921px) {
  .site-navigation .menu {
    justify-content: flex-end;
  }
}

@media (max-width: 920px) {
  .site-header__inner {
    width: 100%;
    padding-inline: clamp(16px, 4vw, 28px);
  }
}

@media (max-width: 640px) {
  .site-header__inner {
    padding-inline: 14px;
  }
}


/* Stable header geometry for the theme fallback and multilingual switcher. */
.site-header__inner {
  width: 100%;
  max-width: none;
  min-height: 82px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(12px, 2vw, 30px);
}
.site-branding { min-width: 0; }
.site-branding__text { max-width: 100%; overflow: hidden; }
.site-branding__main,
.site-branding__accent { overflow: hidden; text-overflow: ellipsis; }
.site-navigation { min-width: 0; width: 100%; }
.site-navigation .menu { width: 100%; justify-content: flex-end; }
.site-navigation .menu--theme-fallback { display: flex; }
.site-navigation .menu-item--theme-fallback > a { cursor: pointer; }
.header-tools { flex-shrink: 0; }
.language-switcher { white-space: nowrap; }
@media (max-width: 1180px) and (min-width: 921px) {
  .site-header__inner { gap: 10px; }
  .site-navigation .menu-item > a { padding-inline: .38rem; font-size: .8rem; }
  .language-switcher__link { min-width: 40px; padding-inline: .4rem; }
}
@media (max-width: 920px) {
  .site-header__inner {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    min-height: 72px;
  }
  .site-branding__text { gap: .35rem; }
  .menu-toggle { display: inline-grid; }
  .header-tools { justify-self: end; }
}
@media (max-width: 640px) {
  .site-header__inner { padding-inline: 14px; }
  .site-branding__main { font-size: .88rem; }
  .site-branding__accent { font-size: .62rem; }
  .language-switcher__link { min-width: 38px; min-height: 32px; padding-inline: .35rem; font-size: .66rem; }
  .menu-toggle { min-width: 44px; min-height: 44px; }
}

/* Final responsive navigation corrections. */
.site-navigation { overflow: visible; }
.site-navigation .menu { overflow: visible; }
.site-navigation .sub-menu { z-index: 1200; }
.mobile-navigation { overflow: visible; }
.language-switcher { position: relative; z-index: 1300; }
@media (max-width: 1180px) and (min-width: 921px) {
  .site-header__inner { grid-template-columns: minmax(220px, .9fr) minmax(0, 1.5fr) auto; }
  .site-branding__main { font-size: 1rem; }
  .site-branding__accent { font-size: .72rem; }
  .site-navigation .menu-item > a { font-size: .78rem; padding-inline: .3rem; }
}
@media (max-width: 1024px) and (min-width: 921px) {
  .site-header__inner { gap: 8px; }
  .site-navigation .menu-item > a { font-size: .73rem; padding-inline: .24rem; }
  .language-switcher__link { min-width: 36px; font-size: .66rem; }
}

/* v1.2.4 — final publish-ready content rail.
 * Keep the header's inner rail exactly aligned with .container used by the
 * homepage and footer, while the header background itself remains full width.
 */
.site-header > .site-header__inner {
  width: min(var(--penyuluhan-container), calc(100% - 40px));
  max-width: var(--penyuluhan-container);
  margin-inline: auto;
  padding-inline: 0;
  box-sizing: border-box;
}

.site-footer > .container,
.site-main .container {
  width: min(var(--penyuluhan-container), calc(100% - 40px));
  max-width: var(--penyuluhan-container);
  margin-inline: auto;
  padding-inline: 0;
  box-sizing: border-box;
}

.site-header__inner {
  min-height: 82px;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.site-navigation .menu {
  justify-content: flex-end;
}

/* Desktop: clean labels, no visible arrow glyphs. */
@media (min-width: 921px) {
  .site-navigation .menu-item-has-children > a::after,
  .site-navigation .submenu-indicator,
  .site-navigation .submenu-toggle {
    display: none !important;
  }
}

@media (max-width: 920px) {
  .container,
  .site-header > .site-header__inner,
  .site-footer > .container,
  .site-main .container {
    width: calc(100% - 28px);
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
  }

  .site-main {
    min-width: 0;
  }

  .hero-card,
  .profile-grid,
  .service-grid,
  .stats-panel,
  .post-grid,
  .cta-panel,
  .profile-video__frame {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .container,
  .site-header > .site-header__inner,
  .site-footer > .container,
  .site-main .container {
    width: calc(100% - 28px);
  }

  .section-pad {
    padding-block: 48px;
  }

  .hero-section {
    padding-top: 28px;
  }

  .hero-card {
    width: 100%;
  }

  .site-footer {
    width: 100%;
    max-width: 100%;
  }
}

/* v1.2.5 — final width lock: one rail from header through footer. */
.site-header,
.site-main,
.site-footer {
  overflow-x: clip;
}

.site-footer {
  width: 100%;
}

.site-footer .footer-grid,
.site-footer .footer-bottom {
  width: 100%;
  max-width: var(--penyuluhan-container);
  margin-inline: auto;
}

@supports not (overflow: clip) {
  .site-header, .site-main, .site-footer { overflow-x: hidden; }
}


/* v1.2.6 — keep the study-program profile inside the green hero card.
 * This prevents English text-length changes from moving the profile block
 * into a separate white section and keeps the homepage composition stable.
 */
.hero-copy { min-width: 0; }
.hero-profile {
  margin-top: clamp(28px, 4vw, 46px);
  padding-top: clamp(22px, 3vw, 32px);
  border-top: 1px solid rgba(255,255,255,.22);
  max-width: 760px;
}
.hero-profile__eyebrow {
  margin-bottom: .7rem;
  color: var(--penyuluhan-accent);
}
.hero-profile h2 {
  margin-bottom: .75rem;
  color: #fff;
  font-size: clamp(1.7rem, 3.2vw, 2.65rem);
}
.hero-profile__intro {
  max-width: 700px;
  margin-bottom: .8rem;
  color: rgba(255,255,255,.88);
  line-height: 1.7;
}
.hero-profile__link {
  color: var(--penyuluhan-accent);
  font-weight: 800;
}
.hero-profile__link:hover,
.hero-profile__link:focus-visible { color: #fff; }

/* v1.2.6 — mobile submenu controls never cover menu labels.
 * The JavaScript toggle is the only mobile arrow/control; remove the old
 * pseudo-element arrow and reserve a fixed touch target on the right.
 */
@media (max-width: 920px) {
  .mobile-navigation .menu-item-has-children > a::after,
  .mobile-navigation .menu-item-has-children.is-submenu-open > a::after {
    content: none !important;
    display: none !important;
  }
  .mobile-navigation .menu-item.has-submenu-toggle > a {
    width: 100%;
    max-width: none;
    padding-right: 58px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .mobile-navigation .menu-item.has-submenu-toggle {
    padding-right: 0;
  }
  .mobile-navigation .submenu-toggle {
    right: 4px;
    top: 4px;
    z-index: 2;
  }
  .mobile-navigation .sub-menu {
    padding-right: 4px;
  }
  .hero-profile {
    margin-top: 28px;
    padding-top: 22px;
  }
  .hero-profile h2 {
    font-size: clamp(1.55rem, 7vw, 2.1rem);
  }
}

@media (max-width: 480px) {
  .hero-profile__intro { font-size: .94rem; }
  .mobile-navigation .menu-item.has-submenu-toggle > a { padding-right: 62px; }
}

/* v1.2.7 — mobile header spacing / language-safe navigation.
 * Keep the language selector and hamburger in separate, fixed touch targets.
 * The brand is allowed to shrink instead of pushing controls over each other.
 */
@media (max-width: 920px) {
  .site-header > .site-header__inner {
    width: calc(100% - 28px);
    max-width: none;
    min-height: 72px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: 8px;
  }

  .site-branding {
    min-width: 0;
    overflow: hidden;
  }
  .site-branding__main,
  .site-branding__accent {
    white-space: nowrap;
  }
  .site-branding__main {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Order: logo | language | menu. This prevents the hamburger from
     sitting between or over the language controls. */
  .header-tools {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    min-width: 0;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 0;
  }
  .menu-toggle {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 9px;
    margin: 0;
    display: inline-grid;
    place-items: center;
    flex: 0 0 44px;
    position: relative;
    z-index: 2;
  }

  .language-switcher {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
  }
  .language-switcher__link {
    min-width: 38px;
    min-height: 34px;
    padding-inline: .4rem;
  }

  /* Never let a long menu label sit beneath a submenu control. */
  .mobile-navigation .menu-item {
    position: relative;
    min-width: 0;
  }
  .mobile-navigation .menu-item.has-submenu-toggle > a,
  .mobile-navigation .menu-item.has-submenu-toggle > a:focus,
  .mobile-navigation .menu-item.has-submenu-toggle > a:hover {
    width: 100%;
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
    padding-right: 60px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
  }
  .mobile-navigation .submenu-toggle {
    right: 4px;
    top: 4px;
    z-index: 3;
  }

  /* Remove the legacy CSS arrow; the JS button is the only submenu control. */
  .mobile-navigation .menu-item-has-children > a::after,
  .mobile-navigation .menu-item-has-children.is-submenu-open > a::after {
    content: none !important;
    display: none !important;
  }
}

@media (max-width: 640px) {
  .site-header > .site-header__inner {
    width: calc(100% - 20px);
    grid-template-columns: minmax(0, 1fr) auto auto;
    column-gap: 5px;
  }
  .site-branding__main { font-size: .78rem; }
  .site-branding__accent { font-size: .58rem; }
  .language-switcher__link {
    min-width: 34px;
    min-height: 32px;
    padding-inline: .3rem;
    font-size: .62rem;
  }
  .menu-toggle {
    width: 42px;
    min-width: 42px;
    height: 42px;
    flex-basis: 42px;
  }
  .mobile-navigation .menu-item.has-submenu-toggle > a { padding-right: 58px; }
}

@media (max-width: 390px) {
  .site-branding__main { font-size: .72rem; }
  .site-branding__accent { display: none; }
  .language-switcher__link { min-width: 32px; font-size: .59rem; }
  .menu-toggle { width: 40px; min-width: 40px; height: 40px; flex-basis: 40px; }
}

/* v1.2.8 — footer text inset for a more balanced, centered appearance. */
.site-footer > .footer-grid,
.site-footer > .footer-bottom {
  padding-inline: 18px;
}

@media (max-width: 640px) {
  .site-footer > .footer-grid,
  .site-footer > .footer-bottom {
    padding-inline: 14px;
  }
}

@media (max-width: 390px) {
  .site-footer > .footer-grid,
  .site-footer > .footer-bottom {
    padding-inline: 10px;
  }
}

/* v1.5.6 — mobile menu: never paint a tapped item/submenu as a solid block.
 * The open state is represented only by submenu visibility. This also clears
 * Android/WebKit tap/focus highlighting that can make an entire submenu look
 * selected after a touch.
 */
@media (max-width: 920px) {
  .mobile-navigation,
  .mobile-navigation .menu,
  .mobile-navigation .menu-item,
  .mobile-navigation .sub-menu {
    background: transparent !important;
    background-color: transparent !important;
  }

  .mobile-navigation .menu-item > a,
  .mobile-navigation .menu-item > a:hover,
  .mobile-navigation .menu-item > a:active,
  .mobile-navigation .menu-item > a:focus,
  .mobile-navigation .menu-item > a:focus-visible,
  .mobile-navigation .menu-item.current-menu-item > a,
  .mobile-navigation .menu-item.current-menu-ancestor > a,
  .mobile-navigation .menu-item-has-children.is-submenu-open > a,
  .mobile-navigation .sub-menu .menu-item > a,
  .mobile-navigation .sub-menu .menu-item > a:hover,
  .mobile-navigation .sub-menu .menu-item > a:active,
  .mobile-navigation .sub-menu .menu-item > a:focus,
  .mobile-navigation .sub-menu .menu-item > a:focus-visible {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
  }

  .mobile-navigation .menu-item > a:focus:not(:focus-visible),
  .mobile-navigation .sub-menu .menu-item > a:focus:not(:focus-visible) {
    outline: none !important;
  }

  .mobile-navigation .menu-item-has-children.is-submenu-open > a {
    color: inherit !important;
  }

  .mobile-navigation .sub-menu {
    border-left: 0 !important;
    padding-left: 12px;
  }
}


/* v1.5.14 */
.post-card__media img { filter: none !important; -webkit-filter: none !important; }
.section-heading--row > .button { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 640px) { .section-heading--row { align-items: flex-start; } .section-heading--row > .button { margin-top: 4px; } }