/* =============================================================
   POKÓJ WSPOMNIEŃ — Global Visual Lifting
   Applies on top of Elementor/WordPress CSS.
   Fonts: Overpass (body) + Sora (headings)
   Gold: #cc9933  Dark: #1e1e1e
   ============================================================= */

/* --- FONTS --- */
@import url('https://fonts.googleapis.com/css2?family=Overpass:wght@300;400;600;700&family=Sora:wght@300;400;600;700&display=swap');

/* --- CSS VARIABLES --- */
:root {
      --gold: #cc9933;
      --gold-hover: #b3862b;
      --gold-glow: rgba(204, 153, 51, 0.35);
      --dark: #1e1e1e;
      --text: #4a4a4a;
      --text-light: #888;
      --radius-btn: 50px;
      --btn-shadow: 0 4px 14px rgba(204, 153, 51, 0.35);
      --btn-border: 3px solid #9a7020;
      --radius-card: 16px;
      --font-body: 'Overpass', 'Merriweather Sans', sans-serif;
      --font-head: 'Sora', 'Merriweather Sans', sans-serif;
}

/* --- GLOBAL FONT OVERRIDES --- */
body,
.elementor-widget-container,
.elementor-widget-text-editor,
p,
li,
span,
td,
input,
textarea,
select,
button {
      font-family: var(--font-body) !important;
      font-weight: 300 !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.elementor-heading-title,
.elementor-widget-heading .elementor-heading-title {
      font-family: var(--font-head) !important;
      font-weight: 700 !important;
      letter-spacing: -0.02em;
      line-height: 1.2;
}

/* Key copy that should stay bold */
strong,
b {
      font-weight: 600 !important;
}

/* Subheadings and labels stay semibold */
.label-text,
.pw-label,
.elementor-widget-icon-list .elementor-icon-list-item {
      font-weight: 600 !important;
}

/* --- BODY --- */
body {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   BUTTONS — Gold pill style, applies to ALL Elementor buttons
   ============================================================ */

@keyframes pulseGold {
      0% {
            box-shadow: 0 0 0 0 var(--gold-glow);
      }

      70% {
            box-shadow: 0 0 0 12px rgba(204, 153, 51, 0);
      }

      100% {
            box-shadow: 0 0 0 0 rgba(204, 153, 51, 0);
      }
}

/* ── Core gold pill — covers ALL Elementor button variants ── */
.elementor-button,
.elementor-button-link,
a.elementor-button,
.elementor-widget-button .elementor-button,
.elementor-button-wrapper .elementor-button,
.elementor-button-wrapper a,
.wp-block-button__link {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      background: var(--gold) !important;
      background-image: none !important;
      color: #fff !important;
      border: none !important;
      border-bottom: 3px solid var(--gold-hover) !important;
      border-radius: var(--radius-btn) !important;
      padding: 15px 36px !important;
      font-family: var(--font-head) !important;
      font-weight: 700 !important;
      font-size: 12px !important;
      letter-spacing: 0.12em !important;
      text-transform: uppercase !important;
      text-decoration: none !important;
      box-shadow: var(--btn-shadow) !important;
      transition: background 0.22s ease, transform 0.15s ease, box-shadow 0.22s ease !important;
      cursor: pointer !important;
      overflow: visible !important;
}

/* Spans/children inside button must NOT override color or radius */
.elementor-button *,
.elementor-button-link *,
a.elementor-button *,
.elementor-button-wrapper a * {
      font-family: var(--font-head) !important;
      font-weight: 700 !important;
      color: #fff !important;
      letter-spacing: 0.12em !important;
      border-radius: 0 !important;
      background: transparent !important;
}

/* ── Hover & active states ── */
.elementor-button:hover,
a.elementor-button:hover,
.elementor-button-link:hover,
.elementor-button-wrapper a:hover {
      background: var(--gold-hover) !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 8px 28px var(--gold-glow) !important;
}

.elementor-button:active,
a.elementor-button:active {
      transform: scale(0.97) translateY(0) !important;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.elementor-nav-menu a,
.elementor-nav-menu .menu-item a,
nav a {
      font-family: var(--font-head) !important;
      font-weight: 600 !important;
      font-size: 12px !important;
      letter-spacing: 0.12em !important;
      text-transform: uppercase !important;
      transition: color 0.2s ease !important;
}

/* Nav phone numbers */
.elementor-nav-menu [href^="tel"] {
      font-family: var(--font-body) !important;
      font-weight: 400 !important;
      letter-spacing: 0.04em !important;
}

/* ============================================================
   HEADINGS — refined sizing and rhythm
   ============================================================ */
.elementor-heading-title.elementor-size-xxl {
      font-size: clamp(32px, 6vw, 64px) !important;
      line-height: 1.1 !important;
}

.elementor-heading-title.elementor-size-xl {
      font-size: clamp(26px, 4.5vw, 48px) !important;
      line-height: 1.15 !important;
}

.elementor-heading-title.elementor-size-large,
.elementor-heading-title.elementor-size-lg {
      font-size: clamp(22px, 3.5vw, 38px) !important;
      line-height: 1.2 !important;
}

.elementor-heading-title.elementor-size-medium,
.elementor-heading-title.elementor-size-md {
      font-size: clamp(18px, 2.5vw, 28px) !important;
}

.elementor-heading-title.elementor-size-small,
.elementor-heading-title.elementor-size-sm {
      font-size: clamp(14px, 2vw, 20px) !important;
}

/* ============================================================
   BODY TEXT — comfortable reading
   ============================================================ */
.elementor-widget-text-editor p,
.elementor-text-editor p {
      line-height: 1.75 !important;
      color: var(--text) !important;
}

/* Dark section body text */
.elementor-element-1df36d0 .elementor-widget-text-editor p,
.elementor-element-5b30e53 .elementor-widget-text-editor p,
.elementor-element-2a28a27 .elementor-widget-text-editor p {
      color: rgba(255, 255, 255, 0.85) !important;
}

/* ============================================================
   ICON LIST (feature lists)
   ============================================================ */
.elementor-icon-list-text {
      font-family: var(--font-body) !important;
      font-size: 15px !important;
      line-height: 1.6 !important;
      font-weight: 300 !important;
}

.elementor-icon-list-item {
      margin-bottom: 6px !important;
}

/* ============================================================
   DIVIDERS — subtle gold
   ============================================================ */
.elementor-widget-divider .elementor-divider-separator {
      border-color: var(--gold) !important;
      opacity: 0.3;
}

/* ============================================================
   CARDS — add subtle radius and elevation 
   ============================================================ */
.elementor-widget-image img {
      border-radius: 12px !important;
      transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.elementor-widget-image img:hover {
      transform: translateY(-4px) !important;
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12) !important;
}

/* Video embeds */
.elementor-video-container,
.elementor-wrapper {
      border-radius: 12px !important;
      overflow: hidden;
}

/* ============================================================
   INPUTS (native WP / elementor)
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
textarea,
select {
      font-family: var(--font-body) !important;
      font-weight: 300 !important;
      border-radius: 8px !important;
      transition: border-color 0.2s, box-shadow 0.2s !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
textarea:focus {
      border-color: var(--gold) !important;
      box-shadow: 0 0 0 3px rgba(204, 153, 51, 0.12) !important;
      outline: none !important;
}

/* Gold accent color on input borders */
input:focus,
textarea:focus {
      outline-color: var(--gold) !important;
}

/* ============================================================
   ALL BUTTON VARIANTS — Nuclear gold pill override
   Covers: WPForms, pw-btn-*, btn-primary, wpforms-submit,
           elementor skin=outline/ghost, newsletter, etc.
   ============================================================ */

/* WPForms submit button */
.wpforms-submit,
.wpforms-submit-container button,
button[type="submit"] {
      background: var(--gold) !important;
      background-image: none !important;
      color: #fff !important;
      border: none !important;
      border-bottom: 3px solid var(--gold-hover) !important;
      border-radius: 50px !important;
      padding: 15px 36px !important;
      font-family: var(--font-head) !important;
      font-weight: 700 !important;
      font-size: 12px !important;
      letter-spacing: 0.12em !important;
      text-transform: uppercase !important;
      cursor: pointer !important;
      box-shadow: 0 4px 14px rgba(204, 153, 51, 0.35) !important;
      transition: background 0.2s, transform 0.15s !important;
}

/* Custom form buttons (pw-btn-*) */
.pw-btn-primary,
#pw-btn-step1,
#pw-btn-step2,
[class*="pw-btn"],
.btn-primary,
.button.primary,
button.primary {
      background: var(--gold) !important;
      background-image: none !important;
      color: #fff !important;
      border: none !important;
      border-bottom: 3px solid var(--gold-hover) !important;
      border-radius: 50px !important;
      padding: 15px 36px !important;
      font-family: var(--font-head) !important;
      font-weight: 700 !important;
      font-size: 12px !important;
      letter-spacing: 0.12em !important;
      text-transform: uppercase !important;
      cursor: pointer !important;
      box-shadow: 0 4px 14px rgba(204, 153, 51, 0.35) !important;
}

/* Hover states */
.wpforms-submit:hover,
.pw-btn-primary:hover,
#pw-btn-step1:hover,
#pw-btn-step2:hover,
.btn-primary:hover,
button.primary:hover {
      background: var(--gold-hover) !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 8px 24px rgba(204, 153, 51, 0.45) !important;
}

/* DLACZEGO TELEFON — make it a subtle gold text link, not a button */
.pw-why-btn,
[class*="why-btn"],
[class*="why-phone"] {
      background: transparent !important;
      border: none !important;
      color: var(--gold) !important;
      font-family: var(--font-body) !important;
      font-size: 11px !important;
      font-weight: 600 !important;
      letter-spacing: 0.08em !important;
      text-transform: uppercase !important;
      text-decoration: underline !important;
      cursor: pointer !important;
      box-shadow: none !important;
      padding: 0 !important;
      border-radius: 0 !important;
}

/* ============================================================
   GOLD COLOR CLASS OVERRIDE (text color #cc9933)
   ============================================================ */
span[style*="color: rgb(204, 153, 51)"],
span[style*="color:#cc9933"],
span[style*="color: #cc9933"],
.text-gold {
      color: var(--gold) !important;
}

/* ============================================================
   MOBILE — Aggressive mobile-first optimization
   ============================================================ */
@media (max-width: 767px) {

      /* ── Typography — significantly smaller, tighter ── */
      body {
            font-size: 15px !important;
      }

      /* All headings scale WAY down on mobile */
      .elementor-heading-title,
      .elementor-widget-heading .elementor-heading-title {
            line-height: 1.2 !important;
            word-break: break-word !important;
      }

      .elementor-heading-title.elementor-size-xxl {
            font-size: clamp(22px, 6.5vw, 32px) !important;
      }

      .elementor-heading-title.elementor-size-xl {
            font-size: clamp(20px, 5.5vw, 27px) !important;
      }

      .elementor-heading-title.elementor-size-large,
      .elementor-heading-title.elementor-size-lg {
            font-size: clamp(18px, 5vw, 24px) !important;
      }

      .elementor-heading-title.elementor-size-medium,
      .elementor-heading-title.elementor-size-md {
            font-size: clamp(16px, 4.5vw, 20px) !important;
      }

      .elementor-heading-title.elementor-size-small,
      .elementor-heading-title.elementor-size-sm {
            font-size: clamp(14px, 4vw, 17px) !important;
      }

      h1 {
            font-size: clamp(22px, 6.5vw, 32px) !important;
      }

      h2 {
            font-size: clamp(20px, 5.5vw, 27px) !important;
      }

      h3 {
            font-size: clamp(16px, 4.5vw, 21px) !important;
      }

      /* ── Section padding — reduce big whitespace ── */
      .elementor-section.elementor-section-boxed>.elementor-container,
      .elementor-top-section>.elementor-container,
      .e-con-inner,
      .e-con {
            padding-left: 18px !important;
            padding-right: 18px !important;
            max-width: 100% !important;
      }

      /* Reduce vertical padding on sections */
      .elementor-section,
      .elementor-top-section {
            padding-top: 40px !important;
            padding-bottom: 40px !important;
      }

      /* Columns — force single column stacking */
      .elementor-column {
            width: 100% !important;
            padding: 0 !important;
      }

      /* ── Buttons — bigger tap targets ── */
      .elementor-button,
      .elementor-button-link,
      a.elementor-button,
      .elementor-button-wrapper a {
            width: auto !important;
            min-width: 200px !important;
            max-width: 90vw !important;
            padding: 16px 28px !important;
            font-size: 11px !important;
            letter-spacing: 0.1em !important;
            min-height: 52px !important;
            white-space: normal !important;
            text-align: center !important;
      }

      /* ── Body text ── */
      .elementor-widget-text-editor p {
            font-size: 14px !important;
            line-height: 1.75 !important;
      }

      .elementor-icon-list-text {
            font-size: 14px !important;
      }

      /* ── Images — don't overflow ── */
      .elementor-widget-image img {
            max-width: 100% !important;
            height: auto !important;
            border-radius: 8px !important;
      }

      .elementor-widget-image {
            text-align: center !important;
      }

      /* ── Video embeds ── */
      .elementor-video-container {
            border-radius: 8px !important;
      }

      /* ── Nav ── */
      .elementor-nav-menu a {
            font-size: 13px !important;
            letter-spacing: 0.05em !important;
      }

      /* ── Hide horizontal scroll ── */
      body {
            overflow-x: hidden !important;
      }

      /* ── CRO Mid-CTA on mobile ── */
      .cro-mid-cta {
            padding: 28px 16px !important;
      }

      .cro-mid-cta h3 {
            font-size: 18px !important;
      }

      .cro-mid-cta p {
            font-size: 13px !important;
      }
}

/* ── Extra small phones (360px) ── */
@media (max-width: 480px) {
      .elementor-heading-title.elementor-size-xxl {
            font-size: clamp(19px, 6vw, 26px) !important;
      }

      .elementor-heading-title.elementor-size-xl {
            font-size: clamp(17px, 5.5vw, 22px) !important;
      }

      .elementor-button,
      .elementor-button-link,
      a.elementor-button {
            width: 100% !important;
            max-width: 100% !important;
            padding: 15px 20px !important;
      }

      /* Very aggressive section padding reduction */
      .elementor-section,
      .elementor-top-section {
            padding-top: 28px !important;
            padding-bottom: 28px !important;
      }
}



/* ============================================================
   SCROLL BEHAVIOR
   ============================================================ */
html {
      scroll-behavior: smooth;
}

/* ============================================================
   SELECTION COLOR
   ============================================================ */
::selection {
      background: rgba(204, 153, 51, 0.25);
      color: var(--dark);
}

/* ============================================================
   SUBTLE TRANSITION on ALL interactive elements
   ============================================================ */
a {
      transition: color 0.2s ease, opacity 0.2s ease;
}

a:hover {
      opacity: 0.85;
}

/* ============================================================
   FIX: Elementor writes border-radius:0 + font-family as INLINE
   STYLES on nested button elements. We override with *every*
   plausible selector combination.
   ============================================================ */

/* The outer link wrapper */
.elementor-widget-button .elementor-button-wrapper a,
.elementor-widget-button .elementor-button-wrapper .elementor-button {
      border-radius: 50px !important;
      overflow: hidden !important;
}

/* All children of any button */
.elementor-button>*,
.elementor-button-link>*,
a.elementor-button>* {
      border-radius: inherit !important;
      font-family: var(--font-head) !important;
      font-weight: 700 !important;
}

/* Elementor icon-box button variant */
.elementor-icon-box-btn,
.elementor-icon-box-btn span {
      border-radius: 50px !important;
      font-family: var(--font-head) !important;
}

/* Prevent child elements from resetting radius */
.elementor-button *,
.elementor-button-wrapper * {
      border-radius: inherit !important;
}

/* ============================================================
   MOBILE BUTTON FIXES
   ============================================================ */
@media (max-width: 767px) {

      .elementor-button,
      .elementor-button-link,
      a.elementor-button {
            border-radius: 50px !important;
            overflow: visible !important;
      }

      .elementor-button-wrapper {
            display: flex;
            justify-content: center;
      }
}