/* THC Core — the top bar.
   1. The header: sticky, tucked away while reading, three layouts (one row / logo + two rows / phone rows).
   2. The ten items (icon over a short label), the cart included.
   3. The panels each item opens.
   4. [thc_resource_links] — the Resources page's jump buttons.
   Colours come from the theme's tokens, so High contrast and Dark follow automatically. */

:root {
  --thc-b-raised: var(--thc-surface-raised, #fcf8ef);
  --thc-b-muted: var(--thc-surface-muted, #ece4d9);
  --thc-b-border: var(--thc-border, #d9d0bc);
  --thc-b-text: var(--thc-text, #332d25);
  --thc-b-deep: var(--thc-leaf-deep, #3f5c3b);
  --thc-b-canvas: var(--thc-canvas, #f7f1e4);
}

/* ---------- 1. the header ---------- */

.thc-bar-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: transform .22s ease;
}
body.admin-bar .thc-bar-header { top: var(--wp-admin--admin-bar--height, 32px); }
.thc-bar-header.is-tucked { transform: translateY(-100%); }
body.admin-bar .thc-bar-header.is-tucked { transform: translateY(calc(-100% - var(--wp-admin--admin-bar--height, 32px))); }
@media (max-width: 600px) {
  /* WordPress's own admin bar scrolls away on phones. */
  body.admin-bar .thc-bar-header { top: 0; }
  body.admin-bar .thc-bar-header.is-tucked { transform: translateY(-100%); }
}
.thc-bar-header.has-open { z-index: 10000001; } /* an open panel sits above the cookie banner too */
html[data-thc-bar="static"] .thc-bar-header { position: relative; transform: none; }
html[data-thc-bar="pinned"] { scroll-padding-top: calc(var(--thc-bar-h, 0px) + 8px); }
@media (prefers-reduced-motion: reduce) { .thc-bar-header { transition: none; } }
html[data-thc-motion="reduce"] .thc-bar-header { transition: none; }

/* Lessons, quizzes and assignments: the bar floats over Tutor's own lesson bar and starts tucked away; the frog
   button in Tutor's bar (or scrolling up) brings it down. "Always showing" and "Top of page only" keep it in the page. */
html:not([data-thc-bar="pinned"]):not([data-thc-bar="static"]) .thc-bar-header--learning { position: fixed; left: 0; right: 0; width: 100%; }
html[data-thc-bar="pinned"] .thc-bar-header.is-tucked,
html[data-thc-bar="static"] .thc-bar-header.is-tucked { transform: none; }

.thc-bar-handle {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 999px;
  background: transparent; cursor: pointer; line-height: 0;
}
.thc-bar-handle img { width: 28px; height: 28px; border-radius: 50%; display: block; }
.thc-bar-handle:hover, .thc-bar-handle[aria-expanded="true"] { background: var(--tutor-surface-l2, rgba(127, 127, 127, .15)); }
.thc-bar-handle:focus-visible { outline: 2px solid var(--thc-b-deep); outline-offset: 2px; }
.tutor-learning-header-inner .thc-bar-handle { margin-inline-start: auto; }
.tutor-learning-header-inner .thc-bar-handle ~ .thc-display__button { margin-inline-start: 0; }
html[data-thc-bar="pinned"] .thc-bar-handle,
html[data-thc-bar="static"] .thc-bar-handle { display: none; }
html[data-thc-bar="pinned"] .tutor-learning-header-inner .thc-display__button,
html[data-thc-bar="static"] .tutor-learning-header-inner .thc-display__button { margin-inline-start: auto; }

/* Tutor's screens sit straight under the header (no theme block gap). */
.wp-site-blocks > .thc-bar-header + .tutor-learning-page,
.wp-site-blocks > .thc-bar-header + .tutor-dashboard-layout,
.wp-site-blocks > .thc-bar-header + [data-tutor-learning-site-shell],
.wp-site-blocks > .thc-bar-header + [data-tutor-dashboard-site-shell],
.wp-site-blocks > .thc-bar-header + .tutor-dashboard-isolated-page-wrapper { margin-block-start: 0; }

/* "Back to your lesson": a slim strip under the bar on other pages, part of the header (it tucks with it). */
.thc-return { background: var(--thc-b-muted); border-top: 1px solid var(--thc-b-border); border-bottom: 1px solid var(--thc-b-border); }
.thc-return__inner { display: flex; align-items: center; gap: .25rem; max-width: var(--thc-wide, 1340px); margin: 0 auto; padding: 0 .5rem; }
.thc-return__link {
  display: flex; align-items: center; gap: .35rem; flex: 1 1 auto; min-width: 0; min-height: 40px;
  color: var(--thc-b-deep); font-size: .9rem; font-weight: 600; line-height: 1.2; text-decoration: none;
}
.thc-return__link svg { flex: none; }
.thc-return__text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.thc-return__link:hover .thc-return__text { text-decoration: underline; text-underline-offset: 2px; }
.thc-return__link:focus-visible { outline: 2px solid var(--thc-b-deep); outline-offset: 2px; }
.thc-return__close {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px;
  margin: 0; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--thc-b-text); cursor: pointer; line-height: 0;
}
.thc-return__close:hover, .thc-return__close:focus-visible { background: var(--thc-b-raised); }
.thc-return__close:focus-visible { outline: 2px solid var(--thc-b-deep); outline-offset: 2px; }

/* The header is the measuring stick for the three layouts (rem-based, so larger text sizes switch sooner). */
.thc-bar-header .thc-site-header { container: thc-header / inline-size; }

/* Phones first: the logo on its own row, then the bar across the full width (the page's side margins are
   narrowed in the header so five labels have room). */
@media (max-width: 600px) {
  .thc-bar-header .thc-site-header { padding-left: 0; padding-right: 0; }
  .thc-bar-header .thc-site-header__inner { padding-inline: .5rem; }
}
.thc-bar-header .thc-site-header__inner {
  flex-wrap: wrap;
  row-gap: .15rem;
  min-height: 0;
  padding-block: .4rem .35rem;
}
.thc-bar-header .thc-site-brand { flex: 1 1 100%; }
.thc-bar-header .thc-site-brand .custom-logo { width: 120px; max-height: 44px; }
.thc-bar-header .thc-site-header__actions {
  flex: 1 1 100%;
  justify-content: stretch;
  gap: 0;
  min-width: 0;
}
.thc-bar { width: 100%; margin: 0; }
.thc-bar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .1rem .15rem;
}

/* Medium: the logo beside two rows of five. */
@container thc-header (min-width: 37.5rem) {
  .thc-bar-header .thc-site-header__inner { flex-wrap: nowrap; padding-block: .45rem; }
  .thc-bar-header .thc-site-brand { flex: 0 1 auto; }
  .thc-bar-header .thc-site-brand .custom-logo { width: clamp(132px, 14vw, 176px); max-height: 64px; }
  .thc-bar-header .thc-site-header__actions { flex: 0 0 auto; }
  .thc-bar { width: auto; }
  .thc-bar__list { grid-template-columns: repeat(5, minmax(4.25rem, auto)); }
}

/* Wide: one row of ten. */
@container thc-header (min-width: 62rem) {
  .thc-bar__list { grid-template-columns: repeat(10, minmax(4.25rem, auto)); }
}

/* ---------- 2. the items ---------- */

.thc-bar__slot { display: flex; min-width: 0; margin: 0; padding: 0; }
.thc-bar__slot::marker { content: none; }

.thc-bar .thc-bar__item,
.thc-bar .thc-bar__slot--cart .wc-block-mini-cart__button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .18rem;
  width: 100%;
  min-width: 0;
  min-height: 3rem;
  margin: 0;
  padding: .3rem .25rem .25rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--thc-b-text);
  font: inherit;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.thc-bar .thc-bar__item:hover,
.thc-bar .thc-bar__item[aria-expanded="true"],
.thc-bar .thc-bar__slot--cart .wc-block-mini-cart__button:hover { background: var(--thc-b-muted); color: var(--thc-b-text); }
.thc-bar .thc-bar__item:focus-visible,
.thc-bar .thc-bar__slot--cart .wc-block-mini-cart__button:focus-visible { outline: 2px solid var(--thc-b-deep); outline-offset: 1px; }
.thc-bar .thc-bar__item[aria-expanded="true"] { box-shadow: inset 0 -3px 0 var(--thc-b-deep); }

.thc-bar__icon { display: inline-flex; line-height: 0; }
.thc-bar .thc-bar__svg,
.thc-bar .thc-bar__slot--cart .wc-block-mini-cart__icon { width: 1.375rem; height: 1.375rem; flex: none; }
.thc-bar .thc-bar__label {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.15;
  white-space: nowrap;
  color: inherit;
}
.thc-bar .thc-bar__item.is-current .thc-bar__label {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Display: a small dot when someone has changed a setting (same as the old round button). */
.thc-bar .thc-bar__item.is-custom .thc-bar__icon { position: relative; }
.thc-bar .thc-bar__item.is-custom .thc-bar__icon::after {
  content: ""; position: absolute; right: -3px; bottom: -1px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--thc-leaf, #5e7d53); box-shadow: 0 0 0 2px var(--thc-b-raised);
}

/* The WooCommerce cart, restyled to match. Its drawer and item count are WooCommerce's own. */
.thc-bar .thc-bar__slot--cart .wc-block-mini-cart { display: flex; width: 100%; margin: 0; }
.thc-bar .thc-bar__slot--cart .wc-block-mini-cart__quantity-badge { position: relative; display: inline-flex; line-height: 0; }
.thc-bar .thc-bar__slot--cart .wc-block-mini-cart__badge {
  position: absolute; top: -6px; right: -10px; margin: 0; min-width: 1.1rem; height: 1.1rem; padding: 0 .25rem;
  font-size: .68rem; line-height: 1.1rem; border-radius: 999px; transform: none;
}
.thc-bar .thc-bar__slot--cart .wc-block-mini-cart__amount,
.thc-bar .thc-bar__slot--cart .wc-block-mini-cart__tax-label { display: none; }

/* Narrow phones: the columns are tight, so the labels give up their side padding and letter spacing. */
@container thc-header (max-width: 26rem) {
  .thc-bar__list { gap: .1rem 0; }
  .thc-bar .thc-bar__item,
  .thc-bar .thc-bar__slot--cart .wc-block-mini-cart__button { padding-inline: 0; }
  /* Normally .72rem; with the largest text sizes on a small phone, capped so five labels still fit a row. */
  .thc-bar .thc-bar__label { font-size: min(.72rem, calc((100cqw - 1rem) / 27)); letter-spacing: 0; }
}

/* ---------- 3. the panels ---------- */

.thc-bar__panel {
  position: absolute;
  z-index: 5;
  top: calc(100% + 1px);
  left: .5rem;
  right: .5rem;
  max-height: var(--thc-bar-panel-max, 70vh);
  overflow: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
  padding: .55rem .6rem .7rem;
  border: 1px solid var(--thc-b-border);
  border-radius: 12px;
  background: var(--thc-b-raised);
  color: var(--thc-b-text);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
  font-size: .95rem;
  line-height: 1.4;
  text-align: start;
}
.thc-bar__panel[hidden] { display: none; }
.thc-bar__panel *, .thc-bar__panel *::before, .thc-bar__panel *::after { box-sizing: border-box; }
@container thc-header (min-width: 37.5rem) {
  .thc-bar__panel { left: auto; right: var(--thc-bar-panel-right, 1rem); width: min(23.5rem, calc(100% - 1rem)); }
  .thc-bar__panel--resources,
  .thc-bar__panel--display { width: min(30rem, calc(100% - 1rem)); }
  .thc-bar__links--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .35rem; }
}

.thc-bar__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: 0 0 .2rem .6rem; }
.thc-bar__title { margin: 0; font-size: 1.02rem; font-weight: 700; line-height: 1.2; }
.thc-bar__close {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; margin: -4px -2px -4px 0; padding: 0; border: 0; border-radius: 999px;
  background: transparent; color: inherit; cursor: pointer; line-height: 0;
}
.thc-bar__close .thc-bar__svg { width: 18px; height: 18px; }
.thc-bar__close:hover, .thc-bar__close:focus-visible { background: var(--thc-b-muted); }
.thc-bar__close:focus-visible { outline: 2px solid var(--thc-b-deep); outline-offset: 2px; }

.thc-bar__body > :first-child { margin-top: 0; }
.thc-bar__resume { margin: .1rem 0 .45rem; }
.thc-bar__resume a {
  display: flex; flex-wrap: wrap; gap: 0 .3rem; align-items: center; min-height: 44px; padding: .45rem .6rem; border-radius: 8px;
  background: var(--thc-b-muted); color: var(--thc-b-deep); font-weight: 600; text-decoration: none;
}
.thc-bar__resume a:hover { text-decoration: underline; text-underline-offset: 2px; }
.thc-bar__resume a:focus-visible { outline: 2px solid var(--thc-b-deep); outline-offset: 0; }
.thc-bar__lede { margin: .1rem .6rem .45rem; }
.thc-bar__muted { margin: .1rem .6rem .35rem; opacity: .85; font-size: .9rem; }
.thc-bar__more { margin: .55rem .6rem 0; font-size: .9rem; }
.thc-bar__more a { color: var(--thc-b-deep); font-weight: 600; }

.thc-bar__links { list-style: none; margin: 0; padding: 0; }
.thc-bar__links > li { margin: 0; padding: 0; }
.thc-bar__link {
  display: flex; flex-direction: column; justify-content: center; gap: .05rem;
  min-height: 44px; padding: .45rem .6rem; border-radius: 8px;
  color: var(--thc-b-text); text-decoration: none;
}
.thc-bar__link:hover { background: var(--thc-b-muted); color: var(--thc-b-text); }
.thc-bar__link:hover .thc-bar__link-text { text-decoration: underline; text-underline-offset: 2px; }
.thc-bar__link:focus-visible { outline: 2px solid var(--thc-b-deep); outline-offset: 0; }
.thc-bar__link-text { font-weight: 600; color: var(--thc-b-deep); }
.thc-bar__link-text .thc-bar__svg--external { width: .8rem; height: .8rem; margin-left: .3rem; vertical-align: -1px; }
.thc-bar__note { font-size: .84rem; opacity: .85; }
.thc-bar__tag {
  display: inline-block; margin-left: .35rem; padding: .05rem .45rem; border-radius: 999px;
  background: var(--thc-b-deep); color: #fff; font-size: .72rem; font-weight: 700; vertical-align: 1px;
}

.thc-bar__group + .thc-bar__group { margin-top: .45rem; }
.thc-bar__group-title { margin: .25rem .6rem .05rem; font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .85; }

.thc-bar__actions {
  display: flex; flex-wrap: wrap; gap: .45rem;
  margin-top: .55rem; padding: .6rem .35rem 0; border-top: 1px solid var(--thc-b-border);
}
.thc-bar__body > .thc-bar__actions:first-child { margin-top: .2rem; padding-top: 0; border-top: 0; }
.thc-bar__actions[hidden] { display: none; }
.thc-bar .thc-bar__btn {
  display: inline-flex; align-items: center; justify-content: center; flex: 1 1 auto;
  min-height: 44px; margin: 0; padding: .5rem .95rem; border: 1px solid var(--thc-b-deep); border-radius: 999px;
  background: var(--thc-b-deep); color: #fff; font: inherit; font-weight: 700; line-height: 1.2; text-align: center;
  text-decoration: none; cursor: pointer;
}
.thc-bar .thc-bar__btn:hover { filter: brightness(1.12); color: #fff; }
.thc-bar .thc-bar__btn--quiet { background: transparent; color: var(--thc-b-deep); }
.thc-bar .thc-bar__btn--quiet:hover { background: var(--thc-b-muted); color: var(--thc-b-deep); filter: none; }
.thc-bar .thc-bar__btn:focus-visible { outline: 2px solid var(--thc-b-deep); outline-offset: 2px; }

.thc-bar__tiers { list-style: none; margin: .15rem 0 .2rem; padding: 0 .35rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.thc-bar__tiers > li { margin: 0; flex: 1 1 auto; }
.thc-bar__tiers form, .thc-bar__group form { margin: 0; }
.thc-bar__group > form { padding: 0 .35rem; }
.thc-bar__group > form .thc-bar__btn { width: 100%; }

/* Search: THC Search's own form, full width. */
.thc-bar__panel .thc-search-form { width: 100%; margin: .15rem 0 0; }
.thc-bar__panel .thc-search-form input[type="search"] { min-height: 44px; font-size: 1rem; }

/* Display: THC Core's settings form, as in the old panel. */
.thc-bar__panel--display .thc-display__form { padding: 0 .35rem; }
.thc-bar__panel--display .thc-display__more { margin: .45rem .35rem 0; }

.thc-bar .screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap;
}

/* High contrast and dark */
html[data-thc-contrast="high"] .thc-bar__panel { border: 2px solid #000; }
html[data-thc-contrast="high"] .thc-bar .thc-bar__item[aria-expanded="true"] { box-shadow: inset 0 -3px 0 #000; }
html[data-thc-theme="dark"] .thc-bar .thc-bar__btn:not(.thc-bar__btn--quiet),
html[data-thc-theme="dark"] .thc-bar .thc-bar__btn:not(.thc-bar__btn--quiet):hover,
html[data-thc-theme="dark"] .thc-bar__tag,
html[data-thc-theme="dark"] .thc-jump__link:hover { color: #15130f; }
html[data-thc-theme="dark"] .thc-bar__panel { box-shadow: 0 12px 32px rgba(0, 0, 0, .5); }

/* ---------- 4. [thc_resource_links] ---------- */

.thc-jump { margin: 0; }
.thc-jump__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.thc-jump__list > li { margin: 0; }
.thc-jump__link {
  display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1rem;
  border: 1px solid var(--thc-b-deep); border-radius: 999px; background: var(--thc-b-raised);
  color: var(--thc-b-deep); font-weight: 700; line-height: 1.2; text-decoration: none;
}
.thc-jump__link:hover { background: var(--thc-b-deep); color: #fff; }
.thc-jump__link:focus-visible { outline: 2px solid var(--thc-b-deep); outline-offset: 2px; }