/* Global frontend design-system layer extracted from Elementor Site Settings.
   Purpose:
   - keep typography, links, buttons, form primitives, and utility classes
     in theme CSS instead of Elementor Kit settings
   - reduce style drift on Classic Editor / Custom HTML pages
*/

/* ── Base reset / rendering ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }

/* ── Global typography ───────────────────────────────────────────────── */
body,
.elementor-widget-text-editor,
.elementor-widget-theme-post-content,
.elementor-widget-woocommerce-product-content {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
}

h1, .elementor-widget-heading h1.elementor-heading-title {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 52px;
  line-height: 1.08;
  letter-spacing: .01em;
  color: var(--slate);
}

h2, .elementor-widget-heading h2.elementor-heading-title {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: .01em;
  color: var(--slate);
}

h3, .elementor-widget-heading h3.elementor-heading-title {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  color: var(--slate);
}

h4, .elementor-widget-heading h4.elementor-heading-title {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  color: var(--slate);
}

h5, .elementor-widget-heading h5.elementor-heading-title {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 18px;
  color: var(--slate);
}

h6, .elementor-widget-heading h6.elementor-heading-title {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .08em;
  color: var(--mid);
}

@media (max-width: 1024px) {
  h1, .elementor-widget-heading h1.elementor-heading-title { font-size: 44px; }
  h2, .elementor-widget-heading h2.elementor-heading-title { font-size: 34px; }
  h3, .elementor-widget-heading h3.elementor-heading-title { font-size: 24px; }
}

@media (max-width: 767px) {
  h1, .elementor-widget-heading h1.elementor-heading-title { font-size: 34px; }
  h2, .elementor-widget-heading h2.elementor-heading-title { font-size: 28px; }
  h3, .elementor-widget-heading h3.elementor-heading-title { font-size: 22px; }
}

/* ── Links ───────────────────────────────────────────────────────────── */
a {
  color: var(--steel);
  text-decoration: none;
}

a:hover {
  color: #155d90;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.elementor-button,
button.elementor-button {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .04em;
  border-radius: var(--r);
}

.elementor-button:not(.btn-ghost):not(.btn-steel) {
  color: #fff;
  background: var(--red);
  border: 2px solid var(--red);
}

.elementor-button:not(.btn-ghost):not(.btn-steel):hover {
  color: #fff;
  background: var(--red-dark);
  border-color: var(--red-dark);
}

.btn-ghost.elementor-button {
  background: transparent !important;
  color: var(--ink) !important;
  border: 2px solid var(--line) !important;
  border-radius: var(--r) !important;
}

.btn-ghost.elementor-button:hover {
  border-color: var(--steel) !important;
  color: var(--steel) !important;
  background: transparent !important;
}

.btn-steel.elementor-button {
  background: var(--steel) !important;
  color: #fff !important;
  border: 2px solid var(--steel) !important;
  border-radius: var(--r) !important;
}

.btn-steel.elementor-button:hover {
  background: #155d90 !important;
  border-color: #155d90 !important;
}

/* ── Elementor form fields ───────────────────────────────────────────── */
.elementor-field-group input,
.elementor-field-group select,
.elementor-field-group textarea {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 4px;
}

.elementor-field-group input:focus,
.elementor-field-group select:focus,
.elementor-field-group textarea:focus {
  border-color: var(--steel);
}

.elementor-field-group label {
  font-size: 13px;
  font-weight: 500;
  color: var(--mid);
}

/* ── Dark section form field utility ─────────────────────────────────── */
.dark-section .elementor-field-group input,
.dark-section .elementor-field-group textarea,
.dark-section .elementor-field-group select {
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  color: #fff !important;
}

.dark-section .elementor-field-group input::placeholder,
.dark-section .elementor-field-group textarea::placeholder {
  color: rgba(255,255,255,.3) !important;
}

.dark-section .elementor-field-group input:focus,
.dark-section .elementor-field-group textarea:focus,
.dark-section .elementor-field-group select:focus {
  border-color: var(--steel) !important;
}

/* ── Utility classes migrated from Site Settings custom CSS ──────────── */
.eyebrow,
.eyebrow.elementor-heading-title {
  font-family: var(--f-head) !important;
  font-size: .8rem !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--steel) !important;
}

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

.elementor-image-box-title {
  font-family: var(--f-head) !important;
}

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}

.reveal-on-scroll.animated {
  opacity: 1;
  transform: none;
}

/* ── Hello / Elementor layout fixes ──────────────────────────────────── */
.entry-title,
.page-title {
  display: none !important;
}

.elementor-section.elementor-section-stretched {
  max-width: 100vw;
  overflow: hidden;
}