/*
 * Tangerangku.com mobile repair v1.0.2
 * Mobile-only. Desktop is intentionally unchanged.
 * Main observed failures: brand wraps to "Tangerang / ku", nav clips at "Dafta…",
 * and the featured Night Run card overlaps the Headline list.
 */
@media (max-width: 782px) {
  :root { --tk-mobile-gutter: 14px; }
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  *, *::before, *::after { box-sizing: border-box; }
  img, video, iframe, embed, object { max-width: 100%; }
  img { height: auto; }

  /* Ensure all major theme wrappers can shrink to the real viewport. */
  #page, #content, #primary, #main, #main-content, .site, .site-content,
  .content-area, .site-main, .container, .content-container, .main-content,
  .main-wrapper, .content-wrap, .page-content, .wp-site-blocks,
  .site-inner, .content-inner, .content-wrapper, .site-wrapper,
  .wp-site-blocks > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Header row: keep logo/title on one line and reserve a stable actions area. */
  header, #masthead, .site-header, .header, .header-wrap, .header-wrapper,
  .header-inner, .header-content, .header-main, .header-top, .header-bottom,
  .site-branding, .site-identity, .branding, .logo, .custom-logo-link,
  .wp-block-site-title, .site-title, .site-title a, .header-actions,
  .header-tools, .header-right, .header-left {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  #masthead, .site-header, header.site-header, .header-wrapper,
  .header-inner, .header-content, .header-main, .header-top, .header-bottom {
    height: auto !important;
    min-height: 0 !important;
  }
  #masthead .container, .site-header .container, .header-inner,
  .header-content, .header-main, .header-top, .header-bottom {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .site-branding, .site-identity, .branding, .logo, .custom-logo-link {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: calc(100% - 112px) !important;
    overflow: visible !important;
  }
  .site-title, .site-title a, .site-branding .site-title,
  .site-branding .site-title a, .wp-block-site-title, .wp-block-site-title a,
  .site-logo + .site-title, .site-logo + .site-title a {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(22px, 6vw, 30px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.035em !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }
  .custom-logo, .custom-logo-link img, .site-logo img {
    max-width: 68px !important;
    max-height: 68px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
  }
  .header-actions, .header-tools, .header-right, .header-left,
  .header-buttons, .header-icons, .site-header .header-actions {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: 112px !important;
    gap: 6px !important;
  }
  .site-header button, #masthead button, .header-actions a,
  .header-tools a, .header-icons a {
    max-width: 48px;
  }

  /* Search occupies its own row; no overlap with the brand/actions row. */
  .header-search, .search-wrap, .search-box, .search-form,
  form[role="search"], .wp-block-search {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .header-search input, .search-form input[type="search"],
  form[role="search"] input[type="search"], .wp-block-search input {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .header-search button, .search-form button, form[role="search"] button,
  .wp-block-search button {
    flex: 0 0 auto !important;
  }

  /* Navigation is a single horizontal, touch-scrollable strip.
     It must not widen the page or crop the final menu item invisibly. */
  .main-navigation, .primary-navigation, .primary-menu, .main-menu,
  .navbar, .navbar-collapse, .nav-menu, .menu-primary-container,
  .site-header nav, #masthead nav, .header-navigation, .primary-nav,
  .main-navigation .menu, .menu-primary-container ul {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .main-navigation::-webkit-scrollbar, .primary-navigation::-webkit-scrollbar,
  .site-header nav::-webkit-scrollbar, #masthead nav::-webkit-scrollbar {
    display: none;
  }
  .main-navigation ul, .primary-navigation ul, .main-menu ul,
  .nav-menu, .menu-primary-container ul, .site-header nav ul, #masthead nav ul,
  .header-navigation ul, .primary-nav ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 0 22px !important;
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 var(--tk-mobile-gutter) !important;
    list-style: none !important;
  }
  .main-navigation li, .primary-navigation li, .main-menu li,
  .nav-menu li, .menu-primary-container li, .site-header nav li,
  #masthead nav li, .header-navigation li, .primary-nav li {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    max-width: none !important;
  }
  .main-navigation a, .primary-navigation a, .main-menu a, .nav-menu a,
  .site-header nav a, #masthead nav a, .header-navigation a, .primary-nav a {
    display: block;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
  }

  /* Breaking-news ticker: label and text remain separate, ticker clips internally. */
  .breaking-news, .breaking-news-bar, .news-ticker, .ticker, .ticker-wrap,
  .wp-royal-news-ticker, [class*="ticker"], [class*="breaking-news"] {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .breaking-news, .breaking-news-bar, .news-ticker, .ticker, .ticker-wrap,
  .wp-royal-news-ticker {
    overflow: hidden !important;
  }

  /* CRITICAL: Headline feature + list must not share a desktop two-column row
     on a phone. This addresses the visible Night Run card underlapping the list. */
  body.home .site-main, body.home main, body.home #primary,
  body.home .content-area, body.home .home-content, body.home .homepage-content,
  body.home .front-page-content, body.home .home-sections,
  body.home .wp-block-columns, body.home .wp-block-group {
    min-width: 0 !important;
  }
  body.home .wp-block-columns {
    flex-wrap: wrap !important;
  }
  body.home .wp-block-columns > .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* News Magazine X / WP Royal widget and magazine layouts. */
  body.home .wp-block-wpr-posts-grid,
  body.home .wp-block-wp-royal-posts-grid,
  body.home .wp-block-wpr-magazine-grid,
  body.home .wp-block-wp-royal-magazine-grid,
  body.home .wpr-posts-grid, body.home .wpr-magazine-grid,
  body.home .magazine-grid, body.home .posts-grid, body.home .post-grid,
  body.home .news-grid, body.home .headline-grid, body.home .featured-news-grid,
  body.home .wp-block-post-template.is-layout-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Common feature/sidebar layouts: reset floats and desktop positioning. */
  body.home .featured-post, body.home .featured-posts,
  body.home .featured-post-widget, body.home .featured-posts-widget,
  body.home .magazine-grid-widget, body.home .widget-magazine-grid,
  body.home .sidebar-container, body.home #secondary,
  body.home .sidebar, body.home .widget-area {
    float: none !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body.home article, body.home .post, body.home .post-wrapper,
  body.home .post-item, body.home .news-card, body.home .article-card,
  body.home .featured-post, body.home .widget {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  body.home .post-thumbnail, body.home .post-thumbnail img,
  body.home .post-image, body.home .post-image img,
  body.home .featured-image, body.home .featured-image img,
  body.home .wp-post-image, body.home .post-wrapper img {
    max-width: 100% !important;
  }

  /* Never allow positioned feature images or text to spill into the next card. */
  body.home .post-wrapper, body.home .post-content, body.home .post-info,
  body.home .post-details, body.home .post-title, body.home .entry-title,
  body.home .widget-title, body.home .section-title {
    overflow-wrap: anywhere;
    min-width: 0 !important;
  }
  body.home .post-title, body.home .post-title a, body.home .entry-title,
  body.home .entry-title a {
    line-height: 1.28 !important;
  }

  /* Neutralize fixed-width/floated rows that can cause horizontal overflow. */
  .row, .flex-row, .news-row, .post-row, .article-row {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .row > *, .flex-row > *, .news-row > *, .post-row > *, .article-row > * {
    min-width: 0 !important;
  }
  input, select, textarea, button { max-width: 100%; }
}

@media (max-width: 480px) {
  :root { --tk-mobile-gutter: 12px; }
  .site-title, .site-title a, .site-branding .site-title,
  .site-branding .site-title a, .wp-block-site-title, .wp-block-site-title a {
    font-size: clamp(21px, 5.8vw, 27px) !important;
  }
  .custom-logo, .custom-logo-link img, .site-logo img {
    max-width: 58px !important;
    max-height: 58px !important;
  }
  body.home .post-title, body.home .post-title a,
  body.home .entry-title, body.home .entry-title a {
    font-size: clamp(18px, 5vw, 24px) !important;
  }
  body.home .featured-post img, body.home .featured-post .post-thumbnail img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }
}