/* Overrides for the static clone of the Astra site (tools/build-clone.py).
   Replaces behaviour the live site got from JavaScript. */

/* Astra switches between its desktop and mobile headers with JS, and gates the mobile
   styles on a body class JS adds. Without JS: always use the desktop header, and below
   Astra's 921px breakpoint collapse its menu behind a checkbox-driven ☰ button. */
#ast-mobile-header { display: none !important; }
#ast-desktop-header { display: block !important; }

.clone-nav-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.clone-nav-button { display: none; }

@media (max-width: 921px) {
  #ast-desktop-header .main-header-bar { position: relative; }
  .clone-nav-button {
    display: block; cursor: pointer; color: #fff; font-size: 22px; line-height: 1;
    padding: 8px 4px; user-select: none;
  }
  .clone-nav-toggle:focus-visible + .clone-nav-button { outline: 2px solid #fff; outline-offset: 2px; }
  /* ID in both selectors: the open rule must outrank the hide rule. */
  #ast-desktop-header .main-header-bar-navigation { display: none; }
  #ast-desktop-header .clone-nav-toggle:checked ~ .main-header-bar-navigation {
    display: block; position: absolute; left: 0; right: 0; top: 100%; z-index: 99; height: auto;
    background: #376092; border-top: 1px solid rgba(255,255,255,.35); box-shadow: 0 6px 12px rgba(0,0,0,.2);
  }
  /* Astra sizes desktop menu items to the full header height; in the panel they size to content. */
  #ast-desktop-header .clone-nav-toggle:checked ~ .main-header-bar-navigation * { height: auto; line-height: 1.4; }
  #ast-desktop-header .clone-nav-toggle:checked ~ .main-header-bar-navigation .main-header-menu { flex-direction: column; }
  #ast-desktop-header .clone-nav-toggle:checked ~ .main-header-bar-navigation .menu-link { display: block; padding: .8em 1.5em; }
}

/* Buy Me A Coffee: a plain link in place of the CDN-loaded floating widget. */
.clone-coffee {
  position: fixed; right: 18px; bottom: 18px; z-index: 9999;
  width: 56px; height: 56px; border-radius: 50%;
  background: #FF813F; color: #fff; font-size: 28px; line-height: 56px; text-align: center;
  text-decoration: none; box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.clone-coffee:hover, .clone-coffee:focus { background: #ff6a1a; color: #fff; }

/* YouTube embed replaced by a self-hosted thumbnail linking out.
   Astra's `body .ast-oembed-container *` makes every descendant fill the 16:9 box, which suits
   the link and thumbnail (they take the iframe's place) but not the label, so the label
   needs a more specific rule to sit centred at its own size. */
.clone-video-link { display: block; }
.clone-video-link img { display: block; width: 100%; height: 100%; object-fit: cover; }
body .ast-oembed-container .clone-video-label {
  top: 50%; left: 50%; width: auto; height: auto; transform: translate(-50%, -50%);
  background: #e00; color: #fff; padding: .55em 1.1em; border-radius: 10px;
  font-weight: 600; white-space: nowrap; line-height: 1.2;
}
.clone-video-link:hover .clone-video-label, .clone-video-link:focus .clone-video-label { background: #c00; }