/* Tessera — WooCommerce notices (error / info / message), site-wide.
 *
 * WHAT THIS REPLACES
 *
 * WooCommerce's own look: a grey slab with a 3px coloured bar across the top and
 * an icon-font glyph hung in the left padding. The info bar and glyph are BLUE
 * (#1e85be), which Tessera does not use anywhere, and on an event page the notice
 * wrapper sits straight after </header> with no container, so the slab ran the
 * full width of the viewport with its text against the left edge of the screen.
 *
 * THE LOOK IS THE PICKER'S, NOT A NEW ONE
 *
 * Same geometry and the same warm greys as assets/css/tessera-event-picker.css,
 * which is the approved storefront look: a flat box, a single hairline, 4px
 * corners, no shadow, no icon. The error colours are that file's --tt-error and
 * --tt-error-wash exactly, so the card's own validation box and a page-level
 * error are visibly the same thing. If those tokens change there, change them
 * here.
 *
 * SPECIFICITY
 *
 * WooCommerce's rules are one class, (0,1,0). Every rule here leads with `body`,
 * (0,1,1), so it wins whichever stylesheet prints first and no !important is
 * needed. The button rules lead with `body` and name `a.button`, because
 * WooCommerce's is `.woocommerce a.button`, (0,2,1).
 *
 * The font is inherited on purpose: a notice belongs to the page it appears on,
 * and Instrument Sans is only loaded where the picker is.
 */

body .woocommerce-error,
body .woocommerce-info,
body .woocommerce-message {
  margin: 0 0 16px;
  padding: 12px 16px;
  background: #f6f5f4;
  border: 1px solid #e2ddd9;
  border-radius: 4px;
  box-shadow: none;
  color: #2f2f32;
  font-size: .9375rem;
  line-height: 1.5;
  list-style: none;
}

/* WooCommerce gives the first alert tabindex="-1" and focuses it on page load,
 * so a screen reader announces it. That is worth keeping. The side effect is the
 * browser's focus ring drawn round the whole box — blue in most browsers — on
 * something that is not a control and that no keyboard user can tab to. The
 * focus, and the announcement, are untouched; only the ring goes. Links and
 * buttons inside keep theirs. */
body .woocommerce-error:focus,
body .woocommerce-info:focus,
body .woocommerce-message:focus {
  outline: none;
}

/* The glyph. ::after stays: it is WooCommerce's clearfix for the floated button. */
body .woocommerce-error::before,
body .woocommerce-info::before,
body .woocommerce-message::before {
  content: none;
}

body .woocommerce-error {
  background: #fbe9e4;
  border-color: #b3341c;
  color: #b3341c;
}

body .woocommerce-message {
  background: #eef5ef;
  border-color: #b9d3be;
  color: #24583a;
}

/* THE ONLY !important IN THIS FILE, AND WHY.
 *
 * WPCode snippet 13810 on the server ("Woocommerce Cart Styles", July 2025, not
 * in git) prints, site-wide and with !important, a white background, ink text
 * and an orange border-top-color on `.woocommerce-message` and `.cart-empty`.
 * Specificity cannot beat !important, so without these six declarations a
 * success message on production is a white box with three green hairlines and
 * an orange one, and "Your cart is currently empty" is a different grey from
 * every other info notice. When that snippet is retired, delete this block. */
body .woocommerce-message {
  background-color: #eef5ef !important;
  border-top-color: #b9d3be !important;
  color: #24583a !important;
}

body .cart-empty.woocommerce-info {
  background-color: #f6f5f4 !important;
  border-top-color: #e2ddd9 !important;
  color: #2f2f32 !important;
}

/* An error notice is a list; two lines in one box need air between them. */
body .woocommerce-error li,
body .woocommerce-info li,
body .woocommerce-message li {
  margin: 0;
  padding: 0;
}

body .woocommerce-error li + li,
body .woocommerce-info li + li,
body .woocommerce-message li + li {
  margin-top: 6px;
}

