/* ==========================================================================
   Promowinnerhub - Global Custom Styles
   Built on top of Bootstrap 5.3.3. Keep additions lean.
   ========================================================================== */

:root {
  --pw-ink: #0d0f14;
  --pw-ink-soft: #171a22;
  --pw-surface: #ffffff;
  --pw-surface-alt: #f3f4f7;
  --pw-line: #e2e5ec;

  --pw-brand: #ff4d2e;
  --pw-brand-dark: #d63a1f;
  --pw-accent: #ffd23f;
  --pw-accent-deep: #f0b400;
  --pw-teal: #0fcf9f;

  --pw-text: #14161c;
  --pw-text-on-dark: #f7f8fa;
  --pw-text-on-dark-soft: #c9cdd6;
  --pw-muted-ink: #545a68;

  --pw-radius-s: 8px;
  --pw-radius-m: 16px;
  --pw-radius-l: 28px;
  --pw-radius-pill: 999px;

  --pw-shadow-s: 0 4px 12px rgba(13, 15, 20, 0.06);
  --pw-shadow-m: 0 16px 40px rgba(13, 15, 20, 0.12);
  --pw-shadow-l: 0 28px 70px rgba(13, 15, 20, 0.18);

  --pw-font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --pw-font-display: "Bebas Neue", "Inter", "Segoe UI", sans-serif;

  --pw-container: 1200px;
  --pw-header-h: 84px;

  /* legacy mapping so old references stay readable */
  --pw-primary: var(--pw-brand);
  --pw-secondary: var(--pw-accent);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--pw-font-body);
  color: var(--pw-text);
  background: var(--pw-surface);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: var(--pw-font-display);
  letter-spacing: 0.02em;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--pw-ink);
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }

p { margin: 0 0 1rem; }

a {
  color: var(--pw-brand-dark);
  text-decoration: none;
  transition: color .2s ease;
}
a:hover { color: var(--pw-brand); }

img { max-width: 100%; height: auto; display: block; }

/* ---------- Layout helpers ---------- */

.pw-main { overflow-x: hidden; }

.pw-section {
  position: relative;
  padding: 5rem 0;
}

.pw-section--tight { padding: 3.25rem 0; }
.pw-section--dark { background: var(--pw-ink); color: var(--pw-text-on-dark); }
.pw-section--alt { background: var(--pw-surface-alt); }
.pw-section--bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.pw-shell {
  width: 100%;
  max-width: var(--pw-container);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.pw-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--pw-font-body);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--pw-brand);
  margin-bottom: 1rem;
}
.pw-eyebrow i { color: var(--pw-accent-deep); }

.pw-lead {
  font-size: 1.1rem;
  color: var(--pw-muted-ink);
  max-width: 62ch;
}
.pw-section--dark .pw-lead { color: var(--pw-text-on-dark-soft); }

/* ---------- Buttons ---------- */

.pw-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.95rem 1.8rem;
  border-radius: var(--pw-radius-pill);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.pw-btn:hover { transform: translateY(-2px); }

.pw-btn--primary {
  background: var(--pw-brand);
  color: #fff;
}
.pw-btn--primary:hover { background: var(--pw-brand-dark); color: #fff; }

.pw-btn--ghost {
  background: transparent;
  color: var(--pw-ink);
  border-color: var(--pw-ink);
}
.pw-btn--ghost:hover { background: var(--pw-ink); color: #fff; }

.pw-section--dark .pw-btn--ghost {
  color: var(--pw-text-on-dark);
  border-color: rgba(255,255,255,.6);
}
.pw-section--dark .pw-btn--ghost:hover {
  background: var(--pw-accent);
  color: var(--pw-ink);
  border-color: var(--pw-accent);
}

/* ---------- Header ---------- */

.pw-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(13, 15, 20, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.pw-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--pw-header-h);
  padding: 0.5rem 0;
}
.pw-header__brand { display: flex; align-items: center; gap: .6rem; }
.pw-header__brand-name {
  font-family: var(--pw-font-display);
  font-size: 1.4rem;
  color: #fff;
  letter-spacing: .08em;
}
.pw-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  color: var(--pw-text-on-dark-soft);
  font-size: .86rem;
}
.pw-header__meta span { display: inline-flex; align-items: center; gap: .4rem; }
.pw-header__meta i { color: var(--pw-accent); }

