/* ===================================================================
   IONA — Elementor Integration Styles
   Polishes Elementor widget output to match the IONA design system.
   Does NOT define page layouts — those live in Elementor templates.
=================================================================== */

/* ── Base integration ────────────────────────────────────────────── */

.elementor-page.et-theme,
.elementor-default.et-theme {
  background: var(--bg);
  color: var(--ink);
}

/* Suppress parent theme UI elements when Elementor header/footer is active */
.et-theme .top_panel,
.et-theme #page_preloader {
  display: none !important;
}

.et-theme #page_wrap,
.et-theme .page_content_wrap,
.et-theme .content_wrap {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.et-theme .page_content_wrap {
  background: var(--bg);
}

.elementor-location-header + main,
.et-theme main {
  min-height: 50vh;
}

/* ── Typography inside Elementor containers ──────────────────────── */

.elementor-widget-heading .elementor-heading-title a {
  color: inherit;
  text-decoration: none;
}

.elementor-widget-text-editor p {
  text-wrap: pretty;
}

/* ── Elementor button global helpers ─────────────────────────────── */

.elementor-button {
  font-family: var(--font-sans);
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.elementor-button:hover {
  transform: translateY(-1px);
}

/* Global button style classes usable via "CSS Classes" field */
.iona-btn-primary {
  background: var(--emerald) !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 700 !important;
}

.iona-btn-primary:hover {
  background: var(--emerald-deep) !important;
}

.iona-btn-outline {
  background: transparent !important;
  color: var(--emerald) !important;
  border: 1px solid var(--emerald) !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 600 !important;
}

.iona-btn-outline:hover {
  background: var(--emerald-tint) !important;
}

.iona-btn-ghost {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
}

/* ── IONA header ─────────────────────────────────────────────────── */

.iona-header {
  z-index: 1000;
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.iona-header .elementor-nav-menu a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: 0.005em;
  transition: color 0.15s;
}

.iona-header .elementor-nav-menu a:hover,
.iona-header .elementor-nav-menu .current-menu-item > a {
  color: var(--emerald);
}

/* Mobile nav */
@media (max-width: 1024px) {
  .iona-header .elementor-nav-menu--dropdown {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
  }
}

/* ── IONA footer ─────────────────────────────────────────────────── */

.iona-footer-nl {
  position: relative;
}

.iona-footer-cols {
  max-width: var(--container);
  margin: 0 auto;
}

.iona-footer-bottom {
  max-width: var(--container);
  margin: 0 auto;
}

.iona-footer-bottom a {
  color: var(--ink-3);
  transition: color 0.15s;
}

.iona-footer-bottom a:hover {
  color: var(--emerald);
}

/* ── Trust band (homepage stats) ─────────────────────────────────── */

.iona-trust-band .iona-stat {
  border-right: 1px solid rgba(255,255,255,0.15);
}

.iona-trust-band .iona-stat:last-child {
  border-right: 0;
}

/* ── Page hero shared styles ─────────────────────────────────────── */

.iona-page-hero {
  max-width: 100%;
}

.iona-hero {
  position: relative;
}

.iona-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  z-index: -1;
}

/* ── Elementor Loop Grid ─────────────────────────────────────────── */

.e-loop-item .elementor-element {
  height: 100%;
}

/* ── Elementor Form overrides ────────────────────────────────────── */

.elementor-form .elementor-field-group input,
.elementor-form .elementor-field-group textarea,
.elementor-form .elementor-field-group select {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  padding: 11px 14px;
  transition: border-color 0.15s;
}

.elementor-form .elementor-field-group input:focus,
.elementor-form .elementor-field-group textarea:focus {
  outline: none;
  border-color: var(--emerald);
  box-shadow: 0 0 0 3px oklch(from var(--emerald) l c h / 0.12);
}

.elementor-form .elementor-button[type="submit"] {
  font-family: var(--font-sans);
  font-weight: 700;
  border-radius: var(--radius-sm);
  padding: 12px 24px;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}

.elementor-form .elementor-button[type="submit"]:hover {
  transform: translateY(-1px);
}

/* ── Elementor Accordion / FAQ ───────────────────────────────────── */

.elementor-accordion .elementor-tab-title {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: color 0.15s;
}

.elementor-accordion .elementor-tab-title.elementor-active,
.elementor-accordion .elementor-tab-title:hover {
  color: var(--emerald);
}

.elementor-accordion .elementor-tab-content {
  padding: 16px 0 20px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.65;
}

/* ── Elementor icon-box shared styling ───────────────────────────── */

.elementor-icon-box-title {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}

.elementor-icon-box-description {
  color: var(--ink-2) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* ── Section utility classes ─────────────────────────────────────── */

.iona-section {
  width: 100%;
}

.iona-section-dark {
  color: #fff;
}

/* ── Scroll behaviour ────────────────────────────────────────────── */

html {
  scroll-behavior: smooth;
}

/* ── Accessibility ───────────────────────────────────────────────── */

.elementor .screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

:focus-visible {
  outline: 2px solid var(--emerald);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── Responsive tweaks ───────────────────────────────────────────── */

@media (max-width: 1280px) {
  .iona-header { padding-left: 24px !important; padding-right: 24px !important; }
  .iona-footer-cols, .iona-footer-bottom { padding-left: 24px !important; padding-right: 24px !important; }
}

@media (max-width: 1024px) {
  .iona-trust-band .iona-stat { width: 50% !important; border-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,0.15); padding: 20px 0; }
  .iona-trust-band .iona-stat:nth-child(1),
  .iona-trust-band .iona-stat:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,0.15); }
}

