/* =============================================================================
   OrbitWix — the WordPress-only surfaces
   -----------------------------------------------------------------------------
   assets/css/style.css is Tailwind's build output, copied from the marketing
   repo. Tailwind never sees this theme's PHP, so any class used only here would
   compile to nothing — which is why everything below is plain CSS written
   against the same tokens rather than utilities.

   What that covers: the templates the static site has no counterpart for (blog,
   search, 404, editor pages, comments) and the markup plugins bring with them
   (Contact Form 7, the admin bar).

   The rules of the design system still hold. No raw hex — colour comes from a
   token. No new palette: validation uses --ow-warning, because the system has
   success / warning / info and deliberately no red, and colour never carries
   status on its own anyway, so the message says what is wrong in words.
   ========================================================================== */

/* -- WordPress core classes ------------------------------------------------ */

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.screen-reader-text:focus {
  z-index: 100000;
  top: 0.75rem;
  left: 0.75rem;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.5rem 1rem;
  clip-path: none;
  border-radius: var(--radius-lg);
  background: var(--card);
  color: var(--ow-text-primary);
  box-shadow: var(--ow-shadow-overlay);
}

/* The header is position:sticky, so the admin bar overlaps it rather than
   pushing it down the way html{margin-top} does for static content. */
.admin-bar header.sticky {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar header.sticky {
    top: 46px;
  }
}

body h1,body h2,body h3,body h4,body h5,body h6{font-weight:600}

/* -- Page furniture -------------------------------------------------------- */

.ow-wp-hero {
  position: relative;
  overflow: hidden;
  padding-block: 1.5rem 2.5rem;
}

@media (min-width: 48rem) {
  .ow-wp-hero {
    padding-bottom: 3.5rem;
  }
}

.ow-wp-hero > .ow-hero-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ow-wp-hero > .ow-shell {
  position: relative;
}

.ow-wp-hero-body {
  display: flex;
  max-width: 68ch;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.ow-wp-title {
  max-width: 24ch;
  font-size: 1.875rem;
  line-height: 1.15;
}

@media (min-width: 40rem) {
  .ow-wp-title {
    font-size: 2.25rem;
  }
}

@media (min-width: 64rem) {
  .ow-wp-title {
    font-size: 3rem;
  }
}

.ow-wp-lead {
  font-size: 1.25rem;
  line-height: 1.65;
  color: var(--ow-text-secondary);
}

.ow-wp-body {
  padding-top: 0;
}

.ow-wp-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

/* -- Post lists ------------------------------------------------------------ */

.ow-post-list {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .ow-post-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 80rem) {
  .ow-post-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ow-post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--ow-text-tertiary);
}

.ow-post-thumb,
.ow-post-hero {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--ow-surface-sunken);
}

.ow-post-hero {
  margin-bottom: 2rem;
}

.ow-post-thumb img,
.ow-post-hero img {
  display: block;
  width: 100%;
  height: auto;
}

.ow-card-title a {
  color: inherit;
  text-decoration: none;
}

.ow-card-title a:hover {
  color: var(--primary);
}

/* -- Pagination ------------------------------------------------------------ */

.ow-pagination {
  margin-top: 2.5rem;
}

.ow-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.ow-pagination .page-numbers {
  display: inline-flex;
  min-width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  padding-inline: 0.625rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  color: var(--ow-text-secondary);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.ow-pagination a.page-numbers:hover {
  border-color: var(--border-strong);
  color: var(--ow-text-primary);
}

.ow-pagination .page-numbers.current {
  border-color: transparent;
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: 500;
}

.ow-pagination .page-numbers.dots {
  border-color: transparent;
}

/* -- Editor content -------------------------------------------------------- */

/* The one place on the site where markup is written by an editor rather than
   designed. Sized off the same scale as the rest, and held to a measure — an
   unconstrained line of body copy at 1200px is unreadable. */
.ow-prose {
  max-width: 76ch;
  color: var(--ow-text-secondary);
  font-size: 1.0625rem;
  line-height: 1.75;
}

.ow-prose > * + * {
  margin-top: 1.25rem;
}

.ow-prose h2,
.ow-prose h3,
.ow-prose h4 {
  margin-top: 2.5rem;
  color: var(--ow-text-primary);
  font-weight: 500;
  line-height: 1.25;
}

.ow-prose h2 {
  font-size: 1.75rem;
}

.ow-prose h3 {
  font-size: 1.375rem;
}

.ow-prose h4 {
  font-size: 1.125rem;
}

.ow-prose a {
  color: var(--primary);
  text-decoration-line: underline;
  text-underline-offset: 0.2em;
}

.ow-prose strong {
  color: var(--ow-text-primary);
  font-weight: 500;
}

.ow-prose ul,
.ow-prose ol {
  padding-inline-start: 1.5rem;
}

.ow-prose ul {
  list-style: disc;
}

.ow-prose ol {
  list-style: decimal;
}

.ow-prose li + li {
  margin-top: 0.5rem;
}

.ow-prose blockquote {
  padding-inline-start: 1.25rem;
  border-inline-start: 2px solid var(--primary);
  color: var(--ow-text-primary);
}

.ow-prose code {
  padding: 0.15em 0.4em;
  border-radius: var(--radius-xs);
  background: var(--muted);
  font-size: 0.9em;
}

.ow-prose pre {
  overflow-x: auto;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-lg);
  background: var(--ow-surface-sunken);
  font-size: 0.9em;
  line-height: 1.6;
}

