/*
Theme Name: Magazine Hoot Apple
Template: magazine-hoot
Description: Style-only child theme for Magazine Hoot. Apple iOS 26 "Liquid Glass" inspired design: full-width glass menu bar, translucent rounded cards, capsule buttons, soft light and spring motion.
Version: 1.3.9
Text Domain: magazine-hoot-apple
License: GNU General Public License v3 or later
*/

/* =========================================================
   1. Design tokens
   ========================================================= */
:root {
  --ap-bg: #f5f5f7;
  --ap-surface: #ffffff;
  --ap-text: #1d1d1f;
  --ap-text-2: #6e6e73;
  --ap-line: rgba(0, 0, 0, 0.08);
  --ap-accent: #0071e3;
  --ap-accent-hover: #0077ed;
  --ap-radius: 26px;
  --ap-radius-sm: 18px;
  --ap-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  --ap-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.12);
  --ap-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ap-ease: cubic-bezier(0.32, 0.72, 0, 1);
  /* Liquid Glass material */
  --lg-fill: rgba(255, 255, 255, 0.62);
  --lg-fill-strong: rgba(255, 255, 255, 0.82);
  --lg-blur: saturate(180%) blur(24px);
  --lg-edge: 0 0 0 1px rgba(255, 255, 255, 0.55), 0 0 0 2px rgba(0, 0, 0, 0.04);
  --lg-light: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(255, 255, 255, 0.25), inset 1px 0 0 rgba(255, 255, 255, 0.35);
  --lg-drop: 0 10px 32px rgba(30, 50, 110, 0.12), 0 2px 6px rgba(30, 50, 110, 0.06);
}

/* =========================================================
   2. Base typography and page
   ========================================================= */
html { scroll-behavior: smooth; }

body,
input, select, textarea, button,
#site-description, .menu-items > li > a, .widget-title, .post-gridunit-title,
.sub-footer .widget-title, .footer .widget-title, #content .loop-title,
h1, h2, h3, h4, h5, h6, .title, .titlefont, #site-title,
.site-title-line, .post-footer {
  font-family: var(--ap-font) !important;
}

body {
  /* no background here: the site background image/color comes from Appearance > Customize > Backgrounds */
  color: var(--ap-text);
  border-top: 0;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .title, .titlefont {
  color: var(--ap-text);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.15;
  text-transform: none;
}

a { color: var(--ap-accent); text-decoration: none; transition: color .2s var(--ap-ease), opacity .2s var(--ap-ease); }
a:hover { color: var(--ap-accent-hover); }

#main.main { background: var(--ap-bg); padding-top: 0; }
/* Tighter gap between the menu bar and the first block (slider) on the homepage */
.frontpage-area:first-child, #frontpage-widgetarea > .frontpage-area:first-child { padding-top: 16px; margin-top: 0; }
.frontpage-area:first-child .hootslider-image-slider, .frontpage-area:first-child .hootslider-html-slider { margin-top: 0; }

.site-boxed #header-supplementary,
.site-boxed #below-header,
.site-boxed #main { border-left: 0; border-right: 0; }

::selection { background: rgba(0, 113, 227, 0.2); }

/* =========================================================
   3. Top bar
   ========================================================= */
#topbar {
  background: var(--ap-surface);
  border-bottom: 1px solid var(--ap-line);
  color: var(--ap-text-2);
  font-size: 12px;
}
.topbar-inner a { text-decoration: none; }

/* =========================================================
   4. Header and navigation (frosted glass)
   ========================================================= */
/* The branding area (logo, title, banner image) is left exactly as configured in the Customizer.
   Only the menu bar below it gets the frosted look. */
#header-primary { border-bottom: 0; }
#header-supplementary { position: sticky; top: 0; z-index: 100; }
.admin-bar #header-supplementary { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar #header-supplementary { top: 46px; } }
#header-supplementary {
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--ap-line);
}
#site-title a { color: inherit; }

.menu-items > li > a {
  color: var(--ap-text);
  font-weight: 400;
  letter-spacing: -0.005em;
  text-transform: none;
}
.menu-items > li.current-menu-item:not(.nohighlight) > a,
.menu-items > li.current-menu-ancestor > a,
.menu-items > li:hover > a,
.sf-menu ul li:hover > a,
.sf-menu ul li.current-menu-item:not(.nohighlight) > a,
.sf-menu ul li.current-menu-ancestor > a {
  background: transparent;
  color: var(--ap-accent);
}

/* Colored per-item highlights from the Customizer become neutral */
.menu-secondary .menu-items > li:before,
.menu-secondary .menu-items > li:after { display: none; }
.menu-secondary .menu-items > li { background: transparent !important; border-color: transparent !important; }

/* Dropdowns */
.sf-menu ul {
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius-sm);
  box-shadow: var(--ap-shadow-hover);
  padding: 6px;
  overflow: hidden;
}
.sf-menu ul li a { border: 0; border-radius: 8px; padding: 8px 12px; text-transform: none; color: var(--ap-text); font-size: 13px; }
.sf-menu ul li:hover > a { background: var(--ap-accent) !important; color: #fff !important; }

/* Header search */
.header-aside-search .searchtext,
.searchform input[type="text"],
.searchform .searchtext {
  background: rgba(0, 0, 0, 0.05);
  border: 0;
  border-radius: 999px;
  color: var(--ap-text);
  box-shadow: none;
}

/* Mobile menu */
.menu-toggle { color: var(--ap-text); border-radius: var(--ap-radius-sm); }
@media only screen and (max-width: 969px) {
  #menu-primary-items, #menu-secondary-items { border-top: 1px solid var(--ap-line); background: rgba(255,255,255,0.96); }
  .menu-items > li > a, .sf-menu ul li a { padding: 12px 20px; }
  .mobilemenu-fixed .menu-toggle, .mobilemenu-fixed .menu-items { background: rgba(255,255,255,0.96); }
}

/* =========================================================
   5. Cards: posts, widgets, sidebar
   ========================================================= */
.entry-grid,
.archive-big .entry-grid, .archive-medium .entry-grid, .archive-small .entry-grid,
.archive-block .entry-grid,
.archive-mosaic .entry-grid,
.content-block-style1 .content-block,
.content-block-style2 .content-block,
.content-block-style3 .content-block,
.content-block-style4 .content-block,
.sidebar .widget,
.comment article, #respond {
  background: var(--ap-surface);
  border: 0;
  border-radius: var(--ap-radius);
  box-shadow: var(--ap-shadow);
}
.archive-wrap { overflow: visible; }
.entry-grid { padding: 0; margin-bottom: 24px; overflow: hidden; transition: transform .3s var(--ap-ease), box-shadow .3s var(--ap-ease); }
@media (hover: hover) {
  .entry-grid:hover { transform: translateY(-3px); box-shadow: var(--ap-shadow-hover); }
}
.entry-grid-content { padding: 20px 24px 24px; }
.entry-featured-img, .entry-grid-featured-img img { border-radius: var(--ap-radius) var(--ap-radius) 0 0; }
.entry-grid-featured-img img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.sidebar .widget { padding: 24px; margin-bottom: 24px; }

.entry-title, .entry-grid-content .entry-title {
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: none;
}
.entry-title a, .entry-grid-content .entry-title a { color: var(--ap-text); }
.entry-title a:hover { color: var(--ap-accent); }

.entry-byline, .entry-byline a, .entry-byline-block, .content-block-subtitle .entry-byline {
  background: none;
  color: var(--ap-text-2);
  font-size: 13px;
}
.entry-content, .entry-summary { color: var(--ap-text); }
.entry-summary p, .entry-content p { color: #3a3a3c; }

/* Widget titles: plain, no colored tab or underline */
.widget-title { text-transform: none; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 16px; color: var(--ap-text); }
.widget-title > span.accent-typo,
.widget-title > span.cat-typo,
.sub-footer .widget-title > span.accent-typo,
.footer .widget-title > span.accent-typo {
  background: none !important;
  color: var(--ap-text) !important;
  border: 0;
  padding: 0;
}
.widget-title > span.accent-typo:after,
.widget-title > span.cat-typo:after { display: none; }
.widget .view-all a { color: var(--ap-accent); }

/* Category labels: small translucent pill */
.cat-label, .accent-typo.cat-label {
  background: rgba(255, 255, 255, 0.85) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--ap-text) !important;
  border-radius: 999px;
  top: 12px;
  right: 12px;
  overflow: hidden;
}
.cat-label a { padding: 3px 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.01em; text-transform: none; }

/* =========================================================
   6. Magazine grid / list widgets and sliders
   ========================================================= */
