/* ===== Event landing (template-event-registration.php) =====
   Font families inherit from the Theme Options through the global typography rules.
   Signature visual: occlusal arch with biometric measurement points.
   Motion respects prefers-reduced-motion. */

/* ===== Event landing flexible content (content_cols) =====
   FC sections contain event_hero, event_content, and event_form block layouts.
   The FC system in fc-styles.css owns section spacing, width, and background. */

/* ---- Hero ---- */

.event-hero {
    position: relative;
    padding: 88px 24px 96px;
    overflow: hidden;
    background-color: #F2F8F7; /* ice */
    /* A biometric point grid replaces a generic decorative gradient. */
    background-image: radial-gradient(rgba(3, 52, 74, 0.08) 1px, transparent 1px);
    background-size: 26px 26px;
}

.event-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #19918E 30%, #19918E 70%, transparent);
    opacity: 0.7;
}

.event-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    max-width: 1160px;
    margin: 0 auto;
    align-items: center;
}

/* Stagger the initial hero reveal. */
.event-eyebrow,
.event-title,
.event-date-block,
.event-hero-visual {
    opacity: 0;
    animation: event-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.event-eyebrow { animation-delay: 0.05s; }
.event-title { animation-delay: 0.15s; }
.event-date-block { animation-delay: 0.30s; }
.event-hero-visual { animation-delay: 0.45s; }

@keyframes event-rise {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}

.event-eyebrow {
    margin: 0 0 14px;
    font-size: 13px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #0E5560;
}

.event-title {
    margin: 0 0 40px;
    font-weight: 500;
    font-size: clamp(40px, 5.5vw, 62px);
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: #03344A;
}

/* Keep the weekday compact, date prominent, and time below. */
.event-date-block {
    max-width: 560px;
}

.event-date-label {
    display: block;
    margin-bottom: 10px;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #19918E;
}

.event-date-weekday {
    font-size: 21px;
    letter-spacing: 0.06em;
    color: #0E5560;
    margin-bottom: 4px;
}

.event-date-big {
    font-weight: 500;
    font-size: clamp(30px, 4.4vw, 48px);
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: #03344A;
}

.event-date-time {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
    font-size: 22px;
    color: #0E5560;
}

.event-date-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #19918E;
    flex-shrink: 0;
}

.event-schedule {
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

/* `align-items: flex-start` and the dot offset are load-bearing: a programme line wraps to two or
   three lines in the hero column, and centring would park the dot beside the middle line. */
.event-schedule-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #0E5560;
}

.event-schedule-item + .event-schedule-item {
    margin-top: 10px;
}

.event-schedule-item .event-date-dot {
    margin-top: 9px;
}

/* A flex column with a gap, not margins on the paragraphs: spacing between several lines of one
   entry has to be set without a `p + p` rule, which would sit at a higher specificity than the
   plain `p` rules further down this file. */
.event-schedule-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 19px;
    line-height: 1.45;
}

/* The entry is a wysiwyg value, so it arrives wrapped in <p>, and `rte.css` sets font-size plus a
   2.5rem bottom margin on a bare `p` - without this reset every programme point would render at
   body size and carry a full paragraph of space it does not need. */
.event-schedule-body p {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
}

/* `bold`, not 500: the body face is Figtree-Light and the theme loads each weight as its OWN
   family, so there is no 500 cut to switch to - the browser only synthesises a heavier face from
   about 600 up. A 500 here silently rendered the editor's bold exactly like the surrounding text. */
.event-schedule-body strong {
    font-weight: bold;
    color: #03344A;
}

.event-date-location {
    margin-top: 26px;
}

.event-location-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px 12px 14px;
    border: 1px solid rgb(25 145 142 / 35%);
    border-radius: 6px;
    background: rgb(255 255 255 / 60%);
    color: #03344A;
    text-decoration: none;
    transition: border-color 0.2s, background-color 0.2s;
}

a.event-location-link:is(:hover, :focus-visible) {
    border-color: #19918E;
    background: #fff;
}

.event-location-pin {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    fill: #19918E;
}

/* The dot is punched out of the pin body rather than drawn on top - the pin is a single filled
   path, so a same-coloured circle would be invisible. */
.event-location-pin-dot {
    fill: #fff;
}

.event-location-text {
    display: flex;
    flex-direction: column;
}

.event-location-name {
    font-size: 18px;
    line-height: 1.3;
}

.event-location-hint {
    font-size: 13px;
    letter-spacing: 0.06em;
    color: #19918E;
}

/* ---- Signature visual: occlusal arch or editor-selected media ---- */

.event-hero-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.event-hero-media-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 420px);
    aspect-ratio: 4 / 3;
}

.event-hero-media,
.event-hero-arch,
.arch-illustration {
    width: 100%;
    height: 100%;
}

