@charset "UTF-8";
/* ==========================================================================
   THE SKAGIT CASINO RESORT — CONTACT FORM
   Skin for inc/contact-form.php ([skagit_contact_form]).
   --------------------------------------------------------------------------
   Load AFTER skagit-buttons.css: the submit control is a plain
   `.sk-btn.sk-btn--primary` and this file adds nothing to it beyond layout.

   THINGS THIS FILE DELIBERATELY DOES NOT DO
   - It never declares `outline` and never declares `box-shadow` inside a
     `:focus` / `:focus-visible` rule. The two-tone gold focus ring in
     skagit-design-system.css §1.11 is the site's accessibility contract and a
     component stylesheet must not be able to blunt it. The resting shadow on
     inputs is declared at specificity (0,1,0), below the design system's
     `input:focus-visible` (0,1,1), so the halo ring cleanly replaces it the
     moment a key user arrives.
   - It carries no `!important`.
   - Error state is never signalled by colour alone: the red rule is always
     accompanied by the word "Error:" (visually hidden), the message text, and
     a heavier border.
   ========================================================================== */

/* ==========================================================================
   1. SHELL
   ========================================================================== */

.skagit-contact {
  --skc-gap: var(--sk-space-md);
  --skc-field-border: var(--sk-border-strong);
  --skc-danger: var(--sk-status-soldout);
  --skc-good: var(--sk-status-free);

  max-width: 46rem;
  margin-inline: auto;
  font-family: var(--sk-font-body);
  color: var(--sk-text);
}

.skagit-contact-title {
  margin-block: 0 var(--sk-space-2xs);
}

.skagit-contact-intro {
  margin-block: 0 var(--sk-space-md);
  color: var(--sk-text-muted);
  font-size: var(--sk-fs-sm);
  max-width: var(--sk-measure-narrow);
}

.skagit-contact-intro a {
  color: var(--sk-link);
  font-weight: var(--sk-weight-semi);
}

/* ==========================================================================
   2. STATUS AND ERROR SUMMARY
   Both containers take focus from the URL fragment after the redirect, so they
   need a visible resting treatment strong enough to read as "start here".
   ========================================================================== */

.skagit-contact-alert {
  margin-block: 0 var(--sk-space-md);
  padding: var(--sk-space-sm) var(--sk-space-md);
  border: 1px solid var(--sk-border);
  border-left: 5px solid var(--sk-border-strong);
  border-radius: var(--sk-radius-sm);
  background: var(--sk-surface-sunken);
  box-shadow: var(--sk-shadow-xs);
}

.skagit-contact-alert__title {
  margin: 0 0 var(--sk-space-3xs);
  font-family: var(--sk-font-display);
  font-size: var(--sk-fs-lg);
  font-weight: var(--sk-weight-bold);
  line-height: var(--sk-lh-snug);
  color: var(--sk-text-heading);
}

.skagit-contact-alert p {
  margin: 0;
  color: var(--sk-text);
  font-size: var(--sk-fs-sm);
}

.skagit-contact-alert p + p {
  margin-top: var(--sk-space-3xs);
}

.skagit-contact-alert__list {
  margin: var(--sk-space-2xs) 0 0;
  padding-left: 1.25em;
  font-size: var(--sk-fs-sm);
}

.skagit-contact-alert__list li + li {
  margin-top: var(--sk-space-3xs);
}

.skagit-contact-alert__list a {
  color: var(--skc-danger);
  font-weight: var(--sk-weight-semi);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* --- Success -------------------------------------------------------------
   A gold hairline rather than a green wash: this is a resort page, not a
   validation console. The word "sent" carries the meaning. */
.skagit-contact-alert--success {
  border-left-color: var(--sk-gold-500);
  background:
    linear-gradient(180deg, rgba(212, 175, 55, 0.10), rgba(212, 175, 55, 0) 3.5rem),
    var(--sk-surface);
}

.skagit-contact-alert--success .skagit-contact-alert__title {
  color: var(--sk-navy-800);
}

/* --- Error ------------------------------------------------------------- */
.skagit-contact-alert--error {
  border-left-color: var(--skc-danger);
  background: var(--sk-surface);
}

.skagit-contact-alert--error .skagit-contact-alert__title {
  color: var(--skc-danger);
}

/* ==========================================================================
   3. FORM SHELL
   ========================================================================== */

.skagit-contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--skc-gap);
  padding: var(--sk-space-lg);
  background: var(--sk-surface);
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-lg);
  box-shadow: var(--sk-shadow-sm);
  position: relative;
  overflow: hidden;
}

