/* Site styles, layered on top of Pico.
   Pico handles typography, forms and colours; this file adds the few things a
   documentation site needs that a classless framework cannot know about. */

/* ==========================================================================
   Brand

   The palette, taken from the live theme rather than invented, and then handed
   to Pico rather than applied by hand. Pico draws links, buttons, headings,
   focus rings, form fields and cards from its own variables, so setting those
   here once styles every page -- including the ones with no CSS of their own.
   The alternative is restating the brand at each component, which is how a
   stylesheet ends up long and inconsistent at the same time.
   ========================================================================== */

/* The same selector Pico uses for its light theme. A bare :root loses to it --
   Pico's is one class more specific -- and the whole palette silently does
   nothing. */
:root,
:root:not([data-theme="dark"]),
[data-theme="light"] {
  --ep-navy: #1b2a39;
  --ep-teal: #00a990;
  --ep-amber: #feca65;
  --ep-orange: #f78f29;
  --ep-card-shadow: 0.15em 0.15em 0.65em 0 rgba(0, 0, 0, 0.25);
  --ep-code-background: #002240;
  --ep-callout-background: #fcf8e3;
  --ep-callout-border: #f6dca7;
  --ep-language-tag: #55606d;
  --ep-doc-red: #eb4335;

  /* Links, and anything Pico treats as an accent. */
  --pico-primary: var(--ep-orange);
  --pico-primary-hover: #d97710;
  --pico-primary-focus: rgba(247, 143, 41, 0.25);
  --pico-primary-underline: rgba(247, 143, 41, 0.4);

  /* Buttons: amber fill, navy text, on every page. */
  --pico-primary-background: var(--ep-amber);
  --pico-primary-border: var(--ep-amber);
  --pico-primary-inverse: var(--ep-navy);

  /* Headings. */
  --pico-h1-color: var(--ep-navy);
  --pico-h2-color: var(--ep-navy);
  --pico-h3-color: var(--ep-navy);
  --pico-h4-color: var(--ep-navy);
  --pico-h5-color: var(--ep-navy);
  --pico-h6-color: var(--ep-navy);

  --pico-card-box-shadow: var(--ep-card-shadow);
}

/* ==========================================================================
   Page width

   The original lays every page out on 1100px: 790 of column, 70 of gutter and
   240 of aside. Pico's widest container is 1200, which made every page a
   little wider than the one it replaces -- and pictures and code, which fill
   the column, a little wider than they should be.
   ========================================================================== */

@media (min-width: 1280px) {
  .container {
    max-width: 1100px;
  }
}

/* ==========================================================================
   Pico corrections

   Places where Pico's own rule wins on specificity and has to be answered in
   kind. Kept together so the reason survives the next person to read this.
   ========================================================================== */

/* Pico marks the item, not the list: `ul li { list-style: square }`. So
   `list-style: none` on a <ul> is quietly overridden, and every list this file
   lays out grows a bullet it never asked for -- the footer links, the logo
   strip, the pricing columns. Having given a list a class is the signal that
   we lay it out ourselves; the sidebar tree is named by its wrapper instead. */
ul[class] > li,
.sidebar ul > li {
  list-style: none;
}

/* ==========================================================================
   Page chrome

   The header and the title bar are the same on every page but the home page,
   so they are described once here rather than per template.
   ========================================================================== */

/* ---- Site header -------------------------------------------------------- */

header nav .brand {
  --pico-text-decoration: none;
}

.brand img {
  max-height: 2.5rem;
  width: auto;
}

/* Small, spaced capitals, as on the original -- and grey, not the link colour:
   the menu is furniture, and orange on every page would fight the links in the
   text that actually go somewhere new. */
