/**
 * Island Dental Studio — page furniture & forms.
 *
 *   27  Treatment filters
 *   28  Forms (WPForms, styled entirely from the design system)
 *   29  Booking placeholder
 *   30  Contact details, hours, map
 *   31  Fees page
 *   32  Misc page elements
 *   33  Fees booking panel
 *   34  Principal dentist
 *   35  Legal & policy pages
 */

/* ═══════════════════════════════════════════════════════
   27  TREATMENT FILTERS
   Default outlined, hover filled, current filled — the Figma
   "All Treatments" pill is the active/hover state, not the default.
   ═══════════════════════════════════════════════════════ */

.ids-filters {
    display: flex;
    flex-wrap: wrap;
    /* The frame starts the row at the content column's left edge, in line with
       the intro copy above and the first card below — never centred. */
    justify-content: flex-start;
    gap: var(--ids-space-3);
    margin-bottom: var(--ids-space-7);
}
.ids-chip {
    display: inline-flex;
    align-items: center;
    padding: 11px 22px;
    border: 1px solid var(--ids-sage);
    border-radius: 999px;
    background: transparent;
    color: var(--ids-primary);
    font-size: var(--ids-ui-sm);
    font-weight: 500;
    line-height: 20px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--ids-dur-fast) var(--ids-ease),
                border-color var(--ids-dur-fast) var(--ids-ease),
                color var(--ids-dur-fast) var(--ids-ease);
}
@media (hover: hover) {
    .ids-chip:hover { background: var(--ids-sage); border-color: var(--ids-sage); color: var(--ids-dark); }
}
.ids-chip.is-active {
    background: var(--ids-primary);
    border-color: var(--ids-primary);
    color: var(--ids-white);
}
.ids-chip:focus-visible { outline: 2px solid var(--ids-primary); outline-offset: 2px; }

.ids-grid__item.is-filtered-out { display: none; }
.ids-filters__empty { text-align: center; color: var(--ids-body); }

/* ═══════════════════════════════════════════════════════
   28  FORMS
   WPForms' own stylesheet is switched off, so everything here is ours.
   Labels stay in the markup for assistive technology and are hidden
   visually, exactly as the approved design shows placeholder-only fields.
   ═══════════════════════════════════════════════════════ */

.ids-form-card {
    padding: clamp(24px, 2.8vw, 40px);
    background: var(--ids-white);
    border: 1px solid var(--ids-surface);
    border-radius: var(--ids-radius-lg);
}
.ids-form-card__title {
    margin: 0 0 var(--ids-space-5);
    font-size: var(--ids-h3);
    line-height: var(--ids-lh-h3);
}

.wpforms-container { margin: 0; }
.wpforms-form { display: flex; flex-direction: column; gap: 14px; }
.wpforms-field-container { display: flex; flex-direction: column; gap: 14px; }
.wpforms-field { margin: 0; padding: 0; }

/* Real label, present for screen readers, not shown — the field's placeholder
   carries the visible name, as drawn. */