/* Brass rule across the top edge — the signature the rest of the site uses. */
.skagit-contact-form::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--sk-grad-brass);
}

/* Two fields side by side from the tablet breakpoint up. */
.skagit-contact-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--skc-gap);
}

@media (min-width: 40em) {
  .skagit-contact-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==========================================================================
   4. FIELDS
   ========================================================================== */

.skagit-contact-field {
  display: flex;
  flex-direction: column;
  gap: var(--sk-space-3xs);
  min-width: 0;   /* lets a grid child shrink instead of forcing overflow */
}

.skagit-contact-label {
  font-size: var(--sk-fs-sm);
  font-weight: var(--sk-weight-semi);
  letter-spacing: var(--sk-tracking-tight);
  color: var(--sk-text-heading);
}

/* "(required)" / "(optional)" are real words in the label, never a bare
   asterisk and never colour on its own — WCAG 1.4.1. */
.skagit-contact-req,
.skagit-contact-optional {
  font-weight: var(--sk-weight-regular);
  font-size: var(--sk-fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--sk-tracking-wide);
}

.skagit-contact-req {
  color: var(--sk-accent-ink);
}

.skagit-contact-optional {
  color: var(--sk-text-faint);
}

.skagit-contact-hint {
  margin: 0;
  font-size: var(--sk-fs-xs);
  line-height: var(--sk-lh-body);
  color: var(--sk-text-faint);
}

.skagit-contact-error {
  margin: 0;
  font-size: var(--sk-fs-sm);
  font-weight: var(--sk-weight-semi);
  color: var(--skc-danger);
}

/* --- Controls ----------------------------------------------------------- */

.skagit-contact-input {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font-family: var(--sk-font-body);
  font-size: var(--sk-fs-base);
  line-height: 1.4;
  color: var(--sk-text);
  background-color: var(--sk-white);
  border: 1px solid var(--skc-field-border);
  border-radius: var(--sk-radius-sm);
  box-shadow: inset 0 1px 2px rgba(6, 25, 43, 0.05);
  transition: border-color var(--sk-dur-fast) var(--sk-ease-out),
              background-color var(--sk-dur-fast) var(--sk-ease-out);
}

.skagit-contact-input:hover {
  border-color: var(--sk-navy-600);
}

/* Deliberately border-only. No outline, no box-shadow: the design system owns
   the focus ring and must be allowed to paint it. */
.skagit-contact-input:focus {
  border-color: var(--sk-navy-700);
}

.skagit-contact-input::placeholder {
  color: var(--sk-text-faint);
}

.skagit-contact-input--narrow {
  max-width: 8rem;
}

.skagit-contact-textarea {
  min-height: 11rem;
  resize: vertical;
  line-height: var(--sk-lh-body);
}

.skagit-contact-select {
  appearance: none;
  padding-right: 2.5rem;
  cursor: pointer;
  /* Chevron drawn as a data URI so nothing here needs a network request or an
     icon font — the theme's Font Awesome is a third-party CDN dependency. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230B3D68' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 1rem 1rem;
}

/* --- Invalid ------------------------------------------------------------ */

.skagit-contact-field.is-invalid .skagit-contact-input,
.skagit-contact-fieldset.is-invalid {
  border-color: var(--skc-danger);
  border-width: 2px;
  background-color: #FDF7F7;
}

.skagit-contact-field.is-invalid .skagit-contact-label {
  color: var(--skc-danger);
}

/* ==========================================================================
   5. RADIO GROUP
   ========================================================================== */

.skagit-contact-fieldset {
  margin: 0;
  padding: var(--sk-space-sm) var(--sk-space-md) var(--sk-space-md);
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-sm);
  background: var(--sk-surface-sunken);
  min-width: 0;
}

.skagit-contact-legend {
  padding-inline: var(--sk-space-3xs);
  font-size: var(--sk-fs-sm);
  font-weight: var(--sk-weight-semi);
  letter-spacing: var(--sk-tracking-tight);
  color: var(--sk-text-heading);
}

.skagit-contact-choice {
  display: flex;
  align-items: center;
  gap: var(--sk-space-2xs);
  margin-top: var(--sk-space-2xs);
}

.skagit-contact-choice input[type="radio"] {
  /* 22px keeps the control itself above the 24px target once the label is
     counted, and stops the browser default shrinking on high-DPI Android. */
  width: 1.35rem;
  height: 1.35rem;
  margin: 0;
  accent-color: var(--sk-navy-700);
  flex: 0 0 auto;
}

/* The label is part of the hit area, so give it room and a pointer. */
.skagit-contact-choice label {
  font-size: var(--sk-fs-base);
  font-weight: var(--sk-weight-regular);
  color: var(--sk-text);
  cursor: pointer;
  padding-block: 0.35rem;
}

/* ==========================================================================
   6. ACTIONS
   ========================================================================== */

.skagit-contact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sk-space-sm);
  margin-top: var(--sk-space-3xs);
}