header nav a:not(.brand) {
  --pico-color: var(--pico-muted-color);
  color: var(--pico-muted-color);
  text-decoration: none;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

header nav a:not(.brand):hover,
header nav a[aria-current="page"] {
  color: var(--ep-navy);
}

header nav a[aria-current="page"] {
  border-bottom: 2px solid var(--ep-amber);
}

/* ---- The menu on a narrow screen ----------------------------------------

   Five items in a row need about 700px. Below that the row is a logo and a
   button, and the menu drops underneath when the button is opened.
   ------------------------------------------------------------------------ */

/* Wide enough for the row: no button, and nothing to toggle. */
.nav-toggle {
  display: none;
}

@media (max-width: 767px) {
  header > nav {
    flex-wrap: wrap;
  }

  .nav-toggle {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
  }

  .nav-toggle > summary {
    display: grid;
    place-items: center;
    width: 2.9rem;
    height: 2.6rem;
    border-radius: var(--pico-border-radius);
    background: #444;
    cursor: pointer;
  }

  /* Pico puts a chevron on every summary; this one has three bars instead. */
  .nav-toggle > summary::after {
    display: none;
  }

  /* The middle bar is the element; the other two are its own edges. */
  .bars,
  .bars::before,
  .bars::after {
    display: block;
    width: 1.15rem;
    height: 2px;
    background: #fff;
  }

  .bars {
    position: relative;
  }

  .bars::before,
  .bars::after {
    position: absolute;
    left: 0;
    content: "";
  }

  .bars::before { top: -0.4rem; }
  .bars::after { top: 0.4rem; }

  /* The list takes a row of its own, under both of them. */
  header > nav > .menu {
    display: none;
    order: 3;
    flex-basis: 100%;
    flex-direction: column;
    margin: 0;
    padding: 0;
  }

  .nav-toggle[open] ~ .menu {
    display: flex;
  }

  header > nav > .menu li {
    display: block;
    width: 100%;
    padding: 0;
  }

  header nav .menu a {
    display: block;
    padding: 0.85rem 0.25rem;
    border-top: 1px solid var(--pico-muted-border-color);
    font-size: 0.9rem;
  }

  /* A rule under the last one as well, so the list closes off rather than
     trailing into the page. */
  header > nav > .menu li:last-child a {
    border-bottom: 1px solid var(--pico-muted-border-color);
  }

  /* The rule under the current page belongs beside its neighbours, not across
     a row of its own. */
  header nav .menu a[aria-current="page"] {
    border-bottom: 0;
    color: var(--ep-navy);
    font-weight: bold;
  }
}

/* ---- The page title bar ------------------------------------------------- */

.page-header {
  border-bottom: 1px solid var(--pico-muted-border-color);
  background: var(--pico-background-color);
}

.page-header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}

/* Air under the rule. Without it the first line of the page -- the sidebar
   heading, the byline, the opening paragraph -- sits right on the line, which
   the original never does. It follows only a real title bar, so the pages that
   open with a band of their own are untouched. */
.page-header + * {
  margin-top: 2.5rem;
}

.page-header h1 {
  margin: 0;
  max-width: none;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 400;
}

/* The trail sits to the right of the title, small and spaced, as on the
   original. It is the same markup as before -- only the placement changed. */
.page-header .breadcrumb {
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- skip link */

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 0;
  top: 0;
  z-index: 100;
  padding: 0.5rem 1rem;
  background: var(--pico-background-color);
}

/* -------------------------------------------------------------- code samples */

/* Docs and examples share these: 150 code blocks between them, and the same
   two callout styles. Nothing here is page-specific. */

.code-sample {
  margin: var(--pico-typography-spacing-vertical) 0;
}

/* The old site capped code blocks at 400px and scrolled. Keep that: some of
   these samples are a hundred lines long and would otherwise bury the prose. */
.code-sample pre {
  max-height: 400px;
  margin: 0;
  background: var(--ep-code-background);
  border-radius: var(--pico-border-radius);
}

/* Prism pads the <pre> and Pico pads the <code> inside it, so every block was
   padded twice. Worse, Prism positions the line numbers against the <code>'s
   padding box: with a padding there, every number sat a padding's worth above
   the line it counts. Prism's padding is the one its plugins are measured
   against, so Pico's comes off. */
