/* ==========================================================================
   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. */

.sn-appointment-form .wpcf7-response-output {
  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;
}

.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;
}

.sn-appointment-form .wpcf7 form.sent .wpcf7-response-output {
  border-color: rgba(93, 173, 226, 0.4);
  background: rgba(207, 244, 255, 0.4);
  color: #0B0B0D;
}

.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); }