/* ==========================================================================
   Summit Neuro, WordPress integration layer
   ==========================================================================

   The static site's markup is reproduced verbatim by the theme templates, so
   this file is deliberately small. It exists for the three places where
   WordPress or a plugin inserts wrappers of its own:

     1. Contact Form 7's field and response wrappers.
     2. Editor-generated content (the policy page, blog posts).
     3. Core pagination markup.

   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Contact Form 7
   --------------------------------------------------------------------------
   CF7 wraps every control in <span class="wpcf7-form-control-wrap">. Left as
   an inline element that breaks the full-width inputs the design uses, so it
   is promoted to a block. Everything else here recreates the original
   checkbox grid and turns CF7's messages into the same notice cards the
   static page used.
   -------------------------------------------------------------------------- */

.wpcf7 { position: relative; }

.wpcf7-form-control-wrap {
  display: block;
  position: relative;
}

/* The form itself keeps the original vertical rhythm. */
.sn-appointment-form .wpcf7-form > .space-y-5 > * + * { margin-top: 1.25rem; }

/* ---- Text controls -------------------------------------------------------
   Reproduces the original border and focus ring:
     border border-primary/15 focus:border-sky focus:ring-2 focus:ring-sky/30
   Contact Form 7 strips "/" and ":" from its class: option, so these three
   utilities cannot travel in the form template and live here instead. */

.sn-appointment-form input[type="text"].wpcf7-form-control,
.sn-appointment-form input[type="email"].wpcf7-form-control,
.sn-appointment-form input[type="tel"].wpcf7-form-control,
.sn-appointment-form input[type="date"].wpcf7-form-control,
.sn-appointment-form input[type="number"].wpcf7-form-control,
.sn-appointment-form input[type="url"].wpcf7-form-control,
.sn-appointment-form select.wpcf7-form-control,
.sn-appointment-form textarea.wpcf7-form-control {
  border-color: rgba(11, 11, 13, 0.15);
  background-color: #fff;
  color: #0B0B0D;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sn-appointment-form input[type="text"].wpcf7-form-control:focus,
.sn-appointment-form input[type="email"].wpcf7-form-control:focus,
.sn-appointment-form input[type="tel"].wpcf7-form-control:focus,
.sn-appointment-form input[type="date"].wpcf7-form-control:focus,
.sn-appointment-form input[type="number"].wpcf7-form-control:focus,
.sn-appointment-form input[type="url"].wpcf7-form-control:focus,
.sn-appointment-form select.wpcf7-form-control:focus,
.sn-appointment-form textarea.wpcf7-form-control:focus {
  border-color: #5DADE2;
  box-shadow: 0 0 0 2px rgba(93, 173, 226, 0.3);
  outline: none;
}

.sn-appointment-form ::placeholder { color: rgba(11, 11, 13, 0.4); }

/* Hide CF7's default screen-reader response container duplication. */
.sn-appointment-form .screen-reader-response { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); white-space: nowrap; }

/* ---- Checkbox grid ------------------------------------------------------ */
/* Recreates: <div class="grid sm:grid-cols-2 gap-2.5 mt-2"> with each row a
   flex label. CF7 renders <span class="wpcf7-checkbox"><span
   class="wpcf7-list-item"><label>…</label></span></span>. */

.sn-checkbox-grid .wpcf7-checkbox {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.625rem;
  margin-top: 0.5rem;
}

@media (min-width: 640px) {
  .sn-checkbox-grid .wpcf7-checkbox { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.sn-checkbox-grid .wpcf7-list-item { margin: 0; display: block; }

.sn-checkbox-grid .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgba(11, 11, 13, 0.8);
  cursor: pointer;
  margin: 0;
}

.sn-checkbox-grid .wpcf7-list-item-label { display: inline; }

.sn-checkbox-grid input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  border-radius: 0.25rem;
  border: 1px solid rgba(11, 11, 13, 0.3);
  accent-color: #5DADE2;
  margin: 0;
}

.sn-checkbox-grid input[type="checkbox"]:focus-visible {
  outline: 2px solid rgba(93, 173, 226, 0.4);
  outline-offset: 2px;
}

/* ---- Messages ---------------------------------------------------------- */
/* The static page showed a pale-blue success card and used red only for
   validation. CF7's response output is restyled to match both.

   CF7 prints the response container on every render, empty, and hides it from
   its own stylesheet, which this theme dequeues. So the hiding is repeated
   here, as an allow-list: the card appears only for the states that carry a
   message. That also covers a submit without JavaScript, where CF7 prints the
   status class on the <form> server-side. Without this the empty card sits
   under the Send button on every page load. */

.sn-appointment-form .wpcf7-response-output {
  display: none;
  margin: 1.75rem 0 0;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(93, 173, 226, 0.4);
  background: rgba(207, 244, 255, 0.4);
  color: #0B0B0D;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.625;
}

/* The pale-blue card above is the sent state; the rest are errors. */
.sn-appointment-form .wpcf7 form.sent .wpcf7-response-output,
.sn-appointment-form .wpcf7 form.failed .wpcf7-response-output,
.sn-appointment-form .wpcf7 form.aborted .wpcf7-response-output,
.sn-appointment-form .wpcf7 form.spam .wpcf7-response-output,
.sn-appointment-form .wpcf7 form.invalid .wpcf7-response-output,
.sn-appointment-form .wpcf7 form.unaccepted .wpcf7-response-output,
.sn-appointment-form .wpcf7 form.payment-required .wpcf7-response-output {
  display: block;
}

