/*!
 * AutoMedia — Site chrome (header, footer, nav, breaking bar)
 * Depends on tokens.css + components.css. Page-specific sections
 * (homepage hero, article typography, etc.) get their own files as
 * later Tahap build them, to keep this one focused on the shell every
 * page shares.
 */

/* =======================================================================
   Sticky bottom nav (mobile only) — replaces the header hamburger button
   entirely. #main-content gets bottom padding on mobile so the last bit
   of page content isn't hidden behind this fixed bar.
   ======================================================================= */
#main-content { display: block; }
@media (max-width: 767px) {
    #main-content { padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)); }
}

.bottom-nav {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: var(--bottom-nav-height);
    padding-bottom: env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--color-surface) 96%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: var(--border-width) solid var(--color-border);
    z-index: var(--z-fixed);
}
@media (min-width: 768px) {
    .bottom-nav { display: none; }
}
.bottom-nav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    font-weight: var(--font-medium);
    color: var(--color-text-tertiary);
}
.bottom-nav__item .icon { width: 20px; height: 20px; }
.bottom-nav__item.is-active,
.bottom-nav__item[aria-current="page"] { color: var(--color-primary); }

/* =======================================================================
   Header
   ======================================================================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: color-mix(in srgb, var(--color-surface) 82%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: var(--border-width) solid var(--color-border);
}

.breaking-bar {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
}
.breaking-bar__inner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-block: var(--space-2);
    font-size: var(--text-sm);
}
.breaking-bar__tag { flex-shrink: 0; background: hsl(0 0% 100% / 0.18); color: white; }
.breaking-bar__link {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--font-medium);
}
.breaking-bar__link:hover { text-decoration: underline; }

.site-header__bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: 64px;
    padding-left: var(--space-3);
    padding-right: var(--space-3);
}
@media (min-width: 768px) {
    /* Full spacing only once the desktop nav (7 category links) is what's
       actually competing for room — on mobile every pixel here was
       measured to matter: hamburger + logo + search + theme button add
       up to within ~10-40px of a 360px-wide Android viewport (a common
       real width) with zero slack, so a tight gap/padding here isn't
       cosmetic, it's what keeps the row from needing horizontal scroll
       to reach the dark-mode toggle — confirmed as a real bug on a real
       360px-class Android Chrome device, not just a theoretical one. */
    .site-header__bar { gap: var(--space-4); padding-left: var(--space-6); padding-right: var(--space-6); }
}

.site-header__logo {
    font-size: var(--text-lg);
    font-weight: var(--font-extrabold);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    flex-shrink: 0;
}
@media (min-width: 768px) {
    .site-header__logo { font-size: var(--text-xl); }
}
.site-header__logo span { color: var(--color-primary); }

.site-header__nav { flex: 1; min-width: 0; }
.mega-nav {
    display: flex;
    list-style: none;
    gap: var(--space-1);
}
.mega-nav__item { position: relative; }
.mega-nav__link {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text-secondary);
    transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.mega-nav__link:hover, .mega-nav__link[aria-expanded="true"] { background: var(--color-bg-subtle); color: var(--color-text); }
.mega-nav__panel { min-width: 14rem; }

.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
    /* margin-left: auto, not relying on .site-header__nav's flex:1 to
       push this to the right edge — on mobile that nav is display:none
       (correctly hidden), so it contributes nothing to the flex layout
       at all, and without this, search/notifikasi/dark-mode end up
       bunched immediately after the logo instead of at the right edge. */
    margin-left: auto;
}

.icon--sm { width: 14px; height: 14px; }

/* Mobile nav list (inside the left drawer) */
.mobile-nav-list { list-style: none; }
.mobile-nav-list__link {
    display: block;
    padding: var(--space-3) 0;
    font-weight: var(--font-semibold);
    font-size: var(--text-base);
    color: var(--color-text);
    border-bottom: var(--border-width) solid var(--color-border);
}
.mobile-nav-list--sub { padding-left: var(--space-4); }
.mobile-nav-list--sub .mobile-nav-list__link { font-weight: var(--font-normal); font-size: var(--text-sm); color: var(--color-text-secondary); padding: var(--space-2) 0; border-bottom: none; }

/* =======================================================================
   Footer
   ======================================================================= */
.site-footer {
    background: var(--color-bg-subtle);
    border-top: var(--border-width) solid var(--color-border);
    padding-block: var(--space-16) var(--space-8);
    margin-top: var(--space-24);
}
.site-footer__grid {
    display: grid;
    gap: var(--space-10);
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
}
.site-footer__brand p { margin-top: var(--space-4); color: var(--color-text-secondary); font-size: var(--text-sm); max-width: 28rem; margin-bottom: var(--space-5); }
.site-footer__col h3 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-text-tertiary); margin-bottom: var(--space-4); }
.site-footer__col ul { list-style: none; }
.site-footer__col li { margin-bottom: var(--space-3); }
.site-footer__col a { font-size: var(--text-sm); color: var(--color-text-secondary); }
.site-footer__col a:hover { color: var(--color-primary); text-decoration: underline; }
.site-footer__newsletter p { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-4); }
.newsletter-form { display: flex; gap: var(--space-2); }
.newsletter-form .input { flex: 1; }

.site-footer__bottom {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: flex-start;
    margin-top: var(--space-12);
    padding-top: var(--space-6);
    border-top: var(--border-width) solid var(--color-border);
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
}
@media (min-width: 640px) {
    .site-footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}
.site-footer__link-btn {
    background: none; border: 0; padding: 0; cursor: pointer;
    font-size: var(--text-xs); color: var(--color-text-tertiary); text-decoration: underline;
}
.site-footer__link-btn:hover { color: var(--color-text); }

/* =======================================================================
   Category / listing page header (Tahap 6)
   ======================================================================= */
.listing-header { padding-block: var(--space-10) var(--space-6); }
.listing-header h1 { font-size: var(--text-3xl); }
@media (min-width: 768px) { .listing-header h1 { font-size: var(--text-4xl); } }
.listing-header__count { color: var(--color-text-tertiary); font-size: var(--text-sm); margin-top: var(--space-2); }
.listing-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.listing-empty { padding: var(--space-16) 0; text-align: center; color: var(--color-text-secondary); }