.wpforms-field-label,
.wpforms-field-sublabel {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
/* WPForms wraps choice fields in a fieldset. The legend is the field's label
   and stays hidden with the rest; the visible consent sentence is the choice's
   own <label>, which is a different element. */
.wpforms-field fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.wpforms-field legend.wpforms-field-label {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.wpforms-field input[type="text"],
.wpforms-field input[type="email"],
.wpforms-field input[type="tel"],
.wpforms-field input[type="url"],
.wpforms-field input[type="number"],
.wpforms-field select,
.wpforms-field textarea {
    width: 100%;
    padding: 18px 20px;
    border: 1px solid var(--ids-surface);
    border-radius: 10px;
    background: var(--ids-white);
    color: var(--ids-dark);
    font-family: var(--ids-font-body);
    font-size: 16px;
    line-height: 1.5;
    transition: border-color var(--ids-dur-fast) var(--ids-ease), box-shadow var(--ids-dur-fast) var(--ids-ease);
    appearance: none;
}
.wpforms-field textarea { min-height: 150px; resize: vertical; }

.wpforms-field ::placeholder { color: var(--ids-body); opacity: 1; }

.wpforms-field input:focus,
.wpforms-field select:focus,
.wpforms-field textarea:focus {
    outline: none;
    border-color: var(--ids-primary);
    box-shadow: 0 0 0 3px rgba(var(--ids-primary-rgb), 0.14);
}

/* Native select needs its own chevron once appearance is stripped. */
.wpforms-field select {
    padding-right: 52px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2350655F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
    cursor: pointer;
}

/* Consent checkbox */
.ids-field--consent ul,
.wpforms-field-checkbox ul { margin: 0; padding: 0; list-style: none; }
.wpforms-field-checkbox li { display: flex; align-items: flex-start; gap: var(--ids-space-3); }
.wpforms-field-checkbox input[type="checkbox"] {
    flex: none;
    width: 20px; height: 20px;
    margin: 2px 0 0;
    border: 1px solid var(--ids-sage);
    border-radius: 5px;
    background: var(--ids-white);
    appearance: none;
    cursor: pointer;
    transition: background-color var(--ids-dur-fast) var(--ids-ease), border-color var(--ids-dur-fast) var(--ids-ease);
}
.wpforms-field-checkbox input[type="checkbox"]:checked {
    background: var(--ids-primary);
    border-color: var(--ids-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}
.wpforms-field-checkbox input[type="checkbox"]:focus-visible { outline: 2px solid var(--ids-primary); outline-offset: 2px; }
.wpforms-field-checkbox label { font-size: var(--ids-ui-sm); line-height: 1.6; color: var(--ids-body); cursor: pointer; }
.wpforms-field-checkbox label a { color: var(--ids-primary); }

/**
 * The consent statement reads as one sentence.
 *
 * "I agree to be contacted about my enquiry." and "See our Privacy Policy." are
 * deliberately two elements: the first is the checkbox's own choice label — and
 * therefore the value stored in the entry and printed in the notification, which
 * is why it stays plain text with no anchor in it — and the second is the field
 * description, already tied to the input by aria-describedby. Only presentation
 * joins them: both run inline at checkbox size with the box hanging in the
 * margin, so wrapped lines align under the text rather than under the box.
 */
.ids-field--consent fieldset {
    padding-left: 32px;
    text-indent: -32px;
}
.ids-field--consent ul,
.ids-field--consent li,
.ids-field--consent .wpforms-field-description { display: inline; text-indent: 0; }
/* No whitespace exists between </ul> and the description in the rendered
   markup, so the sentence break is drawn here. */
.ids-field--consent .wpforms-field-description::before { content: " "; }
.ids-field--consent .wpforms-field-description,
.ids-field--consent label.wpforms-field-label-inline {
    margin: 0;
    padding: 0;
    font-size: var(--ids-ui-sm);
    line-height: 1.6;
    color: var(--ids-body);
}
.ids-field--consent .wpforms-field-description a { color: var(--ids-primary); }
.ids-field--consent input[type="checkbox"] {
    display: inline-block;
    margin: 0 12px 0 0;
    vertical-align: -4px;
    text-indent: 0;
}
/* A validation message is a message, not part of the sentence. */
.ids-field--consent label.wpforms-error,
.ids-field--consent em.wpforms-error { display: block; text-indent: 0; }

/* Error state */
.wpforms-field input.wpforms-error,
.wpforms-field select.wpforms-error,
.wpforms-field textarea.wpforms-error { border-color: #B3261E; }
.wpforms-field input.wpforms-error:focus,
.wpforms-field select.wpforms-error:focus,
.wpforms-field textarea.wpforms-error:focus { box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.14); }
label.wpforms-error,
em.wpforms-error {
    display: block;
    margin-top: var(--ids-space-2);
    font-size: var(--ids-body-xs);
    font-style: normal;
    color: #B3261E;
    /* This one really is a message, not a hidden field label. */
    position: static; width: auto; height: auto; margin-left: 0; clip-path: none; white-space: normal; overflow: visible;
}

/* Submit */
.wpforms-submit-container { margin: 0; padding: 0; }
.wpforms-submit-container button,
button.wpforms-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--ids-btn-pad-y) var(--ids-btn-pad-x);
    border: 1px solid var(--ids-primary);
    border-radius: var(--ids-radius-btn);
    background: var(--ids-primary);
    color: var(--ids-white);
    font-family: var(--ids-font-body);
    font-size: var(--ids-btn-font-size);
    font-weight: var(--ids-btn-weight);
    line-height: var(--ids-btn-lh);
    cursor: pointer;
    transition: background-color var(--ids-dur-fast) var(--ids-ease), border-color var(--ids-dur-fast) var(--ids-ease), color var(--ids-dur-fast) var(--ids-ease);
}
button.wpforms-submit:hover {
    background: var(--ids-accent-alt);
    border-color: var(--ids-accent-alt);
    color: var(--ids-dark);
}
button.wpforms-submit:active { background: var(--ids-dark); border-color: var(--ids-dark); color: var(--ids-white); }
button.wpforms-submit:focus-visible { outline: 2px solid var(--ids-primary); outline-offset: 3px; }
button.wpforms-submit[disabled] { opacity: 0.6; cursor: default; }

/* Success + error banners */
.wpforms-confirmation-container,
.wpforms-confirmation-container-full {
    margin: 0;
    padding: var(--ids-space-6);
    border: 1px solid var(--ids-sage);
    border-radius: var(--ids-radius-md);
    background: var(--ids-offwhite);
    color: var(--ids-dark);
}
.wpforms-confirmation-container p:last-child { margin-bottom: 0; }
.wpforms-error-container {
    margin-bottom: var(--ids-space-4);
    padding: var(--ids-space-4) var(--ids-space-5);
    border: 1px solid rgba(179, 38, 30, 0.4);
    border-left-width: 3px;
    border-radius: var(--ids-radius-sm);
    background: rgba(179, 38, 30, 0.06);
    color: #B3261E;
    font-size: var(--ids-ui-sm);
}

/* WPForms' honeypot and hidden helpers must stay hidden. */
.wpforms-field-hp, .wpforms-hidden { display: none !important; }

/* Form column is a card, so it should not also get the split's inner padding. */
.ids-split--form .ids-split__body { justify-content: flex-start; }

/* ═══════════════════════════════════════════════════════
   29  BOOKING PLACEHOLDER
   The approved representation of the booking system. The dates and times are
   samples: styled as the real thing, but inert and clearly captioned.
   ═══════════════════════════════════════════════════════ */

.ids-booking { width: 100%; }
.ids-booking__panel {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: clamp(24px, 2.8vw, 40px);
    border-radius: 14px;
    background: var(--ids-dark);
}
.ids-booking__eyebrow { margin: 0; color: var(--ids-sage); }
.ids-booking__title {
    margin: 0;
    font-family: var(--ids-font-heading);
    font-weight: 400;
    font-size: var(--ids-card-title);
    line-height: 1.31;
    letter-spacing: -0.13px;
    color: var(--ids-white);
}
.ids-booking__field { display: flex; flex-direction: column; gap: 10px; }
.ids-booking__label { margin: 0; color: var(--ids-sage); }
.ids-booking__select,
.ids-booking__day,
.ids-booking__slot {
    border: 1px solid var(--ids-mid);
    border-radius: var(--ids-radius-sm);
    background: rgba(255, 255, 255, 0.05);
    color: var(--ids-white);
}
.ids-booking__select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ids-space-4);
    margin: 0;
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.07);
    font-size: 16px;
    line-height: 24px;
}
.ids-booking__days { display: flex; gap: 8px; }
.ids-booking__day {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 72px;
}
.ids-booking__day-name { font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: 0.88px; color: var(--ids-sage); }
.ids-booking__day-num { font-size: 20px; line-height: 28px; }
.ids-booking__day.is-selected {
    background: var(--ids-sage);
    border-color: var(--ids-sage);
    color: var(--ids-dark);
}
.ids-booking__day.is-selected .ids-booking__day-name { color: var(--ids-primary); }