@media (max-width: 30em) {
  /* Full-bleed CTA on a phone; .sk-btn already handles its own paint. */
  .skagit-contact-actions .sk-btn {
    width: 100%;
  }
}

/* ==========================================================================
   7. HONEYPOT
   Must be invisible to sighted users but NOT display:none — several spam bots
   skip fields that are display:none or type="hidden", which is exactly the
   population this is trying to catch. Pulled off-canvas instead.

   Screen readers are handled in the markup, not here: aria-hidden="true" on
   the wrapper plus tabindex="-1" on the input, so it is neither announced nor
   reachable by keyboard. CSS alone could not do that correctly.
   ========================================================================== */

.skagit-contact-hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   8. MOTION AND FORCED COLOURS
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .skagit-contact-input {
    transition: none;
  }
}

@media (forced-colors: active) {
  /* In forced-colours mode custom paint is discarded, so the invalid state
     must survive as something structural. */
  .skagit-contact-field.is-invalid .skagit-contact-input,
  .skagit-contact-fieldset.is-invalid {
    border-style: dashed;
    border-width: 2px;
  }

  .skagit-contact-form::before {
    display: none;
  }
}

/* ==========================================================================
   SELF-BARRING REQUEST FORM  (inc/self-barring-form.php)

   Deliberately plainer than the contact form. Somebody filling this in is
   asking us to stop letting them gamble; it is not a moment for flourishes.
   Same field metrics and focus ring as the contact form so it reads as part of
   the site, but no decorative panel and no accent colour on the controls.
   ========================================================================== */
.skagit-sbf {
  max-width: var(--sk-measure);
  margin-inline: auto;
}

/* --- Notices ------------------------------------------------------------- */
.skagit-sbf__notice {
  margin: 0 0 var(--sk-space-lg);
  padding: var(--sk-space-sm) var(--sk-space-md);
  border-left: 4px solid;
  border-radius: var(--sk-radius-sm);
  font-size: var(--sk-fs-sm);
  line-height: 1.55;
}

.skagit-sbf__notice p { margin: 0; }

.skagit-sbf__notice--success {
  border-color: #1f7a4d;
  background: #eef7f1;
  color: #14532d;
}

.skagit-sbf__notice--error {
  border-color: #9b2c2c;
  background: #fdf0ef;
  color: #7a231f;
}

/* Focus target after the redirect, without a visible outline on a div. */
.skagit-sbf__notice:focus { outline: none; }

/* --- Layout -------------------------------------------------------------- */
.skagit-sbf__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--sk-space-md);
}

.skagit-sbf__field { margin: 0 0 var(--sk-space-md); }
.skagit-sbf__grid .skagit-sbf__field { margin-bottom: 0; }
.skagit-sbf__field--wide { margin-top: var(--sk-space-md); }

.skagit-sbf__field label {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--sk-font-body);
  font-size: var(--sk-fs-sm);
  font-weight: var(--sk-weight-bold, 700);
  color: var(--sk-navy-900);
}

.skagit-sbf__req { color: #9b2c2c; }

.skagit-sbf__field input[type="text"],
.skagit-sbf__field input[type="email"],
.skagit-sbf__field input[type="tel"],
.skagit-sbf__field input[type="date"],
.skagit-sbf__field textarea {
  width: 100%;
  /* 48px: comfortably over the 44px touch floor in WCAG 2.5.8, and matches
     the contact form's controls. */
  min-height: 48px;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--sk-border-strong);
  border-radius: var(--sk-radius-sm);
  background: var(--sk-white);
  font-family: var(--sk-font-body);
  font-size: 1rem;   /* 16px stops iOS zooming the page on focus */
  color: var(--sk-text);
  box-sizing: border-box;
}

