/*
 * Block: tabbed_content  —  rebuilt from the prototype TABS (kitchen-sink
 * .tabs: pill nav + light panel). Root: .tabbed > ul.tabbed-menu, driven by
 * jQuery UI tabs.
 * ------------------------------------------------------------------
 * Real classes: ul.tabbed-menu > li > a (the pills), li.ui-tabs-active (the
 * active tab, jQuery UI), [role="tabpanel"] (the panels; UI shows/hides).
 * The jQuery UI hooks are preserved; panel display is left to the widget.
 *
 * Design: nav is a row of pill chips; the active pill is filled blue; the
 * panel sits on a light ground with a large radius.
 */

/* nav = a real tab bar: labels sitting ON a rail, the active one underlined.
   (Was a row of detached pill chips, which read as filter buttons rather than
   tabs and fought the panel they belong to.) */
ul.tabbed-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 0;
  margin: 0 0 2rem 0;
  list-style: none;
  border-bottom: 2px solid var(--line);
}
ul.tabbed-menu li {
  display: inline-block;
  padding-left: 0;
  text-indent: 0;
  margin: 0;
}
ul.tabbed-menu li::before {
  content: none;
}

/* a tab = a label on the rail */
ul.tabbed-menu li a {
  display: inline-block;
  padding: 0.85rem 1.4rem;
  margin-bottom: -2px;              /* overlap the rail so the tab sits on it */
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 1.2rem;
  line-height: 1.2;
  text-decoration: none;
  color: var(--muted);
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  transition: color var(--transition), border-color var(--transition);
}
ul.tabbed-menu li a:hover {
  color: var(--text-heading);
  border-bottom-color: var(--line);
}

/* active tab = underlined in the brand link colour */
ul.tabbed-menu li.ui-tabs-active a,
ul.tabbed-menu li a[aria-selected="true"] {
  color: var(--link);
  border-bottom-color: var(--link);
}

/* panel on a light ground. Dark text is asserted here for light grounds and
   re-asserted by bridge.css's opaque-light-panel rule (which lists [role=tabpanel])
   on coloured grounds. The tab pills are <li> links, so bridge's prose-scoped
   lime-link rule never touches them — no per-block override needed. */
.tabbed:not(.course-he-tabs) [role="tabpanel"] {
  padding: 2.1rem 2.3rem;
  background: var(--surface-alt);
  border-radius: var(--radius-lg);
  color: var(--text);
}
.tabbed:not(.course-he-tabs) [role="tabpanel"] a,
.tabbed:not(.course-he-tabs) [role="tabpanel"] a[href^="tel:"] {
  color: var(--blue-text);
  text-decoration: underline;
}
.tabbed:not(.course-he-tabs) [role="tabpanel"] * + * {
  margin-top: 0.75rem;
}

/* Relocated verbatim from qualification_cards.css so tabbed-menu styling lives
   in its owning block (per-page enqueue). Both are inert against the current
   markup — the menu renders <a> pills (styled above), not <button>, and .tabbed
   is the tab container, not a grid — but kept rather than dropped. */
.tabbed-menu button {
  border-bottom: 4px solid transparent; padding: .8rem 1.1rem;
  font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.3125rem; color: var(--muted);
}
@media (max-width: 64em) { .tabbed { grid-template-columns: 1fr; } }

/* Pill label contrast.
   On a dark section, css/base.css recolours EVERY <a> to --accent-on-dark
   (teal on DC) with the selector
     :is(<dark grounds>) a:not(.btn):not(.button):not(.cta)   -> (0,4,1)
   which out-specifies a plain `.tabbed ul.tabbed-menu li a` (0,2,3). That is why
   the earlier fix never took and the pills stayed teal. These rules add the
   .tabbed-content scope plus two :not()s so they reach (0,5,3)+ and win on every
   ground: dark label on the light chip, white on the active blue chip. Verified
   AA across base + all child themes (--text-heading on --surface-alt,
   --text-on-dark on --surface-blue). */
.tabbed-content .tabbed ul.tabbed-menu li a:not(.btn):not(.button) {
  color: var(--muted);
}
.tabbed-content .tabbed ul.tabbed-menu li.ui-tabs-active a:not(.btn):not(.button),
.tabbed-content .tabbed ul.tabbed-menu li a[aria-selected="true"]:not(.btn):not(.button) {
  color: var(--link);
}

/* Same rules again on a dark ground: the rail and the resting labels have to
   invert or they vanish, and the active label takes the on-dark accent. Same
   .tabbed-content .tabbed scope so they out-specify base.css's dark-ground
   link recolour. */
:is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey).tabbed-content .tabbed ul.tabbed-menu {
  border-bottom-color: rgba(var(--on-dark-rgb), .3);
}
:is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey).tabbed-content .tabbed ul.tabbed-menu li a:not(.btn):not(.button) {
  color: rgba(var(--on-dark-rgb), .78);
}
:is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey).tabbed-content .tabbed ul.tabbed-menu li a:not(.btn):not(.button):hover {
  color: var(--white);
}
:is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey).tabbed-content .tabbed ul.tabbed-menu li.ui-tabs-active a:not(.btn):not(.button),
:is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey).tabbed-content .tabbed ul.tabbed-menu li a[aria-selected="true"]:not(.btn):not(.button) {
  color: var(--white);
  border-bottom-color: var(--accent-on-dark);
}

/* Section intro + eyebrow on a dark ground. Scoped to the block header row (a
   direct-child chain) so panel prose is never touched. The eyebrow lifts to the
   brand's bright on-dark accent (DC yellow, else --accent-on-dark); the intro
   paragraph to a soft white. Tokens only. */
:is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey).tabbed-content .eyebrow {
  color: var(--yellow, var(--accent-on-dark));
}
:is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey).tabbed-content > .row > .columns > p {
  color: rgba(var(--on-dark-rgb), .84);
}