/* Rounded page actions, with the original architectural masthead controls. */
:root {
  --button-height: 56px;
  --button-radius: 999px;
  --button-padding-block: 14px;
  --button-padding-inline: 20px;
  --button-gap: 16px;
  --button-font-size: 1.0625rem;
  --button-icon-size: 20px;
  --button-fill: var(--color-spark-blue);
  --button-ink: var(--color-night-ink);
  --button-hover-fill: var(--color-storybook-green);
  --ease-ui-out: cubic-bezier(.23, 1, .32, 1);
  --button-feedback-time: 160ms;
  --button-press-time: 100ms;
}

/* Scoped colour choices retain the shared geometry and feedback. */
#booking .visit-summary{--button-fill:var(--color-bright-yellow)}

/* Page actions share one shape; the header inherits its approved site.css layout. */
#main .button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  min-height: var(--button-height);
  padding: var(--button-padding-block) var(--button-padding-inline);
  align-items: center;
  justify-content: space-between;
  gap: var(--button-gap);
  border: 1px solid var(--button-ink);
  border-radius: var(--button-radius);
  background: var(--button-fill);
  color: var(--button-ink);
  box-shadow: none;
  font-family: var(--font-body);
  font-size: var(--button-font-size);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: left;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
  transition: background-color var(--button-feedback-time) ease,
    color var(--button-feedback-time) ease,
    border-color var(--button-feedback-time) ease,
    transform var(--button-press-time) var(--ease-ui-out);
}
#main .button[hidden] { display: none; }
#main .button > .icon {
  width: var(--button-icon-size);
  height: var(--button-icon-size);
  flex: 0 0 var(--button-icon-size);
  margin: 0;
  stroke-width: 1.5;
  transition: transform var(--button-feedback-time) var(--ease-ui-out);
}
#main .button[aria-disabled="true"],
#main button.button:disabled {
  background: color-mix(in srgb, var(--button-fill) 25%, var(--color-paper-white));
  color: var(--button-ink);
  border-color: var(--button-ink);
  opacity: 1;
  cursor: default;
  transform: none;
  transition: none;
}

/* The future guide has visual feedback while remaining a non-navigating placeholder. */
#main .button[data-stage-guide-placeholder]{transition:background-color var(--button-feedback-time) ease}

.site-header #site-nav > .nav-action,
.site-header #site-nav > .nav-link,
.site-header .nav-login > summary,
.site-header .menu-toggle,
.faq-list summary,
.milestone-list summary,
.price-comparison .all-prices > summary,
.price-picker .choice-list label {
  transition: background-color var(--button-feedback-time) ease,
    color var(--button-feedback-time) ease,
    border-color var(--button-feedback-time) ease;
}
.nav-login > summary > .icon,
.faq-list summary > .icon,
.milestone-list summary > .icon,
.price-comparison summary .icon {
  transition: transform var(--button-feedback-time) var(--ease-ui-out),
    background-color var(--button-feedback-time) ease,
    color var(--button-feedback-time) ease;
}

@media (hover: hover) and (pointer: fine) {
  /* A reversible green sweep beneath the label, clipped to the pill. */
  #main .button:not([aria-disabled="true"]):not(:disabled)::before,
  #main .button[data-stage-guide-placeholder]::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background: var(--button-hover-fill);
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
    transition: transform var(--button-feedback-time) var(--ease-ui-out),
      background-color var(--button-feedback-time) ease;
  }
  #main .button:not([aria-disabled="true"]):not(:disabled):hover { color: var(--button-ink); text-decoration: none; }
  #main .button:not([aria-disabled="true"]):not(:disabled):hover::before,
  #main .button[data-stage-guide-placeholder]:hover::before { transform: scaleX(1); }
  #main .button:not([aria-disabled="true"]):not(:disabled):hover > .icon,
  #main .button[data-stage-guide-placeholder]:hover > .icon { transform: translateX(4px); }
  #main .button:not([aria-disabled="true"]):not(:disabled):active::before { background: var(--color-fresh-leaf); }

  .site-header #site-nav > .nav-action:hover { background: var(--color-fresh-leaf); color: var(--button-ink); text-decoration: none; }
  .site-header .nav-login > summary:hover,
  .site-header .menu-toggle:not([hidden]):hover { background: var(--color-storybook-green); color: var(--button-ink); }
  .site-header #site-nav > .nav-link:hover { background: color-mix(in srgb, var(--color-spark-blue) 8%, white); color: var(--button-ink); }
  .faq-list summary:hover,
  .milestone-list summary:hover,
  .pricing .price-comparison .all-prices > summary:hover { color: var(--button-ink); }
  .faq-list summary:hover > .icon,
  .milestone-list summary:hover > .icon { color: var(--color-spark-blue); }
  .pricing .price-comparison .all-prices > summary:hover .icon { background: var(--color-spark-blue); color: var(--button-ink); }
  .pricing .price-picker .choice-list label:not(:has(input:checked)):hover {
    background: color-mix(in srgb, var(--color-spark-blue) 8%, white);
    border-color: var(--button-ink);
  }
}