.pw-nav {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pw-nav a {
  color: var(--pw-text-on-dark);
  font-weight: 600;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.pw-nav a:hover { color: var(--pw-accent); }

.pw-burger {
  display: none;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
}

@media (max-width: 991px) {
  .pw-header__meta { display: none; }
  .pw-burger { display: inline-flex; }
  .pw-nav {
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    gap: 0;
    background: var(--pw-ink-soft);
    padding: 1rem 1.25rem;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
  }
  .pw-nav.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .pw-nav a { display: block; padding: .75rem 0; }
}

/* ---------- Hero ---------- */

.pw-hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  color: var(--pw-text-on-dark);
}
.pw-hero__grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 3rem;
  align-items: center;
}
.pw-hero h1 { color: #fff; }
.pw-hero p { color: var(--pw-text-on-dark-soft); max-width: 52ch; }
.pw-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.75rem; }

.pw-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--pw-radius-l);
  padding: 1.75rem;
  backdrop-filter: blur(6px);
}
.pw-stat__num {
  font-family: var(--pw-font-display);
  font-size: 2.4rem;
  color: var(--pw-accent);
  line-height: 1;
}
.pw-stat__label { font-size: .85rem; color: var(--pw-text-on-dark-soft); }

@media (max-width: 991px) {
  .pw-hero__grid { grid-template-columns: 1fr; }
}

/* ---------- Cards ---------- */

.pw-card {
  background: var(--pw-surface);
  border: 1px solid var(--pw-line);
  border-radius: var(--pw-radius-m);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.pw-card:hover { transform: translateY(-6px); box-shadow: var(--pw-shadow-m); }
.pw-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--pw-surface-alt); }
.pw-card__media img { width: 100%; height: 100%; object-fit: cover; }
.pw-card__body { padding: 1.5rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.pw-card__tag {
  align-self: flex-start;
  background: var(--pw-accent);
  color: var(--pw-ink);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: .3rem .7rem;
  border-radius: var(--pw-radius-pill);
}
.pw-card__link {
  margin-top: auto;
  font-weight: 700;
  text-transform: uppercase;
  font-size: .82rem;
  letter-spacing: .06em;
}

/* ---------- Generic grids ---------- */

.pw-grid { display: grid; gap: 1.5rem; }
.pw-grid--2 { grid-template-columns: repeat(2, 1fr); }
.pw-grid--3 { grid-template-columns: repeat(3, 1fr); }
.pw-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 991px) {
  .pw-grid--3, .pw-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .pw-grid--2, .pw-grid--3, .pw-grid--4 { grid-template-columns: 1fr; }
}

/* ---------- Feature tiles ---------- */

.pw-feature {
  background: var(--pw-ink-soft);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--pw-radius-m);
  padding: 2rem;
  color: var(--pw-text-on-dark);
  height: 100%;
}
.pw-feature i {
  font-size: 1.8rem;
  color: var(--pw-accent);
  margin-bottom: 1rem;
  display: inline-block;
}
.pw-feature h3 { color: #fff; font-size: 1.2rem; }
.pw-feature p { color: var(--pw-text-on-dark-soft); margin: 0; }

/* ---------- Testimonials ---------- */

.pw-quote {
  background: var(--pw-surface);
  border: 1px solid var(--pw-line);
  border-left: 4px solid var(--pw-brand);
  border-radius: var(--pw-radius-m);
  padding: 1.75rem;
  height: 100%;
}
.pw-quote p { font-style: italic; color: var(--pw-muted-ink); }
.pw-quote__author { font-weight: 700; color: var(--pw-ink); margin: 0; }
.pw-quote__role { font-size: .85rem; color: var(--pw-muted-ink); }

/* ---------- Pricing ---------- */

.pw-price {
  background: var(--pw-surface);
  border: 1px solid var(--pw-line);
  border-radius: var(--pw-radius-l);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  position: relative;
}
.pw-price--featured {
  border-color: var(--pw-brand);
  box-shadow: var(--pw-shadow-m);
  transform: translateY(-6px);
}
.pw-price__amount {
  font-family: var(--pw-font-display);
  font-size: 3rem;
  color: var(--pw-ink);
  line-height: 1;
}
.pw-price__amount span { font-size: 1rem; font-family: var(--pw-font-body); color: var(--pw-muted-ink); }
.pw-price ul { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.pw-price li { display: flex; gap: .6rem; padding: .4rem 0; color: var(--pw-muted-ink); }
.pw-price li i { color: var(--pw-teal); margin-top: .35rem; }

/* ---------- Forms ---------- */

.pw-form {
  background: var(--pw-surface);
  border: 1px solid var(--pw-line);
  border-radius: var(--pw-radius-l);
  padding: 2rem;
  box-shadow: var(--pw-shadow-s);
}
.pw-form .form-label {
  font-weight: 600;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--pw-ink);
}
.pw-form .form-control,
.pw-form .form-select {
  border-radius: var(--pw-radius-s);
  border: 1px solid var(--pw-line);
  padding: .8rem 1rem;
  font-size: .95rem;
}
.pw-form .form-control:focus,
.pw-form .form-select:focus {
  border-color: var(--pw-brand);
  box-shadow: 0 0 0 3px rgba(255,77,46,.18);
}

/* ---------- Map ---------- */

.pw-map {
  border-radius: var(--pw-radius-m);
  overflow: hidden;
  border: 1px solid var(--pw-line);
  min-height: 340px;
}
.pw-map iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }

/* ---------- Footer ---------- */

.pw-footer {
  background: var(--pw-ink);
  color: var(--pw-text-on-dark-soft);
  padding: 4rem 0 2rem;
}
.pw-footer h4 {
  color: #fff;
  font-size: 1.1rem;
  margin-bottom: 1rem;
}
.pw-footer a { color: var(--pw-text-on-dark-soft); font-size: .92rem; }
.pw-footer a:hover { color: var(--pw-accent); }
.pw-footer__list { list-style: none; padding: 0; margin: 0; }
.pw-footer__list li { padding: .3rem 0; }
.pw-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  font-size: .85rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  justify-content: space-between;
}
.pw-footer__legal {
  font-size: .8rem;
  color: var(--pw-text-on-dark-soft);
  line-height: 1.7;
}
.pw-footer__social { display: flex; gap: .75rem; }
.pw-footer__social a {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: #fff;
}
.pw-footer__social a:hover { background: var(--pw-brand); color: #fff; }

/* ---------- Utility ---------- */

.pw-divider {
  height: 1px;
  background: var(--pw-line);
  border: 0;
  margin: 2.5rem 0;
}
.pw-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--pw-surface-alt);
  color: var(--pw-ink);
  border-radius: var(--pw-radius-pill);
  padding: .35rem .9rem;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.pw-badge i { color: var(--pw-brand); }

.pw-accordion .accordion-item {
  border: 1px solid var(--pw-line);
  border-radius: var(--pw-radius-m) !important;
  margin-bottom: .75rem;
  overflow: hidden;
}
.pw-accordion .accordion-button {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .92rem;
}
.pw-accordion .accordion-button:not(.collapsed) {
  background: var(--pw-ink);
  color: #fff;
}
.pw-accordion .accordion-button:focus {
  box-shadow: 0 0 0 3px rgba(255,77,46,.2);
}

/* ---------- Cookie banner ---------- */

