/*
Theme Name: Weigl Cattle Co
Theme URI: https://weiglcattleco.com
Author: Weigl Cattle Co
Description: Block child theme for Weigl Cattle Co — extends Twenty Twenty-Five. V5: the visual layer is the pixel-verified page-builder design system (tokens.css + components.css, hayfield palette, DM Serif Display "serif-impact" pairing) copied verbatim; this file only holds the WordPress-integration shims. Page sections are wp:html blocks the customer edits in the standard block editor.
Template: twentytwentyfive
Version: 5.0.1
Text Domain: weigl-cattle
*/

/* ============================================================
   WordPress-integration shims ONLY.
   tokens.css + components.css are copied byte-for-byte from the
   page-builder (design truth). Anything WP-specific lives here so
   a re-export never overwrites hand-tuning.
   ============================================================ */

html { scroll-behavior: smooth; }

/* The block-theme root should not fight the .page container. */
.wp-site-blocks { padding: 0; margin: 0; }
.wp-site-blocks > * { margin-block-start: 0 !important; }

/* Sections are direct children of post-content (each a wp:html block).
   Kill WP's block-gap margins so they stack exactly like dist/. */
.weigl-scope .wp-block-post-content > * {
  margin-block-start: 0;
  margin-block-end: 0;
}
.weigl-scope .wp-block-post-content {
  padding: 0;
}
.weigl-scope .page > * { margin-block-start: 0; }

/* Anchor offsets for in-page jump pills */
[id] { scroll-margin-top: 24px; }

/* ── Forms module → design-system skin ─────────────────────────────
   [wcc_contact_form] and [wcc_newsletter] render inside the design's
   own containers; these rules make the shortcode markup sit exactly
   where the static inputs sat. */

.wcc-form-newsletter__form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: stretch;
}
.wcc-form-newsletter__form .w-input { flex: 1 1 180px; min-width: 0; }
.wcc-form-newsletter__hp { position: absolute; left: -5000px; }
.wcc-form-newsletter__success { margin: 0; font-weight: 600; }
.wcc-form-newsletter__error { margin: 0 0 8px; color: var(--danger); font-size: 14px; }

/* Footer subscribe row keeps its compact height */
.footerfull__sub .wcc-form-newsletter__form .w-btn { height: 40px; padding: 0 16px; }

.wcc-form-contact form { display: grid; gap: 14px; }
.wcc-form-contact .contact__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px) { .wcc-form-contact .contact__row2 { grid-template-columns: 1fr; } }
.wcc-form-contact .wcc-hp { position: absolute; left: -5000px; }
.wcc-form-success {
  padding: 14px 16px; border-radius: 6px; margin-bottom: 14px;
  background: color-mix(in srgb, var(--success) 12%, var(--bg-raised));
  border: 1px solid var(--success); color: var(--ink); font-size: 14px;
}
.wcc-form-error {
  padding: 14px 16px; border-radius: 6px; margin-bottom: 14px;
  background: color-mix(in srgb, var(--danger) 10%, var(--bg-raised));
  border: 1px solid var(--danger); color: var(--ink); font-size: 14px;
}

/* WooCommerce utility pages (cart/checkout/account) — give the raw Woo
   markup breathing room inside the design shell. */
.weigl-scope .woocommerce,
.weigl-scope .wp-block-post-content .wp-block-shortcode,
.weigl-scope .wc-block-components-sidebar-layout {
  padding: 32px 56px 64px;
}


/* ── Anchor-button text color fix ────────────────────────────────────
   Buttons rendered as <a> (nav "Reserve", "Reserve a Half", hero CTAs,
   etc.) lost their intended text color. Two generic anchor rules —
   `.weigl-scope a { color: inherit }` (tokens.css, specificity 0,1,1)
   and `.w-nav__actions a { color: inherit }` (components.css, 0,1,1) —
   out-specify the single-class variant rules `.w-btn--X { color }`
   (0,1,0), so anchor buttons inherited the dark page ink instead of
   their own color. Primary/cream/dark-outline broke visibly; the rest
   only matched by coincidence. Restore each variant + its stateful
   colors at specificity 0,2,1 so the correct color always wins. */
.weigl-scope a.w-btn--primary,
.weigl-scope a.w-btn--primary:link,
.weigl-scope a.w-btn--primary:visited,
.weigl-scope a.w-btn--primary:hover,
.weigl-scope a.w-btn--primary:focus,
.weigl-scope a.w-btn--primary:active { color: var(--primary-ink); }

.weigl-scope a.w-btn--accent,
.weigl-scope a.w-btn--accent:link,
.weigl-scope a.w-btn--accent:visited,
.weigl-scope a.w-btn--accent:hover,
.weigl-scope a.w-btn--accent:focus,
.weigl-scope a.w-btn--accent:active { color: var(--accent-ink); }

.weigl-scope a.w-btn--secondary,
.weigl-scope a.w-btn--secondary:link,
.weigl-scope a.w-btn--secondary:visited,
.weigl-scope a.w-btn--secondary:focus,
.weigl-scope a.w-btn--secondary:active { color: var(--ink); }
.weigl-scope a.w-btn--secondary:hover { color: var(--bg); }

.weigl-scope a.w-btn--ghost,
.weigl-scope a.w-btn--ghost:link,
.weigl-scope a.w-btn--ghost:visited,
.weigl-scope a.w-btn--ghost:focus,
.weigl-scope a.w-btn--ghost:active { color: var(--ink); }
.weigl-scope a.w-btn--ghost:hover { color: var(--primary); }

.weigl-scope a.w-btn--cream,
.weigl-scope a.w-btn--cream:link,
.weigl-scope a.w-btn--cream:visited,
.weigl-scope a.w-btn--cream:hover,
.weigl-scope a.w-btn--cream:focus,
.weigl-scope a.w-btn--cream:active { color: #fefcf7; }

.weigl-scope a.w-btn--dark-outline,
.weigl-scope a.w-btn--dark-outline:link,
.weigl-scope a.w-btn--dark-outline:visited,
.weigl-scope a.w-btn--dark-outline:hover,
.weigl-scope a.w-btn--dark-outline:focus,
.weigl-scope a.w-btn--dark-outline:active { color: var(--bg); }