/* ==========================================================================
   WordPress additions — loaded after base.css.
   base.css is the prototype's design system, kept verbatim so it can be
   diffed against future prototype revisions. Put theme-only rules here.
   ========================================================================== */

/* Admin bar: keep the sticky header and the drawer below it when logged in. */
.admin-bar .site-header { top: 32px; }
.admin-bar .drawer { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
  .admin-bar .drawer { top: 46px; }
}
/* Below 600px the admin bar scrolls away with the page. */
@media (max-width: 600px) {
  .admin-bar .site-header { top: 0; }
}

/* Screen-reader text + skip link (WordPress convention). */
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link:focus {
  clip: auto; width: auto; height: auto; margin: 0; overflow: visible; white-space: normal;
  top: var(--space-3); left: var(--space-3); z-index: 100000;
  padding: var(--space-3) var(--space-5); background: var(--surface); color: var(--navy-ink);
  border: 2px solid var(--red); border-radius: var(--radius); font-weight: 700; text-decoration: none;
}

/* Footer badge: never let the flex row squeeze the badge (the caption used
   to wrap to 2 or 3 lines depending on when the image loaded). */
.alta-badge img { flex: none; }
.alta-badge a { display: block; flex: none; }

/* Prototype fix: when the nav collapses into the drawer (below 1180px) its
   margin-left:auto goes with it, and the header buttons bunched up against
   the logo. Keep them on the right edge. */
@media (max-width: 1180px) {
  .header-actions { margin-left: auto; }
}

/* ==========================================================================
   Contact Form 7 — replaces CF7's own stylesheet (not loaded; see
   inc/orders/cf7.php) so forms use the prototype's form styles.
   ========================================================================== */
.wpcf7 .screen-reader-response {
  position: absolute; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; word-wrap: normal !important;
}
.wpcf7 .hidden-fields-container { display: none; }
.wpcf7 [inert] { opacity: .5; }

/* CF7 wraps each control in an inline span; let fields fill their column. */
.wpcf7 .field > .wpcf7-form-control-wrap { display: block; }
.wpcf7 .field > .wpcf7-form-control-wrap > :is(input, select, textarea) { display: block; }
/* The hidden documents input sits straight in the .fields grid: don't let its
   wrapper add an empty grid row (its error message still shows when present). */
.wpcf7 .fields > .wpcf7-form-control-wrap { display: contents; }
.wpcf7-form-control-wrap { position: relative; }

/* Inline errors look like the prototype's .field-error. */
.wpcf7-not-valid-tip {
  display: block; margin-top: var(--space-2);
  font-size: var(--text-xs); font-weight: 600; color: var(--red);
}
.wpcf7 input.wpcf7-not-valid, .wpcf7 select.wpcf7-not-valid, .wpcf7 textarea.wpcf7-not-valid { border-color: var(--red); }
.dropzone:has(+ .wpcf7-form-control-wrap .wpcf7-not-valid) { border-color: var(--red); }

/* Response box ([response]) styled as the prototype's .notice. */
.wpcf7 form .wpcf7-response-output {
  margin: var(--space-8) 0 0; padding: var(--space-5);
  border: 1px solid color-mix(in oklch, var(--red) 28%, var(--border)); border-left: 3px solid var(--red);
  border-radius: var(--radius); background: color-mix(in oklch, var(--red) 6%, var(--surface));
  font-size: var(--text-sm); font-weight: 600; color: var(--navy-ink);
}
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output,
.wpcf7 form .wpcf7-response-output:empty { display: none; }
.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--border); border-left-color: var(--navy); background: var(--surface-2);
}

/* Checkbox cards (.check): the card is the label, so hide CF7's own option label. */
.check .wpcf7-form-control-wrap, .check .wpcf7-list-item { display: contents; }
.check .wpcf7-list-item-label { display: none; }
.wpcf7-list-item { display: inline-block; margin: 0 var(--space-4) 0 0; }

/* Drop zone parts (kept out of the CF7 template as classes). */
.dropzone .dz-title { font-weight: 700; font-size: var(--text-sm); color: var(--navy-ink); }
.dropzone .fine { margin-top: var(--space-2); }
.atac-file-error { display: block; font-size: var(--text-xs); font-weight: 600; color: var(--red); }
.atac-file-error:empty { display: none; }
.wpcf7 input[type="file"] { cursor: pointer; }

/* Submit row. */
.form-submit-row { margin-top: var(--space-8); display: flex; gap: var(--space-5); align-items: center; flex-wrap: wrap; }
.form-submit-row .fine { max-width: 38ch; }
.wpcf7-form.submitting .wpcf7-submit { opacity: .72; cursor: progress; transform: none; }
.wpcf7-spinner { display: none; }

/* Honeypot: off-screen for people, still in the DOM for bots. */
.atac-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.atac-order-form-wrap[hidden] { display: none; }

/* ==========================================================================
   Generic page content (pages and posts not yet ported to ACF templates).
   ========================================================================== */
.entry-content > * + * { margin-top: var(--space-5); }
.entry-content h2 { font-size: var(--text-xl); margin-top: var(--space-12); }
.entry-content h3 { margin-top: var(--space-10); }
.entry-content ul, .entry-content ol { padding-left: var(--space-6); }
.entry-content li + li { margin-top: var(--space-2); }
.entry-content img { border-radius: var(--radius); }
.entry-content blockquote {
  border-left: 3px solid var(--red); padding-left: var(--space-5); color: var(--text-2);
}
.entry-content .alignwide { max-width: calc(var(--wrap) - 2 * var(--space-6)); }
.entry-content .aligncenter { margin-inline: auto; }

.post-list { display: grid; gap: var(--space-5); }
.post-list .card h2 { font-size: var(--text-lg); font-family: var(--font-body); font-weight: 700; letter-spacing: -0.01em; }
.post-list .card h2 a { color: var(--navy-ink); text-decoration: none; }
.post-list .card h2 a:hover { color: var(--red); }
.pagination { margin-top: var(--space-10); display: flex; gap: var(--space-3); flex-wrap: wrap; }
.pagination .page-numbers, .pagination .post-page-numbers {
  display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; color: var(--navy-ink);
  font-size: var(--text-sm); font-weight: 700;
}
.pagination .page-numbers.current, .pagination .post-page-numbers.current { background: var(--navy-fill); border-color: var(--navy-fill); color: #fff; }

/* ==========================================================================
   Single blog posts (single.php).
   ========================================================================== */
.post-thumb { margin-bottom: var(--space-10); }
.post-thumb img { width: 100%; border-radius: var(--radius); }

/* Images placed with the classic editor's alignment buttons. */
.post-article .entry-content { display: flow-root; }
.post-article .alignright { float: right; max-width: 45%; margin: var(--space-2) 0 var(--space-5) var(--space-8); }
.post-article .alignleft { float: left; max-width: 45%; margin: var(--space-2) var(--space-8) var(--space-5) 0; }
.post-article .wp-caption { max-width: 100%; }
.post-article .wp-caption-text { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--text-3); }
@media (max-width: 600px) {
  .post-article .alignright, .post-article .alignleft { float: none; max-width: 100%; margin: 0 auto; }
}
