/* Components — reusable pieces. Tokens only. */

/* ---- header ---- */
.ivy-header { background: var(--ivy-header-bg); color: var(--ivy-header-fg); }
.ivy-header a:not(.ivy-btn) { color: var(--ivy-header-fg); }
.ivy-header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--ivy-space-md); padding-block: var(--ivy-space-sm); }
.ivy-header__brand { display: inline-flex; align-items: center; gap: var(--ivy-logo-gap); text-decoration: none; }
.ivy-header__logo { height: var(--ivy-logo-height); width: auto; flex: none; }
.ivy-header__name { font-family: var(--ivy-font-heading); font-size: var(--ivy-text-lg); font-weight: var(--ivy-weight-heading); letter-spacing: var(--ivy-tracking-wide); text-transform: uppercase; line-height: var(--ivy-leading-tight); }
@media (max-width: 68rem) { .ivy-header__logo { height: var(--ivy-logo-height-small); } }
@media (max-width: 30rem) { .ivy-header__name { font-size: var(--ivy-text-base); } }
.ivy-header__tagline { display: block; font-size: var(--ivy-text-xs); font-weight: var(--ivy-weight-body); letter-spacing: var(--ivy-tracking-wide); opacity: 0.85; text-transform: none; }
.ivy-nav ul { display: flex; flex-wrap: wrap; gap: var(--ivy-space-md); list-style: none; margin: 0; padding: 0; }
.ivy-nav a { text-decoration: none; font-size: var(--ivy-text-sm); }
.ivy-nav a:hover, .ivy-nav .current-menu-item > a { text-decoration: underline; }

/* ---- footer ---- */
.ivy-footer { background: var(--ivy-footer-bg); color: var(--ivy-footer-fg); padding-block: var(--ivy-space-xl); margin-top: var(--ivy-space-2xl); }
.ivy-footer a:not(.ivy-btn) { color: var(--ivy-footer-fg); }
.ivy-footer h2, .ivy-footer h3 { color: var(--ivy-footer-fg); font-size: var(--ivy-text-base); letter-spacing: var(--ivy-tracking-wide); text-transform: uppercase; }
.ivy-footer__cols { display: grid; gap: var(--ivy-space-lg); grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }
.ivy-footer ul { list-style: none; padding: 0; }
.ivy-footer__legal { margin-top: var(--ivy-space-lg); padding-top: var(--ivy-space-md); border-top: var(--ivy-border-width) solid var(--ivy-rule-on-brand); font-size: var(--ivy-text-sm); }

/* ---- buttons ---- */
.ivy-btn {
  display: inline-block; padding: var(--ivy-space-2xs) var(--ivy-space-md);
  background: var(--ivy-cta-bg); color: var(--ivy-cta-fg);
  border: var(--ivy-border-width) solid transparent; border-radius: var(--ivy-cta-radius);
  font-size: var(--ivy-text-sm); font-weight: var(--ivy-weight-medium);
  text-decoration: none; cursor: pointer;
  white-space: nowrap;   /* a CTA that wraps mid-phrase reads as a layout bug */
  transition: background var(--ivy-duration) var(--ivy-ease);
}
.ivy-btn:hover { background: var(--ivy-cta-bg-hover); color: var(--ivy-cta-fg); }
.ivy-btn--ghost { background: transparent; color: var(--ivy-link-color); border-color: currentColor; }
.ivy-btn--ghost:hover { background: var(--ivy-c-brand-tint); color: var(--ivy-link-hover); }

/* ---- cards ---- */
.ivy-card {
  padding: var(--ivy-space-md); background: var(--ivy-c-bg);
  border: var(--ivy-border-width) solid var(--ivy-c-border); border-radius: var(--ivy-radius-md);
  box-shadow: var(--ivy-shadow-sm);
  transition: box-shadow var(--ivy-duration) var(--ivy-ease), transform var(--ivy-duration) var(--ivy-ease);
}
.ivy-card:hover { box-shadow: var(--ivy-shadow-md); }
.ivy-card h3 { margin-top: 0; }
.ivy-card__link { text-decoration: none; }
.ivy-card__meta { color: var(--ivy-c-muted); font-size: var(--ivy-text-sm); }

/* ---- page header ---- */
.ivy-page-header { padding-block: var(--ivy-space-xl) var(--ivy-space-lg); }
.ivy-eyebrow { color: var(--ivy-eyebrow-color); font-size: var(--ivy-text-xs); font-weight: var(--ivy-weight-medium); letter-spacing: var(--ivy-tracking-wide); text-transform: uppercase; margin-bottom: var(--ivy-space-2xs); }
.ivy-lede { font-size: var(--ivy-text-lg); color: var(--ivy-c-ink); line-height: var(--ivy-leading-snug); max-width: var(--ivy-width-content); }

/* ---- breadcrumbs ---- */
.ivy-breadcrumbs { font-size: var(--ivy-text-sm); color: var(--ivy-breadcrumb-color); padding-block: var(--ivy-space-xs); }
.ivy-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--ivy-space-3xs); list-style: none; margin: 0; padding: 0; }
.ivy-breadcrumbs a { color: var(--ivy-breadcrumb-link); }
.ivy-breadcrumbs li + li::before { content: "/"; margin-right: var(--ivy-space-3xs); color: var(--ivy-c-border); }