.sn-appointment-form .wpcf7 form.failed .wpcf7-response-output,
.sn-appointment-form .wpcf7 form.aborted .wpcf7-response-output,
.sn-appointment-form .wpcf7 form.spam .wpcf7-response-output,
.sn-appointment-form .wpcf7 form.invalid .wpcf7-response-output,
.sn-appointment-form .wpcf7 form.unaccepted .wpcf7-response-output,
.sn-appointment-form .wpcf7 form.payment-required .wpcf7-response-output {
  border-color: rgba(211, 52, 20, 0.35);
  background: rgba(211, 52, 20, 0.06);
  color: #8f2410;
}

/* CF7's own stylesheet hides the hidden-input wrapper; it is dequeued too. */
.wpcf7 .hidden-fields-container { display: none; }

.sn-appointment-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #b32d2e;
}

.sn-appointment-form input.wpcf7-not-valid,
.sn-appointment-form textarea.wpcf7-not-valid {
  border-color: rgba(211, 52, 20, 0.55);
}

/* Submit button spinner sits beside the button rather than shifting layout. */
.sn-appointment-form .wpcf7-spinner {
  margin: 0 0 0 0.75rem;
  vertical-align: middle;
}

/* CF7 adds a hidden submit duplicate in some configurations. */
.sn-appointment-form input.wpcf7-submit[type="submit"] { display: none; }

/* Native date input keeps the same type styling as the text inputs. */
.sn-appointment-form input[type="date"] { min-height: 3.125rem; }

/* --------------------------------------------------------------------------
   2. Editor content
   --------------------------------------------------------------------------
   The policy page and blog posts come from the block/classic editor, so their
   markup is whatever the editor produced. These rules give that output the
   same typography as the hand-built pages without needing a plugin.
   -------------------------------------------------------------------------- */

.sn-prose > * + * { margin-top: 1.5rem; }

.sn-prose h2 {
  font-size: 1.75rem;
  line-height: 1.25;
  font-weight: 500;
  color: #0B0B0D;
  margin-top: 2.5rem;
}

.sn-prose h3 {
  font-size: 1.25rem;
  line-height: 1.35;
  font-weight: 600;
  color: #0B0B0D;
  margin-top: 2rem;
}

.sn-prose h4 { font-size: 1.0625rem; font-weight: 600; color: #0B0B0D; margin-top: 1.75rem; }

.sn-prose a {
  color: #0B0B0D;
  text-decoration: underline;
  text-decoration-color: rgba(201, 162, 75, 0.6);
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.sn-prose a:hover { color: #C9A24B; }

.sn-prose ul,
.sn-prose ol { padding-left: 1.35rem; }

.sn-prose ul { list-style: disc; }
.sn-prose ol { list-style: decimal; }
.sn-prose li + li { margin-top: 0.5rem; }
.sn-prose li::marker { color: #5DADE2; }

.sn-prose blockquote {
  border-left: 3px solid #C9A24B;
  padding: 0.25rem 0 0.25rem 1.25rem;
  font-style: italic;
  color: rgba(11, 11, 13, 0.72);
}

.sn-prose img,
.sn-prose iframe,
.sn-prose video { max-width: 100%; height: auto; border-radius: 1rem; }

.sn-prose figure { margin: 2rem 0; }
.sn-prose figcaption { font-size: 0.8125rem; color: rgba(11, 11, 13, 0.55); margin-top: 0.5rem; }

.sn-prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.sn-prose th,
.sn-prose td { border: 1px solid rgba(11, 11, 13, 0.1); padding: 0.625rem 0.875rem; text-align: left; }
.sn-prose th { background: #FCF4E9; font-weight: 600; }

.sn-prose code {
  background: #FCF4E9;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.9em;
}

.sn-prose pre {
  background: #0B0B0D;
  color: #FCF4E9;
  padding: 1.25rem;
  border-radius: 1rem;
  overflow-x: auto;
}

.sn-prose pre code { background: none; padding: 0; color: inherit; }

.sn-prose hr { border: 0; border-top: 1px solid rgba(11, 11, 13, 0.1); margin: 2.5rem 0; }

/* The .not-prose escape hatch, matching the utility used in the original markup. */
.sn-prose .not-prose > * + * { margin-top: 0; }

/* Alignment classes the editor emits. */
.sn-prose .alignleft { float: left; margin: 0.5rem 1.5rem 1rem 0; }
.sn-prose .alignright { float: right; margin: 0.5rem 0 1rem 1.5rem; }
.sn-prose .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.sn-prose .alignwide { width: 100%; }

/* --------------------------------------------------------------------------
   3. Pagination
   -------------------------------------------------------------------------- */

.sn-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.75rem;
  border-radius: 9999px;
  border: 1px solid rgba(11, 11, 13, 0.1);
  background: #FCF4E9;
  color: #0B0B0D;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.sn-pagination .page-numbers:hover {
  background: #C9A24B;
  border-color: #C9A24B;
  color: #0B0B0D;
}

.sn-pagination .page-numbers.current {
  background: #0B0B0D;
  border-color: #0B0B0D;
  color: #fff;
}

.sn-pagination .page-numbers.dots {
  background: none;
  border-color: transparent;
}

/* --------------------------------------------------------------------------
   4. Small accessibility and admin-bar corrections
   -------------------------------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* The header is fixed, so the logged-in admin bar must not sit over it. */
body.admin-bar #site-header { top: 32px; }

@media screen and (min-width: 1024px) {
  body.admin-bar #site-header { top: calc(1rem + 32px); }
}

@media screen and (max-width: 782px) {
  body.admin-bar #site-header { top: 46px; }
  body.admin-bar #mobile-menu { top: 46px; height: calc(100% - 46px); }
}

/* WordPress caption / gallery defaults inside content areas. */
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 0.8125rem; color: rgba(11, 11, 13, 0.55); }