/*
 * The few pieces the product needs that the theme does not provide.
 *
 * Deliberately short. The theme is a complete design system, and every rule
 * added here is one that has to be maintained against its next update — and
 * one more chance for our markup to drift out of step with its CSS. So this
 * holds only what has no equivalent in the theme: the language switcher, the
 * name shown when no logo has been uploaded, flash messages, and the blog's
 * article page.
 *
 * Colours read the theme's own custom properties wherever it has one, so a
 * brand change reaches these too.
 */

/* --- the only literal colours in this file ------------------------------
 *
 * "This failed" and "this worked" are conventions the reader already knows,
 * not brand decisions, and making them configurable invites an operator to
 * set an error colour their customers read as success.
 *
 * Kept in one block so that any other hex value below is a mistake, and so a
 * check can say so.
 */
:root {
  --state-error: #c0392b;
  --state-success: #1e8449;
}

/* --- the uploaded logo, in the header, the footer and the mobile menu ----
 *
 * A box, not a size. The operator sets how much room the logo gets in
 * Frontend Settings and the mark is fitted inside it, keeping its own
 * proportions — so a square logo and a wide wordmark both look right at the
 * same setting, and neither is stretched to fill a shape it was not drawn in.
 *
 * `height: auto` with both maxima is what does the fitting: the browser scales
 * whichever dimension hits its limit first. `object-fit` is there for the case
 * where the theme's own CSS forces a height on the image anyway.
 */

.site-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: var(--site-logo-w, 160px);
  max-height: var(--site-logo-h, 70px);
  object-fit: contain;
}

/* --- the product's name, when there is no logo -------------------------- */

.logo-text {
  display: block;
  max-width: 16rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--font-main, inherit);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: currentColor;
}

/* --- language switcher --------------------------------------------------
 *
 * The theme has no equivalent, so this borrows the shape of its own header
 * button: a pill, opening a small panel on hover or keyboard focus.
 */

.header-lang {
  position: relative;
}

.header-lang__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 100px;
  color: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.header-lang__toggle:hover {
  border-color: rgba(255, 255, 255, 0.5);
}

.header-lang__menu {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 0.5rem);
  z-index: 80;
  min-width: 10rem;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: #fff;
  border-radius: 0.65rem;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
  /* Hidden with opacity rather than display so it can transition, and so a
     keyboard user reaching it with Tab opens it through :focus-within. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.35rem);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.header-lang:hover .header-lang__menu,
.header-lang:focus-within .header-lang__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.header-lang__menu li,
.header-lang__menu form {
  margin: 0;
}
.header-lang__menu button {
  display: block;
  width: 100%;
  padding: 0.5rem 0.7rem;
  background: none;
  border: 0;
  border-radius: 0.45rem;
  color: var(--color-title, #111);
  font-size: 0.92rem;
  text-align: start;
  cursor: pointer;
}
.header-lang__menu button:hover,
.header-lang__menu button.is-active {
  background: rgba(0, 0, 0, 0.06);
}

/* --- mobile menu -------------------------------------------------------- */

.canvas-bottom__link {
  display: block;
  margin-top: 0.85rem;
  text-align: center;
  font-weight: 600;
}

/* --- flash messages ----------------------------------------------------- */

.site-messages {
  padding-top: 6.5rem;
}
.site-message {
  padding: 0.9rem 1.2rem;
  margin-bottom: 0.75rem;
  border-radius: 0.7rem;
  border-inline-start: 3px solid var(--state-success);
  background: rgba(30, 132, 73, 0.08);
}
.site-message--error {
  border-inline-start-color: var(--state-error);
  background: rgba(192, 57, 43, 0.08);
}

/* --- the contact form's honeypot ----------------------------------------
 *
 * Off-screen rather than display:none — some bots skip anything hidden, and
 * this only works if they fill it in.
 */
.honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- blog article ------------------------------------------------------- */

.post__header {
  padding-block: clamp(6rem, 10vw, 9rem) 1.5rem;
}
.post__cover {
  width: 100%;
  border-radius: 1rem;
  margin-bottom: 2rem;
}
.post__meta {
  opacity: 0.7;
}

.prose {
  line-height: 1.8;
}
.prose h2,
.prose h3 {
  margin-top: 2.25rem;
  margin-bottom: 0.75rem;
}
.prose p,
.prose ul,
.prose ol {
  margin-bottom: 1.15rem;
}
.prose img {
  max-width: 100%;
  height: auto;
  border-radius: 0.75rem;
}

/* --- blog listing and auth pages ----------------------------------------
 *
 * Both reuse the theme's own components, so these only cover the spacing
 * under the fixed header, which the theme handles per-page with a banner
 * these pages do not have.
 */

