/* Shared appointment-widget styles (script/appointments.js).
   Used by /visit and the homepage booking cell — one source, both pages.
   Page-specific choreography stays in each page's own style block
   (.program-section rules here are /visit-only by scope). */

/* Booking cell choreography: a narrow teaser (header only) by default — the
   event cards take the extra room — expanding to the classic third on hover.
   Hovering an event card keeps the theme's usual 1/6 + 2/3 dance. */
@media only screen and (min-width: 768px) {
    .program-section .col-3-layout .col { width: calc(100% * 5 / 12); }
    .program-section .col-3-layout .appt-col { width: calc(100% / 6); }
    .program-section .col-3-layout:hover .col { width: calc(100% / 6); }
    .program-section .col-3-layout:hover .col:hover { width: calc((100% / 3) * 2); }
    .program-section .col-3-layout:has(.appt-col:hover) .col { width: calc(100% / 3); }
    /* the widget cell caps at a third and opts out of the green hover wash so
       its own green selection states stay readable */
    .program-section .col-3-layout:hover .appt-col:hover { width: calc(100% / 3); background: #fff; }

    /* collapsed teaser: everything below the header folds away; the grid-row
       trick animates height smoothly both directions */
    .program-section .appt-col .appt-more {
        grid-template-rows: 0fr; opacity: 0;
        transition: grid-template-rows .5s ease, opacity .35s ease;
    }
    .program-section .appt-col:hover .appt-more,
    .program-section .appt-col.appt-stay .appt-more { grid-template-rows: 1fr; opacity: 1; }

    /* per-day time ranges live on the teaser only — they fold away as the
       full calendar unfolds */
    .program-section .appt-col .appt-ranges {
        display: block; overflow: hidden; max-height: 200px;
        transition: max-height .4s ease, opacity .3s ease;
    }
    .program-section .appt-col:hover .appt-ranges,
    .program-section .appt-col.appt-stay .appt-ranges { max-height: 0; opacity: 0; }

    /* sticky expansion (.appt-stay, set by JS once the guest clicks a slot or
       date): the booking cell holds its third even without hover; a hovered
       event card grows to the remaining half instead of two thirds */
    .program-section .col-3-layout:has(.appt-col.appt-stay) .col { width: calc(100% / 3); }
    .program-section .col-3-layout:has(.appt-col.appt-stay):has(.col:not(.appt-col):hover) .col { width: calc(100% / 6); }
    .program-section .col-3-layout:has(.appt-col.appt-stay):has(.col:not(.appt-col):hover) .col:hover { width: calc(100% / 2); }
    /* the pinned cell NEVER shrinks — these must outrank the two shrink rules
       above (their :has(...:hover) argument carries heavy specificity) */
    .program-section .col-3-layout:has(.appt-col.appt-stay) .appt-col.appt-stay,
    .program-section .col-3-layout:has(.appt-col.appt-stay):has(.col:not(.appt-col):hover) .appt-col.appt-stay {
        width: calc(100% / 3); background: #fff;
    }
}

/* The theme's global reset (style.css) grays button borders on hover/focus/
   active (button:hover { border-color: #ccc #bbb #aaa }, etc.) and outranks a
   bare class selector in those states. Pin every widget button to black in
   ALL states — borders are never gray on this site. */
.appt-slot:hover, .appt-slot:focus, .appt-slot:active,
.appt-confirm:hover, .appt-confirm:focus, .appt-confirm:active,
.appt-close:hover, .appt-close:focus, .appt-close:active { border-color: #000; }

.appt-widget { display: flex; flex-direction: column; gap: 18px; }
.appt-more { display: grid; grid-template-rows: 1fr; }
.appt-more-inner { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 18px; }
.appt-head .appt-eyebrow { display: block; margin-bottom: 15px; }
.appt-head .appt-title { margin: 0 0 10px; }
.appt-head .appt-sub { font-size: 15px; color: #888; margin: 0; line-height: 1.4; }
.appt-ranges { display: none; font-size: 13px; color: #888; line-height: 1.6; margin-top: 10px; }
.appt-ranges .appt-range-line { display: block; }
.appt-ranges .appt-range-time { white-space: nowrap; }

/* --- fixed-month calendar (matches the /booking calendar) --- */
.appt-calendar { border: 2px solid #000; padding: 12px 14px; }
.appt-cal-month { display: block; font-size: 20px; margin-bottom: 8px; }
.appt-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.appt-cal-grid .appt-dow { text-align: center; font-size: 13px; color: #666; padding: 3px 0 6px; }
.appt-cal-grid .appt-day {
    text-align: center; font-size: 16px; padding: 6px 0; position: relative;
    -webkit-user-select: none; user-select: none;
}
.appt-cal-grid .appt-day.appt-off { color: #ccc; }
.appt-cal-grid .appt-day.appt-busy { color: #ccc; text-decoration: line-through; cursor: not-allowed; }
/* open days are plain black text (like /booking) — hover is the lighter green,
   full green marks the selection */
.appt-cal-grid .appt-day.appt-open { cursor: pointer; }
.appt-cal-grid .appt-day.appt-open:hover { background: rgba(105, 253, 130, .35); }
.appt-cal-grid .appt-day.appt-open.appt-selected { background: #69fd82; }

/* --- available dates + hourly slots --- */
.appt-dates { display: flex; flex-direction: column; gap: 12px; }
.appt-date-label { display: block; font-size: 16px; margin-bottom: 6px; }
.appt-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.appt-slot {
    border: 2px solid #000; border-radius: 0; background: #fff; color: #000;
    font-family: inherit; font-size: 15px; padding: 7px 10px; cursor: pointer;
    transition: background .2s ease;
}
.appt-slot:hover { background: rgba(105, 253, 130, .35); }
.appt-slot.appt-selected { background: #69fd82; }
.appt-slot.appt-selected:hover { background: #69fd82; }
.appt-none { font-size: 15px; color: #888; margin: 0; }

/* --- confirm button (same treatment as the /booking Reserve button) --- */
.appt-confirm {
    display: block; width: 100%; border: 2px solid #000; border-radius: 0; background: #fff; color: #000;
    padding: 14px; font-size: 20px; font-family: inherit; cursor: pointer;
    transition: background .2s ease;
}
.appt-confirm:hover:not(:disabled) { background: #69fd82; }
/* disabled dims the label only — borders stay black, always */
.appt-confirm:disabled { color: #aaa; cursor: not-allowed; }

/* events-contact note under the confirm button; the email may break
   mid-address instead of overflowing the narrow cell */
.appt-foot-note { font-size: 13px; color: #888; margin: -6px 0 0; line-height: 1.5; overflow-wrap: anywhere; }
.appt-foot-note a { color: inherit; text-decoration: underline; word-break: break-all; }

/* --- popup form --- */
.appt-overlay {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, .45); z-index: 1000;
    align-items: center; justify-content: center; padding: 20px;
}
.appt-overlay.appt-show { display: flex; }
.appt-box {
    background: #fff; border: 2px solid #000; max-width: 520px; width: 100%;
    max-height: 88vh; display: flex; flex-direction: column;
}
.appt-box-head {
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 2px solid #000; padding: 14px 20px; font-size: 22px;
}
/* × drawn as CSS bars for exact geometric centering (site convention) */
.appt-close {
    position: relative; width: 34px; height: 34px; border: 2px solid #000;
    border-radius: 0; background: #fff; font-size: 0; cursor: pointer; padding: 0;
}
.appt-close::before, .appt-close::after {
    content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 2px; background: #000;
}
.appt-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.appt-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.appt-close:hover { background: #69fd82; }
.appt-box-body { padding: 16px 20px 20px; overflow-y: auto; }
.appt-slot-line { font-size: 19px; margin: 0 0 14px; }
.appt-form { display: flex; flex-direction: column; gap: 12px; }
.appt-frow { display: flex; gap: 12px; }
.appt-frow .appt-f { flex: 1; min-width: 0; }
.appt-f { display: flex; flex-direction: column; gap: 4px; }
.appt-f span { font-size: 14px; color: #666; }
.appt-f span em { font-style: normal; color: #aaa; }
.appt-f input {
    border: 2px solid #000; border-radius: 0; background: #fff; color: #000;
    font-family: inherit; font-size: 16px; padding: 9px 10px; width: 100%;
}
.appt-f input:focus { outline: none; background: rgba(105, 253, 130, .18); }
/* field needing attention: red tint only — the border stays black, always */
.appt-f input.appt-invalid { background: rgba(207, 46, 46, .08); }
.appt-hp { display: none; }
/* "Did you mean …?" email-typo hint; the address is tap-to-fix */
.appt-hint { font-size: 14px; color: #666; margin: -6px 0 0; }
.appt-hint .appt-fix { text-decoration: underline; cursor: pointer; }
.appt-hint .appt-fix:hover { background: rgba(105, 253, 130, .35); }
.appt-error { font-size: 14px; color: #cf2e2e; margin: 0; }
.appt-form .appt-submit { margin-top: 4px; }
.appt-note { font-size: 13px; color: #888; margin: 0; line-height: 1.45; }
.appt-done .appt-done-line { font-size: 19px; margin: 0 0 10px; }
.appt-done .appt-done-sub { font-size: 15px; color: #666; margin: 0; line-height: 1.5; }

@media only screen and (max-width: 767px) {
    /* the booking cell stands alone (owner): equal padding on all four sides,
       independent of the event cards' 10px scheme */
    .appt-cell { padding: 20px; }
    .appt-frow { flex-direction: column; }
    .appt-box-head { font-size: 19px; }
}

/* Mobile: the theme greens the WHOLE .featured-program container on tap —
   highlight per card instead, like desktop, and never the booking cell. */
.program-section-mobile .featured-program:hover { background: transparent; }
.program-section-mobile .featured-program .program-block:hover { background: #69fd82; }

/* Card padding lives on each cell (not the wrapper) so the 2px dividers run
   edge to edge and every card gets the same 10px on all four sides — this
   also lets the tap highlight bleed the full card width. The booking cell
   keeps a divider above it but carries its own equal 20px padding (it never
   joins the cards' 10px scheme). */
.program-section-mobile .featured-program { padding: 0; }
.program-section-mobile .featured-program .program-block { padding: 10px; }
.program-section-mobile .featured-program .program-block + .program-block,
.program-section-mobile .featured-program .appt-cell { border-top: 2px solid #000; }