.post-gridunit, .post-gridunit-image, .post-gridunit-bg { border-radius: var(--ap-radius); }
.post-gridunit { padding: 0 4px 4px 0; }
.post-gridunit-title { text-transform: none; font-weight: 600; letter-spacing: -0.015em; color: #fff; }
.post-gridunit-content { color: #fff; }

.posts-listunit { border-color: var(--ap-line); }
.posts-listunit-title, .posts-listunit-title a { text-transform: none; font-weight: 600; color: var(--ap-text); }
.posts-listunit-image img, .posts-listunit-bg, .posts-listunit-image { border-radius: var(--ap-radius-sm); }

.hootslider-image-slide img,
.hootslider-html-slide,
.hootslider-carousel-slide,
.lSSlideOuter, .lSSlideWrapper { border-radius: var(--ap-radius); overflow: hidden; }
.hootslider-image-slide-caption,
.hootslider-html-slide-content { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.hootslider-image-slide-caption h1, .hootslider-image-slide-caption h2, .hootslider-image-slide-caption h3,
.hootslider-html-slide-content h1, .hootslider-html-slide-content h2, .hootslider-html-slide-content h3 {
  text-transform: none; font-weight: 600; letter-spacing: -0.025em;
}
.lSSlideOuter .lSPager.lSpg > li a { background: rgba(0,0,0,0.25); }
.lSSlideOuter .lSPager.lSpg > li:hover a,
.lSSlideOuter .lSPager.lSpg > li.active a { background: var(--ap-accent) !important; }

.content-block-title, .content-block-title a { text-transform: none; font-weight: 600; letter-spacing: -0.015em; color: var(--ap-text); }
.content-block-icon, .content-block-icon i { color: var(--ap-accent) !important; }
.icon-style-circle, .icon-style-square { background: rgba(0, 113, 227, 0.1) !important; color: var(--ap-accent) !important; }
.content-block-style2 .content-block.highlight-typo,
.content-block-style3 .content-block.highlight-typo { background: var(--ap-accent) !important; color: #fff !important; }
.frontpage-area.module-bg-accent { background: var(--ap-accent) !important; }

/* Image cards (Content Blocks widget): photo on top, title below.
   The theme pulls the photo up out of the card (negative margin) so the card's radius never
   touched it. Put the photo back inside and let the card clip it to the rounded corners. */
.content-block-column.visual-image .content-block {
  margin-top: 0;
  padding: 0 0 14px;
  overflow: hidden;
  border-radius: var(--ap-radius);
}
.content-block-column.visual-image .content-block-image { margin: 0 0 14px; }
.content-block-column.visual-image .content-block-image a { display: block; }
.content-block-column.visual-image .content-block-image img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 0;
}
.content-block-column.visual-image .content-block-content { padding-left: 16px; padding-right: 16px; }

/* Posts List widget (e.g. "Prestasi"): put the whole block on a card instead of floating on the page */
.posts-list-widget {
  position: relative;
  background: var(--ap-surface);
  border-radius: var(--ap-radius);
  box-shadow: var(--ap-shadow);
  padding: 26px 28px 28px;
}
.posts-list-widget .widget-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 20px;
}
/* "View all" sits inside the card, top right, as a quiet pill */
.posts-list-widget .view-all-top.view-all-withtitle { top: 28px; right: 28px; }
.posts-list-widget .view-all { font-size: 12px; text-transform: none; }
.posts-list-widget .view-all a {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(0, 113, 227, 0.1);
  color: var(--ap-accent);
  font-weight: 500;
}
.posts-list-widget .view-all a:hover { background: var(--ap-accent); color: #fff; }

/* Big featured item */
.posts-list-widget .posts-listunit-large .posts-listunit-image { margin-bottom: 16px; }
.posts-list-widget .posts-listunit-large .posts-listunit-bg { border-radius: var(--ap-radius-sm); overflow: hidden; }
.posts-list-widget .posts-listunit-large .posts-listunit-title { font-size: 21px; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; }
.posts-list-widget .posts-listunit-excerpt p { color: var(--ap-text-2); font-size: 15px; line-height: 1.55; }

/* Small items on the right: tidy rows with hairline dividers */
.posts-list-widget .posts-listunit-small {
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--ap-line);
  align-items: center;
}
.posts-list-widget .posts-listunit-small:first-child { padding-top: 0; }
.posts-list-widget .posts-listunit-small:last-child { border-bottom: 0; padding-bottom: 0; }
.posts-list-widget .posts-listunit-small .posts-listunit-image { margin-right: 16px; }
.posts-list-widget .posts-listunit-small .posts-listunit-bg,
.posts-list-widget .posts-listunit-small .posts-listunit-image { border-radius: 12px; overflow: hidden; }
.posts-list-widget .posts-listunit-small .posts-listunit-title { font-size: 15px; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; }
.posts-list-widget .posts-listunit-title a:hover { color: var(--ap-accent); }
.posts-list-widget .posts-listunit-subtitle { margin-top: 4px; }

/* Already inside a card or dark area: no second card */
.sidebar .posts-list-widget,
.footer .posts-list-widget,
.sub-footer .posts-list-widget,
#topbar .posts-list-widget {
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}
@media only screen and (max-width: 969px) {
  .posts-list-widget { padding: 20px 18px 22px; }
  .posts-list-widget .view-all-top.view-all-withtitle { top: 22px; right: 18px; }
}

/* Frosted blue glass panel behind the text on grid cards.
   In this theme the panel is a sibling of the photo (not inside it), so the whole card is
   clipped to the visible photo area (the 4px card gap on the right/bottom is cut off). */
.post-gridunit {
  -webkit-clip-path: inset(0 4px 4px 0 round var(--ap-radius));
  clip-path: inset(0 4px 4px 0 round var(--ap-radius));
}
.post-gridunit-size2 .post-gridunit-image { padding-bottom: 0; }
.post-gridunit-bg { right: 4px; bottom: 4px; background: none; }
.post-gridunit-cat { right: 16px; }
.post-gridunit-content {
  left: 0;
  right: 4px;
  bottom: 4px;
  margin: 0;
  padding: 10px 14px 12px;
  background: rgba(0, 60, 130, 0.62);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 0;
  border-radius: 0 0 var(--ap-radius) var(--ap-radius);
  box-shadow: none;
  color: #fff;
}
.post-gridunit-title,
.post-gridunit-title a,
.post-gridunit-subtitle,
.post-gridunit-subtitle *,
.post-gridunit-subtitle a {
  color: #fff !important;
  text-shadow: none;
}
.post-gridunit-subtitle { opacity: 0.9; margin-top: 2px; }
.post-gridunit-subtitle .entry-byline { background: none; padding: 0; margin: 0; }

/* =========================================================
   7. Buttons and forms (pill buttons, soft inputs)
   ========================================================= */
.button, input[type="submit"], input[type="button"], input[type="reset"], #submit, form button[type="submit"],
.more-link a, .content-block-column .more-link a, .hootslider-image-slide-button, .hootslider-html-slide-button,
#infinite-handle span {
  background: var(--ap-accent) !important;
  color: #fff !important;
  border: 0;
  border-radius: 999px;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.005em;
  text-transform: none;
  box-shadow: none;
  transition: background .2s var(--ap-ease), transform .2s var(--ap-ease);
}
.button:hover, input[type="submit"]:hover, input[type="button"]:hover, #submit:hover, form button[type="submit"]:hover,
.more-link a:hover, .content-block-column .more-link a:hover, .hootslider-image-slide-button:hover,
.hootslider-html-slide-button:hover, #infinite-handle span:hover {
  background: var(--ap-accent-hover) !important;
  color: #fff !important;
  transform: scale(1.02);
}
.more-link { background: none !important; }
.more-link a:after { content: " \203A"; }

input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"],
input[type="tel"], input[type="number"], textarea, select {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: var(--ap-radius-sm);
  padding: 10px 14px;
  color: var(--ap-text);
  box-shadow: none;
  transition: border-color .2s var(--ap-ease), box-shadow .2s var(--ap-ease);
}
input:focus, textarea:focus, select:focus {
  outline: 0;
  border-color: var(--ap-accent);
  box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.2);
}

/* =========================================================
   8. Single posts, pages, comments, pagination
   ========================================================= */
