/* ed.css - the Wise Ed product page's own few rules (/ed/, /ed/sl/, /ed/hr/).
   Package 89, 14 Oct 2026.

   WHY A FILE OF ITS OWN, and not the end of site.css. Every page carries
   site.css with its content hash in the address (?v=..., build.py's av()), so
   one more line in site.css is a new address on all 127 Wise Timetable pages
   and a deploy that re-uploads every one of them for rules none of them use.
   The gallery made the same choice for the same reason (gallery.css, package
   64). This file is linked only by the pages that ask for it - a page's
   "css" list in its content (content/ed.py) - and it travels with the Wise Ed
   page when that page moves to its own domain.

   It is loaded AFTER site.css and uses site.css's own tokens (--brand,
   --brand-soft, --accent, --ink, --line, --brand-wash), so the Wise Ed page
   cannot drift from the Wise Timetable look: it only adds the two things a
   second product in three languages needs. */

/* ---- a second product's wordmark, and a language switch --------------------
   The Wise Ed page (/ed/, /ed/sl/, /ed/hr/, 14 Oct 2026) uses this header and
   footer with its own name in them. build.py's wordmark() draws the name as
   TEXT in the Wise Timetable logo's manner - the four-square mark, then the
   name in lower case, "wise" in the logo's blue (--brand-soft) and the
   product's word in the logo's red (--accent) - rather than as an invented
   picture. The face is a slab serif where the system has one, which is the
   nearest a system font gets to the logo's lettering, and Georgia otherwise.
   Nothing here applies to a page that does not use the wordmark or the
   switch, so every Wise Timetable page renders exactly as before. */
.brand-wm, .fwm { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
/* The four-square mark, drawn as the background of an aria-hidden span (see
   wordmark() in build.py for why it is not an <img>): 309 x 279, so 31 px wide
   is 28 px high. */
.wm-mark, .fwm-mark { display: inline-block; flex: 0 0 auto; background: url(/assets/img/wtt-mark.png) center / contain no-repeat; }
.wm-mark { width: 31px; height: 28px; }
.wm-word, .fwm-word {
  font-family: "Rockwell", "Rockwell Nova", "Roboto Slab", "Zilla Slab", Georgia, "Times New Roman", serif;
  font-size: 1.72rem; line-height: 1; letter-spacing: .01em; font-weight: 400; white-space: nowrap;
}
.wm-a { color: var(--brand-soft); }
.wm-b { color: var(--accent); margin-left: .28em; }
.brand-wm:hover .wm-a { color: var(--brand); }
@media (max-width: 1080px) { .wm-word { font-size: 1.5rem; } .wm-mark { width: 27px; height: 24px; } }

/* The footer's wordmark is the light logo's: one light colour, mark included. */
.fwm { margin: 0 0 18px; }
.fwm-mark { width: 29px; height: 26px; filter: brightness(0) invert(.93); }
.fwm-word { font-size: 1.6rem; color: #e5edf5; }
.fwm-b { margin-left: .28em; }

/* EN · SL · HR - beside the buttons on a wide screen, a row of its own above
   them in the phone menu. The current language is marked, not linked. */
.langsw { display: inline-flex; align-items: center; gap: 4px; font-size: .86rem; font-weight: 700; letter-spacing: .03em; }
.langsw a, .langsw-on { padding: 5px 7px; border-radius: 6px; text-decoration: none; }
.langsw a { color: var(--brand); }
.langsw a:hover { background: var(--brand-wash); color: var(--brand-dark); }
.langsw-on { color: var(--ink); background: var(--brand-wash); }
.langsw-dot { color: var(--line); font-weight: 400; }
.nav-cta:has(.langsw) { align-items: center; }
@media (max-width: 960px) {
  .nav-cta:has(.langsw) { flex-wrap: wrap; }
  .nav-cta .langsw { flex: 0 0 100%; justify-content: center; font-size: .95rem; margin-bottom: 4px; }
}

/* The Wise Ed header on a wide screen. Its menu has a mega panel like the
   Wise Timetable header's Product, but where it opens has to differ.
   site.css centres a panel under its own item (left: 50%, translate(-50%)),
   which is right for Product in the middle of a long menu. The Wise Ed menu
   is short and sits at the right, next to the switch and the buttons, so a
   730 px panel centred under "Modules" left the window - measured x = -94 at
   1200 px - and one opened from the item's left edge left it on the other
   side below 1240 px (right edge at 1123 in a 1100 px window). So the panel
   hangs from the HEADER's right content edge instead (the head row becomes
   its containing block): it then always ends where the buttons end, lies
   under the menu, and fits every window from 961 px up (730 < 961 - 48).
   "top: calc(100% - 6px)" puts it as close under the menu item as site.css
   puts Product's, so the pointer crosses the same 6 px gap to reach it.
   Only on the wide header: at 960 px and below the phone menu takes over and
   site.css's ".nav .sub.mega" rules stand. ".brand-wm" in every selector
   keeps these rules on a header that carries a product wordmark. */
.brand-wm ~ .nav .nav-list > li > a { white-space: nowrap; }
/* PACKAGE 95 (26 Oct 2026): the rule that hung the panels from the header
   row ("li.has-sub { position: static }") is GONE. It made the header the
   containing block of EVERY panel, not only the mega one, so the plain Help
   list (left: 0) opened under the logo, far from "Help", and the pointer
   lost it on the way (Miso's screenshot, 26 Oct 02:23). Each panel now hangs
   from its own item and site.js keeps it inside the window (site.css,
   "Package 95"). Without the script a mega panel here opens from its item's
   right edge, the side that has room. */
@media (min-width: 961px) {
  .brand-wm ~ .nav .sub.mega:not([data-placed]) { left: auto; right: 0; transform: translateY(-6px); }
  .brand-wm ~ .nav .has-sub:hover .sub.mega:not([data-placed]),
  .brand-wm ~ .nav .has-sub:focus-within .sub.mega:not([data-placed]) { transform: none; }
}
/* Between the phone menu and a roomy desktop the header is three menu items,
   the switch and two buttons beside the wordmark; a little less air keeps
   them on one row (measured at 961, 1024, 1100 and 1240 px). */
@media (min-width: 961px) and (max-width: 1180px) {
  .brand-wm ~ .nav { gap: 12px; }
  .brand-wm ~ .nav .langsw a, .brand-wm ~ .nav .langsw-on { padding: 5px 4px; }
  .brand-wm ~ .nav .nav-cta .btn { padding: .58em .8em; }
}