@media (max-width: 768px) {
  .iona-hero--home .elementor-heading-title { font-size: clamp(2.2rem, 8vw, 3.2rem) !important; }
  .iona-footer-cols { flex-direction: column !important; }
  .iona-footer-cols > .elementor-element { width: 100% !important; }

  .et-specs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px 14px !important;
  }

  .et-actions,
  .et-content-grid,
  .et-vault-body,
  .et-badge-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .et-vault-body {
    gap: 18px !important;
  }

  .et-badge-row {
    gap: 12px !important;
  }

  .et-badge {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    grid-template-areas:
      "icon label"
      "icon value" !important;
    column-gap: 12px !important;
    row-gap: 4px !important;
    align-items: start !important;
  }

  .et-badge > span {
    grid-area: icon;
    align-self: center;
  }

  .et-badge > small,
  .et-badge > strong {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .et-badge > small { grid-area: label; }
  .et-badge > strong { grid-area: value; }
}

@media (max-width: 430px) {
  .iona-trust-band .iona-stat { width: 100% !important; }
  .ev-meta { grid-template-columns: 1fr 1fr !important; }

  .et-summary-card,
  .et-gallery-card,
  .et-vault-card,
  .et-mobile-cta,
  .et-hold-form {
    padding: 20px 16px !important;
  }

  .et-product {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .et-specs {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .et-badge-row,
  .et-actions,
  .et-content-grid,
  .et-vault-body {
    grid-template-columns: 1fr !important;
  }

  .et-mobile-cta h2,
  .et-summary-card h1 {
    overflow-wrap: anywhere;
  }

  .et-btn,
  .et-btn-primary,
  .et-actions .et-btn,
  .et-actions .et-btn-primary,
  .et-mobile-cta .et-btn,
  .et-mobile-cta .et-btn-primary {
    width: 100% !important;
  }

  #wpadminbar #wp-admin-bar-my-account > .ab-item .display-name {
    display: inline-block;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
    white-space: nowrap;
  }
}

@media (max-width: 360px) {
  .et-summary-card,
  .et-gallery-card,
  .et-vault-card,
  .et-mobile-cta,
  .et-hold-form {
    padding: 18px 14px !important;
  }

  .et-badge {
    grid-template-columns: 24px minmax(0, 1fr) !important;
    column-gap: 10px !important;
  }
}