/* Face Cult's layout and colour adjustments to the copied EasyWeek widget (build.py links this file into index.html). */

/* The palette comes from the widget's theme (CRM's widget style, facecult.co.za's colours; docs/specs/booking-widget.md#palette). These are
   what its generator cannot express, above its own :root rules: the website's Soft White text on Brand Green buttons (5.8:1), and error
   and success colours that stay semantic and readable on the cards and page (at least 4.5:1). */
html:root {
  --c-on-accent: #e2e6e1;
  --c-on-accent-rgb: 226, 230, 225;
  --c-error: #b42318;
  --c-error-rgb: 180, 35, 24;
  --c-error-hover: #8f1c13;
  --c-error-hover-rgb: 143, 28, 19;
  --c-success: #276b2b;
  --c-success-rgb: 39, 107, 43;
}

/* The phone field's check and warning are success and error (upstream drew EasyWeek's fixed green, 2.6:1 on the card, and red). */
html .aw-tel__validity--valid {
  color: var(--c-success);
}
html .aw-tel__validity--invalid {
  color: var(--c-error);
}

/* Keyboard focus on buttons and rows is the accent, at least 3:1 against cards and page (the upstream row ring was a near-invisible grey);
   text fields keep their dark focus border. */
.aw-action-button:focus-visible {
  box-shadow: 0 0 0 2px var(--c-accent) inset;
}
:focus-visible {
  outline-color: var(--c-accent);
}

/* The back arrow leads the page heading: a 44 px target centred on the heading's first line (23 px on phones, 28 px from 1024 px),
   with the arrow on the content edge and the heading text close beside it; a long heading wraps beside the arrow. */
.ew-page__title > .ew-page__back {
  --btn-size: 2.75rem;
  align-self: flex-start;
  flex: none;
  margin: calc((1.4375rem - 2.75rem) / 2) -0.5rem calc((1.4375rem - 2.75rem) / 2) -0.875rem !important;
}
/* The arrow in the text colour, fully opaque: the upstream faded grey was 2.4:1 on the page. */
.ew-page__title > .ew-page__back {
  color: var(--c-on-surface);
  --icon-color: var(--c-on-surface);
  opacity: 1;
}
@media (min-width: 1024px) {
  .ew-page__title > .ew-page__back {
    margin-block: calc((1.75rem - 2.75rem) / 2) !important;
  }
}

/* While a heading shows the back arrow, the layout's header row leaves its own out (both stay in the DOM through page transitions). */
.ew-aside-layout:has(.ew-page__back) .ew-aside-layout__back {
  display: none;
}

/* The date between the day arrows is the month picker's button: the date in bold with a chevron, a 44 px target. */
.ew-calendar__selected .ew-calendar-preview__button {
  min-height: 2.75rem;
  font-size: 1rem;
  font-weight: 700;
}