/* Single posts and pages: no card, content sits directly on the page background */
.singular .entry, .page .entry, .page-template .entry {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
.singular .entry-title, #content .loop-title { font-size: clamp(28px, 4vw, 40px); font-weight: 700; letter-spacing: -0.03em; text-transform: none; }
.entry-the-content, .entry-content { font-size: 17px; line-height: 1.7; }
.entry-content img, .entry-the-content img, .wp-block-image img { border-radius: var(--ap-radius-sm); }
.entry-content a, .entry-the-content a { text-decoration: none; }
.entry-content a:hover { text-decoration: underline; }

blockquote {
  border: 0;
  border-left: 3px solid var(--ap-accent);
  background: transparent;
  color: var(--ap-text-2);
  font-style: normal;
  padding: 4px 0 4px 20px;
}
pre, code { background: rgba(0,0,0,0.05); border: 0; border-radius: 8px; }
table { border-collapse: collapse; }
th, td { border-color: var(--ap-line); }

#loop-meta { background: transparent; border: 0; padding-left: 0; }
.post-footer { border: 0; font-family: var(--ap-font) !important; font-style: normal; color: var(--ap-text-2); }

.comment article { padding: 20px; margin-bottom: 14px; }
.comment-avatar img, .avatar { border-radius: 50%; }
#respond { padding: 24px; }

.pagination.loop-pagination a, .pagination.loop-pagination span,
.page-links a, .post-nav-links a, .page-links .page-numbers, .post-nav-links .page-numbers {
  border: 0;
  background: var(--ap-surface);
  color: var(--ap-text);
  border-radius: 999px;
  min-width: 36px;
  text-align: center;
  box-shadow: var(--ap-shadow);
}
.pagination.loop-pagination .current, .page-numbers.current { background: var(--ap-accent) !important; color: #fff !important; }
.loop-nav { border-color: var(--ap-line); }

/* =========================================================
   9. Footer
   ========================================================= */
.footer {
  background: var(--ap-bg);
  border-top: 1px solid var(--ap-line);
  color: var(--ap-text-2);
  font-size: 12px;
  padding: 24px 0 12px;
}
.footer a:not(input):not(.button) { color: var(--ap-text-2); }
.footer a:hover:not(input):not(.button) { color: var(--ap-text); text-decoration: none; }
.sub-footer { background: var(--ap-bg); border-top: 1px solid var(--ap-line); color: var(--ap-text-2); font-size: 12px; }
.sub-footer .widget-title, .footer .widget-title { font-size: 12px; font-weight: 600; color: var(--ap-text); text-transform: none; }

/* =========================================================
   10. Small polish
   ========================================================= */
img { image-rendering: auto; }

/* Keyboard focus */
:focus-visible { outline: 3px solid rgba(0, 113, 227, 0.5); outline-offset: 2px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 0; }
hr { border: 0; border-top: 1px solid var(--ap-line); }
.screen-reader-text:focus { border-radius: 8px; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}
@media only screen and (max-width: 969px) {
  .pagination.loop-pagination a, .pagination.loop-pagination span,
  .page-links a, .post-nav-links a, .page-links .page-numbers, .post-nav-links .page-numbers {
    min-width: 44px;
    min-height: 44px;
    line-height: 44px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .entry-grid-content { padding: 16px 18px 20px; }
}

/* =========================================================
   11. Liquid Glass layer (iOS 26 look)
   Translucent fills, bright specular edges, large concentric radii, spring easing.
   ========================================================= */

/* Soft colour behind the content so the glass has something to pick up */
#main.main {
  background:
    radial-gradient(55% 38% at 8% 0%, rgba(0, 113, 227, 0.12), transparent 70%),
    radial-gradient(45% 36% at 92% 8%, rgba(175, 82, 222, 0.09), transparent 70%),
    radial-gradient(50% 40% at 75% 95%, rgba(52, 199, 89, 0.08), transparent 70%),
    var(--ap-bg);
}

/* Full-width glass menu bar */
#header-supplementary {
  width: 100%;
  max-width: none;
  margin: 0;
  top: 0;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0;
  background: var(--lg-fill);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), 0 6px 24px rgba(30, 50, 110, 0.08);
}
.admin-bar #header-supplementary { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar #header-supplementary { top: 46px; } }

/* Menu items become glass capsules when active or hovered */
.menu-items > li > a { border-radius: 999px; transition: background .3s var(--ap-ease), color .3s var(--ap-ease); }
.menu-items > li.current-menu-item:not(.nohighlight) > a,
.menu-items > li.current-menu-ancestor > a,
.menu-items > li:hover > a {
  background: rgba(0, 113, 227, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  color: var(--ap-accent);
}

/* Dropdowns */
.sf-menu ul {
  border: 0;
  border-radius: 22px;
  background: var(--lg-fill-strong);
  box-shadow: var(--lg-edge), var(--lg-light), 0 18px 48px rgba(30, 50, 110, 0.22);
}

/* Cards: translucent fill, bright rim, soft drop shadow */
.entry-grid,
.archive-big .entry-grid, .archive-medium .entry-grid, .archive-small .entry-grid,
.archive-block .entry-grid,
.archive-mosaic .entry-grid,
.content-block-style1 .content-block,
.content-block-style2 .content-block,
.content-block-style3 .content-block,
.content-block-style4 .content-block,
.sidebar .widget,
.comment article, #respond,
.posts-list-widget {
  background: var(--lg-fill-strong);
  box-shadow: var(--lg-edge), var(--lg-light), var(--lg-drop);
}
.sidebar .posts-list-widget,
.footer .posts-list-widget,
.sub-footer .posts-list-widget,
#topbar .posts-list-widget { background: none; box-shadow: none; }

@media (hover: hover) {
  .entry-grid:hover {
    transform: translateY(-4px) scale(1.005);
    box-shadow: var(--lg-edge), var(--lg-light), 0 18px 44px rgba(30, 50, 110, 0.2);
  }
}

/* Frosted text panel on the grid cards */
.post-gridunit-content {
  background: linear-gradient(180deg, rgba(0, 60, 140, 0.38), rgba(0, 40, 100, 0.6));
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  border-top: 1px solid rgba(255, 255, 255, 0.35);
}

/* Pills and chips */
.cat-label, .accent-typo.cat-label {
  background: rgba(255, 255, 255, 0.7) !important;
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 8px rgba(0, 0, 0, 0.12);
}
.posts-list-widget .view-all a {
  background: rgba(0, 113, 227, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* Capsule buttons: tinted glass with a light sheen on top */
.button, input[type="submit"], input[type="button"], input[type="reset"], #submit, form button[type="submit"],
.more-link a, .content-block-column .more-link a, .hootslider-image-slide-button, .hootslider-html-slide-button,
#infinite-handle span {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 55%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 6px 16px rgba(0, 113, 227, 0.32);
  transition: background-color .3s var(--ap-ease), transform .3s var(--ap-ease), box-shadow .3s var(--ap-ease);
}
.button:active, input[type="submit"]:active, #submit:active, form button[type="submit"]:active { transform: scale(0.97); }

/* Fields */
input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"],
input[type="tel"], input[type="number"], textarea, select {
  background: rgba(255, 255, 255, 0.7);
  border: 0;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.08);
}
input:focus, textarea:focus, select:focus {
  background: #fff;
  box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.22), 0 0 0 1px var(--ap-accent);
}

/* Pagination */
.pagination.loop-pagination a, .pagination.loop-pagination span,
.page-links a, .post-nav-links a, .page-links .page-numbers, .post-nav-links .page-numbers {
  background: var(--lg-fill-strong);
  box-shadow: var(--lg-edge), var(--lg-light);
}

/* Fallbacks: browsers without backdrop-filter, or people who ask for less transparency */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #header-supplementary, .sf-menu ul { background: rgba(255, 255, 255, 0.97); }
}
@media (prefers-reduced-transparency: reduce) {
  #header-supplementary, .sf-menu ul, .cat-label, .accent-typo.cat-label { background: #fff !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .post-gridunit-content { background: rgba(0, 40, 100, 0.85); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* =========================================================
   12. Mobile fixes
   ========================================================= */
@media only screen and (max-width: 969px) {
  /* Remove the globe / translate block under the menu bar (and the band it sits in) */
  #below-header,
  .gtranslate_wrapper, #gt_float_wrapper, .gt_switcher_wrapper,
  #google_translate_element, .goog-te-gadget, .goog-te-banner-frame {
    display: none !important;
  }
  body { top: 0 !important; }

  /* Hamburger button at the far left of the menu bar */
  .menu-toggle,
  .mobilemenu-fixed .menu-toggle {
    float: left !important;
    left: 0 !important;
    right: auto !important;
    margin-left: 0 !important;
    text-align: left !important;
  }
  .menu-toggle { padding-left: 16px; }
}


/* =========================================================
   13. Mobile: news grid cards in two columns
   (Berita Utama / post grid widget)
   ========================================================= */