/* ---- placeholder state (bios and pages awaiting content) ---- */
.ivy-placeholder {
  padding: var(--ivy-space-lg); text-align: center;
  background: var(--ivy-c-brand-tint); border: var(--ivy-border-width) dashed var(--ivy-c-brand);
  border-radius: var(--ivy-radius-lg); color: var(--ivy-c-ink);
}
.ivy-placeholder__label { color: var(--ivy-c-brand-deep); font-size: var(--ivy-text-xs); font-weight: var(--ivy-weight-medium); letter-spacing: var(--ivy-tracking-wide); text-transform: uppercase; }

/* ---- team ---- */
.ivy-avatar {
  aspect-ratio: 1; width: 100%; max-width: 12rem; margin-inline: auto;
  display: grid; place-items: center; overflow: hidden;
  background: var(--ivy-c-brand-tint); border-radius: var(--ivy-radius-pill);
  color: var(--ivy-c-brand-deep); font-family: var(--ivy-font-heading);
  font-size: var(--ivy-text-3xl); font-weight: var(--ivy-weight-heading);
}
.ivy-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---- products ---- */
.ivy-price { color: var(--ivy-c-ink); font-size: var(--ivy-text-lg); font-weight: var(--ivy-weight-medium); }
.ivy-badge { display: inline-block; padding: var(--ivy-space-3xs) var(--ivy-space-2xs); background: var(--ivy-c-surface); color: var(--ivy-c-muted); border-radius: var(--ivy-radius-pill); font-size: var(--ivy-text-xs); letter-spacing: var(--ivy-tracking-wide); text-transform: uppercase; }

/* ---- prose ---- */
.ivy-prose > * + * { margin-top: var(--ivy-space-md); }
.ivy-prose h2 { margin-top: var(--ivy-space-xl); }
.ivy-prose h3 { margin-top: var(--ivy-space-lg); }

/* ---- colour mode toggle ---- */
.ivy-mode-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; flex: none;
  background: none; border: var(--ivy-border-width) solid currentColor;
  border-radius: var(--ivy-radius-pill);
  color: inherit; cursor: pointer; padding: 0;
  transition: background var(--ivy-duration) var(--ivy-ease);
}
.ivy-mode-btn:hover { background: var(--ivy-rule-on-brand); }
.ivy-mode-btn__icon { display: inline-flex; }

/* Logo variants: a skin may supply a mark per mode. */
.ivy-header__logo--dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ivy-header__logo--light { display: none; }
  :root:not([data-theme="light"]) .ivy-header__logo--dark  { display: block; }
}
:root[data-theme="dark"] .ivy-header__logo--light { display: none; }
:root[data-theme="dark"] .ivy-header__logo--dark  { display: block; }

/* ---- media ---- */
.ivy-card__media { display: block; margin: calc(-1 * var(--ivy-space-md)) calc(-1 * var(--ivy-space-md)) var(--ivy-space-sm); overflow: hidden; border-radius: var(--ivy-media-radius) var(--ivy-media-radius) 0 0; }
.ivy-card__media img { width: 100%; aspect-ratio: var(--ivy-card-image-ratio); object-fit: cover; transition: transform var(--ivy-duration) var(--ivy-ease); }
.ivy-card:hover .ivy-card__media img { transform: scale(1.03); }
.ivy-feature { margin: 0 0 var(--ivy-space-lg); }
.ivy-feature img { width: 100%; aspect-ratio: var(--ivy-feature-image-ratio); object-fit: cover; border-radius: var(--ivy-media-radius); }
.wp-block-image img { border-radius: var(--ivy-media-radius); }

/* ---- forms ---- */
.ivy-form-wrap { margin-block: var(--ivy-space-lg); }
.ivy-form { display: grid; gap: var(--ivy-space-sm); max-width: var(--ivy-width-content); }
.ivy-field { display: grid; gap: var(--ivy-space-3xs); margin: 0; }
.ivy-field label { font-size: var(--ivy-text-sm); font-weight: var(--ivy-weight-medium); color: var(--ivy-c-ink); }
.ivy-req { color: var(--ivy-c-danger); }
.ivy-field input, .ivy-field select, .ivy-field textarea {
  width: 100%; font: inherit; font-size: var(--ivy-text-base); color: var(--ivy-c-ink);
  background: var(--ivy-c-surface);
  border: var(--ivy-border-width) solid var(--ivy-c-border); border-radius: var(--ivy-radius-sm);
  padding: var(--ivy-space-2xs) var(--ivy-space-xs);
}
.ivy-field textarea { resize: vertical; }
.ivy-field input:focus-visible, .ivy-field select:focus-visible, .ivy-field textarea:focus-visible {
  outline: var(--ivy-focus-width) solid var(--ivy-c-focus); outline-offset: var(--ivy-focus-offset);
}
.ivy-field--submit { margin-top: var(--ivy-space-2xs); justify-items: start; }
.ivy-form__fineprint { font-size: var(--ivy-text-xs); color: var(--ivy-c-muted); margin: 0; }
.ivy-form__notice {
  border-left: var(--ivy-focus-width) solid var(--ivy-c-success);
  background: var(--ivy-c-surface); padding: var(--ivy-space-xs) var(--ivy-space-sm);
  border-radius: var(--ivy-radius-sm);
}
.ivy-form__notice--bad { border-left-color: var(--ivy-c-danger); }
/* Honeypot: reachable by a bot filling every input, invisible to a person. */
.ivy-hp { position: absolute; left: -100vw; width: 1px; height: 1px; overflow: hidden; }
/* Inline variant: the specials signup sits in a narrow column. */
.ivy-form--inline { max-width: var(--ivy-width-content); }
@media (min-width: 40rem) {
  .ivy-form--inline { grid-template-columns: 1fr 1fr auto; align-items: end; }
  .ivy-form--inline .ivy-field--submit { grid-column: auto; }
}