/* ---- Links inside a notice ----
 *
 * THE SHUDDER. The Elementor kit sets every link on the site to its "secondary"
 * typography, 20px, and every link ON HOVER to its "text" typography, 16px:
 *
 *   .elementor-kit-86 a       { font-size: 20px }   (0,1,1)
 *   .elementor-kit-86 a:hover { font-size: 16px }   (0,2,1)
 *
 * So a link is a fifth bigger than the sentence it sits in, and shrinks by 4px
 * under the cursor. At the link's right-hand edge that shrink moves the edge out
 * from under the pointer, the hover ends, the link grows back under the pointer,
 * the hover starts again — many times a second. "Have a coupon? Click here to
 * enter your code" on checkout is where it was reported, because that link is
 * long enough for 4px a character to add up.
 *
 * The cure is that the link's box must be the same size in every state. `font:
 * inherit` makes it the notice's own size, and it is declared on the hover,
 * focus and active selectors as well as the resting one ON PURPOSE: the kit's
 * hover rule (0,2,1) out-specifies a resting rule here (0,1,2), so a reset that
 * only names the resting state is overruled at exactly the moment it matters.
 * Hover changes colour and underline only — neither moves an edge. */
body .woocommerce-error a,
body .woocommerce-info a,
body .woocommerce-message a,
body .woocommerce-error a:hover,
body .woocommerce-info a:hover,
body .woocommerce-message a:hover,
body .woocommerce-error a:focus,
body .woocommerce-info a:focus,
body .woocommerce-message a:focus,
body .woocommerce-error a:active,
body .woocommerce-info a:active,
body .woocommerce-message a:active {
  font: inherit;
  font-weight: 600;
  color: #f26641;
  text-decoration: none;
  transition: color .15s ease;
}

body .woocommerce-error a:hover,
body .woocommerce-info a:hover,
body .woocommerce-message a:hover,
body .woocommerce-error a:focus-visible,
body .woocommerce-info a:focus-visible,
body .woocommerce-message a:focus-visible {
  color: #e05530;
  text-decoration: underline;
}

/* "View cart", "Return to shop": a grey pill inside a quiet box is the loudest
 * thing in it. It stays where WooCommerce floats it and becomes a link. Every
 * state again, for the same reason as above. */
body .woocommerce-error a.button,
body .woocommerce-info a.button,
body .woocommerce-message a.button,
body .woocommerce-error a.button:hover,
body .woocommerce-info a.button:hover,
body .woocommerce-message a.button:hover,
body .woocommerce-error a.button:focus,
body .woocommerce-info a.button:focus,
body .woocommerce-message a.button:focus {
  float: right;
  margin: 0 0 0 16px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  /* Restated, not inherited from the link rule above: WooCommerce's own
     `.woocommerce a.button` is (0,2,1) and out-specifies that one. */
  color: #f26641;
  font: inherit;
  font-weight: 600;
  text-transform: none;
}

body .woocommerce-error a.button:hover,
body .woocommerce-info a.button:hover,
body .woocommerce-message a.button:hover,
body .woocommerce-error a.button:focus-visible,
body .woocommerce-info a.button:focus-visible,
body .woocommerce-message a.button:focus-visible {
  color: #e05530;
  text-decoration: underline;
}

/* ---- The coupon section on checkout ----
 *
 * WooCommerce builds it from a notice ("Have a coupon? Click here…") and a form
 * that slides open under it, so it lives in this file. Nothing is moved and no
 * markup is added: these are WooCommerce's own elements, restyled.
 *
 * The row is white rather than the notices' grey because it is not telling the
 * buyer anything — it is a control, and on this page grey boxes are messages.
 *
 * The sizes started from the "coupon" block on `feature/checkout-redesign`. That
 * branch is paused and nothing here depends on it: Jason, 21/09/2026 — it only
 * repainted the existing checkout and did none of what a new checkout was meant
 * to do. This is a tidy-up of what is live, not a first piece of that. */
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  margin: 0 0 8px;
  padding: 13px 16px;
  background: #ffffff;
  border-color: #e9e7e5;
  border-radius: 6px;
  color: #5c5a58;
}