.pw-cookie-dock {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 1080;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.pw-cookie-dock__panel {
  pointer-events: auto;
  width: 100%;
  max-width: 960px;
  background: var(--pw-ink-soft);
  color: var(--pw-text-on-dark);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--pw-radius-l);
  box-shadow: var(--pw-shadow-l);
  padding: 1.5rem 1.75rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.25rem;
  align-items: center;
}
.pw-cookie-dock__title {
  font-family: var(--pw-font-display);
  font-size: 1.35rem;
  color: #fff;
  margin: 0 0 .35rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.pw-cookie-dock__text {
  margin: 0;
  font-size: .92rem;
  color: var(--pw-text-on-dark-soft);
  max-width: 60ch;
}
.pw-cookie-dock__text a { color: var(--pw-accent); text-decoration: underline; }
.pw-cookie-dock__text a:hover { color: #fff; }
.pw-cookie-dock__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: flex-end;
}
.pw-cookie-dock__btn {
  border-radius: var(--pw-radius-pill);
  padding: .8rem 1.5rem;
  font-weight: 800;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.pw-cookie-dock__btn:hover { transform: translateY(-2px); }
.pw-cookie-dock__btn--decline {
  background: transparent;
  color: var(--pw-text-on-dark);
  border-color: rgba(255,255,255,.45);
}
.pw-cookie-dock__btn--decline:hover {
  background: rgba(255,255,255,.12);
  color: #fff;
}
.pw-cookie-dock__btn--accept {
  background: var(--pw-brand);
  color: #fff;
}
.pw-cookie-dock__btn--accept:hover { background: var(--pw-accent); color: var(--pw-ink); }

@media (max-width: 720px) {
  .pw-cookie-dock__panel {
    grid-template-columns: 1fr;
    padding: 1.25rem;
  }
  .pw-cookie-dock__actions { justify-content: stretch; }
  .pw-cookie-dock__btn { flex: 1 1 auto; }
}
/* ---------- Blog page contrast overrides (appended) ----------
   The brand orange #ff5230 only reaches 3.23:1 against white text.
   Darken the fill so button/pill labels meet WCAG AA (>= 4.5:1). */
.blog-main .btn-acc { background: #c93b1d; color: #fff; }
.blog-main .btn-acc:hover { background: #b0331a; color: #fff; }
.blog-main .cat-pill:hover,
.blog-main .cat-pill.active { background: #c93b1d; border-color: #c93b1d; color: #fff; }

/* ---------- About page (about-main) overrides ---------- */

/* Headings on the dark about-main surface must use light text,
   otherwise the global heading colour (--pw-ink) is unreadable. */
.about-main h1,
.about-main h2,
.about-main h3,
.about-main h4,
.about-main h5,
.about-main h6,
.about-main .title {
  color: #ffffff;
}

/* Doubled class gives this rule higher specificity than the page's
   inline .about-main .btn-acc rule, so it wins regardless of load order. */
.about-main .btn-acc.btn-acc {
  background: #d63a1f;
  color: #ffffff;
}
.about-main .btn-acc.btn-acc:hover {
  background: #b8320f;
  color: #ffffff;
}

/* ---------- Home page (home-main) contrast support ----------
   The homepage hero and non-alternating sections rely on a dark surface,
   but only .sec-alt sets one. Without an explicit background the light
   body default (white) shows through and light text becomes unreadable.
   Doubled class keeps these rules ahead of the page's inline block. */
.home-main.home-main { background: #0b0d10; }
.home-main.home-main section.hero { background-color: #0b0d10; }

/* ---------- Legal pages (privacy-policy and siblings) contrast support ----------
   The global heading rule sets colour to --pw-ink (#0d0f14), which is
   unreadable on the legal pages' dark hero and dark legal card surfaces.
   Force light heading text on those dark surfaces. Doubled class in the
   selectors keeps these rules ahead of any page-level inline block. */
.legal-main .legal-title,
.legal-main .legal-content h2,
.legal-main .legal-help h2,
.legal-main .legal-help h3 {
  color: #ffffff;
}
.legal-main .legal-title { text-shadow: 0 2px 12px rgba(0, 0, 0, .45); }

/* ---------- Price page (price-main) contrast support ----------
   The price page relies on a dark surface, but only .sec-alt sets one.
   Without an explicit background the light body default (white) shows
   through and light text becomes unreadable. Doubled class keeps these
   rules ahead of the page's inline block. */
.price-main.price-main { background: #0b0d10; }
.price-main.price-main h1,
.price-main.price-main h2,
.price-main.price-main h3,
.price-main.price-main h4,
.price-main.price-main h5,
.price-main.price-main h6,
.price-main.price-main .title { color: #ffffff; }

/* Price page (price-main) button/tag contrast: the brand orange #ff5230
   only reaches 3.23:1 against white text. Darken the fill so labels meet
   WCAG AA (>= 4.5:1). Doubled class beats the page's inline block. */
.price-main.price-main .btn-acc { background: #c93b1d; color: #ffffff; }
.price-main.price-main .btn-acc:hover { background: #b0331a; color: #ffffff; }
.price-main.price-main .tag { background: #c93b1d; color: #ffffff; }