/* ---- floating call button (small screens only) ---- */
.ivy-callnow { display: none; }
@media (max-width: 48rem) {
  .ivy-callnow {
    position: fixed; inset-block-end: var(--ivy-space-md); inset-inline-end: var(--ivy-space-md);
    z-index: 60; display: inline-flex; align-items: center; gap: var(--ivy-space-3xs);
    padding: var(--ivy-space-xs) var(--ivy-space-sm);
    background: var(--ivy-cta-bg); color: var(--ivy-cta-fg);
    border-radius: var(--ivy-radius-pill); box-shadow: var(--ivy-shadow-md);
    font-size: var(--ivy-text-sm); font-weight: var(--ivy-weight-medium);
    text-decoration: none; white-space: nowrap;
  }
  .ivy-callnow:hover { background: var(--ivy-cta-bg-hover); color: var(--ivy-cta-fg); }
}
@media print { .ivy-callnow { display: none; } }

/* ---- archive pagination ---- */
.ivy-main .pagination, .ivy-main .navigation.pagination { margin-top: var(--ivy-space-xl); }
.ivy-main .nav-links { display: flex; flex-wrap: wrap; gap: var(--ivy-space-2xs); align-items: center; }
.ivy-main .page-numbers {
  display: inline-block; padding: var(--ivy-space-3xs) var(--ivy-space-xs);
  border: var(--ivy-border-width) solid var(--ivy-c-border); border-radius: var(--ivy-radius-sm);
  text-decoration: none; font-size: var(--ivy-text-sm);
}
.ivy-main .page-numbers.current { background: var(--ivy-c-brand-tint); border-color: var(--ivy-c-brand); }
.ivy-main .page-numbers.dots { border-color: transparent; }

/* ---- the consultation path ---- */
.ivy-booking-block { margin-block: var(--ivy-space-lg); }
.ivy-booking-block__lede { font-size: var(--ivy-text-lg); color: var(--ivy-c-ink); max-width: var(--ivy-width-content); }
.ivy-booking-block__alt { font-size: var(--ivy-text-sm); color: var(--ivy-c-muted); max-width: var(--ivy-width-content); }

/* ---- accordion (pain by body area) ---- */
.ivy-accordion { display: grid; gap: var(--ivy-space-2xs); max-width: var(--ivy-width-content); }
.ivy-accordion__item {
  border: var(--ivy-border-width) solid var(--ivy-c-border);
  border-radius: var(--ivy-radius-md);
  background: var(--ivy-c-surface);
  overflow: hidden;
}
.ivy-accordion__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ivy-space-sm);
  padding: var(--ivy-space-xs) var(--ivy-space-sm);
  cursor: pointer; list-style: none;
  font-family: var(--ivy-font-heading);
  font-size: var(--ivy-text-lg);
  font-weight: var(--ivy-weight-heading);
  color: var(--ivy-heading-color);
}
/* Safari draws its own disclosure triangle unless this is removed. */
.ivy-accordion__head::-webkit-details-marker { display: none; }
.ivy-accordion__head:hover { background: var(--ivy-c-brand-tint); }
.ivy-accordion__head:focus-visible { outline: var(--ivy-focus-width) solid var(--ivy-c-focus); outline-offset: calc(-1 * var(--ivy-focus-width)); }
.ivy-accordion__chev { width: 0.7em; height: 0.7em; flex: none; transition: transform var(--ivy-duration) var(--ivy-ease); }
.ivy-accordion__item[open] > .ivy-accordion__head .ivy-accordion__chev { transform: rotate(180deg); }
.ivy-accordion__body { padding: 0 var(--ivy-space-sm) var(--ivy-space-xs); }
.ivy-accordion__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ivy-space-3xs); }
.ivy-accordion__list li { border-top: var(--ivy-border-width) solid var(--ivy-c-border); padding-top: var(--ivy-space-3xs); }
.ivy-accordion__list a { display: inline-block; padding-block: var(--ivy-space-3xs); }
.ivy-accordion__soon,
.ivy-accordion__pending { font-size: var(--ivy-text-xs); color: var(--ivy-c-muted); }
.ivy-accordion__pending { display: inline-block; padding-block: var(--ivy-space-3xs); }