@media only screen and (max-width: 969px) {

  /* Whatever element holds the cards becomes a 2-column grid */
  div:has(> .post-gridunit) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    grid-template-areas: none !important;
    grid-auto-rows: auto !important;
    gap: 6px !important;
    align-items: stretch;
  }
  /* clearfix pseudo-elements would otherwise become empty grid cells */
  div:has(> .post-gridunit)::before,
  div:has(> .post-gridunit)::after { display: none !important; }

  /* Each card: same size, photo fills the whole card */
  .post-gridunit {
    --ap-card-r: 20px;
    position: relative;
    box-sizing: border-box;
    float: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    height: auto !important;
    margin: 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
    aspect-ratio: 1 / 1;
    -webkit-clip-path: inset(0 4px 4px 0 round var(--ap-card-r));
    clip-path: inset(0 4px 4px 0 round var(--ap-card-r));
  }
  .post-gridunit-image,
  .post-gridunit-size2 .post-gridunit-image {
    position: absolute !important;
    top: 0; left: 0; right: 4px; bottom: 4px;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    border-radius: var(--ap-card-r);
    z-index: 0;
  }
  .post-gridunit-image a { display: block; height: 100%; }
  .post-gridunit-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .post-gridunit-bg { border-radius: var(--ap-card-r); z-index: 1; }

  /* Smaller glass title panel and category pill to fit a half-width card */
  .post-gridunit-content {
    padding: 8px 10px 10px;
    border-radius: 0 0 var(--ap-card-r) var(--ap-card-r);
    z-index: 2;
  }
  .post-gridunit-title {
    margin: 0;
    font-size: 13px !important;
    line-height: 1.3 !important;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .post-gridunit-subtitle { margin-top: 3px; font-size: 11px !important; line-height: 1.3 !important; }
  .post-gridunit-cat { top: 8px !important; right: 8px !important; z-index: 2; }
  .post-gridunit-cat .cat-label a { padding: 2px 8px; font-size: 10px; }
}

/* Larger phones in landscape / small tablets: a little more room for the text */
@media only screen and (min-width: 600px) and (max-width: 969px) {
  .post-gridunit-content { padding: 12px 14px 14px; }
  .post-gridunit-title { font-size: 16px !important; }
  .post-gridunit-subtitle { font-size: 12px !important; }
}


/* =========================================================
   13b. Mobile: first news card is big (full width), the rest stay in two columns
   ========================================================= */
@media only screen and (max-width: 969px) {
  .post-gridunit:first-child {
    --ap-card-r: 26px;
    grid-column: 1 / -1 !important;
    aspect-ratio: 16 / 10;
  }
  .post-gridunit:first-child .post-gridunit-content { padding: 14px 18px 16px; }
  .post-gridunit:first-child .post-gridunit-title { font-size: 19px !important; line-height: 1.25 !important; -webkit-line-clamp: 3; }
  .post-gridunit:first-child .post-gridunit-subtitle { margin-top: 4px; font-size: 12px !important; }
  .post-gridunit:first-child .post-gridunit-cat { top: 14px !important; right: 14px !important; }
  .post-gridunit:first-child .post-gridunit-cat .cat-label a { padding: 3px 10px; font-size: 11px; }
}
@media only screen and (min-width: 600px) and (max-width: 969px) {
  .post-gridunit:first-child .post-gridunit-title { font-size: 24px !important; }
  .post-gridunit:first-child .post-gridunit-subtitle { font-size: 13px !important; }
}

/* =========================================================
   14. Fix: glass panel looked "floated" and leaked at the card corners
   The card is now one clipped, rounded box. The photo and the glass panel are square inside it
   and run edge to edge (left, right and bottom = 0), so the panel is flush with the card.
   ========================================================= */
.post-gridunit {
  isolation: isolate;
  overflow: hidden;
  padding: 0 !important;
  border-radius: var(--ap-card-r, var(--ap-radius)) !important;
  -webkit-clip-path: none !important;
  clip-path: none !important;
}
.post-gridunit-image,
.post-gridunit-size2 .post-gridunit-image,
.post-gridunit-bg {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  border-radius: 0 !important;
  overflow: hidden;
}
.post-gridunit-content {
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  margin: 0 !important;
  width: auto !important;
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  background-clip: padding-box;
}

/* Date goes to the bottom right of the glass panel */
.post-gridunit-content {
  display: flex !important;
  flex-direction: column;
}
.post-gridunit-subtitle {
  align-self: flex-end;
  width: 100%;
  text-align: right !important;
}
.post-gridunit-subtitle .entry-byline,
.post-gridunit-subtitle .entry-byline * {
  text-align: right !important;
  float: none !important;
}

/* =========================================================
   15. Mobile menu bar: dark blurred semi-transparent bar, search beside the hamburger
   The bar is whatever element holds both the menu and the search box. It becomes a flex row,
   so the search icon flows next to the hamburger instead of sitting on its own line.
   ========================================================= */
@media only screen and (max-width: 969px) {
  /* The bar: black glass, see-through and blurred */
  #header-supplementary div:has(> .menu-side-box) {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    background: rgba(20, 20, 20, 0.5) !important;
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    backdrop-filter: saturate(160%) blur(18px);
    border: 0 !important;
  }
  /* Menu wrapper steps aside so the hamburger and the list become items of the bar */
  #header-supplementary div:has(> .menu-side-box) > nav,
  #header-supplementary div:has(> .menu-side-box) > .menu-nav {
    display: contents !important;
  }
  /* Everything inside stays clear so only the bar's glass shows */
  #header-supplementary .hgrid,
  #header-supplementary .hgrid-span-12,
  #menu-primary, #menu-secondary,
  .menu-toggle, .menu-toggle-open,
  .mobilemenu-fixed .menu-toggle,
  #header-supplementary .menu-side-box {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
  .menu-toggle,
  .menu-toggle * { color: #fff !important; }

  /* Row order: search, then hamburger; the opened menu list drops to its own full-width row */
  #header-supplementary .menu-side-box {
    order: 1;
    position: static !important;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 6px !important;
    display: flex !important;
    align-items: center;
  }
  #header-supplementary .menu-side-box,
  #header-supplementary .menu-side-box * { color: #fff; }
  #header-supplementary .menu-side-box .searchbody,
  #header-supplementary .menu-side-box .searchform {
    margin: 0 !important;
    background: transparent !important;
  }
  .menu-toggle {
    order: 2;
    float: none !important;
    margin: 0 !important;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  #header-supplementary .menu-items,
  #menu-secondary-items,
  #menu-primary-items {
    order: 3;
    flex: 0 0 100%;
    width: 100%;
  }
}

/* =========================================================
   16. Desktop menu: big icon on the left, label and description beside it
   ========================================================= */
@media only screen and (min-width: 970px) {
  .menu-items > li > a {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 8px 16px 8px 10px;
    border-radius: 16px;
    text-align: left;
    white-space: nowrap;
  }

  /* Icon: large rounded tile */
  .menu-items > li > a > i,
  .menu-items > li > a > svg,
  .menu-items > li > a > .menu-icon,
  .menu-items > li > a > .menu-item-icon,
  .menu-items > li > a > [class*="fa-"] {
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: 0 !important;
    box-sizing: border-box;
    border-radius: 13px;
    background: rgba(0, 113, 227, 0.12);
    color: var(--ap-accent);
    font-size: 22px;
    line-height: 1;
    transition: background .25s var(--ap-ease), color .25s var(--ap-ease), transform .25s var(--ap-ease);
  }
  .menu-items > li > a > svg { padding: 10px; }
  .menu-items > li > a:hover > i,
  .menu-items > li > a:hover > svg,
  .menu-items > li > a:hover > [class*="fa-"],
  .menu-items > li.current-menu-item > a > i,
  .menu-items > li.current-menu-item > a > svg,
  .menu-items > li.current-menu-item > a > [class*="fa-"] {
    background: var(--ap-accent);
    color: #fff;
    transform: scale(1.05);
  }

  /* Label and description stacked, next to the icon */
  .menu-items > li > a .menu-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    text-align: left;
  }
  .menu-items > li > a .menu-title:has(> i, > svg, > [class*="fa-"]) {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    align-items: center;
  }
  .menu-items > li > a .menu-title > i,
  .menu-items > li > a .menu-title > svg,
  .menu-items > li > a .menu-title > [class*="fa-"] {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: rgba(0, 113, 227, 0.12);
    color: var(--ap-accent);
    font-size: 22px;
    margin: 0;
  }
  .menu-items > li > a .menu-title > :not(i):not(svg):not([class*="fa-"]) { grid-column: 2; }
  .menu-items > li > a .menu-title-text,
  .menu-items > li > a .menu-title > span:first-child:not(.menu-description) {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ap-text);
  }
  .menu-items > li > a .menu-description {
    display: block;
    margin: 0;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25;
    color: var(--ap-text-2);
    text-transform: none;
  }

  /* Dropdown arrow stays at the end, vertically centred */
  .menu-items > li > a .sf-sub-indicator,
  .menu-items > li > a > .fa-caret-down,
  .menu-items > li > a > .fa-angle-down {
    align-self: center;
    margin-left: 2px;
  }
}