.event-hero-media {
    display: block;
    object-fit: contain;
}

.event-hero-arch {
    display: flex;
    align-items: center;
    justify-content: center;
}

.arch-illustration {
    overflow: visible;
}

.arch-grid line {
    stroke: rgba(3, 52, 74, 0.10);
    stroke-width: 1;
    stroke-dasharray: 3 5;
}

.arch-line {
    stroke: #19918E;
    stroke-width: 2.5;
    stroke-linecap: round;
    fill: none;
    stroke-dasharray: 560;
    stroke-dashoffset: 560;
    animation: event-draw 1.6s cubic-bezier(0.4, 0, 0.2, 1) 0.55s forwards;
}

.arch-line-secondary {
    stroke: #A8DCD7;
    stroke-width: 2;
    animation-delay: 0.9s;
}

@keyframes event-draw {
    to { stroke-dashoffset: 0; }
}

.arch-dots circle {
    fill: #03344A;
    stroke: #F2F8F7;
    stroke-width: 2.5;
    opacity: 0;
    animation: event-dot-in 0.4s ease forwards;
}

.arch-dots circle:nth-child(1) { animation-delay: 0.70s; }
.arch-dots circle:nth-child(2) { animation-delay: 0.80s; }
.arch-dots circle:nth-child(3) { animation-delay: 0.90s; }
.arch-dots circle:nth-child(4) { animation-delay: 1.00s; }
.arch-dots circle:nth-child(5) { animation-delay: 1.10s; }
.arch-dots circle:nth-child(6) { animation-delay: 1.20s; }
.arch-dots circle:nth-child(7) { animation-delay: 1.30s; }

@keyframes event-dot-in {
    to { opacity: 1; }
}

.event-hero-caption {
    margin-top: 18px;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0E5560;
}

/* ---- Content sections: one-column FC section with event_content ---- */

.event-content > p,
.event-content > div > p {
    font-size: 19px;
    line-height: 1.75;
    color: #03344A;
}

.event-body-card {
    padding: 48px 56px;
    background: #F2F8F7;
    border-radius: 0;          /* Precise square geometry matches the brand. */
    border-left: 3px solid #19918E;
}

.event-body-card h2,
.event-body-card h3 {
    font-weight: 500;
    color: #03344A;
}

.event-body-card h3 {
    font-size: 26px;
    margin: 28px 0 12px;
}

/* Present the opening question as a statement rather than a standard heading. */
.event-body-card h3:first-of-type {
    font-size: clamp(25px, 3vw, 34px);
    line-height: 1.28;
    margin: 0 0 26px;
    padding: 0 0 22px;
    border-bottom: 2px solid #19918E;
    max-width: 92%;
}

.event-body-card p:first-child { margin-top: 0; }
.event-body-card p:last-child { margin-bottom: 0; }

/* ---- Form section ---- */

.event-form-block {
    max-width: 760px;
    margin: 0 auto;
}

.event-form-intro {
    max-width: 720px;
    margin: 0 auto 40px;
    text-align: center;
}

.event-form-intro p {
    font-size: 20px;
    line-height: 1.7;
    color: #03344A;
}

.event-form-intro strong {
    color: #03344A;
}

.event-form-card {
    max-width: 720px;
    margin: 0 auto;
    padding: 44px 52px;
    background: #ffffff;
    box-shadow: 0 18px 48px rgba(3, 52, 74, 0.10);
}

/* LEXO Forms renders dynamic slots as .form-field label/input pairs. Match the shared contact
   controls for padding, border, and focus while retaining the select arrow and message counter. */

/* Only the tokens differ from the shared floating-label block in style.css - this form runs a
   smaller type scale (16/24 against 20/28), so its caption sits and rises a little tighter. The
   floated size lands on 12px in both forms. */
#event-registration-form {
    --field-pad-x: 24px;
    --field-label-size: 16px;
    --field-label-line: 24px;
    --field-label-top: 17px;
    --field-label-top-area: 24px;
    --field-label-float-top: 7px;
    --field-label-scale: 0.75;
}

#event-registration-form .form-field {
    position: relative;
    width: 100%;
}

#event-registration-form .form-field .required {
    color: #C0392B;
    font-size: 15px;
    line-height: 1;
}

#event-registration-form .form-field input,
#event-registration-form .form-field select,
#event-registration-form .form-field textarea {
    color: #32353D;
    border: 1px solid #cacdd6;
    border-radius: 6px;
    background-color: #fff;
    width: 100%;

    /* Top-heavy so the floated caption has room; 24 + 8 matches the previous 16 + 16, so the
       control keeps its 58px height. */
    padding: 24px 24px 8px;
    box-sizing: border-box;
    font-size: 16px;
    letter-spacing: 0.02em;
    line-height: 24px;
    transition: border 0.2s;
}