.ids-booking__slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ids-booking__slot {
    display: grid;
    place-items: center;
    height: 50px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}
.ids-booking__slot.is-unavailable { background: none; opacity: 0.45; color: var(--ids-muted-on-dark); }

.ids-booking__note {
    display: flex;
    align-items: flex-start;
    gap: var(--ids-space-2);
    margin: 0;
    font-size: 13px;
    line-height: 22px;
    color: var(--ids-accent);
}
.ids-booking__note svg { flex: none; margin-top: 3px; }

@media (max-width: 480px) {
    .ids-booking__days { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .ids-booking__slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ═══════════════════════════════════════════════════════
   30  CONTACT DETAILS, HOURS, MAP
   ═══════════════════════════════════════════════════════ */

/* The ruled practice-details list beside the booking panel. */
.ids-details { display: flex; flex-direction: column; }
.ids-details__item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-block: 24px;
    border-top: 1px solid var(--ids-line);
}
.ids-details__icon { display: inline-flex; color: var(--ids-primary); }
.ids-details__label { margin: 0; }
.ids-details__value {
    margin: 0;
    font-weight: 300;
    font-size: 17px;
    line-height: 1.5;
    letter-spacing: -0.1px;
    color: var(--ids-dark);
}
.ids-details__value a { color: inherit; text-decoration: none; }
.ids-details__value a:hover { color: var(--ids-primary); text-decoration: underline; }

/* Follow us — the footer's social pills, on the light surface: hairline
   outline at rest, filling with sage on hover or keyboard focus. */
.ids-details__social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ids-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}
.ids-details__social a {
    display: inline-flex;
    align-items: center;
    gap: var(--ids-space-2);
    padding: 9px 18px;
    border: 1px solid var(--ids-line);
    border-radius: 999px;
    color: var(--ids-dark);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background-color var(--ids-dur-fast) var(--ids-ease),
        border-color var(--ids-dur-fast) var(--ids-ease),
        color var(--ids-dur-fast) var(--ids-ease);
}
.ids-details__social .ids-icon { flex: none; color: var(--ids-primary); }
.ids-details__social a:hover,
.ids-details__social a:focus-visible {
    background: var(--ids-sage);
    border-color: var(--ids-sage);
    color: var(--ids-dark);
}