/* =========================================================
   17. Menu + search aligned right (mobile and desktop), animated "LIVE" badge on the left
   ========================================================= */
@keyframes ap-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.65); }
  70%  { box-shadow: 0 0 0 9px rgba(52, 199, 89, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0); }
}
@keyframes ap-live-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* The bar (whatever holds both the menu and the search): one row, everything pushed right */
#header-supplementary div:has(> .menu-side-box) {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}
#header-supplementary div:has(> .menu-side-box) > nav,
#header-supplementary div:has(> .menu-side-box) > .menu-nav {
  float: none !important;
  width: auto;
}
#header-supplementary div:has(> .menu-side-box) > .menu-side-box {
  float: none !important;
  margin-left: 8px;
}

/* LIVE badge: green dot with a pulsing ring + label, left side of the bar */
#header-supplementary div:has(> .menu-side-box)::after {
  content: "";
  order: -2;
  display: block !important;
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin: 0 7px 0 14px;
  border-radius: 50%;
  background: #34c759;
  animation: ap-live-pulse 1.8s ease-out infinite;
}
#header-supplementary div:has(> .menu-side-box)::before {
  content: "LIVE";
  order: -1;
  display: block !important;
  flex: 0 0 auto;
  margin-right: auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  color: var(--ap-text);
  animation: ap-live-blink 1.8s ease-in-out infinite;
}
@media only screen and (max-width: 969px) {
  #header-supplementary div:has(> .menu-side-box)::before { color: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  #header-supplementary div:has(> .menu-side-box)::before,
  #header-supplementary div:has(> .menu-side-box)::after { animation: none; }
}

/* Desktop: the menu list itself sits in a right-aligned row */
@media only screen and (min-width: 970px) {
  #header-supplementary .menu-items {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    float: none !important;
  }
}

/* =========================================================
   18. Bar layout: LIVE on the left; search first, hamburger/menu LAST (far right)
   Visual order, left to right:  [LIVE] ............ [search] [menu]
   Placed at the end with !important so it wins over earlier sections and the parent theme.
   ========================================================= */
#header-supplementary div:has(> .menu-side-box) {
  flex-direction: row !important;
  justify-content: flex-start !important;   /* LIVE's margin-right:auto pushes the rest to the right edge */
  align-items: center !important;
}
/* Search: second to last, sits directly left of the menu */
#header-supplementary div:has(> .menu-side-box) > .menu-side-box,
#header-supplementary .menu-side-box {
  order: 1 !important;
  flex: 0 0 auto !important;
  float: none !important;
  margin: 0 4px 0 0 !important;
}
/* Menu: last, flush with the right edge of the bar */
.menu-toggle,
.mobilemenu-fixed .menu-toggle {
  order: 2 !important;
  flex: 0 0 auto !important;
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}
/* Opened menu list: its own full-width row below */
#header-supplementary .menu-items,
#menu-primary-items,
#menu-secondary-items {
  order: 3 !important;
  flex: 0 0 100% !important;
  width: 100% !important;
}

@media only screen and (min-width: 970px) {
  /* Desktop: search on the left of the menu, menu on the far right */
  #header-supplementary div:has(> .menu-side-box) > nav,
  #header-supplementary div:has(> .menu-side-box) > .menu-nav {
    order: 2 !important;
    flex: 0 0 auto !important;
    margin-left: 0 !important;
  }
  #header-supplementary .menu-items,
  #menu-primary-items,
  #menu-secondary-items {
    order: 0 !important;
    flex: 0 0 auto !important;
    width: auto !important;
  }
}

/* =========================================================
   19. Mobile bar fixes: real glass blur + menu pinned right, search just left of it
   - Blur: a backdrop-filter nested inside another backdrop-filter shows nothing, and section 4
     puts a blur on #header-supplementary AND section 15 put another on the inner bar. So the glass
     (dark, see-through, blurred) lives only on #header-supplementary and everything inside is clear.
   - Position: menu and search are pinned to the right edge of the bar, so it no longer matters
     how the theme wraps them (the old rules left them centered inside a text-align:center wrapper).
   "html body" in front makes these win over older rules, including ones in Additional CSS.
   ========================================================= */
@media only screen and (max-width: 969px) {
  html body #header-supplementary {
    background: rgba(20, 20, 20, 0.45) !important;
    -webkit-backdrop-filter: saturate(160%) blur(18px) !important;
    backdrop-filter: saturate(160%) blur(18px) !important;
    border-bottom: 0 !important;
  }
  html body #header-supplementary *,
  html body #header-supplementary *::before,
  html body #header-supplementary *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  html body #header-supplementary .hgrid,
  html body #header-supplementary .hgrid-span-12,
  html body #header-supplementary #menu-primary,
  html body #header-supplementary #menu-secondary,
  html body #header-supplementary nav {
    position: static !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* The bar itself: positioning context, clear, 48px tall, LIVE on the left */
  html body #header-supplementary div:has(> .menu-side-box) {
    position: relative !important;
    background: transparent !important;
    min-height: 48px;
    text-align: left !important;
  }
  html body #header-supplementary div:has(> .menu-side-box)::before { line-height: 48px; align-self: center; }
  html body #header-supplementary div:has(> .menu-side-box)::after  { align-self: center; }

  /* Menu: far right */
  html body #header-supplementary .menu-toggle,
  html body .mobilemenu-fixed #header-supplementary .menu-toggle {
    position: absolute !important;
    top: 24px !important;
    right: 0 !important;
    left: auto !important;
    transform: translateY(-50%);
    float: none !important;
    width: 52px !important;
    height: 44px;
    min-height: 0;
    margin: 0 !important;
    padding: 0 !important;
    justify-content: center;
    text-align: center !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  /* Search: directly to the left of the menu */
  html body #header-supplementary .menu-side-box {
    position: absolute !important;
    top: 24px !important;
    right: 52px !important;
    left: auto !important;
    transform: translateY(-50%);
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* =========================================================
   20. Mobile: search icon snug against the menu button (not centered), no dark box on the menu
   The search wrapper was stretching wide and centering its icon, so shrink it to the icon's size.
   ========================================================= */
@media only screen and (max-width: 969px) {
  html body #header-supplementary .menu-side-box {
    width: max-content !important;
    min-width: 0 !important;
    max-width: 120px !important;
    display: flex !important;
    justify-content: flex-end !important;
    text-align: right !important;
    right: 54px !important;
  }
  html body #header-supplementary .menu-side-box > *,
  html body #header-supplementary .menu-side-box .header-aside-search,
  html body #header-supplementary .menu-side-box .searchbody,
  html body #header-supplementary .menu-side-box .searchform {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    float: none !important;
    margin: 0 !important;
    text-align: right !important;
    flex: 0 0 auto !important;
  }
  /* No dark square behind the hamburger, in any state */
  html body #header-supplementary .menu-toggle,
  html body #header-supplementary .menu-toggle:hover,
  html body #header-supplementary .menu-toggle:focus,
  html body #header-supplementary .menu-toggle:active,
  html body #header-supplementary .menu-toggle.menu-toggle-open,
  html body #header-supplementary .menu-toggle > *,
  html body #header-supplementary .menu-toggle::before,
  html body #header-supplementary .menu-toggle::after {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
  }
}

/* =========================================================
   21. "Manado, date" before the search icon
   ========================================================= */
.ap-bar-date {
  display: inline-block;
  margin-right: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  align-self: center;
}
.ap-bar-date .ap-date-short { display: none; }
@media only screen and (max-width: 969px) {
  html body #header-supplementary .menu-side-box {
    max-width: calc(100vw - 150px) !important;   /* room for LIVE on the left and the menu on the right */
  }
  .ap-bar-date { color: #fff; }
}
/* Narrow phones: shorter date so it never collides with LIVE */
@media only screen and (max-width: 480px) {
  .ap-bar-date { font-size: 11px; margin-right: 8px; }
  .ap-bar-date .ap-date-full  { display: none; }
  .ap-bar-date .ap-date-short { display: inline; }
}

/* =========================================================
   22. Date spacing + a proper search box (wide enough, readable text)
   ========================================================= */
/* Date no longer touches the search icon */
html body #header-supplementary .menu-side-box .ap-bar-date {
  margin-right: 16px !important;
  flex: 0 0 auto;
}