.skagit-sbf__field textarea { min-height: 7rem; resize: vertical; }

.skagit-sbf__field input:focus-visible,
.skagit-sbf__field textarea:focus-visible {
  outline: 3px solid var(--sk-bronze-700);
  outline-offset: 1px;
  border-color: var(--sk-bronze-700);
}

.skagit-sbf__hint {
  display: block;
  margin-top: 0.3rem;
  font-size: var(--sk-fs-xs);
  color: var(--sk-text-faint);
}

/* --- Invalid -------------------------------------------------------------
   The self-barring and sales enquiry forms set `is-invalid` on the failing
   field's wrapper, the same way the contact form does at §4 above — but only
   the contact form had a rule for it, so the flag was being written and never
   drawn. The error TEXT still rendered, so the miss was easy to overlook: the
   field itself stayed neutral while a red message sat underneath it, and on a
   nine-field enquiry that leaves the reader hunting for which box to fix.

   Both forms share the `skagit-sbf__` prefix (the sales form reuses it rather
   than defining a parallel set), so one block covers both.

   The `select` is listed separately because it only exists on the sales form
   and is scoped to `.skagit-scf` further down; without naming it here an
   invalid Event type would be the one control on either form that never
   turned red.

   Colour is NOT the only signal — each field also carries aria-invalid and a
   linked error node, so this is reinforcement rather than the message itself
   (WCAG 1.4.1 Use of Colour).
   ------------------------------------------------------------------------- */

.skagit-sbf__field.is-invalid input[type="text"],
.skagit-sbf__field.is-invalid input[type="email"],
.skagit-sbf__field.is-invalid input[type="tel"],
.skagit-sbf__field.is-invalid input[type="date"],
.skagit-sbf__field.is-invalid input[type="number"],
.skagit-sbf__field.is-invalid textarea,
.skagit-scf .skagit-sbf__field.is-invalid select {
  border-color: var(--skc-danger);
  border-width: 2px;
  background-color: #FDF7F7;
}

.skagit-sbf__field.is-invalid label {
  color: var(--skc-danger);
}

@media (forced-colors: active) {
  /* Forced-colours mode throws custom paint away, so the invalid state has to
     survive as something structural rather than as a colour. */
  .skagit-sbf__field.is-invalid input,
  .skagit-sbf__field.is-invalid textarea,
  .skagit-scf .skagit-sbf__field.is-invalid select {
    border-style: dashed;
    border-width: 2px;
  }
}

/* --- The sum ------------------------------------------------------------- */
.skagit-sbf__field--captcha {
  margin-top: var(--sk-space-lg);
  padding-top: var(--sk-space-md);
  border-top: 1px solid var(--sk-border);
}

.skagit-sbf__field--captcha input { max-width: 7rem; }

/* --- Legal note and action ----------------------------------------------- */
.skagit-sbf__legal {
  margin: var(--sk-space-md) 0 0;
  font-size: var(--sk-fs-xs);
  line-height: 1.55;
  color: var(--sk-text-faint);
}

.skagit-sbf__actions { margin: var(--sk-space-lg) 0 0; }

/* --- Honeypot ------------------------------------------------------------
   Off-screen rather than display:none — some bots skip anything hidden that
   way, and this one needs to look fillable. */
.skagit-sbf__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 47.99em) {
  .skagit-sbf__grid { gap: var(--sk-space-sm); }
  .skagit-sbf__actions .sk-btn { width: 100%; justify-content: center; }
}

/* Sales & Catering shares every .skagit-sbf rule; only the <select> is new. */
.skagit-scf .skagit-sbf__field select {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--sk-border-strong);
  border-radius: var(--sk-radius-sm);
  background: var(--sk-white);
  font-family: var(--sk-font-body);
  font-size: 1rem;   /* 16px — stops iOS zooming on focus */
  color: var(--sk-text);
  box-sizing: border-box;
}

.skagit-scf .skagit-sbf__field select:focus-visible {
  outline: 3px solid var(--sk-bronze-700);
  outline-offset: 1px;
  border-color: var(--sk-bronze-700);
}