/* `display` is deliberately NOT set here. WooCommerce hides this form with an
 * inline display:none and jQuery's slideToggle animates it open; a display rule
 * strong enough to lay the form out would also be strong enough to un-hide it.
 * The two rows are laid out from inside instead. */
body.woocommerce-checkout form.checkout_coupon {
  margin: 0 0 18px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid #e9e7e5;
  border-radius: 6px;
}

body.woocommerce-checkout form.checkout_coupon::after {
  content: "";
  display: table;
  clear: both;
}

body.woocommerce-checkout form.checkout_coupon p.form-row {
  float: left;
  width: auto;
  margin: 0;
  padding: 0;
}

body.woocommerce-checkout form.checkout_coupon p.form-row-first {
  width: min(320px, calc(100% - 150px));
  margin-right: 10px;
}

body.woocommerce-checkout form.checkout_coupon #coupon_code {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  height: 44px;
  margin: 0;
  padding: 0 12px;
  background: #ffffff;
  border: 1px solid #d5d2cf;
  border-radius: 4px;
  box-shadow: none;
  color: #2f2f32;
  font: inherit;
  font-size: .9375rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}

body.woocommerce-checkout form.checkout_coupon #coupon_code::placeholder {
  color: #8a8785;
}

body.woocommerce-checkout form.checkout_coupon #coupon_code:focus {
  border-color: #f26641;
  box-shadow: 0 0 0 3px #fdefe9;
  outline: none;
}

/* Every state, because the kit restyles a bare button on hover and focus too,
 * and focus outlives the click. */
body.woocommerce-checkout form.checkout_coupon button.button,
body.woocommerce-checkout form.checkout_coupon button.button:hover,
body.woocommerce-checkout form.checkout_coupon button.button:focus,
body.woocommerce-checkout form.checkout_coupon button.button:active {
  box-sizing: border-box;
  height: 44px;
  margin: 0;
  padding: 0 20px;
  background: #f26641;
  border: 0;
  border-radius: 4px;
  box-shadow: none;
  color: #ffffff;
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease;
}

body.woocommerce-checkout form.checkout_coupon button.button:hover,
body.woocommerce-checkout form.checkout_coupon button.button:focus-visible {
  background: #e05530;
}

body.woocommerce-checkout form.checkout_coupon button.button:focus-visible {
  outline: 2px solid #2f2f32;
  outline-offset: 2px;
}

@media (max-width: 480px) {
  body.woocommerce-checkout form.checkout_coupon p.form-row,
  body.woocommerce-checkout form.checkout_coupon p.form-row-first {
    float: none;
    width: 100%;
    margin-right: 0;
  }

  body.woocommerce-checkout form.checkout_coupon p.form-row-last {
    margin-top: 10px;
  }

  body.woocommerce-checkout form.checkout_coupon button.button {
    width: 100%;
  }
}

/* The event page's wrapper, which has no container of its own.
 *
 * :not(:empty) matters: the wrapper is on every event page whether or not
 * anything is in it, and spacing an empty one would push every event page down.
 *
 * The side padding is the HEADER's, not a content width. The event page below
 * is full-bleed, so the header is the only edge there is to line up with, and it
 * is not a centred box: Elementor header template 680 sets the logo's container
 * 100px in (32px at <=1024px, centred on phones) inside a container with 10px of
 * its own. 110 / 42 / 16 puts the box's left edge under the logo and its right
 * edge under the Organizers button. If that header is rebuilt, these three
 * numbers are what to revisit. */
header + .woocommerce-notices-wrapper:not(:empty) {
  box-sizing: border-box;
  margin: 16px 0 0;
  padding: 0 110px;
}

@media (max-width: 1024px) {
  header + .woocommerce-notices-wrapper:not(:empty) { padding: 0 42px; }
}

@media (max-width: 767px) {
  header + .woocommerce-notices-wrapper:not(:empty) { margin-top: 12px; padding: 0 16px; }
}