/*
 * Site overrides, shared by BOTH halves of the site.
 *
 * ## Why this file exists
 *
 * The storefront compiles its CSS into a Next bundle; the blog is Blade and
 * links `styles.css` and `theme.css` directly. A fix written only in
 * `globals.css` therefore reaches the storefront and NOT the blog — which is
 * exactly what happened to the footer's five-column rule, leaving the blog
 * wrapping to two rows after the rest of the site was fixed.
 *
 * Anything that is a property of the SITE rather than of the app belongs
 * here, and both halves load it. `globals.css` imports it, and the blog's
 * Blade layout links it after the theme.
 */

/*
 * Site-specific additions to the theme.
 *
 * Additive only: each rule below either extends a theme component to a case
 * its sample pages do not have, or styles an element the theme has no
 * component for. Nothing here restyles a theme component — the point of
 * adopting the theme is that it stays the theme.
 */

/*
 * The footer carries FIVE columns — the brand plus the four that
 * `site.ts` defines — where the theme's own footer has four. Without this
 * the fifth wraps under the first and the row reads as broken.
 */
.footergrid {
  grid-template-columns: 1.3fr repeat(4, 1fr);
  gap: 28px;
}

/*
 * Five columns hold down to roughly a laptop.
 *
 * Dropping to three at 1080px put Support on a second row on any window
 * narrower than that. Four link columns plus the brand need the room, so the
 * step down happens later and goes to a shape that divides evenly: brand
 * across the top, then the four columns beneath it.
 */
@media (max-width: 1160px) {
  .footergrid { grid-template-columns: repeat(4, 1fr); }
  .footergrid > :first-child { grid-column: 1 / -1; margin-bottom: 12px; }
}

@media (max-width: 860px) {
  .footergrid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .footergrid { grid-template-columns: 1fr; }
}

/*
 * One catalogue card, shared by courses and mock tests.
 *
 * The theme's `.exam-card` expects an icon above the heading — `h3` carries
 * `margin-top: 16px` for it. A mock-test card has no icon, so that margin
 * became a blank band, and the two catalogues looked like different
 * components. `.catalogue-card` is not defined by the theme at all.
 *
 * This makes both uniform: same padding, same internal rhythm, same hover,
 * and the meta row pinned to the bottom so cards in a row end level however
 * long their titles run.
 */
.catalogue-card {
  display: flex;
  flex-direction: column;
  padding: 22px 24px 20px;
  min-height: 0;
}

.catalogue-card > .catalogue-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 14px;
}

/* No icon above it, so no space reserved for one. */
.catalogue-card h3 {
  margin: 0 0 8px;
  font: 800 17px/1.35 Manrope, system-ui, sans-serif;
  color: var(--ui-text, var(--text));
}

.catalogue-card > p {
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ui-muted, var(--muted));
}

/* Pinned, so a row of cards ends level whatever the title length. */
.catalogue-card .cardmeta { margin-top: auto; }

/* The course art, where a card has one. */
.catalogue-card .course-art { margin: -4px 0 16px; }

.catalogue-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, .18);
}

/*
 * The shared page hero.
 *
 * One band, one heading scale, one rhythm — used by every public page
 * through `PageHero`. The pages previously used four different patterns, so
 * the heading changed size and spacing as a visitor moved between them.
 */
.page-hero {
  padding: 46px 0 34px;
  border-bottom: 1px solid var(--ui-border, var(--line));
}

.page-hero .crumbs { margin-bottom: 16px; }

.page-hero-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.page-hero .kicker { margin: 0 0 10px; }

.page-hero h1 {
  margin: 0;
  font: 800 clamp(28px, 3.6vw, 40px)/1.14 Manrope, system-ui, sans-serif;
  letter-spacing: -.02em;
  color: var(--ui-text, var(--text));
}

.page-hero-lede {
  margin: 14px 0 0;
  max-width: 62ch;
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--ui-muted, var(--muted));
}

.page-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* A search bar or filter row inside the band sits below the heading. */
.page-hero > .container > form,
.page-hero > .container > .searchbar { margin-top: 24px; }

/* The band already provides the top rhythm, so the body starts closer. */
.page-hero + .section,
.page-hero + main.section { padding-top: 40px; }

@media (max-width: 640px) {
  .page-hero { padding: 32px 0 26px; }
  .page-hero-head { flex-direction: column; align-items: flex-start; }
}

/*
 * The registered address.
 *
 * `<address>` is italic by default in every browser, which reads as an aside
 * rather than as the company's actual location — and this element exists
 * precisely so a payment reviewer can find that location.
 */
.site-address {
  font-style: normal;
  line-height: 1.65;
}

/*
 * An address whose lines are marked up as spans rather than broken with <br>.
 *
 * The footer does this already; the contact page now does too, so one address
 * has one structure across the site. The line breaking is the stylesheet's
 * job, which is what lets the footer restyle it without the markup changing.
 */
.site-address-lines span { display: block; }

/*
 * `.footer-contact` outside the footer.
 *
 * The layout is shared — a flex row of links, collapsing to a column on a
 * phone — but the footer's colours are for a dark panel, so on a page they
 * are returned to the body's own text colour.
 */
