/**
 * BSMC Contact — page styles.
 *
 * Scoped to body.bsmc-contact-body so nothing leaks. Font + heading
 * reclaim at the top follows the same pattern as adventures.css /
 * events-calendar.css / clubhouse.css.
 *
 * The FORM ELEMENTS in the left column are styled generically enough
 * that any contact-form plugin's shortcode output (Contact Form 7,
 * WPForms, Gravity Forms, Fluent Forms, Formidable) picks up the
 * hard-cornered ink-on-white treatment without plugin-specific
 * selectors — we target `.bsmc-contact-form input/select/textarea/button`.
 */

/* ─── Font + heading reclaim ──────────────────────────────────── */
body.bsmc-contact-body,
html body.bsmc-contact-body p,
html body.bsmc-contact-body a,
html body.bsmc-contact-body div,
html body.bsmc-contact-body li,
html body.bsmc-contact-body ul,
html body.bsmc-contact-body ol,
html body.bsmc-contact-body span,
html body.bsmc-contact-body em,
html body.bsmc-contact-body label,
html body.bsmc-contact-body input,
html body.bsmc-contact-body select,
html body.bsmc-contact-body textarea,
html body.bsmc-contact-body button {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}
html body.bsmc-contact-body h1,
html body.bsmc-contact-body h2,
html body.bsmc-contact-body h3,
html body.bsmc-contact-body h4,
html body.bsmc-contact-body h5,
html body.bsmc-contact-body h6,
html body.bsmc-contact-body .bsmc-contact-h1,
html body.bsmc-contact-body .bsmc-contact-club__name,
html body.bsmc-contact-body .bsmc-contact-club__map,
html body.bsmc-contact-body .bsmc-contact-press__title,
html body.bsmc-contact-body .bsmc-contact-form button[type="submit"],
html body.bsmc-contact-body .bsmc-contact-form input[type="submit"],
html body.bsmc-contact-body .bsmc-contact-placeholder__title {
    font-family: 'Bebas Neue', Impact, 'Oswald', sans-serif !important;
    font-weight: 400 !important;
}
html body.bsmc-contact-body a { text-decoration: none !important; }

/* home3-body cream-heading reclaim (see clubhouse.css comment) */
html body.bsmc-contact-body.bsmc-home3-body h1,
html body.bsmc-contact-body.bsmc-home3-body h2,
html body.bsmc-contact-body.bsmc-home3-body h3,
html body.bsmc-contact-body.bsmc-home3-body h4,
html body.bsmc-contact-body.bsmc-home3-body h5,
html body.bsmc-contact-body.bsmc-home3-body h6,
html body.bsmc-contact-body.bsmc-home3-body .bsmc-contact-club__name,
html body.bsmc-contact-body.bsmc-home3-body .bsmc-contact-placeholder__title {
    color: var(--contact-ink) !important;
    -webkit-text-fill-color: var(--contact-ink) !important;
}
/* Dark sections keep white headings */
html body.bsmc-contact-body.bsmc-home3-body .bsmc-contact-header h1,
html body.bsmc-contact-body.bsmc-home3-body .bsmc-contact-h1,
html body.bsmc-contact-body.bsmc-home3-body .bsmc-contact-press .bsmc-contact-press__title {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* ─── Tokens + base ───────────────────────────────────────────── */
:root {
    --contact-ink: #0F0E0C;
    --contact-body: #3B3931;
    --contact-body-muted: #55524B;
    --contact-line: #E2DFD8;
    --contact-line-soft: #EDEAE3;
    --contact-input-border: #D9D5CC;
    --contact-placeholder: #9A968D;
    --contact-accent: #A18A55;
    /* Validation red — the one colour on this page that isn't from the
       brand palette, because an error has to read as an error. */
    --contact-error: #B3261E;
    --contact-max: 1240px;
}
body.bsmc-contact-body {
    margin: 0;
    padding: 0;
    background: #FFFFFF !important;
    color: var(--contact-ink);
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}
body.bsmc-contact-body * { box-sizing: border-box; }
body.bsmc-contact-body img { max-width: 100%; display: block; }

/* ─── 1 · Dark header ─────────────────────────────────────────── */
.bsmc-contact-header {
    background: var(--contact-ink);
    color: #FFFFFF;
}
.bsmc-contact-header__inner {
    max-width: var(--contact-max);
    margin: 0 auto;
    padding: clamp(48px, 7vw, 88px) clamp(20px, 4vw, 40px) clamp(40px, 5vw, 60px);
}
.bsmc-contact-kicker {
    margin: 0 0 18px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--contact-accent) !important;
    -webkit-text-fill-color: var(--contact-accent) !important;
}
.bsmc-contact-h1 {
    margin: 0 0 20px;
    font-size: clamp(48px, 7.5vw, 104px);
    line-height: 0.9;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}
