/* Lightweight, site-wide interaction feedback. Existing component colours and focus styles remain authoritative. */
:root {
  scroll-behavior: smooth;
  --swimtayka-blue: #3266ff;
  --swimtayka-green: #66f172;
  --swimtayka-grey: #575757;
  --swimtayka-white: #ffffff;
  --heading-font: "Work Sans", sans-serif;
  --heading-weight: 700;
  --h1-size: clamp(2.25rem, 5vw, 3.5rem);
  --h2-size: clamp(2rem, 4vw, 2.625rem);
  --h3-size: clamp(1.5rem, 3vw, 1.875rem);
  --button-radius: 999px;
  --tayka-ink: #575757;
  --tayka-heading: var(--swimtayka-blue);
  --tayka-accent: var(--swimtayka-blue);
}

/*
 * A consistent reading rhythm for content that does not belong to a bespoke
 * component. :where() keeps the specificity deliberately low, so intentional
 * Elementor and campaign styles can still set their own type treatment.
 */
body {
  color: var(--tayka-ink);
  font-family: "Work Sans", "Segoe UI", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

:where(main, article, .elementor-location-single) :where(p, li, dd) {
  letter-spacing: .005em;
  line-height: 1.7;
}

:where(main, article, .elementor-location-single) :where(p, ul, ol, dl) + :where(p, ul, ol, dl) {
  margin-block-start: 1em;
}

:where(main, article, .elementor-location-single) :where(h1, h2, h3, h4, h5, h6) {
  color: var(--tayka-heading);
  font-family: var(--heading-font);
  font-weight: var(--heading-weight);
  letter-spacing: -.025em;
  line-height: 1.15;
  text-wrap: balance;
}

:where(main, article, .elementor-location-single, .elementor[data-elementor-type="wp-page"]) h1 {
  font-size: var(--h1-size) !important;
  font-weight: 700 !important;
}

:where(main, article, .elementor-location-single, .elementor[data-elementor-type="wp-page"]) h2 {
  font-size: var(--h2-size) !important;
  font-weight: 700 !important;
}

:where(main, article, .elementor-location-single, .elementor[data-elementor-type="wp-page"]) h3 {
  font-size: var(--h3-size) !important;
  font-weight: 600 !important;
}

/* A header border is fine; an unexplained spacer before the hero is not. */
.tayka-site-header + :where(main, .elementor, .page),
.elementor-location-header + :where(main, .elementor, .page) {
  margin-block-start: 0 !important;
  padding-block-start: 0;
}

:where(input[type="checkbox"]) { accent-color: var(--swimtayka-blue); }

html,
body { max-width: 100%; overflow-x: clip; }

:where(main, article, .elementor-location-single) :where(h1, h2, h3, h4, h5, h6) + p {
  margin-block-start: .75em;
}

:where(main, article, .elementor-location-single) :where(p, li) strong {
  color: inherit;
  font-weight: 700;
}

:where(main, article, .elementor-location-single) a:not([class]) {
  color: var(--tayka-heading);
  font-weight: 650;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-decoration-thickness: .1em;
  text-underline-offset: .18em;
}

:where(main, article, .elementor-location-single) a:not([class]):hover {
  color: var(--tayka-accent);
  text-decoration-color: currentColor;
}

::selection {
  background: #bdeff2;
  color: #092f59;
}

@media (max-width: 767px) {
  body { font-size: 1rem; }
  :where(main, article, .elementor-location-single) :where(p, li, dd) { line-height: 1.65; }
}

:where([id]) {
  scroll-margin-top: 7rem;
}

body {
  opacity: 1;
  transition: opacity 180ms ease;
}

body.is-page-leaving {
  opacity: .94;
}

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .tayka-button,
  .elementor-button,
  .wp-element-button,
  .wp-block-button__link,
  .home-button,
  .programme-card__button,
  .button,
  .nav-cta,
  .tayka-nav-action,
  .grant-application-cta,
  .submit-button
) {
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease,
    opacity 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .tayka-button,
  .elementor-button,
  .wp-element-button,
  .wp-block-button__link,
  .home-button,
  .programme-card__button,
  .button,
  .nav-cta,
  .tayka-nav-action,
  .grant-application-cta,
  .submit-button
):active:not(:disabled):not([aria-disabled="true"]) {
  opacity: .94;
  transform: scale(.98);
}

a.is-navigation-pending {
  color: #0c4da2 !important;
  text-decoration-color: #0c4da2 !important;
  text-decoration-line: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: .25em;
}

.tayka-coming-soon-notice {
  background: var(--swimtayka-blue);
  border: 2px solid var(--swimtayka-white);
  border-radius: 1rem;
  box-shadow: 0 .75rem 2rem rgb(0 0 0 / 24%);
  color: var(--swimtayka-white);
  font-family: var(--heading-font);
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: 700;
  left: 50%;
  max-width: calc(100vw - 2rem);
  opacity: 0;
  padding: 1rem 2rem;
  pointer-events: none;
  position: fixed;
  text-align: center;
  top: max(1rem, env(safe-area-inset-top));
  transform: translate(-50%, -.75rem);
  transition: opacity 180ms ease, transform 180ms ease;
  visibility: hidden;
  width: max-content;
  z-index: 100000;
}

.tayka-coming-soon-notice.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  visibility: visible;
}

.is-interaction-loading::after {
  animation: tayka-interaction-spin .65s linear infinite;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  height: .9em;
  margin-left: .55em;
  vertical-align: -.1em;
  width: .9em;
}

@keyframes tayka-interaction-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  body { transition: none; }
  body.is-page-leaving { opacity: 1; }
  :where(
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    .tayka-button,
    .elementor-button,
    .wp-element-button,
    .wp-block-button__link,
    .home-button,
    .programme-card__button,
    .button,
    .nav-cta,
    .tayka-nav-action,
    .grant-application-cta,
    .submit-button
  ) { transition-duration: .01ms !important; }
  :where(button, input, .tayka-button, .elementor-button, .button):active { transform: none !important; }
  .is-interaction-loading::after { animation-duration: 1.2s; }
  .tayka-coming-soon-notice { transition: none; }
}