.code-sample pre > code {
  padding: 0;
}

/* Room for the language tag, which overlays the top-left corner. Without it
   the tag sits on the first line of code. */
div.code-toolbar > pre {
  padding-top: 2.1rem;
}

/* Prism builds the toolbar in JavaScript, so with scripts off there is simply
   no toolbar and the code still reads -- which is the point. */
div.code-toolbar > .toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  top: 0;
  right: 0;
  left: 0;
  opacity: 1;
}

/* The language on the left, the copy button on the right, as on the original.
   The two items are told apart by what they contain: the language plugin emits
   a span, the copy plugin a button. */
div.code-toolbar > .toolbar > .toolbar-item:has(> span) {
  order: -1;
}

div.code-toolbar > .toolbar > .toolbar-item > span {
  display: block;
  padding: 0.2rem 0.85rem;
  border-radius: var(--pico-border-radius) 0 var(--pico-border-radius) 0;
  background: var(--ep-language-tag);
  color: #fff;
  font-size: 0.75rem;
  box-shadow: none;
}

div.code-toolbar > .toolbar > .toolbar-item > button {
  margin: 0.25rem 0.5rem;
  padding: 0.15rem 0.6rem;
  border-radius: var(--pico-border-radius);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 0.75rem;
  box-shadow: none;
}