.ids-address { display: flex; flex-direction: column; font-style: normal; line-height: 1.7; color: var(--ids-dark); }
.ids-contact-lines { display: flex; flex-direction: column; gap: var(--ids-space-3); }
.ids-contact-line {
    display: inline-flex;
    align-items: center;
    gap: var(--ids-space-2);
    color: var(--ids-primary);
    text-decoration: none;
    font-size: var(--ids-body-lg);
}
.ids-contact-line:hover { color: var(--ids-dark); }

.ids-hours__list { margin: 0; }
.ids-hours__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ids-space-4);
    padding-block: 18px;
    border-top: 1px solid var(--ids-line);
}
.ids-hours__row dt { font-size: 16px; line-height: 26px; color: var(--ids-body); }
.ids-hours__row dd { margin: 0; font-size: 16px; line-height: 26px; font-weight: 500; color: var(--ids-dark); text-align: right; }
.ids-hours .ids-eyebrow { margin-bottom: 0; }

/**
 * The map must always take its width from the column and derive its height.
 * A min-height here would fight the aspect-ratio the stacked layout applies and
 * the browser would size the box from the height instead — which is how a 380px
 * minimum silently became a 608px-wide box on a 390px screen.
 */
.ids-map { position: relative; width: 100%; max-width: 100%; }
.ids-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; max-width: 100%; border: 0; }