.ow-prose pre code {
  padding: 0;
  background: none;
}

.ow-prose img,
.ow-prose iframe,
.ow-prose video {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

.ow-prose hr {
  border: 0;
  border-top: 1px solid var(--border);
}

.ow-prose figcaption,
.ow-prose .wp-caption-text {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--ow-text-tertiary);
}

/* Wide content scrolls in its own container; the page body never scrolls
   sideways. Same rule the marketing site holds itself to. */
.ow-prose table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

.ow-prose th,
.ow-prose td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  text-align: start;
}

.ow-prose th {
  color: var(--ow-text-primary);
  font-weight: 500;
}

.ow-prose .alignleft {
  float: left;
  margin: 0 1.5rem 1rem 0;
}

.ow-prose .alignright {
  float: right;
  margin: 0 0 1rem 1.5rem;
}

.ow-prose .aligncenter {
  display: block;
  margin-inline: auto;
}

/* -- Search ---------------------------------------------------------------- */

.ow-search {
  margin-top: 2rem;
}

.ow-search-form {
  display: flex;
  max-width: 32rem;
  gap: 0.5rem;
}

.ow-search-form .ow-input {
  flex: 1 1 auto;
  min-width: 0;
}

/* -- Comments -------------------------------------------------------------- */

.ow-comments {
  max-width: 76ch;
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
}

.ow-comments .comments-title,
.ow-comments .comment-reply-title {
  margin-bottom: 1.25rem;
  color: var(--ow-text-primary);
  font-size: 1.375rem;
  font-weight: 500;
}

.ow-comments .comment-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.ow-comments .comment-list ol {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
  padding-inline-start: 1.5rem;
}

.ow-comments .comment-body {
  padding: 1.25rem;
  border-radius: var(--radius-xl);
  background: var(--card);
  box-shadow: var(--ow-shadow-raised);
  color: var(--ow-text-secondary);
}

.ow-comments .comment-author {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--ow-text-primary);
  font-weight: 500;
}

.ow-comments .comment-author img {
  border-radius: 50%;
}

.ow-comments .comment-metadata {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--ow-text-tertiary);
}

.ow-comments .comment-content {
  margin-top: 0.75rem;
}

.ow-comments .comment-content > * + * {
  margin-top: 0.75rem;
}

.ow-comments .comment-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ow-comments .comment-form label {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--ow-text-primary);
  font-weight: 500;
}

.ow-comments .comment-form input[type="text"],
.ow-comments .comment-form input[type="email"],
.ow-comments .comment-form input[type="url"],
.ow-comments .comment-form textarea {
  width: 100%;
  padding: 0 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--field, var(--background));
  color: var(--ow-text-primary);
  font: inherit;
}

.ow-comments .comment-form input[type="text"],
.ow-comments .comment-form input[type="email"],
.ow-comments .comment-form input[type="url"] {
  height: 2.25rem;
}

.ow-comments .comment-form textarea {
  min-height: 6rem;
  padding-block: 0.5rem;
  resize: vertical;
  line-height: 1.6;
}

.ow-comments .comment-form .form-submit input[type="submit"] {
  height: 2.25rem;
  padding-inline: 1rem;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--primary);
  color: var(--primary-foreground);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

/* =============================================================================
   Contact Form 7
   -----------------------------------------------------------------------------
   The form template in inc/cf7.php lays the fields out with .ow-field and
   friends; these are the bits CF7 inserts that the design system has never seen.
   ========================================================================== */

/* CF7 wraps every control in a span. Inside a .ow-field that span is not a box
   anyone wants — display:contents hands the control straight to the flex column
   so it sizes as the design expects. */
.wpcf7-form-control-wrap {
  display: contents;
}

.wpcf7-form .ow-input,
.wpcf7-form .ow-select,
.wpcf7-form .ow-textarea {
  width: 100%;
}

/* The radio row, in the shape the static form's fieldset had. */
.ow-radio-set .wpcf7-radio {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.ow-radio-set .wpcf7-list-item {
  margin: 0;
}

.ow-radio-set .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ow-text-secondary);
  cursor: pointer;
}

.ow-radio-set input[type="radio"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--primary);
}

/* Validation. Warning rather than a new red, and never colour alone — CF7's tip
   is a sentence saying what is wrong. */
.wpcf7-not-valid-tip {
  margin-top: 0.25rem;
  color: var(--ow-warning);
  font-size: 0.875rem;
}

.wpcf7-form .wpcf7-not-valid {
  border-color: var(--ow-warning);
}

.wpcf7-response-output {
  margin: 1.25rem 0 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  color: var(--ow-text-secondary);
  font-size: 0.9375rem;
}

.wpcf7-form.sent .wpcf7-response-output {
  border-color: var(--ow-success);
  background: var(--ow-success-surface);
  color: var(--ow-text-primary);
}

.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output {
  border-color: var(--ow-warning);
  background: var(--ow-warning-surface);
  color: var(--ow-text-primary);
}

/* CF7 has no [submit] here — the design's button carries an icon, so it is
   written as raw markup. That means no CF7 spinner either; the submitting state
   is the button going quiet instead. */
.wpcf7-form.submitting button[type="submit"] {
  opacity: 0.6;
  pointer-events: none;
}

.wpcf7-spinner {
  display: none;
}

/* The honeypot. Hidden from people and from assistive technology both, so the
   only thing that can fill it is something filling every input it finds. */
.ow-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}