/* Helikon Books — design tokens
 * Shared CSS custom properties for every widget. Loaded once via wp_register_style()
 * and depended on by every widget stylesheet. */

:root {
  /* Brand */
  --hb-blue-900: #001b57;
  --hb-blue-800: #002a8f;
  --hb-blue-700: #0033a1;
  --hb-blue-600: #1a4cc4;
  --hb-blue-50:  #eef2fb;

  --hb-orange-700: #d9551a;
  --hb-orange-600: #f05a1a;
  --hb-orange-500: #f58220;
  --hb-orange-400: #ff9a4d;
  --hb-orange-50:  #fff1e3;

  /* Warm paper neutrals */
  --hb-paper:   #faf7f2;
  --hb-paper-2: #f2ede4;
  --hb-paper-3: #e8e1d3;
  --hb-ink-900: #13131a;
  --hb-ink-700: #2a2a33;
  --hb-ink-500: #5a5a66;
  --hb-ink-300: #9a9aa8;
  --hb-line:    #e2ddd2;

  /* Typography */
  --hb-font-display: 'Sofia Sans', 'Manrope', system-ui, sans-serif;
  --hb-font-body:    'Manrope', system-ui, sans-serif;
  --hb-font-serif:   'PT Serif', 'Times New Roman', serif;

  /* Rhythm */
  --hb-container: 1280px;
  --hb-radius: 2px;
  --hb-radius-lg: 4px;

  /* Shadows */
  --hb-shadow-book: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(20,20,40,.12), 0 24px 48px -12px rgba(20,20,40,.18);
  --hb-shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 12px 32px -8px rgba(20,20,40,.10);
}

/* Container helper that any widget can opt into */
.hb-container {
  max-width: var(--hb-container);
  margin: 0 auto;
  padding: 0 32px;
}

/* Subtle paper grain on body — provided by widgets that own the section background */
.hb-paper-bg {
  background-color: var(--hb-paper);
  background-image:
    radial-gradient(rgba(20,20,40,.020) 1px, transparent 1px),
    radial-gradient(rgba(20,20,40,.012) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
}

/* Buttons (reused across many widgets) */
.hb-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  font-family: var(--hb-font-body);
  font-weight: 700; font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: var(--hb-radius);
  transition: transform .12s ease, background .15s, color .15s;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  border: 0;
}
.hb-btn:hover { transform: translateY(-1px); }
.hb-btn--primary { background: var(--hb-orange-600); color: #fff; }
.hb-btn--primary:hover { background: var(--hb-orange-700); }
.hb-btn--ghost {
  background: transparent; color: #fff;
  border: 1.5px solid rgba(255,255,255,.4);
}
.hb-btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.hb-btn--dark { background: var(--hb-ink-900); color: #fff; }
.hb-btn--outline {
  background: transparent; color: var(--hb-ink-900);
  border: 1.5px solid var(--hb-ink-900);
}
.hb-btn--outline:hover { background: var(--hb-ink-900); color: #fff; }
.hb-btn[disabled],
.hb-btn[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; transform: none;
}

/* Eyebrow */
.hb-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--hb-font-body);
  font-size: 12px; font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--hb-ink-500);
}
.hb-eyebrow::before {
  content: ""; width: 28px; height: 2px; background: var(--hb-orange-500);
}
.hb-eyebrow--light { color: rgba(255,255,255,.6); }
.hb-eyebrow--accent { color: var(--hb-orange-400); }
.hb-eyebrow--accent::before { background: var(--hb-orange-400); }

/* "Link more" arrow link */
.hb-link-more {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--hb-font-body);
  font-weight: 600; font-size: 14px;
  letter-spacing: .02em;
  color: var(--hb-blue-700);
  padding-bottom: 4px;
  border-bottom: 1.5px solid var(--hb-blue-700);
  text-decoration: none;
}
.hb-link-more:hover { color: var(--hb-orange-600); border-color: var(--hb-orange-600); }
.hb-link-more .hb-arrow { transition: transform .2s; }
.hb-link-more:hover .hb-arrow { transform: translateX(4px); }

/* Section heading helper */
.hb-section-head {
  display: flex; justify-content: space-between; align-items: end;
  gap: 32px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}
.hb-section-head__title {
  font-family: var(--hb-font-display);
  font-weight: 700;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 14px 0 0;
  max-width: 18ch;
}
.hb-lede {
  font-family: var(--hb-font-serif);
  font-size: 18px;
  line-height: 1.5;
  color: var(--hb-ink-700);
  max-width: 42ch;
  opacity: .75;
  font-style: italic;
}

/* Noise overlay reusable on dark hero variants */
.hb-noise {
  position: absolute; inset: 0;
  opacity: .18; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

/* Responsive baseline */
@media (max-width: 1024px) {
  .hb-container { padding: 0 24px; }
  .hb-section-head { margin-bottom: 32px; }
}

/* ─────────────────────────────────────────────────────────────────────
 * Full-bleed layout breakout for the site-wide widgets.
 *
 * Forces header, footer, and newsletter widgets to span the FULL viewport
 * width regardless of any parent (Elementor section/column/container/widget-
 * wrap) that might constrain them. Uses `margin: 0 -50vw` together with
 * `width: 100vw` — most robust pattern, works inside any nested wrapper.
 *
 * The widgets' OWN internal `.hb-container` keeps inner content boxed at
 * 1280px max, so the colored bar bleeds full-width but content stays centered.
 * ─────────────────────────────────────────────────────────────────────── */

.elementor-widget-helikon-books-site-header,
.elementor-widget-helikon-books-site-footer,
.elementor-widget-helikon-books-newsletter-cta {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 0 !important;
  box-sizing: border-box;
}

.elementor-widget-helikon-books-site-header > .elementor-widget-container,
.elementor-widget-helikon-books-site-footer > .elementor-widget-container,
.elementor-widget-helikon-books-newsletter-cta > .elementor-widget-container {
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
  max-width: 100%;
}

/* Suppress horizontal scrollbar caused by the 100vw breakout (when the
 * viewport has a vertical scrollbar that occupies pixels). `clip` keeps
 * position: sticky working for the header; `hidden` is fallback. */
html, body {
  overflow-x: clip;
}
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}