/* The box that opens when you tap the search icon */
html body #header-supplementary .menu-side-box input[type="text"],
html body #header-supplementary .menu-side-box input[type="search"],
html body #header-supplementary .menu-side-box .searchtext {
  box-sizing: border-box !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 16px !important;
  font-size: 16px !important;              /* 16px also stops iPhones zooming in on focus */
  line-height: 38px !important;
  background: #fff !important;
  border-radius: 999px !important;
  /* The bar forces white text on everything; the typed text must be dark on this white box */
  color: #1d1d1f !important;
  -webkit-text-fill-color: #1d1d1f !important;
  caret-color: #0071e3;
  opacity: 1 !important;
}
html body #header-supplementary .menu-side-box input::placeholder {
  color: #6e6e73 !important;
  -webkit-text-fill-color: #6e6e73 !important;
  opacity: 1 !important;
}
html body #header-supplementary .menu-side-box .searchbody,
html body #header-supplementary .menu-side-box .searchform {
  overflow: visible !important;
  flex-wrap: nowrap;
  white-space: nowrap;
}
/* While typing, hide the date and let the box use the room (LIVE on the left, menu on the right) */
html body #header-supplementary .menu-side-box:focus-within .ap-bar-date { display: none !important; }

@media only screen and (max-width: 969px) {
  html body #header-supplementary .menu-side-box:focus-within {
    max-width: calc(100vw - 150px) !important;
  }
  html body #header-supplementary .menu-side-box input[type="text"],
  html body #header-supplementary .menu-side-box input[type="search"],
  html body #header-supplementary .menu-side-box .searchtext {
    width: min(260px, calc(100vw - 210px)) !important;
    max-width: none !important;
  }
}
@media only screen and (min-width: 970px) {
  html body #header-supplementary .menu-side-box input[type="text"],
  html body #header-supplementary .menu-side-box input[type="search"],
  html body #header-supplementary .menu-side-box .searchtext {
    width: 240px !important;
  }
}

/* =========================================================
   23. Search popup: blurred, dimmed page behind a floating search box
   ========================================================= */
.ap-search {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16vh 16px 0;
  background: rgba(10, 20, 40, 0);
  -webkit-backdrop-filter: blur(0) saturate(100%);
  backdrop-filter: blur(0) saturate(100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s var(--ap-ease), background .35s var(--ap-ease),
              -webkit-backdrop-filter .35s var(--ap-ease), backdrop-filter .35s var(--ap-ease),
              visibility 0s linear .35s;
}
.ap-search.is-open {
  background: rgba(10, 20, 40, 0.45);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.ap-search__panel {
  width: min(600px, 100%);
  transform: translateY(-18px) scale(.94);
  opacity: 0;
  transition: transform .45s var(--ap-ease), opacity .3s var(--ap-ease);
}
.ap-search.is-open .ap-search__panel {
  transform: none;
  opacity: 1;
  transition-delay: .05s;
}
.ap-search__form {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 58px;
  padding: 0 8px 0 20px;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 999px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.5);
  color: #1d1d1f;
}
.ap-search__icon { flex: 0 0 auto; color: #6e6e73; }
.ap-search .ap-search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  font: inherit;
  font-size: 17px;              /* 16px or more stops iPhones zooming in */
  color: #1d1d1f !important;
  -webkit-text-fill-color: #1d1d1f;
  caret-color: #0071e3;
}
.ap-search .ap-search__input::placeholder { color: #8e8e93; -webkit-text-fill-color: #8e8e93; opacity: 1; }
.ap-search .ap-search__input::-webkit-search-cancel-button { display: none; }
.ap-search .ap-search__close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.07);
  color: #1d1d1f;
  cursor: pointer;
  transition: background .2s var(--ap-ease), transform .2s var(--ap-ease);
}
.ap-search .ap-search__close:hover { background: rgba(0, 0, 0, 0.14); }
.ap-search .ap-search__close:active { transform: scale(.92); }
html.ap-search-lock, html.ap-search-lock body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .ap-search, .ap-search__panel { transition-duration: .01s; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ap-search.is-open { background: rgba(10, 20, 40, 0.85); }
}

/* =========================================================
   24. Fix: desktop bar wrapped (date, search and globe dropped under the menu)
   - The menu list is wide, so the date + search + globe group no longer fit beside it.
   - The group sat AFTER the menu in the flex order, so it was the one pushed to a second row.
   - Fix: group goes before the menu, items are tightened, the date is shortened and the globe
     is capped. On narrower desktops the menu drops to its own row instead, with the group
     staying up on the LIVE row.
   ========================================================= */
@media only screen and (min-width: 970px) {
  /* Order on the bar: [LIVE] ... [date search globe] [menu] */
  #header-supplementary div:has(> .menu-side-box) > .menu-side-box {
    order: 1 !important;
    display: flex !important;
    align-items: center;
    flex: 0 0 auto !important;
    margin: 0 10px 0 0 !important;
  }
  #header-supplementary div:has(> .menu-side-box) > :not(.menu-side-box) {
    order: 2 !important;
    flex: 0 1 auto !important;
    min-width: 0;
    max-width: 100%;
    margin-left: auto !important;
  }

  /* Globe / any picture in the side group stays icon-sized */
  #header-supplementary .menu-side-box img,
  #header-supplementary .menu-side-box svg {
    width: auto;
    height: auto;
    max-width: 34px !important;
    max-height: 34px !important;
  }

  /* Tighter menu items so the whole bar fits on one row */
  .menu-items > li > a {
    gap: 8px;
    padding: 6px 12px 6px 8px;
  }
  .menu-items > li > a .menu-title > span:first-child:not(.menu-description),
  .menu-items > li > a .menu-title-text { font-size: 14px; }
}

/* Mid-size desktops: shorter date, a little tighter still */
@media only screen and (min-width: 970px) and (max-width: 1599px) {
  .ap-bar-date .ap-date-full  { display: none; }
  .ap-bar-date .ap-date-short { display: inline; }
  .menu-items > li > a { gap: 6px; padding: 6px 9px 6px 6px; }
  #header-supplementary div:has(> .menu-side-box)::after { margin-left: 10px; }
}

/* =========================================================
   25. Bigger LIVE badge
   ========================================================= */
html body #header-supplementary div:has(> .menu-side-box)::before {
  font-size: 17px;
  letter-spacing: 0.12em;
}
html body #header-supplementary div:has(> .menu-side-box)::after {
  width: 13px;
  height: 13px;
  margin-right: 9px;
}
@media only screen and (max-width: 969px) {
  html body #header-supplementary div:has(> .menu-side-box)::before { font-size: 14px; }
  html body #header-supplementary div:has(> .menu-side-box)::after  { width: 11px; height: 11px; margin-right: 7px; }
}

/* =========================================================
   26. Desktop: menu on its own row, starting at the left (under LIVE);
       the date/search/globe row can no longer overlap the menu
   ========================================================= */
@media only screen and (min-width: 970px) {
  html body #header-supplementary div:has(> .menu-side-box) {
    row-gap: 8px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  /* Menu: full-width second row, items start at the left edge */
  html body #header-supplementary div:has(> .menu-side-box) > :not(.menu-side-box) {
    order: 2 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100%;
    margin: 0 !important;
  }
  html body #header-supplementary .menu-items,
  html body #menu-primary-items,
  html body #menu-secondary-items {
    justify-content: flex-start !important;
    flex: 0 0 auto !important;
    width: auto !important;
  }
  /* Top-right group: let it grow to its content so the globe never spills onto the menu row */
  html body #header-supplementary .menu-side-box {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible;
    align-items: center;
    margin-bottom: 0 !important;
  }
  html body #header-supplementary .menu-side-box > :not(.ap-bar-date) {
    max-height: 34px;
  }
  html body #header-supplementary .menu-side-box img,
  html body #header-supplementary .menu-side-box svg {
    max-width: 30px !important;
    max-height: 30px !important;
  }
}

/* =========================================================
   27. Desktop only: no LIVE badge, no date; search + globe sit at the left of the menu, same row
   (mobile is untouched)
   ========================================================= */
@media only screen and (min-width: 970px) {
  html body #header-supplementary div:has(> .menu-side-box)::before,
  html body #header-supplementary div:has(> .menu-side-box)::after,
  html body #header-supplementary .menu-side-box .ap-bar-date {
    display: none !important;
  }
  html body #header-supplementary div:has(> .menu-side-box) {
    justify-content: flex-start !important;
    flex-wrap: wrap;
    row-gap: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  /* Search + globe first, then the menu, all on one row */
  html body #header-supplementary div:has(> .menu-side-box) > .menu-side-box {
    order: 1 !important;
    flex: 0 0 auto !important;
    margin: 0 14px 0 0 !important;
  }
  html body #header-supplementary div:has(> .menu-side-box) > :not(.menu-side-box) {
    order: 2 !important;
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: 100%;
    margin: 0 !important;
  }
}

/* =========================================================
   28. Desktop: search + globe at the RIGHT end of the menu row, globe kept small
   ========================================================= */