/* Finding us: the map runs the full inset width with the notes beneath it. */
.ids-find {
    display: flex;
    flex-direction: column;
    gap: var(--ids-space-7);
    padding-inline: var(--ids-hero-inset);
}
.ids-find__map {
    aspect-ratio: 1392 / 480;
    min-height: 260px;
    border: 1px solid var(--ids-sage);
    border-radius: var(--ids-radius-lg);
    overflow: hidden;
    background: var(--ids-surface);
}
.ids-find__points {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--ids-space-6);
    padding-inline: clamp(0px, 2.8vw, 40px);
}
.ids-find__point { gap: 12px; padding-top: 26px; }

.ids-note {
    display: flex;
    align-items: flex-start;
    gap: var(--ids-space-2);
    margin: 0;
    padding: var(--ids-space-4);
    border-radius: var(--ids-radius-sm);
    background: var(--ids-offwhite);
    font-size: var(--ids-body-sm);
    color: var(--ids-body);
}
.ids-section--alt .ids-note { background: var(--ids-white); }

/* ═══════════════════════════════════════════════════════
   31  FEES PAGE
   ═══════════════════════════════════════════════════════ */

.ids-fee-groups { display: flex; flex-direction: column; gap: var(--ids-space-8); }
.ids-fee-group__title { margin: 0 0 var(--ids-space-3); font-size: var(--ids-h3); }
.ids-fee-group__intro { margin: 0 0 var(--ids-space-4); color: var(--ids-body); }
.ids-fee-row__label a { color: inherit; text-decoration: none; }
.ids-fee-row__label a:hover { color: var(--ids-primary); text-decoration: underline; }
.ids-fee-note { margin-top: var(--ids-space-6); font-size: var(--ids-body-sm); }
/* The cancellation charge, last in the list: a size down from the fee lines,
   medium weight so the red stays legible, never faint. */
.ids-fee-alert {
    margin: var(--ids-space-5) 0 0;
    font-size: var(--ids-body-sm);
    line-height: var(--ids-body-sm-lh);
    font-weight: 500;
    color: var(--ids-alert);
}
.ids-glance__text { margin: 0 0 var(--ids-space-4); font-size: var(--ids-body-sm); color: var(--ids-body); }
.ids-glance__phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ids-space-2);
    width: 100%;
    margin-top: var(--ids-space-3);
    color: var(--ids-primary);
    text-decoration: none;
    font-size: var(--ids-body-sm);
}

/* ═══════════════════════════════════════════════════════
   32  MISC PAGE ELEMENTS
   ═══════════════════════════════════════════════════════ */

.ids-pullquote {
    margin: 0;
    padding-left: var(--ids-space-5);
    border-left: 2px solid var(--ids-sage);
    font-family: var(--ids-font-heading);
    font-size: var(--ids-h4);
    font-style: italic;
    line-height: 1.5;
    color: var(--ids-dark);
}

.ids-price-badge {
    display: inline-block;
    margin: 0;
    padding: var(--ids-space-3) var(--ids-space-5);
    border-radius: 999px;
    background: var(--ids-surface);
    font-family: var(--ids-font-heading);
    font-size: var(--ids-h3);
    color: var(--ids-dark);
}

.ids-ticklist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.ids-ticklist li {
    display: flex;
    align-items: flex-start;
    gap: var(--ids-space-3);
    padding-block: var(--ids-space-4);
    border-bottom: 1px solid var(--ids-line);
    color: var(--ids-dark);
}
.ids-ticklist li:last-child { border-bottom: 0; }
.ids-ticklist svg { flex: none; margin-top: 3px; color: var(--ids-primary); }
.ids-ticklist em { display: block; margin-top: 2px; font-size: var(--ids-body-sm); font-style: normal; color: var(--ids-body); }

/* ═══════════════════════════════════════════════════════
   33  FEES BOOKING PANEL
   The dark card beside the fee tables. Measured from the UI Design frame:
   420px column, 64px gutter, 14px radius, 34/32 padding.
   ═══════════════════════════════════════════════════════ */