.bsmc-contact-header__body {
    margin: 0;
    max-width: 560px;
    font-size: 18px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78) !important;
    text-wrap: pretty;
}

/* ─── 2 · Two-column body ────────────────────────────────────── */
.bsmc-contact-body__inner {
    max-width: var(--contact-max);
    margin: 0 auto;
    padding: clamp(44px, 6vw, 80px) clamp(20px, 4vw, 40px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(36px, 5vw, 72px);
    align-items: start;
}

/* ─── Form column (plugin's shortcode output lives here) ─────── */
.bsmc-contact-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
}
/* Generic form-element treatment — matches the design regardless of
   which plugin outputs the markup. Uses attribute selectors so
   plugin-specific class names don't matter. */
.bsmc-contact-form input[type="text"],
.bsmc-contact-form input[type="email"],
.bsmc-contact-form input[type="tel"],
.bsmc-contact-form input[type="url"],
.bsmc-contact-form input[type="number"],
.bsmc-contact-form input[type="password"],
.bsmc-contact-form input[type="date"],
.bsmc-contact-form select,
.bsmc-contact-form textarea {
    width: 100%;
    border: 1px solid var(--contact-input-border) !important;
    background: #FFFFFF !important;
    padding: 14px 16px !important;
    font-size: 17px !important;
    line-height: 1.4 !important;
    color: var(--contact-ink) !important;
    -webkit-text-fill-color: var(--contact-ink) !important;
    border-radius: 0 !important;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none !important;
    /* CF7 (and most generators) nest the control INSIDE its <label>, and
       both of these inherit into form controls — without the reset the
       user's own typing renders uppercase and letter-spaced. */
    text-transform: none !important;
    letter-spacing: normal !important;
}
.bsmc-contact-form input:focus,
.bsmc-contact-form select:focus,
.bsmc-contact-form textarea:focus {
    outline: none !important;
    border-color: var(--contact-ink) !important;
    box-shadow: 0 0 0 1px var(--contact-ink) !important;
}
.bsmc-contact-form textarea {
    min-height: 160px;
    resize: vertical;
}

/* ─── Selects ────────────────────────────────────────────────────
   Two problems the shared rule above creates for <select> specifically:

   1. `appearance: none` strips the native dropdown arrow, so a closed
      select was indistinguishable from a text input — no affordance that
      it opens anything. Re-add the arrow as a background SVG.
   2. WebKit clips a select's text when `line-height` is overridden with
      anything other than `normal`; the shared 1.4 was cutting the option
      label in half vertically. `height: auto` guards the same symptom
      coming from any host-theme rule that pins a fixed control height.

   NOTE: only the CLOSED control is ours to style. Once open, the option
   list is rendered by the OS, not the page — no amount of CSS reaches it.
   Styling that list would mean replacing the select with a JS widget,
   which costs native mobile pickers and keyboard behaviour. Not worth it. */
.bsmc-contact-form select {
    height: auto !important;
    min-height: 0 !important;
    line-height: normal !important;
    /* Room for the arrow so a long option can't run underneath it. */
    padding-right: 46px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230F0E0C' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 12px 8px !important;
    cursor: pointer;
}
/* CF7's include_blank placeholder ("—Please choose an option—") should read
   as placeholder text, not as a real answer, until something is picked. */