@media only screen and (min-width: 970px) {
  html body #header-supplementary div:has(> .menu-side-box) > :not(.menu-side-box) {
    order: 1 !important;
    margin: 0 14px 0 0 !important;
  }
  html body #header-supplementary div:has(> .menu-side-box) > .menu-side-box {
    order: 2 !important;
    margin: 0 0 0 auto !important;
    gap: 10px;
  }

  /* Globe (and the search icon) icon-sized, whatever element draws them */
  html body #header-supplementary .menu-side-box img,
  html body #header-supplementary .menu-side-box svg,
  html body #header-supplementary .menu-side-box canvas {
    width: 26px !important;
    height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
    object-fit: contain;
    flex: 0 0 auto;
  }
  html body #header-supplementary .menu-side-box > :not(.ap-bar-date):not(input) {
    max-width: 40px;
    max-height: 32px;
    font-size: 20px;
    line-height: 1;
    overflow: hidden;
  }
}

/* =========================================================
   29. Globe was being cropped (section 28 clipped it): scale the picture to fit instead
   ========================================================= */
@media only screen and (min-width: 970px) {
  html body #header-supplementary .menu-side-box > :not(.ap-bar-date):not(input) {
    overflow: visible !important;
    max-width: none;
    max-height: none;
  }
  /* The globe is the last item in the group: fixed small box, picture shrunk to fit inside it */
  html body #header-supplementary .menu-side-box > :last-child:not(:first-child) {
    display: block;
    flex: 0 0 auto;
    width: 30px !important;
    height: 30px !important;
    min-width: 0;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
  html body #header-supplementary .menu-side-box > :last-child:not(:first-child) * {
    max-width: 100%;
    max-height: 100%;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
  html body #header-supplementary .menu-side-box > :last-child:not(:first-child) img,
  html body #header-supplementary .menu-side-box > :last-child:not(:first-child) svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }
}

/* =========================================================
   30. Language selector (globe): keep it clickable, drop the squashing rules from section 29
   ========================================================= */
@media only screen and (min-width: 970px) {
  html body #header-supplementary .menu-side-box {
    position: relative;
    z-index: 30;           /* its dropdown opens above the menu items */
    align-items: center;
  }
  /* Undo section 29: no fixed box / shrinking of whatever sits inside the language selector */
  html body #header-supplementary .menu-side-box > :last-child:not(:first-child) {
    display: flex;
    align-items: center;
    align-self: center;
    width: auto !important;
    height: auto !important;
    min-width: 0;
    background-size: auto !important;
  }
  html body #header-supplementary .menu-side-box > :last-child:not(:first-child) * {
    max-width: none;
    max-height: none;
    background-size: auto !important;
  }
  html body #header-supplementary .menu-side-box > :last-child:not(:first-child) img,
  html body #header-supplementary .menu-side-box > :last-child:not(:first-child) svg {
    width: 26px !important;
    height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
    object-fit: contain;
    opacity: 1;
  }
  /* If the globe is a bare picture drawn as a background (no child elements), give it a 26px box */
  html body #header-supplementary .menu-side-box > :last-child:not(:first-child):empty {
    display: block;
    width: 26px !important;
    height: 26px !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
}


/* =========================================================
   31. Desktop: news grid gap + smaller corners
   The photo sits in the cell edge to edge (its positioning comes from the parent theme), so insetting
   the photo and panel separately did not work: only the panel moved and the photos still touched.
   Now the whole card (photo + panel together) is clipped to a rounded rectangle inset by --ap-gap,
   which leaves a gap on every side no matter how the parent positions the photo.
   Gap between two cards = 2 x --ap-gap. Corner size = --ap-grid-r.
   ========================================================= */
@media only screen and (min-width: 970px) {
  html body .post-gridunit {
    --ap-gap: 6px;
    --ap-grid-r: 14px;
    border-radius: 0 !important;
    -webkit-clip-path: inset(var(--ap-gap) round var(--ap-grid-r)) !important;
    clip-path: inset(var(--ap-gap) round var(--ap-grid-r)) !important;
  }
  html body .post-gridunit-image,
  html body .post-gridunit-size2 .post-gridunit-image,
  html body .post-gridunit-bg {
    border-radius: 0 !important;
  }
  /* Panel runs flush to the card edges; the clip trims it, so add the gap to its padding */
  html body .post-gridunit-content {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border-radius: 0 !important;
    padding: 14px calc(18px + var(--ap-gap)) calc(14px + var(--ap-gap)) !important;
    gap: 8px;
  }
  html body .post-gridunit:first-child .post-gridunit-content {
    padding: 18px calc(26px + var(--ap-gap)) calc(16px + var(--ap-gap)) !important;
  }
  html body .post-gridunit-title { line-height: 1.3; }
  html body .post-gridunit-subtitle { margin-top: 0 !important; opacity: 0.85; }
  html body .post-gridunit-cat {
    top: calc(var(--ap-gap) + 12px) !important;
    right: calc(var(--ap-gap) + 14px) !important;
  }
}


/* =========================================================
   32. Mobile: when the menu is open, the rest of the page is blurred and dimmed
   The scrim sits under the header (z-index 100), so the bar and the opened menu stay sharp.
   ========================================================= */