.page-banner {
  padding-block: clamp(7rem, 12vw, 10rem) clamp(2rem, 4vw, 3rem);
}
.auth-section {
  padding-block: clamp(7rem, 12vw, 10rem) clamp(3rem, 6vw, 5rem);
}
.auth-card {
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.auth-card__header {
  margin-bottom: 1.75rem;
}
.auth-card__header h1 {
  margin: 0 0 0.5rem;
}
.auth-card__aside {
  margin: 1.25rem 0 0;
  font-size: 0.9rem;
  opacity: 0.75;
}
.auth-card .field {
  margin-bottom: 1.1rem;
}
.auth-card label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
  font-weight: 500;
}
.auth-card label .required {
  color: var(--state-error);
}
.auth-card input,
.auth-card select,
.auth-card textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.05);
  color: inherit;
  font: inherit;
}
.auth-card input:focus,
.auth-card select:focus,
.auth-card textarea:focus {
  outline: 0;
  border-color: rgba(255, 255, 255, 0.4);
}
.auth-card .field__help {
  margin-top: 0.35rem;
  font-size: 0.82rem;
  opacity: 0.65;
}
.auth-card .field__help ul {
  margin: 0.25rem 0 0;
  padding-inline-start: 1.1rem;
}
.auth-card .field__error {
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: var(--state-error);
}
.auth-switch {
  margin: 1.5rem 0 0;
  text-align: center;
  opacity: 0.8;
}

/* --- blog listing ------------------------------------------------------- */

.post-grid-static {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.75rem;
}
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2.5rem;
}
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 3rem;
}

/* "Continue with …", above the sign-in form.

   Deliberately quiet: these are alternatives to the form below, not the
   product being sold. Full width and stacked, because a row of them wraps
   badly the moment an operator switches on a third. */
.auth-social {
  display: grid;
  gap: .5rem;
  margin-bottom: 1rem;
}

/* Plain buttons carrying the provider's own mark.
 *
 * They were each filled with their brand colour, which stacked two or three
 * adverts on top of a sign-up form and made the form the quietest thing on
 * the page. The recognition lives in the logo; the button around it should
 * get out of the way. */
.auth-social__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding: .62rem 1rem;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 999px;
  background: #fff;
  color: var(--color-title, #111);
  font-size: .94rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}

.auth-social__btn:hover,
.auth-social__btn:focus-visible {
  border-color: rgba(0, 0, 0, 0.34);
  background: rgba(0, 0, 0, 0.02);
  color: var(--color-title, #111);
}

/* Fixed so the row of buttons has its text on one line whatever the marks
   are — an SVG left to size itself off the font makes each button's label
   start in a slightly different place. */
.auth-social__logo {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
}

.auth-social__logo--font {
  display: grid;
  place-items: center;
  font-size: 1.15rem;
}

/* A rule either side of the word, drawn with borders on the pseudo-elements
   so it stays centred whatever the word translates to. */
.auth-social__or {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: .35rem;
  color: var(--color-text, rgba(0, 0, 0, 0.55));
  font-size: .78rem;
}

.auth-social__or::before,
.auth-social__or::after {
  content: "";
  flex: 1 1 0;
  border-top: 1px solid rgba(0, 0, 0, .12);
}

/* --- sign-in and registration -------------------------------------------
 *
 * A split screen: the form on one side, a short pitch on the other. It was a
 * bare form on an empty page, which is a poor thing to show somebody at the
 * moment they are deciding whether to sign up.
 *
 * Colours read the theme's custom properties, as everything else in this file
 * does, so a brand change reaches these too.
 */

/* Exactly the window, not at least it.
 *
 * `min-height` let the two columns' padding push the page a little past the
 * viewport, which put a scrollbar on it — and scrolling revealed a band of
 * empty panel below the cards, which reads as something having failed to
 * load. Each column scrolls inside itself if its own content outgrows the
 * window; the page itself does not. */
.auth-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* Centred by `margin: auto` on the child rather than `align-items: center`.
 *
 * A flex item centred that way is pushed *above* the top of its scrollable
 * box once the content is taller than the box, and there is no way to scroll
 * back up to it — which is why the product's name was sliced in half on the
 * sign-in page, the taller of the two. `margin: auto` centres while there is
 * room and gives way when there is not. */
.auth-split__form {
  display: flex;
  padding: 1.75rem 1.5rem;
  overflow-y: auto;
}

.auth-split__inner { margin: auto; }

/* The form column is centred but the form itself is not stretched: a sign-in
   field the width of half a monitor is unpleasant to aim at. */
.auth-split__inner {
  width: 100%;
  max-width: 23rem;
  /* `auto` on all four sides, so it also holds its own padding away from the
     top when it is taller than the column. */
  margin: auto;
}

.auth-split__header {
  margin-bottom: 1.15rem;
  text-align: center;
}

/* "Create account" broke across two lines at 2rem in a 23rem column and read
   as two headings. Sized to fit the words it has to hold, and centred with
   the mark above it. */
/* `!important` to answer the theme's own: styles.css sizes every h1 at
   clamp(48px, 4.17vw, 60px) !important, which is why "Create account" was
   arriving at 48px and breaking across two lines in a 23rem column. */
.auth-split__header h1 {
  margin: 0 0 .4rem;
  font-size: 1.75rem !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.auth-split__header p {
  margin: 0;
  font-size: .92rem;
  color: var(--color-text, rgba(0, 0, 0, 0.55));
}

/* -- the product's mark above the form ------------------------------------ */

.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  margin-bottom: 1.1rem;
  color: inherit;
  font-size: 1.15rem;
  font-weight: 700;
  text-decoration: none;
}

.auth-brand img { height: 2.4rem; width: auto; }

.auth-brand__mark {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: .7rem;
  background: var(--color-primary, var(--brand));
  color: #fff;
  font-size: 1.1rem;
}

/* -- the form itself ------------------------------------------------------ */

.auth-form .field { margin-bottom: .8rem; }

.auth-form .field label {
  display: block;
  margin-bottom: .35rem;
  font-size: .85rem;
  font-weight: 600;
}

.auth-form .field input {
  width: 100%;
  padding: .7rem .9rem;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: .55rem;
  background: #fff;
  font-size: .95rem;
}

.auth-form .field input:focus {
  outline: 0;
  border-color: var(--color-primary, var(--brand));
}

.auth-form__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: -.25rem 0 1.1rem;
  font-size: .84rem;
}