.ids-rail--right {
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: clamp(32px, 4.44vw, 64px);
}
/**
 * This file loads after components.css, so the 420px column above was also
 * overriding the rail's own stacking rule — leaving the fee tables in a column
 * that shrank to 246px at 768 and to nothing at all at 390, with the booking
 * panel sitting on top of them. The stack has to be restated here to win.
 */
@media (max-width: 900px) {
    .ids-rail--right { grid-template-columns: minmax(0, 1fr); gap: var(--ids-space-6); }
}

.ids-glance--booking {
    padding: 34px 32px;
    border: 0;
    border-radius: 14px;
    background: var(--ids-dark);
    display: flex;
    flex-direction: column;
    gap: var(--ids-space-4);
}
.ids-section--alt .ids-glance--booking { background: var(--ids-dark); }
.ids-glance--booking .ids-eyebrow--dark { margin: 0; color: var(--ids-sage); }
.ids-glance--booking .ids-glance__title {
    margin: 0;
    font-family: var(--ids-font-heading);
    font-size: var(--ids-card-title);
    line-height: 1.31;
    letter-spacing: -0.13px;
    color: var(--ids-white);
}
.ids-glance--booking .ids-glance__title em { font-style: italic; }
.ids-glance__price {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-block: var(--ids-space-5);
    border-block: 1px solid var(--ids-mid);
}
.ids-glance__price-value {
    flex: none;
    font-family: var(--ids-font-heading);
    font-size: var(--ids-h2);
    line-height: 1.2;
    letter-spacing: -0.4px;
    color: var(--ids-accent);
}
.ids-glance__price-note {
    font-size: var(--ids-ui-sm);
    line-height: 1.57;
    color: var(--ids-surface);
}
.ids-glance--booking .ids-glance__text {
    margin: 0;
    font-size: var(--ids-body-sm);
    line-height: 1.71;
    color: var(--ids-surface);
}
.ids-glance--booking .ids-glance__cta,
.ids-glance--booking .ids-glance__phone {
    width: 100%;
    margin: 0;
}
.ids-glance--booking .ids-glance__phone { color: var(--ids-white); }

.ids-btn--block { width: 100%; }

/* Splits whose two columns are lists rather than an image: align to the top. */
.ids-split--top { align-items: start; }
.ids-split--top .ids-split__body { justify-content: flex-start; padding-block: 0; }

/* ═══════════════════════════════════════════════════════
   34  PRINCIPAL DENTIST
   ═══════════════════════════════════════════════════════ */

.ids-principal__name {
    margin: 0;
    font-size: var(--ids-h2);
    line-height: 1.25;
    letter-spacing: var(--ids-tracking-h2);
    color: var(--ids-dark);
}
.ids-credentials { margin: 0; }
.ids-credentials__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ids-space-5);
    padding-block: 18px;
    border-top: 1px solid var(--ids-line);
}
.ids-credentials__row dt { font-size: var(--ids-body-sm); line-height: 1.57; color: var(--ids-body); }
.ids-credentials__row dd {
    margin: 0;
    font-size: var(--ids-body-sm);
    line-height: 1.57;
    font-weight: 500;
    text-align: right;
    color: var(--ids-dark);
}

/* The form column is drawn wider than the copy beside it: 572 / 697. */
@media (min-width: 901px) {
    .ids-split--form {
        grid-template-columns: minmax(0, 572fr) minmax(0, 697fr);
        gap: clamp(32px, 2.99vw, 43px);
    }

    /**
     * Enquiry section, inverted against the booking section above it: the form
     * takes the left column and the supporting copy the right.
     *
     * Done with `order` rather than by moving the markup, because the source
     * order is the one that has to survive stacking — on a phone the section's
     * eyebrow, heading and opening hours must still introduce the form rather
     * than trail after it.
     */
    .ids-split--form.ids-split--reverse {
        grid-template-columns: minmax(0, 697fr) minmax(0, 572fr);
    }
    .ids-split--form.ids-split--reverse > .ids-split__body:first-child  { order: 2; }
    .ids-split--form.ids-split--reverse > .ids-split__body:nth-child(2) { order: 1; }
}