.ap-menu-scrim { display: none; }
@media only screen and (max-width: 969px) {
  .ap-menu-scrim {
    display: block;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 99;
    background: rgba(10, 20, 40, 0.28);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    backdrop-filter: blur(14px) saturate(120%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s var(--ap-ease);
  }
  html.ap-menu-open .ap-menu-scrim {
    opacity: 1;
    pointer-events: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ap-menu-scrim { transition: none; }
}


/* =========================================================
   33. Desktop: blur the rest of the page while a dropdown menu is open
   The menu is always visible on desktop, so it counts as "active" while the mouse is over any menu item
   (or the menu row), while keyboard focus is inside it, or while the theme's .sfHover is set.
   The scrim ignores the mouse, so moving away from the menu closes it as usual.
   ========================================================= */
@media only screen and (min-width: 970px) {
  .ap-menu-scrim {
    display: block;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 99;
    background-color: rgba(10, 20, 40, 0);
    -webkit-backdrop-filter: blur(0px) saturate(100%);
    backdrop-filter: blur(0px) saturate(100%);
    visibility: hidden;
    pointer-events: none;
    /* Closing: wait a moment (so moving between two items does not flicker), then fade the blur out */
    transition:
      backdrop-filter .45s var(--ap-ease) .08s,
      -webkit-backdrop-filter .45s var(--ap-ease) .08s,
      background-color .45s var(--ap-ease) .08s,
      visibility 0s linear .53s;
  }
  /* Open: only while the pointer is on a menu item that has a dropdown (the theme adds .sfHover for keyboard use) */
  html:has(#header-supplementary .menu-items > li:is(:hover, .sfHover) > ul) .ap-menu-scrim {
    background-color: rgba(10, 20, 40, 0.24);
    -webkit-backdrop-filter: blur(14px) saturate(125%);
    backdrop-filter: blur(14px) saturate(125%);
    visibility: visible;
    transition:
      backdrop-filter .45s var(--ap-ease),
      -webkit-backdrop-filter .45s var(--ap-ease),
      background-color .45s var(--ap-ease),
      visibility 0s;
  }
}


/* =========================================================
   34. Desktop menu motion
   a) The dropdown glides and fades in, its items follow one after another
   b) Moving the pointer along the bar: one glass capsule slides from item to item (needs the small script
      "Menu glide" in functions.php; without it the normal per-item highlight is used)
   c) Moving down a dropdown: the highlighted row slides in a little
   ========================================================= */
@keyframes ap-drop-in {
  from { opacity: 0; transform: translateY(-10px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes ap-fly-in {
  from { opacity: 0; transform: translateX(-10px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes ap-item-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

@media only screen and (min-width: 970px) {
  /* a) dropdown + flyout entrance (plays each time the panel is shown) */
  .menu-items > li > ul {
    transform-origin: top left;
    animation: ap-drop-in .38s var(--ap-ease) both;
  }
  .menu-items > li > ul ul {
    transform-origin: left center;
    animation: ap-fly-in .32s var(--ap-ease) both;
  }
  .sf-menu ul > li { animation: ap-item-in .4s var(--ap-ease) both; }
  .sf-menu ul > li:nth-child(1) { animation-delay: 0s; }
  .sf-menu ul > li:nth-child(2) { animation-delay: 0.03s; }
  .sf-menu ul > li:nth-child(3) { animation-delay: 0.06s; }
  .sf-menu ul > li:nth-child(4) { animation-delay: 0.09s; }
  .sf-menu ul > li:nth-child(5) { animation-delay: 0.12s; }
  .sf-menu ul > li:nth-child(6) { animation-delay: 0.15s; }
  .sf-menu ul > li:nth-child(7) { animation-delay: 0.18s; }
  .sf-menu ul > li:nth-child(8) { animation-delay: 0.21s; }
  .sf-menu ul > li:nth-child(9) { animation-delay: 0.24s; }
  .sf-menu ul > li:nth-child(10) { animation-delay: 0.27s; }

  /* c) rows in a dropdown */
  .sf-menu ul li a {
    transition: background-color .25s var(--ap-ease), color .25s var(--ap-ease), transform .3s var(--ap-ease);
  }
  .sf-menu ul li:hover > a { transform: translateX(4px); }

  /* b) sliding capsule */
  html.ap-glide #header-supplementary .menu-items { position: relative; }
  html.ap-glide #header-supplementary .menu-items > li { position: relative; z-index: 1; }
  html.ap-glide #header-supplementary .menu-items > li:is(:hover, .sfHover) { z-index: 3; }
  html.ap-glide #header-supplementary .menu-items > li > a,
  html.ap-glide #header-supplementary .menu-items > li:hover > a,
  html.ap-glide #header-supplementary .menu-items > li.current-menu-item > a,
  html.ap-glide #header-supplementary .menu-items > li.current-menu-ancestor > a {
    background: transparent !important;
    box-shadow: none !important;
  }
  .ap-menu-pill {
    position: absolute;
    top: 0; left: 0;
    width: 0; height: 0;
    z-index: 0;
    border-radius: 999px;
    background: rgba(0, 113, 227, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 4px 14px rgba(0, 113, 227, 0.14);
    opacity: 0;
    pointer-events: none;
    transition:
      transform .5s var(--ap-ease),
      width .5s var(--ap-ease),
      height .5s var(--ap-ease),
      opacity .3s var(--ap-ease);
  }
  .ap-menu-pill.is-on { opacity: 1; }
  .ap-menu-pill.no-anim { transition: opacity .3s var(--ap-ease); }
}
@media only screen and (max-width: 969px) {
  .ap-menu-pill { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-items > li > ul, .menu-items > li > ul ul, .sf-menu ul > li { animation: none !important; }
  .sf-menu ul li:hover > a { transform: none; }
}


/* =========================================================
   35. Mobile: the opened menu is a pop-up card under the bar (not a full-width strip)
   The card floats at the right under the bar, rounded and glassy, scrolls if it is tall, and pops in with a
   spring; its rows rise one after another. The blurred page behind (section 32) closes it when tapped.
   The theme still decides when the list is shown or hidden, so the hamburger works as before.
   ========================================================= */
@keyframes ap-pop-in {
  from { opacity: 0; transform: translateY(-10px) scale(.92); }
  to   { opacity: 1; transform: none; }
}
@keyframes ap-pop-row {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media only screen and (max-width: 969px) {
  html body #header-supplementary .menu-items,
  html body #menu-primary-items,
  html body #menu-secondary-items {
    position: absolute !important;
    z-index: 101;
    top: calc(100% + 10px) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: 440px;
    margin: 0 0 0 auto !important;
    padding: 8px !important;
    max-height: calc(100vh - 120px);
    max-height: calc(100dvh - 120px);
    overflow-x: hidden;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    border: 0 !important;
    border-radius: 26px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 24px 60px rgba(10, 20, 40, 0.38) !important;
    transform-origin: top right;
    animation: ap-pop-in .4s var(--ap-ease) both;
  }
  html body #header-supplementary .menu-items > li {
    animation: ap-pop-row .4s var(--ap-ease) both;
  }
  html body #header-supplementary .menu-items > li:nth-child(1) { animation-delay: 0.080s; }
  html body #header-supplementary .menu-items > li:nth-child(2) { animation-delay: 0.115s; }
  html body #header-supplementary .menu-items > li:nth-child(3) { animation-delay: 0.150s; }
  html body #header-supplementary .menu-items > li:nth-child(4) { animation-delay: 0.185s; }
  html body #header-supplementary .menu-items > li:nth-child(5) { animation-delay: 0.220s; }
  html body #header-supplementary .menu-items > li:nth-child(6) { animation-delay: 0.255s; }
  html body #header-supplementary .menu-items > li:nth-child(7) { animation-delay: 0.290s; }
  html body #header-supplementary .menu-items > li:nth-child(8) { animation-delay: 0.325s; }
  html body #header-supplementary .menu-items > li:nth-child(9) { animation-delay: 0.360s; }
  html body #header-supplementary .menu-items > li:nth-child(10) { animation-delay: 0.395s; }
  html body #header-supplementary .menu-items > li > a {
    border-radius: 16px;
    padding: 12px 16px;
    transition: background-color .25s var(--ap-ease), color .25s var(--ap-ease);
  }
  html body #header-supplementary .menu-items > li > a:active,
  html body #header-supplementary .menu-items > li.current-menu-item > a {
    background: rgba(0, 113, 227, 0.12);
    color: var(--ap-accent);
  }
  /* Sub-menus open inside the card, indented, instead of flying out */
  html body #header-supplementary .menu-items ul {
    position: static !important;
    width: auto !important;
    margin: 2px 8px 8px !important;
    padding: 4px !important;
    border-radius: 18px !important;
    background: rgba(0, 0, 0, 0.05) !important;
    box-shadow: none !important;
    animation: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body #header-supplementary .menu-items,
  html body #header-supplementary .menu-items > li { animation: none !important; }
}

/* =========================================================
   22. Max Mega Menu: icon on the LEFT, larger, title + description stacked beside it
   The plugin draws the icon as a ::before on the link and puts it on top via .mega-icon-top.
   ========================================================= */
@media only screen and (min-width: 769px) {
  html body li.mega-menu-item.mega-icon-top > a.mega-menu-link {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px;
    text-align: left !important;
    line-height: normal !important;
  }
  html body li.mega-menu-item.mega-icon-top > a.mega-menu-link::before {
    display: inline-block !important;
    flex: 0 0 auto;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    font-size: 32px !important;
    line-height: 1 !important;
    text-align: left !important;
    vertical-align: middle;
  }
  html body li.mega-menu-item.mega-icon-top > a.mega-menu-link .mega-title-below {
    display: block !important;
    text-align: left !important;
  }
  html body li.mega-menu-item.mega-icon-top > a.mega-menu-link .mega-description-group {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    text-align: left !important;
  }
  html body li.mega-menu-item.mega-icon-top > a.mega-menu-link .mega-menu-title,
  html body li.mega-menu-item.mega-icon-top > a.mega-menu-link .mega-menu-description {
    display: block !important;
    text-align: left !important;
  }
  /* keep the dropdown arrow at the far right */
  html body li.mega-menu-item.mega-icon-top > a.mega-menu-link > .mega-indicator { margin-left: auto; align-self: center; }
}

/* =========================================================
   Header logo area: no card container
   The Pendidikan Bermutu / Ramah / BerAKHLAK logos sit directly on the header
   background. Removes the white rounded glass box (fill, border, shadow, blur, padding)
   that the generic ".sidebar .widget" card style puts around header widgets.
   ========================================================= */
html body #header .widget,
html body #header-primary .widget,
html body #header .sidebar .widget,
html body #header-primary .sidebar .widget,
html body #header-aside,
html body #header-aside .widget,
html body .header-aside,
html body .header-aside .widget,
html body .header-sidebar,
html body .header-sidebar .widget,
html body #header-widgetarea .widget,
html body #branding .widget {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}
html body #header .widget::before,
html body #header .widget::after,
html body #header-primary .widget::before,
html body #header-primary .widget::after { display: none !important; }

/* Header logo area (exact parent markup: <aside id="sidebar-header-sidebar" class="sidebar sidebar-header-sidebar">).
   Wins over ".sidebar .widget" card styles by ID specificity. */
html body #sidebar-header-sidebar,
html body #sidebar-header-sidebar .widget,
html body #sidebar-header-sidebar .widget_text,
html body #sidebar-header-sidebar .widget_media_image,
html body #sidebar-header-sidebar .widget_custom_html,
html body #sidebar-header-sidebar .textwidget,
html body #sidebar-header-sidebar .announce-widget,
html body .header-sidebar,
html body .header-sidebar .sidebar {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
}
html body #sidebar-header-sidebar .widget { margin: 5px 0 !important; }
html body #sidebar-header-sidebar .widget::before,
html body #sidebar-header-sidebar .widget::after { display: none !important; }

/* Mobile: hide the header logo area (same breakpoint the parent theme uses to stack the header) */
@media only screen and (max-width: 969px) {
  html body #header-aside,
  html body #header .header-sidebar,
  html body #sidebar-header-sidebar {
    display: none !important;
  }
}