.auth-check {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  cursor: pointer;
}

.auth-submit {
  width: 100%;
  padding: .78rem 1rem;
  border: 0;
  border-radius: .55rem;
  background: var(--color-title, #111);
  color: #fff;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
}

.auth-submit:hover { opacity: .9; }

/* The way to the other page. It was set in the same muted grey as help text,
   which made the one link somebody without an account needs the faintest
   thing on the screen. The sentence stays quiet; the link does not. */
.auth-switch {
  margin-top: 1.1rem;
  font-size: .9rem;
  text-align: center;
  color: var(--color-text, rgba(0, 0, 0, 0.65));
}

.auth-switch a {
  color: var(--color-title, #111);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .2em;
}

.auth-switch a:hover { color: var(--color-primary, var(--brand)); }

/* -- the panel beside it -------------------------------------------------- */

/* Top-aligned, not centred. Centring left a band of empty panel above the
   name and another below the cards, which read as the page having failed to
   load something. It scrolls if the content is taller than the window rather
   than being squeezed. */
.auth-split__panel {
  display: flex;
  align-items: flex-start;
  padding: 3rem 2.5rem;
  overflow-y: auto;
  background: var(--color-title, #111);
  color: #fff;
}

.auth-split__panel-inner {
  width: 100%;
  max-width: 30rem;
  margin: 0 auto;
}

.auth-panel__brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 2rem;
  font-size: 1.15rem;
  font-weight: 700;
}

/* Centred over the panel it heads, rather than tucked into its corner. Flex
   needs `justify-content` for that; `text-align` on an inline-flex box moves
   nothing, which is the trap here. */
.auth-panel__brand--centred {
  display: flex;
  justify-content: center;
  text-align: center;
  margin-bottom: 1.75rem;
}

.auth-panel__brand img { height: 2.4rem; width: auto; }


/* Same reason: the theme sizes h2 at clamp(32px, 3.47vw, 50px) !important. */
.auth-split__panel h2 {
  margin: 0 0 .9rem;
  font-size: 2rem !important;
  line-height: 1.2 !important;
  color: #fff;
}

.auth-split__panel p {
  margin: 0 0 1.5rem;
  font-size: .95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}

.auth-panel__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.auth-panel__card {
  padding: 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: .8rem;
  background: rgba(255, 255, 255, 0.04);
}

.auth-panel__tick {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  margin-bottom: .7rem;
  border-radius: .5rem;
  background: rgba(255, 255, 255, 0.08);
  font-size: .9rem;
}

.auth-panel__card strong {
  display: block;
  font-size: .92rem;
}

.auth-panel__card small {
  display: block;
  margin-top: .2rem;
  font-size: .78rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.6);
}

/* Hidden rather than stacked below the form. Somebody who came to sign in on
   a phone should see the form, not scroll past a pitch to reach it. */
@media (max-width: 991.98px) {
  .auth-split {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .auth-split__panel { display: none; }
  .auth-split__form { overflow: visible; }

  /* A long heading has a narrow column to fit into here, so it is allowed to
     wrap rather than run off the side. */
  .auth-split__header h1 { white-space: normal; }
}

/* --- the maintenance notice --------------------------------------------
 *
 * Its own page rather than the site base: the header offers a menu to pages
 * that are not being served. The colours live here rather than in a style tag
 * on the template, which is this file's rule and one that page broke in three
 * places before the suite said so.
 */
.maintenance {
  display: grid;
  place-items: center;
  min-height: 100vh;
  margin: 0;
  padding: 2rem 1.5rem;
  text-align: center;
}

.maintenance__box { max-width: 30rem; }

.maintenance__mark {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 1.5rem;
  border-radius: 1rem;
  background: var(--color-primary, var(--brand));
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
}

.maintenance__mark img {
  max-width: 100%;
  max-height: 100%;
  border-radius: inherit;
}

.maintenance__title {
  margin: 0 0 .6rem;
  font-size: 1.6rem !important;
  line-height: 1.25 !important;
}

.maintenance p {
  margin: 0;
  color: var(--color-text, rgba(0, 0, 0, 0.6));
}

/* The operator's own sentence, with its line breaks kept — they usually write
   a time on its own line. */
.maintenance__note {
  margin-top: 1rem !important;
  white-space: pre-line;
}