/* ═══════════════════════════════════════════════════════
   35  LEGAL & POLICY PAGES
   One layout serving every policy: the prose in the wide left column, an
   automatically generated Contents rail on the right. The rail uses the
   established sticky architecture (see components.css §16), so it clears the
   header, travels with the policy and releases when the section ends.
   ═══════════════════════════════════════════════════════ */

/**
 * The policy layout has its own grid rather than borrowing the fee page's rail:
 * long-form prose needs to stop sharing the line with a side panel well before
 * a fee table does, so this one stacks at 1100px instead of 900.
 */
.ids-legal__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
    gap: clamp(40px, 4.9vw, 96px);
    align-items: start;
}

.ids-legal__body {
    display: flex;
    flex-direction: column;
    gap: var(--ids-space-7);
    /* The container is 1312px, but long-form policy text is not: held to a
       readable measure rather than stretched because the width is available. */
    max-width: 760px;
}

.ids-legal__section {
    /**
     * Anchored headings land below the sticky header. The header's own
     * clearance is already set once, globally, as `scroll-padding-top` on <html>
     * (main.css §01) from the same --ids-sticky-offset the sticky panels use;
     * the two add up, so what belongs here is only the breathing space beneath
     * the bar, not a second copy of the offset.
     */
    scroll-margin-top: var(--ids-space-3);
}
.ids-legal__section-title {
    margin: 0 0 var(--ids-space-4);
    font-size: var(--ids-h3);
    line-height: var(--ids-lh-h3);
    letter-spacing: var(--ids-tracking-h3);
    color: var(--ids-dark);
}
/* The prose block already sets its own rhythm; the first heading inside a
   section must not add the .ids-prose top margin on top of the section gap. */
.ids-legal__section .ids-prose > :first-child { margin-top: 0; }
/* A sub-heading the client writes inside a section has to sit *under* that
   section's own title, not level with it — global H3 is the same step as the
   title, so headings inside the policy body each drop one. */
.ids-legal__section .ids-prose h3 { font-size: var(--ids-h4); line-height: var(--ids-lh-h4); }
.ids-legal__section .ids-prose h4 { font-size: var(--ids-h5); }

/* ── Contents rail ── */
.ids-toc {
    padding: clamp(20px, 1.9vw, 28px);
    border: 1px solid var(--ids-line);
    border-radius: var(--ids-radius-md);
    background: var(--ids-offwhite);
}
.ids-toc__title { margin: 0 0 var(--ids-space-4); }
.ids-toc__list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: ids-toc;
}
.ids-toc__item + .ids-toc__item { border-top: 1px solid var(--ids-line); }
.ids-toc__link {
    display: flex;
    gap: var(--ids-space-3);
    padding-block: 11px;
    color: var(--ids-body);
    font-size: var(--ids-body-sm);
    line-height: 1.5;
    text-decoration: none;
    transition: color var(--ids-dur-fast) var(--ids-ease);
}
.ids-toc__link::before {
    counter-increment: ids-toc;
    content: counter(ids-toc, decimal-leading-zero);
    flex: none;
    color: var(--ids-sage);
    font-variant-numeric: tabular-nums;
}
.ids-toc__link:hover,
.ids-toc__link:focus-visible { color: var(--ids-primary); }
.ids-toc__link:hover::before { color: var(--ids-primary); }
.ids-toc__link:focus-visible { outline-offset: 2px; }

@media (max-width: 1100px) {
    .ids-legal__layout { grid-template-columns: minmax(0, 1fr); gap: var(--ids-space-6); }
    /* Contents is navigation: the reader meets it before the policy, never
       stranded beneath a very long document. */
    .ids-legal__rail { order: -1; position: static; }
    .ids-legal__body { max-width: none; }
}
@media (max-width: 900px) {
    .ids-toc__link { padding-block: 13px; }
}