.bsmc-contact-form select:has(option[value=""]:checked) {
    color: var(--contact-placeholder) !important;
    -webkit-text-fill-color: var(--contact-placeholder) !important;
}
.bsmc-contact-form select option { color: var(--contact-ink); }
.bsmc-contact-form ::placeholder { color: var(--contact-placeholder); opacity: 1; }

.bsmc-contact-form label,
.bsmc-contact-form legend {
    display: block;
    margin-bottom: 9px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--contact-body-muted);
}
.bsmc-contact-form p,
.bsmc-contact-form .wpcf7-form-control-wrap { margin-bottom: 0; }

/* The gap on .bsmc-contact-form only reaches DIRECT children, and every
   form plugin emits a single <form> wrapper — so without this the gap
   applies to that one element and the fields inside end up flush against
   each other (made worse by the `p { margin-bottom: 0 }` reset above,
   which strips the margins CF7 would otherwise rely on). Re-apply the
   same stack to the form itself. */
.bsmc-contact-form form {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* ─── Validation + response states ───────────────────────────────
   These are the one place plugin-agnostic attribute selectors can't
   reach: every plugin invents its own class names for error text and
   the post-submit message. Selectors below cover Contact Form 7; if the
   form is ever rebuilt in another plugin these need its equivalents
   adding, or errors fall back to that plugin's stock red. */
.bsmc-contact-form .wpcf7-not-valid-tip {
    margin-top: 7px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--contact-error, #b3261e);
}
.bsmc-contact-form input.wpcf7-not-valid,
.bsmc-contact-form select.wpcf7-not-valid,
.bsmc-contact-form textarea.wpcf7-not-valid {
    border-color: var(--contact-error, #b3261e) !important;
}
/* CF7 ships a 2px coloured border on the response box; flatten it to the
   hard-cornered treatment the rest of the page uses. */
.bsmc-contact-form .wpcf7-response-output {
    margin: 0 !important;
    padding: 14px 16px !important;
    border: 1px solid var(--contact-ink) !important;
    border-radius: 0 !important;
    font-size: 15px;
    color: var(--contact-ink);
}
.bsmc-contact-form .wpcf7-form.invalid .wpcf7-response-output,
.bsmc-contact-form .wpcf7-form.unaccepted .wpcf7-response-output,
.bsmc-contact-form .wpcf7-form.failed .wpcf7-response-output {
    border-color: var(--contact-error, #b3261e) !important;
    color: var(--contact-error, #b3261e);
}
.bsmc-contact-form .wpcf7-form.sent .wpcf7-response-output {
    border-color: var(--contact-accent) !important;
}
/* CF7's AJAX spinner is inline-block and shifts the submit row; park it. */
.bsmc-contact-form .wpcf7-spinner { vertical-align: middle; }

/* Consent / acceptance checkbox: label must sit beside the box, not
   above it like the uppercase field labels do. */
.bsmc-contact-form .wpcf7-acceptance label,
.bsmc-contact-form .wpcf7-checkbox label,
.bsmc-contact-form .wpcf7-radio label {
    display: flex;
    align-items: flex-start;
    gap: 2px;
    margin-bottom: 0;
    font-size: 13px;
    letter-spacing: 0.02em;
    text-transform: none;
    font-weight: 400;
    line-height: 1.5;
}

.bsmc-contact-form input[type="checkbox"],
.bsmc-contact-form input[type="radio"] {
    width: 18px; height: 18px;
    margin: 3px 8px 0 0;
    accent-color: var(--contact-ink);
    vertical-align: top;
}

.bsmc-contact-form button[type="submit"],
.bsmc-contact-form input[type="submit"] {
    background: var(--contact-ink) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    border: 1px solid var(--contact-ink) !important;
    border-radius: 0 !important;
    padding: 16px 40px !important;
    font-size: 19px !important;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    box-shadow: none !important;
}
.bsmc-contact-form button[type="submit"]:hover,
.bsmc-contact-form input[type="submit"]:hover {
    background: var(--contact-accent) !important;
    color: var(--contact-ink) !important;
    -webkit-text-fill-color: var(--contact-ink) !important;
    border-color: var(--contact-accent) !important;
}
.bsmc-contact-reply {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--contact-body-muted);
}

/* Admin-only placeholder when form shortcode is empty */
.bsmc-contact-form--placeholder {
    padding: 30px 32px;
    border: 1px dashed var(--contact-input-border);
    background: #fafafa;
}
.bsmc-contact-placeholder__title {
    margin: 0 0 14px;
    font-size: 32px;
    line-height: 1.0;
    color: var(--contact-ink) !important;
    -webkit-text-fill-color: var(--contact-ink) !important;
}
.bsmc-contact-form--placeholder p { margin: 0 0 12px; font-size: 15px; color: var(--contact-body); }
.bsmc-contact-form--placeholder a { color: var(--contact-accent) !important; -webkit-text-fill-color: var(--contact-accent) !important; border-bottom: 1px solid var(--contact-accent); }
.bsmc-contact-form--empty { padding: 30px 32px; border: 1px solid var(--contact-line); background: #fafafa; font-size: 16px; color: var(--contact-body); }
.bsmc-contact-form--empty a { color: var(--contact-accent) !important; -webkit-text-fill-color: var(--contact-accent) !important; }

/* ─── Aside column ───────────────────────────────────────────── */
.bsmc-contact-aside {
    display: flex;
    flex-direction: column;
    gap: 26px;
}
.bsmc-contact-club {
    border: 1px solid var(--contact-line);
    padding: clamp(22px, 2.6vw, 30px);
    background: #FFFFFF;
}
.bsmc-contact-club__name {
    margin: 0 0 14px;
    font-size: 28px;
    line-height: 1.0;
    color: var(--contact-ink) !important;
    -webkit-text-fill-color: var(--contact-ink) !important;
}
.bsmc-contact-club__addr {
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.55;
    color: var(--contact-body);
}
.bsmc-contact-club__lines {
    display: flex;
    flex-direction: column;
    gap: 7px;
    border-top: 1px solid var(--contact-line-soft);
    padding-top: 14px;
}
.bsmc-contact-club__lines a {
    font-size: 16px;
    color: var(--contact-ink) !important;
    -webkit-text-fill-color: var(--contact-ink) !important;
}
.bsmc-contact-club__lines a:hover { color: var(--contact-accent) !important; -webkit-text-fill-color: var(--contact-accent) !important; }
.bsmc-contact-club__map {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 16px;
    font-size: 17px;
    letter-spacing: 0.1em;
    color: var(--contact-accent) !important;
    -webkit-text-fill-color: var(--contact-accent) !important;
}

.bsmc-contact-press {
    background: var(--contact-ink);
    color: #FFFFFF;
    padding: clamp(22px, 2.6vw, 30px);
}
.bsmc-contact-press__title {
    margin: 0 0 12px;
    font-size: 26px;
    line-height: 1.05;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}
.bsmc-contact-press__body {
    margin: 0 0 14px;
    font-size: 16px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.75);
}
.bsmc-contact-press a {
    font-size: 16px;
    color: var(--contact-accent) !important;
    -webkit-text-fill-color: var(--contact-accent) !important;
}


/* ─── FINAL OVERRIDES ──────────────────────────────────────────────
 * Same rationale as the block at the end of home3.css: this page ships
 * three body classes (bsmc-contact-body + bsmc-home3-body + bsmc-mhome)
 * and inherits both the parent theme's footer stylesheet and the child's
 * own inline sitewide font rules, several of which use !important. A
 * plain `.bsmc-contact-form input[type="submit"]` rule with !important
 * measured as losing in practice — the rendered button came out
 * #4D4C4B (black at ~70%) instead of --contact-ink.
 *
 * So these use the same belt-and-braces recipe that fixed it on home3:
 *   - max specificity (html + both body classes + element + attribute)
 *   - longhand `background-color` alongside the shorthand
 *   - `-webkit-text-fill-color`, which beats plain `color` in WebKit
 *   - explicit `opacity: 1`, since the measured colour was a blend
 * Nothing outside this block should override these.
 */
html body.bsmc-contact-body.bsmc-home3-body .bsmc-contact-form input[type="submit"],
html body.bsmc-contact-body.bsmc-home3-body .bsmc-contact-form button[type="submit"] {
    background: var(--contact-ink) !important;
    background-color: var(--contact-ink) !important;
    background-image: none !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    border: 1px solid var(--contact-ink) !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    filter: none !important;
    text-shadow: none !important;
}
html body.bsmc-contact-body.bsmc-home3-body .bsmc-contact-form input[type="submit"]:hover,
html body.bsmc-contact-body.bsmc-home3-body .bsmc-contact-form button[type="submit"]:hover {
    background: var(--contact-accent) !important;
    background-color: var(--contact-accent) !important;
    color: var(--contact-ink) !important;
    -webkit-text-fill-color: var(--contact-ink) !important;
    border-color: var(--contact-accent) !important;
}

/* Field labels — Bebas, matching the section headings. The child's inline
 * sitewide sheet sets `html body label { font-family: 'Montserrat'
 * !important }`, so this has to be stated at full specificity rather than
 * left to whichever rule wins.
 *
 * font-weight MUST be 400: Bebas Neue only ships weight 400 from Google
 * Fonts, and the base label rule asks for 600 — at which point the browser
 * either synthesises a fake bold or substitutes the next family in the
 * stack. Same trap documented in home3.css's heading block. */
html body.bsmc-contact-body.bsmc-home3-body .bsmc-contact-form label,
html body.bsmc-contact-body.bsmc-home3-body .bsmc-contact-form legend {
    font-family: 'Bebas Neue', Impact, 'Oswald', sans-serif !important;
    font-weight: 400 !important;
    /* Bebas is condensed AND has a small x-height, so it reads much
       smaller than the same pt size in Montserrat. Needs to sit close to
       the 17px input text to look like a peer rather than fine print. */
    font-size: 17px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.14em;
}
/* The consent line is a sentence, not a field label — keep it in the body
   font so it stays readable at small size. */
html body.bsmc-contact-body.bsmc-home3-body .bsmc-contact-form .wpcf7-acceptance label {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 13px;
    letter-spacing: 0.02em;
}

/* Control sizing, re-stated at override specificity.
 *
 * The rules further up use `.bsmc-contact-form select` (0,2,1) — the same
 * specificity that measurably lost to something for the submit button's
 * background. So the line-height fix for WebKit's select-text clipping was
 * landing in the cascade but not on the page. Anything whose absence is
 * visible as *clipping* is repeated here at full specificity.
 *
 * `height: auto` + `line-height: normal` are the pair that stop the clip:
 * WebKit cuts a select's text off when line-height is overridden, and any
 * host rule pinning a fixed control height crops it against our padding. */
html body.bsmc-contact-body.bsmc-home3-body .bsmc-contact-form select {
    height: auto !important;
    min-height: 0 !important;
    line-height: normal !important;
    padding: 14px 46px 14px 16px !important;
    font-size: 17px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230F0E0C' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 12px 8px !important;
}
html body.bsmc-contact-body.bsmc-home3-body .bsmc-contact-form input[type="text"],
html body.bsmc-contact-body.bsmc-home3-body .bsmc-contact-form input[type="email"],
html body.bsmc-contact-body.bsmc-home3-body .bsmc-contact-form input[type="tel"],
html body.bsmc-contact-body.bsmc-home3-body .bsmc-contact-form textarea {
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.4 !important;
    padding: 14px 16px !important;
    font-size: 17px !important;
}
html body.bsmc-contact-body.bsmc-home3-body .bsmc-contact-form textarea {
    min-height: 160px !important;
}
/* Bebas sits high in its em box; without room and a real line-height the
   caps clip against the button's top edge. */
html body.bsmc-contact-body.bsmc-home3-body .bsmc-contact-form input[type="submit"],
html body.bsmc-contact-body.bsmc-home3-body .bsmc-contact-form button[type="submit"] {
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.25 !important;
    padding: 18px 40px !important;
    font-size: 19px !important;
    letter-spacing: 0.1em !important;
    align-self: flex-start;
}