/*
 * assets/css/elementor-overrides.css
 *
 * Fine-tunes Elementor Free's output so every widget inherits
 * the Ian Mellett oak design system. Loaded after elementor-frontend.css.
 *
 * Targets only structural overrides — no design changes.
 */

/* ── GLOBAL CONTAINER / SECTION ─────────────────────────────────────────── */

/* Remove Elementor's default white background */
.elementor-section,
.e-con,
.e-con-inner {
  background-color: transparent !important;
}

/* Match our max-width wrapper */
.elementor-section > .elementor-container {
  max-width: 64rem;
}

/* Remove default Elementor column padding where we handle it ourselves */
.elementor-widget-wrap {
  padding: 0;
}

/* ── TYPOGRAPHY WIDGETS ──────────────────────────────────────────────────── */

/* Heading widget */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--display);
  color: var(--ink);
}

/* Text Editor widget */
.elementor-widget-text-editor .elementor-widget-container {
  font-family: var(--body);
  font-weight: 300;
  color: var(--ink-soft);
  line-height: 1.62;
}

/* ── BUTTON WIDGET ──────────────────────────────────────────────────────── */

.elementor-widget-button .elementor-button {
  border-radius: 0;
  font-family: var(--data);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Default button state matches --oxblood CTA */
.elementor-widget-button .elementor-button.elementor-size-md {
  padding: .8rem 1.25rem;
  font-size: .9rem;
}

/* ── IMAGE WIDGET ───────────────────────────────────────────────────────── */

.elementor-widget-image .elementor-image img {
  border: 1px solid var(--oak-line);
  box-shadow: 0 1px 0 var(--paper);
}

/* ── DIVIDER WIDGET ─────────────────────────────────────────────────────── */

.elementor-widget-divider .elementor-divider-separator {
  border-color: var(--oak-line) !important;
}

/* ── ICON LIST WIDGET ───────────────────────────────────────────────────── */

.elementor-icon-list-item {
  border-top: 1px solid var(--oak-line);
  padding: .9rem 0;
}
.elementor-icon-list-item:last-child {
  border-bottom: 1px solid var(--oak-line);
}
.elementor-icon-list-text {
  font-family: var(--data);
  font-size: .95rem;
  color: var(--ink-soft);
}

/* ── ACCORDION WIDGET ───────────────────────────────────────────────────── */

.elementor-widget-accordion .elementor-accordion-item {
  border: none;
  border-top: 1px solid var(--oak-line);
}
.elementor-widget-accordion .elementor-accordion-item:last-child {
  border-bottom: 1px solid var(--oak-line);
}
.elementor-widget-accordion .elementor-tab-title {
  font-family: var(--body);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--ink);
  padding: .9rem 0;
  border: none;
  background: transparent;
}
.elementor-widget-accordion .elementor-tab-title .elementor-accordion-icon {
  color: var(--oxblood);
}
.elementor-widget-accordion .elementor-tab-content {
  font-family: var(--data);
  font-size: .95rem;
  color: var(--ink-soft);
  padding: 0 0 1.1rem;
  border: none;
  background: transparent;
}

/* ── TOGGLE WIDGET ──────────────────────────────────────────────────────── */

.elementor-widget-toggle .elementor-toggle-item {
  border-top: 1px solid var(--oak-line);
}
.elementor-widget-toggle .elementor-toggle-item:last-child {
  border-bottom: 1px solid var(--oak-line);
}
.elementor-widget-toggle .elementor-tab-title {
  font-family: var(--body);
  font-weight: 600;
  color: var(--ink);
}
.elementor-widget-toggle .elementor-tab-content {
  color: var(--ink-soft);
  font-family: var(--data);
}

/* ── ALERT / CALLOUT (uses HTML widget) ─────────────────────────────────── */

/* ── SECTION-LEVEL BACKGROUND ───────────────────────────────────────────── */

/* Sections with class "ian-section-oak" get the grain texture */
.ian-section-oak {
  background-color: var(--oak);
  background-image: linear-gradient(90deg, rgba(0,0,0,.018) 1px, transparent 1px);
  background-size: 7px 100%;
}

.ian-section-paper {
  background-color: var(--paper);
}

/* Section border-top rule */
.ian-section-bordered {
  border-top: 1px solid var(--oak-line);
}

/* ── RESPONSIVE FIXES ────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .elementor-widget-wrap {
    padding: 0 !important;
  }
}

/* ── EDITOR: REVEAL FIX ──────────────────────────────────────────────────
 * .reveal starts at opacity:0 for the scroll animation.
 * IntersectionObserver (main.js) never fires inside Elementor's iframe,
 * so all widget content is invisible in the editor.
 *
 * elementor-editor-preview = class on <body> inside the editor iframe.
 * This makes every .reveal element fully visible while editing.
 * The scroll animation is unaffected on the live site.
 * ──────────────────────────────────────────────────────────────────────── */

.elementor-editor-preview .reveal,
.elementor-editor-preview .reveal.in,
.elementor-editor-active .reveal,
.elementor-editor-active .reveal.in {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}