.contact-links {
  margin-top: 14px;
  font-size: inherit;
}

.contact-links a { color: var(--ui-link, inherit); }
.contact-links a:hover { text-decoration: underline; }
.contact-links a + a::before { background: currentColor; opacity: .3; }

/*
 * The address in the footer's brand column.
 *
 * It sat in the copyright bar — a 10px flex row the theme built for two short
 * strings — where four lines of address read as fine print rather than as the
 * company's location. Here it has room, and each line is its own line because
 * that is what a postal address is.
 */
.footer .site-address {
  display: block;
  margin: 16px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .62);
}

.footer .site-address span { display: block; }

/* The first line carries the building, so it leads. */
.footer .site-address span:first-child { color: rgba(255, 255, 255, .78); }

.footer-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 14px 0 0;
  font-size: 13.5px;
}

.footer-contact a { color: rgba(255, 255, 255, .82); }
.footer-contact a:hover { color: var(--ui-accent, #d9fa72); }

/* Separator between the two, where they sit on one line. */
.footer-contact a + a { position: relative; padding-left: 18px; }
.footer-contact a + a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 12px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, .22);
}

@media (max-width: 520px) {
  .footer-contact { flex-direction: column; gap: 8px; }
  .footer-contact a + a { padding-left: 0; }
  .footer-contact a + a::before { display: none; }
}

/*
 * "How this course is prepared" — the provenance list on a course page.
 *
 * A definition list rather than prose: each line is a separate, checkable
 * claim, and a reviewer scanning for one should not have to read a paragraph
 * to find it.
 */
.course-provenance { margin: 18px 0 0; }

.course-provenance dt {
  font-weight: 700;
  font-size: 15px;
  color: var(--ui-text, var(--text));
  margin-top: 16px;
}

.course-provenance dt:first-child { margin-top: 0; }

.course-provenance dd {
  margin: 6px 0 0;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--ui-muted, var(--muted));
}

/*
 * The content is authored HTML, so it arrives wrapped in <p>.
 *
 * A paragraph's own margin would double the gap under each term and leave a
 * trailing one at the end of the list, which reads as a broken rhythm rather
 * than a deliberate one.
 */
.course-provenance dd > p { margin: 0; }
.course-provenance dd > p + p { margin-top: .6em; }

.course-provenance dd ul,
.course-provenance dd ol { margin: .5em 0 0; padding-left: 1.3em; }

/*
 * A rule between entries, so a long answer does not run into the next term.
 *
 * On the term rather than the description, because the term is what starts a
 * new entry — and `:first-child` keeps it off the top of the list.
 */
.course-provenance dt + dd { margin-bottom: 2px; }

.course-provenance dt:not(:first-child) {
  padding-top: 16px;
  border-top: 1px solid var(--ui-border, var(--line));
}

/* ---- Headings on dark panels, in light mode --------------------------
 *
 * `styles.css` colours every h1–h4 `#111827` under `body[data-theme="light"]`.
 * That is right for headings on the page, and wrong for the ones sitting on a
 * dark navy or gradient panel, which set `color:#fff` on their container and
 * expect their heading to inherit it. Inheritance loses to any matching rule,
 * so those headings went near-black on a dark panel and became unreadable:
 * the sign-in and register promotional heading, and the course detail title
 * on its gradient hero.
 *
 * The theme already carries one such exception, `.auth-visual h1`, which
 * covers a heading level and a class that the React components do not use —
 * so the fix was present in the stylesheet and reaching nothing.
 *
 * Listed explicitly rather than by a blanket `[class*="hero"]`: a panel's
 * heading is white because that panel is dark, and a rule that guesses which
 * panels those are will be wrong the first time someone builds a light one.
 */
body[data-theme="light"] .auth-visual h1,
body[data-theme="light"] .auth-visual h2,
body[data-theme="light"] .auth-hero h1,
body[data-theme="light"] .auth-hero h2,
body[data-theme="light"] .hero-panel h1,
body[data-theme="light"] .hero-panel h2,
body[data-theme="light"] .result-hero h1,
body[data-theme="light"] .result-hero h2 {
  color: #fff;
}

/* ---- The mock catalogue's search row --------------------------------
 *
 * `/quizzes/` builds its search out of `.tabs`, which the theme defines as a
 * wrapping flex row for pill-shaped filter buttons. Nothing there sizes an
 * input, so the field took its intrinsic width and the Search button wrapped
 * onto a second line on a wide desktop — while `/courses/`, which uses
 * `.searchbar`, sat correctly on one.
 *
 * Scoped to a form so the filter pills this class also styles are untouched.
 */
form.tabs {
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
}

form.tabs .input {
  flex: 1 1 auto;
  min-width: 0; /* a flex item will not shrink below its content without this */
}

form.tabs .btn { flex: 0 0 auto; }

/* On a phone the button below the field is the right answer, not a defect. */
@media (max-width: 560px) {
  form.tabs { flex-wrap: wrap; }
  form.tabs .input { flex-basis: 100%; }
}