/* A colour per language, matching the tags the old site used. */
div.code-toolbar:has(.language-protobuf) { --ep-language-tag: #ff5c77; }
div.code-toolbar:has(.language-cpp),
div.code-toolbar:has(.language-c) { --ep-language-tag: #984c93; }
div.code-toolbar:has(.language-bash) { --ep-language-tag: #4a7c59; }
div.code-toolbar:has(.language-python) { --ep-language-tag: #3572a5; }

/* --------------------------------------------------------------- callouts */

/* The "Source code" and "Version" boxes on every example, and the asides in
   the manual. Cream on amber, as on the original. */
aside.note {
  margin: var(--pico-typography-spacing-vertical) 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--ep-callout-border);
  border-radius: var(--pico-border-radius);
  background: var(--ep-callout-background);
  font-size: 0.9rem;
}

aside.note > :first-child { margin-top: 0; }
aside.note > :last-child { margin-bottom: 0; }

.note-title {
  margin: 0 0 0.35rem;
  font-weight: bold;
  color: var(--ep-navy);
}

/* ----------------------------------------------------------------- images */

figure img {
  display: block;
  margin-inline: auto;
  height: auto;
  border-radius: var(--pico-border-radius);
}

/* Long content should not stretch to unreadable line lengths on a wide screen,
   but the header and footer still span the full container.

   Scoped to prose. It used to apply to every list in <main>, which silently
   capped layout lists too -- the customer logo marquee was cut to 70ch and
   wrapped after two tiles with no rule of its own in sight. */
/* The measure. A page that is nothing but a column of text needs one, or the
   lines run the full width of the window and nobody can find the next one. */
main article :is(p, ul, ol, h1, h2, h3, h4, blockquote, table):not([class]) {
  max-width: var(--ep-measure, 70ch);
}

/* A sidebar or an aside has already narrowed the column, and that width is the
   measure. Capping again inside it is what left the pictures and the code
   wider than the words on every example. */
.with-sidebar,
.with-aside {
  --ep-measure: none;
}

/* ------------------------------------------------------------ docs layout */

.with-sidebar {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

/* Pico lays every nav out as a horizontal bar -- "nav,nav ul{display:flex}",
   plus negative margins on the first and last list and a floated ::before on
   each item. That is right for the header and wrong for a tree, so the sidebar
   opts out of all of it. Setting display alone is not enough: the margins pull
   the tree out past its own border. */
.sidebar,
.sidebar ul {
  display: block;
}

.sidebar {
  position: sticky;
  top: 1rem;
  font-size: 0.9rem;
}

.sidebar-title,
.page-aside h2 {
  margin: 0 0 0.5rem;
  max-width: none;
  font-size: 1.35rem;
  color: var(--ep-navy);
}

.sidebar ul,
.page-aside ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

/* Children step in; the original indents each level rather than drawing a
   rule down the side. */
.sidebar li ul {
  padding-left: 1rem;
}

.sidebar ul:first-of-type,
.sidebar ul:last-of-type {
  margin-left: 0;
  margin-right: 0;
}

.sidebar li {
  display: block;
  margin: 0;
}

.sidebar li::before {
  content: none;
}

/* The hairline goes on the link, not the item: an item that has children wraps
   its whole subtree, so a border there would sit under the last grandchild
   instead of under its own label. */
.sidebar a,
.page-aside li a {
  --pico-text-decoration: none;
  display: block;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--pico-muted-border-color);
  color: var(--pico-primary);
}

/* The marker the original puts before every item of the manual tree. The
   aside beside the examples is a plain list, so it does not get one. */
.sidebar a::before {
  content: "\203A";
  margin-right: 0.4rem;
  opacity: 0.7;
}

.sidebar a:hover,
.page-aside li a:hover {
  color: var(--pico-primary-hover);
}

.sidebar a[aria-current="page"] {
  color: var(--ep-navy);
  font-weight: 600;
}

/* One column on a phone: the tree goes above the article rather than beside it. */
@media (max-width: 992px) {
  .with-sidebar {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .sidebar {
    position: static;
  }
}

/* ------------------------------------------------- breadcrumbs, prev/next */

ul.breadcrumb {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  color: var(--pico-muted-color);
}

ul.breadcrumb li {
  display: inline;
}

ul.breadcrumb li + li::before {
  content: "/";
  margin: 0 0.4rem;
  color: var(--pico-muted-border-color);
}

.prev-next {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--pico-muted-border-color);
}

/* ---------------------------------------------------------------- listings

   The examples index and every tag and category archive: one full-width entry
   after another, with an aside beside them. Cards were tried and abandoned --
   eleven pictures of eleven proportions beside eleven teasers of eleven
   lengths never line up, however carefully the grid is set.
   ------------------------------------------------------------------------ */

/* The original's three widths: 790 of column, 70 of gutter, 240 of aside. In
   px because they are a fixed layout, not type -- Pico scales the root font to
   125% on a wide screen, so the same numbers in rem come out a quarter wider
   and the column loses what they gain. */
.with-aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 70px;
  align-items: start;
}

.section-intro {
  margin-bottom: 2.5rem;
}

/* Pico draws every <article> as a card; an entry in a list is not one. */
.entry {
  margin: 0 0 3.5rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.entry h2 {
  margin: 0 0 0.35rem;
  max-width: none;
  font-size: 1.4rem;
}

.entry-icon {
  margin-right: 0.5rem;
  color: var(--ep-doc-red);
  vertical-align: -0.15em;
}

.entry h2 a {
  --pico-text-decoration: none;
  color: var(--ep-navy);
}

.entry h2 a:hover {
  color: var(--pico-primary);
}

.entry-teaser {
  max-width: none;
  margin: 0;
}

.more-link {
  font-weight: bold;
  white-space: nowrap;
}

/* ---- The aside beside a listing ---------------------------------------- */

/* Not sticky, unlike the manual tree beside the docs: this one is most of a
   screen tall and ends in a form, and following the reader down the page with
   it is worse than letting it scroll away. */
.page-aside {
  font-size: 0.9rem;
}

.page-aside section + section {
  margin-top: 2.5rem;
}

.page-aside .subscribe input[type="email"] {
  margin-bottom: 0.75rem;
}

@media (max-width: 60rem) {
  .with-aside {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

}

/* One chip, in the footer of each example, listing what it is filed under. */
.tag {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 1rem;
  background: none;
  color: var(--pico-muted-color);
  font-size: 0.75rem;
  text-decoration: none;
}

a.tag:hover {
  border-color: var(--pico-primary);
  color: var(--pico-primary);
}

/* ---- Site footer -------------------------------------------------------- */

.footer-columns {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.site-footer h2 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

ul.plain {
  list-style: none;
  padding-left: 0;
}

/* The registration details. <small> is inline, so without this it runs on from
   the copyright line instead of sitting under it. Muted: it is there to be
   found, not read. */
.legal-id {
  display: block;
  margin-top: 0.35rem;
  color: var(--pico-muted-color);
}

/* ---- Example metadata --------------------------------------------------- */

.byline {
  max-width: none;
  margin: 0 0 1rem;
  color: var(--pico-muted-color);
  font-size: 0.9rem;
}

/* "Bart Hertog / Examples, Project Setup". Drawn here rather than written into
   the markup, where each separator would need a space either side of it. */
.byline .byline-author + a::before {
  content: "/";
  margin: 0 0.45rem;
  color: var(--pico-muted-color);
}

/* Muted, so two categories read as two links rather than one long one. */
.byline a + a::before {
  content: ", ";
  color: var(--pico-muted-color);
}

/* The framed picture the original puts at the top of every example, and beside
   every entry in the listing: a thin border with a little white around it.

   Capped in height, which the original does not do. The featured images are
   whatever shape they were shot in -- one is 865 by 1040 -- and left alone,
   one of them fills a screen on its own and the list of examples stops reading
   as a list. */
figure.lead,
.entry-thumb {
  display: block;
  margin: 0 0 2rem;
  padding: 6px;
  border: 1px solid var(--pico-muted-border-color);
  background: #fff;
}

figure.lead img,
.entry-thumb img {
  display: block;
  width: 100%;
  max-height: 26rem;
  object-fit: cover;
}

/* In the listing the picture is followed by the text of the same entry, not by
   the whole article, so it sits a little closer. */
.entry-thumb {
  margin-bottom: 1.25rem;
}

footer.terms {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ---- Home --------------------------------------------------------------- */

/* ---- Pricing tiers ------------------------------------------------------

   Five columns sharing their borders, top-aligned so each is only as tall as
   its own list -- the original staggers rather than padding them level. The
   most popular one steps up out of the row.
   ------------------------------------------------------------------------ */

.currency-row {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
  margin-bottom: 1rem;
}

.currency-picker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.currency-picker label {
  color: var(--ep-navy);
  font-size: 0.8rem;
}

.currency-picker select {
  width: auto;
  margin: 0;
  padding: 0.2rem 2rem 0.2rem 0.6rem;
  font-size: 0.8rem;
}

.vat-note {
  margin: 0;
  max-width: none;
  color: var(--ep-navy);
  font-size: 0.75rem;
}

.pricing-table {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: start;
}

.plan {
  margin: 0;
  padding: 0;
  border: 1px solid rgba(27, 42, 57, 0.12);
  border-radius: 0;
  box-shadow: none;
  background: #fcfcfc;
  text-align: center;
}

/* Neighbours share one hairline rather than drawing two. */
.plan + .plan {
  margin-left: -1px;
}

/* The featured column stands proud of the row and casts the shadow, so it has
   to win the stacking order against the neighbour drawn after it. The lift is
   its extra header line plus a little, which leaves the row of prices level
   across all five columns -- as on the original. */
.plan.featured {
  position: relative;
  z-index: 1;
  margin-top: -1.9rem;
  box-shadow: var(--ep-card-shadow);
}

.plan > header {
  margin: 0;
  padding: 1.1rem 0.6rem;
  border-bottom: 1px solid rgba(27, 42, 57, 0.12);
  border-radius: 0;
  background: none;
}

.plan h2 {
  margin: 0;
  max-width: none;
  font-size: clamp(1.1rem, 1.8vw, 1.6rem);
}

.plan-sub {
  margin: 0.15rem 0 0;
  max-width: none;
  font-size: 0.68rem;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.plan.featured > header {
  background: var(--ep-orange);
}

.plan.featured :is(h2, .plan-sub) {
  color: #fff;
}

.plan-price {
  margin: 0;
  padding: 0.7rem 0.4rem;
  border-bottom: 1px solid rgba(27, 42, 57, 0.12);
  color: var(--ep-navy);
  font-size: clamp(1.4rem, 2.6vw, 2.4rem);
  font-weight: bold;
  line-height: 1.15;
}

.plan-features {
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan-features li {
  margin: 0;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid rgba(27, 42, 57, 0.12);
  color: var(--ep-navy);
  font-size: 0.72rem;
  line-height: 1.55;
  text-transform: uppercase;
}

/* Tick, cross and plus, as on the original. The word that goes with a cross or
   a plus is in the markup, for readers who get no picture at all. */
.plan-features li::before {
  content: "\2714";
  margin-right: 0.3rem;
}

.plan-features .mark-no::before { content: "\2715"; }
.plan-features .mark-extra::before { content: "\002B"; }

.plan-action {
  margin: 0;
  padding: 1.2rem 0.6rem;
}

.plan-action a {
  padding: 0.5rem 1.1rem;
  font-size: 0.85rem;
  font-weight: bold;
}

.faq-jump {
  margin: 2.5rem 0 0;
  font-weight: bold;
}

/* Below the width that fits five readable columns, they become cards again. */
@media (max-width: 60rem) {
  .pricing-table {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.5rem;
  }

  .plan + .plan { margin-left: 0; }
  .plan.featured { margin-top: 0; }
}

/* ---- FAQ ----------------------------------------------------------------
   One boxed row per question, closed until asked for.
   ------------------------------------------------------------------------ */

.faq details {
  margin: 0 0 0.75rem;
  padding: 0.7rem 1rem;
  border: 1px solid rgba(27, 42, 57, 0.12);
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.faq summary {
  color: var(--ep-navy);
  font-size: 0.95rem;
}

/* Pico puts its chevron at the far right of the row; the original marks the
   question at the start, where the eye already is. Same icon, same rotation. */
.faq summary::after {
  float: left;
  margin-inline: 0 0.5rem;
}

.faq details p {
  max-width: none;
  margin-bottom: 0.4rem;
  font-size: 0.95rem;
}

.advantages-action {
  margin-top: 2.5rem;
}

/* ---- Forms -------------------------------------------------------------- */

form .error {
  color: var(--pico-del-color);
}

form:not(.subscribe) {
  max-width: 34rem;
}

.subscribe label {
  font-size: 0.875rem;
}


/* ==========================================================================
   The home page

   Rebuilt to match the layout WordPress serves: full-width bands alternating
   white and teal, each with a centred heading, and white cards floating on the
   teal ones. The palette is taken from the live theme rather than invented:

     navy   rgb(27,42,57)   headings
     teal   #00a990         the alternating band background
     amber  #feca65         every button
     orange #f78f29         links inside body copy
   ========================================================================== */

/* The home page is bands, not a document, so it steps outside the container
   and out of the article card the other pages sit in. */
/* The page wrapper is an <article> because that is what it is, but Pico draws
   every <article> as a card. A document page is not a card -- the original is
   flat on white -- so the card is switched off for the wrapper only. Cards
   nested inside it (the pricing tiers, the two source-code panels) keep it. */
.container > article,
.with-sidebar > article,
.bands > article {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}

.band {
  padding: 4rem 0;
}

.band > .inner {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.band.teal {
  background: var(--ep-teal);
}

.band > .inner > :is(h1, h2) {
  margin: 0 0 0.5rem;
  max-width: none;
  color: var(--ep-navy);
  text-align: center;
  font-size: clamp(2rem, 4vw, 2.75rem);
}

/* The line under most of the headings: "Try the code today!" and friends. */
.band-lead {
  margin: 0 0 2.5rem;
  color: var(--ep-navy);
  text-align: center;
  font-size: 1.4rem;
  max-width: none;
}

.band.teal :is(p, li, h3) {
  color: var(--ep-navy);
}

/* Fill and colour come from the brand layer; only the weight and the roomier
   padding are particular to this page. */
.band :is([role="button"], button) {
  font-weight: bold;
  padding: 0.6rem 1.4rem;
}

/* The white cards that float on the teal bands, and on white ones too. */
.panel {
  background: #fff;
  padding: 3rem;
  box-shadow: var(--ep-card-shadow);
  border-radius: 2px;
}

.panel > :first-child { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }

.band .panel p {
  max-width: none;
  text-align: justify;
}

.centre { text-align: center; }

/* ---- Hero --------------------------------------------------------------- */

.hero h1 {
  margin: 0 0 2.5rem;
  color: var(--ep-navy);
  text-align: center;
  font-size: clamp(2.5rem, 6vw, 4rem);
}

.hero-split {
  display: grid;
  gap: 3rem;
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}

.hero-split p {
  max-width: none;
}

.hero-split p:not([class]) {
  text-align: justify;
}

.hero-version {
  font-style: italic;
  text-align: center;
}

.hero-split img {
  width: 100%;
  height: auto;
}

/* ---- Why Embedded Proto: two code shots with an arrow between ----------- */

.code-pair {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  grid-template-columns: 1fr auto 1fr;
  margin-top: 2.5rem;
}

.code-pair img {
  width: 100%;
  height: auto;
}

.code-pair .arrow {
  color: var(--ep-amber);
  flex: 0 0 auto;
}

@media (max-width: 768px) {
  .code-pair {
    grid-template-columns: 1fr;
  }
  .code-pair .arrow {
    transform: rotate(90deg);
    margin: 0 auto;
  }
}

/* ---- Example cards: the title sits on the image ------------------------- */

.tiles {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin: 2.5rem 0;
}

.tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  text-decoration: none;
  background: var(--ep-navy);
}

.tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The scrim, not the image, carries the contrast: several of these photographs
   are pale, and amber text on a faded pale photograph cannot be read. */
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(27, 42, 57, 0.6), rgba(27, 42, 57, 0.85));
}

.tile:hover::after {
  background: linear-gradient(rgba(27, 42, 57, 0.45), rgba(27, 42, 57, 0.7));
}

/* Above the scrim. Both are positioned, and without a z-index the scrim -- a
   later sibling in paint order -- covers them. */
.tile-date,
.tile-title {
  position: relative;
  z-index: 1;
  color: #fff;
}

.tile-date {
  display: block;
  padding: 1.25rem;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tile-title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100% - 4rem);
  padding: 0 1.25rem;
  margin: 0;
  text-align: center;
  font-size: 1.25rem;
  color: var(--ep-amber);
}

/* ---- Testimonials ------------------------------------------------------- */

.quotes {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.quote {
  background: #fff;
  padding: 2rem;
  margin: 0;
  box-shadow: var(--ep-card-shadow);
  border-radius: 2px;
}

.quote img {
  display: block;
  width: 6rem;
  height: 6rem;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  object-fit: cover;
}

.quote blockquote {
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
  font-style: italic;
  font-size: 0.95rem;
}

.quote blockquote p {
  max-width: none;
  font-style: italic;
}

.quote figcaption {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ep-navy);
}

/* ---- The customer logos ------------------------------------------------ */

/* A marquee, as on the original: the width of the section's content, clipped
   at both ends rather than scrolled, and never a scrollbar. */
.logo-marquee {
  overflow: hidden;
  margin-top: 2rem;
}

.logo-track {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: logo-scroll 45s linear infinite;
}

.logo-marquee:hover .logo-track {
  animation-play-state: paused;
}

/* The list holds the ten logos twice, so half its width is exactly one lap.
   The spacing is a margin on each tile rather than a flex gap: a gap would add
   an eleventh space that is not part of either half, and the loop would jump
   by that much every lap. */
@keyframes logo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.logo-track li {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 314px;
  height: 98px;
  margin-right: 24px;
  padding: 14px 28px;
  background: #009e85;
  border-radius: 6px;
  overflow: hidden;
}

.logo-track img {
  /* min-width on a flex item defaults to auto, which for an image means its
     intrinsic width -- so max-width alone does not stop a wide logo pushing
     out of its tile. This is what let Fancom and Microchip escape. */
  min-width: 0;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Motion that cannot be stopped is a problem for some readers. Standing still,
   the logos wrap onto as many centred rows as they need -- no scrollbar, and
   the second copy would only repeat itself. */
@media (prefers-reduced-motion: reduce) {
  .logo-track {
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    animation: none;
  }

  .logo-track li {
    margin-right: 0;
  }

  .logo-track .repeat {
    display: none;
  }
}

/* ---- Media -------------------------------------------------------------- */

.media-panel {
  display: grid;
  gap: 2rem;
  align-items: center;
  grid-template-columns: 14rem 1fr 12rem;
}

.media-panel img { width: 100%; height: auto; }

.media-panel .portrait {
  border-radius: 50%;
  aspect-ratio: 1;
  object-fit: cover;
}

.band .media-panel p {
  text-align: left;
  font-size: 0.95rem;
}

@media (max-width: 768px) {
  .media-panel { grid-template-columns: 1fr; justify-items: center; }
  .media-panel .portrait { max-width: 12rem; }
}

/* ---- The newsletter block ---------------------------------------------- */

.updates {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
}

.updates p { max-width: none; }

.updates input[type="email"] { margin-bottom: 1rem; }

/* Pico stretches a button to its container; the original is a small pill. */
.updates button {
  width: auto;
  padding: 0.6rem 1.6rem;
}

.updates label:has(input[type="checkbox"]) {
  display: block;
  margin-bottom: 1rem;
  font-size: 0.8rem;
  text-align: left;
}

.updates .mailbox {
  display: block;
  margin: 0 auto 1.5rem;
  color: var(--ep-amber);
}

/* ---- Source code: two cards, buttons aligned at the foot ---------------- */

.two-up {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}

.two-up .panel {
  display: flex;
  flex-direction: column;
  padding: 2rem;
}

.two-up .panel h3 {
  margin-top: 0;
  text-align: center;
  color: var(--ep-navy);
}

.two-up .panel > .grow { flex-grow: 1; }

.two-up .panel > .actions { text-align: center; }

/* A band used as a page header, on /advantages/. The title bar sits inside it
   rather than above it, as on the original. */
.page-hero h1 {
  margin: 0 0 0.75rem;
  color: var(--ep-navy);
  text-align: center;
  font-size: clamp(2rem, 4vw, 2.75rem);
}

/* Centred under the title and held to about half the band, as on the original.
   Left alone it runs the full 1100 and reads as a paragraph rather than as the
   line that introduces the page. */
.page-hero p {
  max-width: 44rem;
  margin: 0 auto;
  color: var(--ep-navy);
  font-size: 0.9rem;
  text-align: center;
}

/* ---- Advantages: icons down a dotted line ------------------------------- */

.advantage-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 46rem;
}

.advantage {
  position: relative;
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1.25rem;
  padding-bottom: 1.75rem;
}

/* The dotted connector between one icon and the next. */
.advantage:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: 3rem;
  bottom: 0;
  border-left: 2px dotted var(--ep-teal);
}

.advantage .icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  background: var(--ep-teal);
  color: #fff;
  border-radius: 6px;
}

.advantage h3 {
  margin: 0.35rem 0 0.25rem;
  font-size: 1.1rem;
  color: var(--ep-navy);
}

.advantage p {
  margin: 0;
  font-size: 0.95rem;
  max-width: none;
}


/* A label only a screen reader needs: the field has a placeholder, and a
   placeholder is not a label. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}