#event-registration-form .form-field input:is(:hover, :focus),
#event-registration-form .form-field select:is(:hover, :focus),
#event-registration-form .form-field textarea:is(:hover, :focus) {
    border-color: #32353D;
    outline: none;
}

#event-registration-form .form-field input.error,
#event-registration-form .form-field select.error,
#event-registration-form .form-field textarea.error {

    /* stylelint-disable-next-line no-unknown-custom-properties -- Shared LEXO form token from style.css. */
    border-color: var(--validation-error-color);
}

/* Kept in the markup so `:placeholder-shown` can tell an empty field from a filled one, but not
   painted - the floating label already says it. */
#event-registration-form .form-field input::placeholder,
#event-registration-form .form-field textarea::placeholder {
    color: transparent;
}

#event-registration-form .form-field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #32353D 50%),
                      linear-gradient(135deg, #32353D 50%, transparent 50%);
    background-position: calc(100% - 24px) 50%, calc(100% - 18px) 50%;
    background-size: 6px 6px;
    background-repeat: no-repeat;
    padding-right: 48px;
    cursor: pointer;
}

#event-registration-form .form-field textarea {
    min-height: 120px;
}

/* Full width: the shared `.basic-form .form-input-fields` rule (0,2,0) pins every field to
   calc(50% - 6px) for the two-column rows. The id qualifier is what outranks it - a plain
   `.event-form-practice` class would lose and the field would sit at half width. */
#event-registration-form .event-form-practice {
    width: 100%;
}

/* The full-width message keeps its character counter inside the lower-right corner. */
#event-registration-form .event-form-message {
    position: relative;
    width: 100%;
}

#event-registration-form .event-form-message textarea {
    padding-bottom: 30px; /* Reserve space for the counter inside the field. */
}

#event-registration-form .event-char-counter {
    position: absolute;
    right: 14px;
    bottom: 10px;
    font-size: 12px;
    letter-spacing: 0.02em;
    color: #8AA3AA;
    pointer-events: none;
}

#event-registration-form .event-char-counter.is-full {
    color: #C0392B;
}

/* A checkbox slot renders <label class="form-field-checkbox"><input><span>text</span></label>.
   Two rules above have to be undone for it: `.form-field input` stretches every control to
   width 100% with 16px/24px padding, which would blow the box up to a full-width white field,
   and `.form-field label` uppercases at 13px, which is wrong for a sentence.

   The `.form-field` in the selector below is NOT decoration - measured on the live page:
   `#event-registration-form .form-field label` is (1,1,1) and beats a plain
   `#event-registration-form .form-field-checkbox` at (1,1,0), so display/font-size/
   text-transform all fell back to the label rule and the sentence rendered as small caps
   stacked under the box. Qualifying the class with `label.` lands at (1,2,1) and wins. */

#event-registration-form .event-form-optout {
    width: 100%;
}

#event-registration-form .form-field label.form-field-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    color: #32353D;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.02em;
    text-transform: none;
    cursor: pointer;
}

#event-registration-form .form-field label.form-field-checkbox input[type="checkbox"] {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: 1px 0 0;
    padding: 0;
    border-radius: 0; /* Precision motif: the event page is square-cornered. */
    accent-color: #19918E;
    cursor: pointer;
}

#event-registration-form .form-field label.form-field-checkbox span {
    flex: 1 1 auto;
}

#event-registration-form .event-form-submit {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

#event-registration-form .event-form-submit .button.dark {
    /* The shared theme button system already matches the contact form. */
    letter-spacing: 0.04em;
}

/* ---- Responsive ---- */

@media (max-width: 900px) {
    .event-hero { padding: 64px 20px 72px; }
    .event-hero-grid { grid-template-columns: 1fr; gap: 44px; }
    .event-hero-visual { order: -1; }
    .event-hero-media-frame { width: min(100%, 300px); }
    .event-body-card { padding: 32px 26px; }
    .event-form-card { padding: 32px 24px; }
}

@media (max-width: 768px) {
    .event-date-big { font-size: clamp(26px, 7.5vw, 34px); }
    .event-date-time { font-size: 19px; }
    .event-date-weekday { font-size: 18px; }

    .event-schedule-body {
        font-size: 17px;
    }

    /* The venue box is a link target, so it keeps a full-width tap area instead of shrink-wrapping
       to the text on a phone. */
    .event-location-link {
        display: flex;
        padding: 12px 14px;
    }
}

/* ---- Reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
    .event-eyebrow,
    .event-title,
    .event-date-block,
    .event-hero-visual {
        opacity: 1;
        animation: none;
        transform: none;
    }
    .arch-line {
        stroke-dashoffset: 0;
        animation: none;
    }
    .arch-dots circle { opacity: 1; animation: none; }
}