/* ═══════════════════════════════════════
   AlarmO'Clock — Clock Page Styles
   Used only by clock.php. Shared hero / clock-display / clock-meta /
   date-line / fullscreen-trigger styles live in clock-shared.css.
   ═══════════════════════════════════════ */

/* Stretch the body so the hero centers vertically + footer pins to bottom */
body.tpl-clock { display: flex; flex-direction: column; min-height: 100vh; }
body.tpl-clock .hero--clock { flex: 1; min-height: unset; }

/* Hero header is just the H1 + fullscreen pill, matched to the standard page hero */
.clock-page-hero {
  position: relative;
  z-index: 2;
  padding: 10px var(--content-pad) 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.clock-page-hero h1 { font-size: 42px; }
@media (max-width: 768px) {
  .clock-page-hero { padding: 10px var(--content-pad) 30px; }
  .clock-page-hero h1 { font-size: 32px; }
}

/* In fullscreen mode, hide the hero header + SEO content */
:fullscreen .clock-seo,        :-webkit-full-screen .clock-seo        { display: none; }
:fullscreen .clock-page-hero,  :-webkit-full-screen .clock-page-hero  { display: none; }

/* In fullscreen, trim the nav down to just the logo + theme (dark) toggle */
:fullscreen .nav-menu,      :-webkit-full-screen .nav-menu,
:fullscreen .nav-clock,     :-webkit-full-screen .nav-clock,
:fullscreen .fmt-pill,      :-webkit-full-screen .fmt-pill,
:fullscreen .nav-hamburger, :-webkit-full-screen .nav-hamburger { display: none; }