/* ==========================================================================
   Geppert Recycling - WordPress Page Styles
   Only styles for WP-rendered content. Does NOT reset or restyle
   elements globally — the legacy Tailwind CSS handles that.
   ========================================================================== */

/* ---------- Missing Tailwind utility: font-second ---------- */
/* Gatsby config had fontFamily.second = Inter but the extracted CSS is missing it. */
.font-second { font-family: Inter, sans-serif; }

/* ---------- Fix .page column-count leak ---------- */
/* legacy-styles.css has .page { column-count:2 } at lg+ for a pagination component.
   That rule incorrectly splits interior page content into 2 columns.
   Override it for page content areas (inside <main>). */
main .page {
  -moz-column-count: unset !important;
  column-count: unset !important;
  display: block !important;
  list-style: revert !important;
  margin: 0 !important;
}

/* ---------- Interior Hero (ACF pages) ---------- */
.interior-hero {
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  text-align: center;
  min-height: 25rem;
}

@media (min-width: 1024px) {
  .interior-hero {
    min-height: 30rem;
  }
}

@media (min-width: 1280px) {
  .interior-hero {
    min-height: 45rem;
  }
}

@media (min-width: 1536px) {
  .interior-hero {
    min-height: 58.8125rem;
  }
}

/* ---------- Content sections (WYSIWYG from ACF) ---------- */
.content-section {
  margin-bottom: 2rem;
}

.content-section h1,
.content-section h2,
.content-section h3,
.content-section h4 {
  margin-bottom: 1rem;
}

.content-section p {
  margin-bottom: 0.75rem;
}

.content-section ul,
.content-section ol {
  margin-bottom: 0.75rem;
  padding-left: 1.5rem;
}

.content-section li {
  margin-bottom: 0.25rem;
}

/* ---------- Blog detail content ---------- */
.blog-details-content h2,
.blog-details-content h3 {
  margin: 1.5rem 0 0.75rem;
}

.blog-details-content p {
  margin-bottom: 0.75rem;
}

.blog-details-content ul,
.blog-details-content ol {
  margin-bottom: 0.75rem;
  padding-left: 1.5rem;
}

/* ---------- Gravity Forms: match legacy contact form ---------- */
/* The contact form sits on a dark background (bg-red-darker2).
   Style GForms to match: white text, transparent inputs, white borders. */

/* Reset GForms theme variables for dark background */
.gform_wrapper.gform-theme {
  --gf-color-primary: #F10605;
  --gf-color-in-ctrl: transparent;
  --gf-color-in-ctrl-contrast: #fff;
  --gf-color-in-ctrl-darker: transparent;
  --gf-color-in-ctrl-lighter: transparent;
  --gf-color-out-ctrl-dark: #fff;
  --gf-color-out-ctrl-dark-darker: #fff;
  --gf-color-out-ctrl-dark-lighter: rgba(255, 255, 255, 0.65);
  --gf-color-out-ctrl-light: rgba(255, 255, 255, 0.1);
  --gf-color-out-ctrl-light-darker: rgba(255, 255, 255, 0.35);
  --gf-color-secondary: transparent;
  --gf-color-secondary-contrast: #fff;
  --gf-ctrl-border-color: #fff;
  --gf-ctrl-label-color-primary: #fff;
  --gf-ctrl-label-color-secondary: #fff;
}

/* Fields stack vertically — each field is full width.
   Name and Email already have internal 2-col sub-field grids. */
.gform_wrapper .gform_fields {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
}

/* Hide top-level field legends (Name, Email, Comments) — keep it clean */
.gform_wrapper .gfield_label.gfield_label_before_complex,
.gform_wrapper .gfield > .gfield_label {
  display: none !important;
}

/* Sub-labels (First, Last, Enter Email, Confirm) above inputs */
.gform_wrapper .gform-field-label--type-sub {
  display: block !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 0.75rem !important;
  margin-bottom: 0.25rem !important;
}

/* Description text */
.gform_wrapper .gfield_description {
  color: rgba(255, 255, 255, 0.7) !important;
  margin-bottom: 0.5rem !important;
}

/* Internal sub-field grids (Name: First+Last, Email: Enter+Confirm) */
.gform_wrapper .ginput_complex.gform-grid-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1rem !important;
}

.gform_wrapper .gform-grid-col {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  padding: 0 !important;
}

/* All inputs and textareas */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper textarea {
  background: transparent !important;
  border: 1px solid #fff !important;
  color: #fff !important;
  padding: 1.25rem 2rem !important;
  border-radius: 0.125rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Required indicator */
.gform_wrapper .gfield_required {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Clear float from legacy GForms layout */
.gform_wrapper .gf_clear,
.gform_wrapper .gf_clear_complex {
  display: none !important;
}

/* Footer / submit button */
.gform_wrapper .gform-footer {
  text-align: center !important;
  padding-top: 0.5rem !important;
}

.gform_wrapper .gform_button {
  background: #292929 !important;
  border: 2px solid #292929 !important;
  color: #fff !important;
  text-transform: uppercase !important;
  font-family: var(--font-heading, 'Barlow Condensed', sans-serif) !important;
  font-weight: 900 !important;
  font-size: 1.125rem !important;
  padding: 0.75rem 3.5rem !important;
  border-radius: 0.5rem !important;
  cursor: pointer !important;
  transition: background-color 0.2s, border-color 0.2s !important;
}

.gform_wrapper .gform_button:hover {
  background: #000 !important;
  border-color: #000 !important;
}

/* Validation errors */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea {
  border-color: #ff6b6b !important;
}

.gform_wrapper .validation_message {
  color: #ffcdd2 !important;
}

/* ---------- WP-only page fallback (no ACF) ---------- */
.wp-page-content h1 {
  margin-bottom: 1rem;
}

.wp-page-content p {
  margin-bottom: 0.75rem;
}

.wp-page-content ul,
.wp-page-content ol {
  margin-bottom: 0.75rem;
  padding-left: 1.5rem;
}