@media (hover: none), (pointer: coarse) {
  #main .button:not([aria-disabled="true"]):not(:disabled):hover { background: var(--button-fill); color: var(--button-ink); border-color: var(--button-ink); text-decoration: none; }
  .site-header #site-nav > .nav-action:hover { background: var(--color-spark-blue); color: var(--button-ink); }
  .site-header .nav-login > summary:hover { background: var(--color-fresh-leaf); color: var(--button-ink); }
  .site-header .nav-login[open] > summary:hover { background: var(--color-storybook-green); }
  .site-header .menu-toggle:not([hidden]):hover { background: white; }
  .site-header #site-nav > .nav-link:hover { background: white; }
  .faq-list summary:hover, .milestone-list summary:hover { color: var(--button-ink); text-decoration: none; }
}

#main .button:not([aria-disabled="true"]):not(:disabled):active {
  background: var(--color-fresh-leaf);
  transform: scale(.97);
  transition-duration: var(--button-press-time);
}
.site-header #site-nav > .nav-action:active,
.site-header .menu-toggle:not([hidden]):active { background: var(--color-storybook-green); transition-duration: var(--button-press-time); }
.site-header .nav-login > summary:active { background: var(--color-spark-blue); transition-duration: var(--button-press-time); }

#main .button:focus-visible { outline: 3px solid var(--button-ink); outline-offset: 4px; transition: none; }
#main .button[data-stage-guide-placeholder]:focus-visible > .icon,
#main .button[data-stage-guide-placeholder]:focus-visible::before,
#main .button:not([aria-disabled="true"]):not(:disabled):focus-visible > .icon,
#main .button:not([aria-disabled="true"]):not(:disabled):focus-visible::before,
.site-header :is(summary, .nav-action, .nav-link, .menu-toggle):focus-visible,
.site-header summary:focus-visible > .icon { transition: none; }
#main .button[data-stage-guide-placeholder]:focus-visible:hover > .icon,
#main .button:not([aria-disabled="true"]):not(:disabled):focus-visible:active,
#main .button:not([aria-disabled="true"]):not(:disabled):focus-visible:hover > .icon { transform: none; transition: none; }
:is(.faq-list, .milestone-list, .price-comparison) summary:focus-visible { outline: 3px solid var(--button-ink); outline-offset: 4px; transition: none; }

@media (max-width: 760px) {
  :root { --button-padding-inline: 12px; --button-gap: 12px; }
}

@media (prefers-reduced-motion: reduce), print {
  #main .button, #main .button > .icon,
  .site-header #site-nav > .nav-action, .site-header #site-nav > .nav-link,
  .site-header .nav-login > summary, .site-header .menu-toggle,
  .site-header .icon, summary, summary .icon,
  .price-picker .choice-list label { transition: none !important; }
  #main .button::before { display: none; }
  #main .button:not([aria-disabled="true"]):active,
  #main .button:not([aria-disabled="true"]):hover > .icon,
  #main .button[data-stage-guide-placeholder]:hover > .icon { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  #main .button:not([aria-disabled="true"]):not(:disabled):hover,
  #main .button[data-stage-guide-placeholder]:hover { background: var(--button-hover-fill); }
}
@media print { #main .button { display: none; } }