/* ============================================================
   SIIP Design System — design-system.css
   Canonical source of truth for Successful Investing in Poland
   
   Approved: 2026-05-29
   Sources: Figma file 7ayJz4hYFTIVBen0nP9OPv (3 frames)
            + 4 WordPress HTML exports
   ============================================================ */

/* ------------------------------------------------------------
   1. COLOR TOKENS
   ------------------------------------------------------------ */
:root {
  /* Brand */
  --color-primary:        #008d7f;
  --color-primary-light:  #e6f4f3;
  --color-secondary:      #4db2ec;
  --color-accent:         #fbba00;

  /* Actions */
  --color-cta:            #e04b4a;
  --color-danger:         #dd3333;
  --color-success:        #5fa820;

  /* Text */
  --color-text:           #111111;
  --color-text-body:      #222222;
  --color-text-muted:     #767676;

  /* Surfaces */
  --color-bg:             #ffffff;
  --color-bg-alt:         #f5f5f5;
  --color-border:         #eaeaea;

  /* Dark surfaces (footer, sidebar) */
  --color-dark-bg:        #232d35;
  --color-dark-bg-deep:   #11171c;
}

/* ------------------------------------------------------------
   2. TYPOGRAPHY TOKENS
   ------------------------------------------------------------ */
:root {
  /* Font families */
  --font-heading:  'Roboto', sans-serif;
  --font-body:     'Verdana', Geneva, sans-serif;
  --font-ui:       'Rubik', sans-serif;

  /* Font sizes — 5 steps (all even) */
  --font-size-sm:   14px;
  --font-size-base: 16px;
  --font-size-lg:   22px;   /* H3 */
  --font-size-xl:   28px;   /* H2 */
  --font-size-2xl:  32px;   /* H1 */

  /* Font weights — 3 values */
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;

  /* Line heights — 3 values */
  --lh-tight:    1.2;       /* headings */
  --lh-normal:   1.6;       /* body */
  --lh-relaxed:  1.8;       /* lead / long prose */
}

/* ------------------------------------------------------------
   3. SPACING TOKENS — strict 8pt grid
   ------------------------------------------------------------ */
:root {
  --spacing-xs:   4px;
  --spacing-sm:   8px;
  --spacing-md:   16px;
  --spacing-lg:   24px;
  --spacing-xl:   32px;
  --spacing-2xl:  48px;
  --spacing-3xl:  64px;
  --spacing-4xl:  96px;
}

/* ------------------------------------------------------------
   4. SHAPE TOKENS
   ------------------------------------------------------------ */
:root {
  /* Border radius */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;

  /* Box shadows */
  --shadow-sm:   0 1px 4px rgba(0, 0, 0, 0.12);
  --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-teal: 0 4px 20px rgba(0, 141, 127, 0.35);
}

/* ------------------------------------------------------------
   5. LAYOUT TOKENS
   ------------------------------------------------------------ */
:root {
  --max-width-content: 720px;
  --max-width-wide:    1240px;

  /* How far full-width elements (panoramas, background sections) extend
     beyond the WP content container. Derived from the theme's alignwide
     behavior: 1164px blocks inside a 1068px container = 48px each side. */
  --container-bleed:   48px;
}

/* ------------------------------------------------------------
   6. BASE RESETS & DEFAULTS
   NOTE: No global * reset for margin/padding — this CSS runs
   inside WordPress alongside the theme. Only box-sizing is safe
   to apply globally. Typography defaults are scoped to elements
   within our content blocks.
   ------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ------------------------------------------------------------
   7. TYPOGRAPHIC BASE
   Scoped to our content elements. Does not override WP theme body styles.
   ------------------------------------------------------------ */
.media-text__content,
.section,
.cover-hero__inner {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--lh-normal);
  color: var(--color-text-body);
}

.media-text__content h1,
.media-text__content h2,
.media-text__content h3,
.section h1,
.section h2,
.section h3 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--lh-tight);
  color: var(--color-text);
}

h1 {
  font-size: var(--font-size-2xl);
}

h2 {
  font-size: var(--font-size-xl);
}

h3 {
  font-size: var(--font-size-lg);
}

p {
  margin-bottom: var(--spacing-md);
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover,
a:focus-visible {
  color: var(--color-secondary);
  text-decoration: underline;
}

strong, b {
  font-weight: var(--font-weight-bold);
}

small {
  font-size: var(--font-size-sm);
}

/* ------------------------------------------------------------
   8. UTILITY CLASSES
   ------------------------------------------------------------ */

/* Text utilities */
.text-muted    { color: var(--color-text-muted); }
.text-primary  { color: var(--color-primary); }

/* Override heading color when .text-primary is applied */
h1.text-primary, h2.text-primary, h3.text-primary,
.media-text__content .text-primary,
.section .text-primary { color: var(--color-primary); }
.text-accent   { color: var(--color-accent); }
.text-sm       { font-size: var(--font-size-sm); }
.text-lead     { font-size: var(--font-size-base); line-height: var(--lh-relaxed); }
.font-ui       { font-family: var(--font-ui); }

/* Surfaces */
.bg-alt        { background-color: var(--color-bg-alt); }
.bg-dark       { background-color: var(--color-dark-bg); color: var(--color-bg); }
.bg-dark-deep  { background-color: var(--color-dark-bg-deep); color: var(--color-bg); }

/* Layout */
.container {
  width: 100%;
  max-width: var(--max-width-wide);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-lg);
}

.container--narrow {
  max-width: var(--max-width-content);
}

/* Pill & circle radius utilities */
.pill   { border-radius: 9999px; }
.circle { border-radius: 50%; }

/* Visually hidden (accessible) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------
   9. LAYOUT SYSTEM
   Patterns observed across all 3 audited pages.
   These are the building blocks for any new page.
   ------------------------------------------------------------ */

/*
 * SECTION STACKING
 * Sections sit flush — zero gap between them.
 * Vertical breathing room is internal padding only.
 */
.section {
  margin: 0;
  padding-top: var(--spacing-2xl);
  padding-bottom: var(--spacing-2xl);
}

.section--flush {
  padding-top: 0;
  padding-bottom: 0;
}

/*
 * FULL-BLEED BACKGROUND
 * Kept as reference — use only if the design requires viewport-width backgrounds.
 * For container-width backgrounds, use .bg-section--alt / .bg-section--dark wrappers.
 */

/*
 * MEDIA-TEXT
 * Two-column grid: image + content. The dominant layout on all 3 pages.
 * Image is always the narrower column.
 * Gap: --spacing-xl (32px). Horizontal padding: --spacing-2xl (48px).
 */
.media-text {
  display: grid;
  gap: var(--spacing-xl);
  align-items: center;
  padding-top: var(--spacing-2xl);
  padding-bottom: var(--spacing-2xl);
}

.media-text--img-left  { grid-template-columns: 30% 1fr; }
.media-text--img-right { grid-template-columns: 1fr 30%; }
.media-text--img-sm    { grid-template-columns: 1fr 25%; }
.media-text--img-lg    { grid-template-columns: 1fr 35%; }

/* Mirror: when image is left AND small/large */
.media-text--img-left.media-text--img-sm { grid-template-columns: 25% 1fr; }
.media-text--img-left.media-text--img-lg { grid-template-columns: 35% 1fr; }

.media-text__image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Background wrappers — extend beyond content container to match
   the original WP alignwide behavior (overflow by --spacing-2xl each side).
   Internal padding keeps content aligned with normal sections. */
.bg-section--alt {
  background-color: var(--color-bg-alt);
  margin-left: calc(-1 * var(--container-bleed));
  margin-right: calc(-1 * var(--container-bleed));
  padding-left: var(--container-bleed);
  padding-right: var(--container-bleed);
}
.bg-section--dark {
  background-color: var(--color-dark-bg);
  color: var(--color-bg);
  margin-left: calc(-1 * var(--container-bleed));
  margin-right: calc(-1 * var(--container-bleed));
  padding-left: var(--container-bleed);
  padding-right: var(--container-bleed);
}

.media-text__content h2 { margin-bottom: 0; }
.media-text__content h3 {
  margin-top: var(--spacing-md);
  margin-bottom: 0;
}
.media-text__content p {
  margin-top: var(--spacing-md);
  margin-bottom: 0;
}
.media-text__content ul {
  margin-top: var(--spacing-md);
  margin-bottom: 0;
}

/*
 * COVER HERO
 * Full-width dark overlay with centered text.
 * Used on newsletter and economic-zones pages.
 */
.cover-hero {
  position: relative;
  padding: var(--spacing-4xl) var(--spacing-lg);
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-size: cover;
  background-position: center;
}

.cover-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.cover-hero__inner {
  position: relative;
  max-width: var(--max-width-content);
}

.cover-hero h1,
.cover-hero h2,
.cover-hero h3,
.cover-hero p { color: var(--color-bg); }

/*
 * CTA LINK (inline call-to-action)
 * Teal background button-style link. Auto width, can be centered.
 */
.cta-link {
  display: inline-block;
  background-color: var(--color-primary);
  color: var(--color-bg);
  font-family: var(--font-ui);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  padding: var(--spacing-sm) var(--spacing-lg);
  text-align: center;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.cta-link:hover {
  opacity: 0.9;
  color: var(--color-bg);
  text-decoration: none;
}

/*
 * CTA SECTION (teal background with centered content)
 * Fills parent container. Used for subscribe CTAs.
 */
.cta-section {
  background-color: var(--color-primary);
  color: var(--color-bg);
  padding: var(--spacing-3xl) var(--spacing-lg);
  text-align: center;
}

.cta-section h2,
.cta-section h3,
.cta-section p { color: var(--color-bg); }

.cta-section h3 { font-weight: var(--font-weight-regular); }

.cta-section p {
  max-width: var(--max-width-content);
  margin: 0 auto var(--spacing-xl);
  opacity: 0.85;
}

/*
 * PANORAMA IMAGE
 * Spans full viewport width. Content image fills it.
 */
.panorama {
  line-height: 0;
  margin-left: calc(-1 * var(--container-bleed));
  margin-right: calc(-1 * var(--container-bleed));
}

.panorama img {
  width: 100%;
  height: auto;
  display: block;
}

/* ------------------------------------------------------------
   10. COMPONENT SKELETONS
   Reusable components built from the layout system.
   ------------------------------------------------------------ */

/* Card grid */
.card-grid {
  display: grid;
  gap: var(--spacing-lg);
}

/* Card */
.card {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.card:hover {
  box-shadow: var(--shadow-md);
}

/* Data table */
.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  text-align: left;
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 2px solid var(--color-text-body);
}

.data-table td {
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
}

.data-table tr:nth-child(even) td {
  background-color: var(--color-bg-alt);
}

/* FAQ block */
.faq-block details {
  border-bottom: 1px solid var(--color-border);
}

.faq-block details:first-of-type {
  border-top: 1px solid var(--color-border);
}

.faq-block summary {
  font-weight: var(--font-weight-bold);
  padding: var(--spacing-md) 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-block summary::-webkit-details-marker {
  display: none;
}

.faq-block summary::after {
  content: '+';
  font-size: var(--font-size-lg);
  color: var(--color-primary);
  flex-shrink: 0;
  margin-left: var(--spacing-md);
}

.faq-block details[open] summary::after {
  content: '−';
}

.faq-block details[open] summary {
  color: var(--color-primary);
}

.faq-block details > div {
  padding-bottom: var(--spacing-md);
}

/* Page header (WP-managed, styles for standalone use) */
.page-header {
  background-color: var(--color-dark-bg);
  font-family: var(--font-ui);
}

/* Page footer (WP-managed, styles for standalone use) */
.page-footer {
  background-color: var(--color-dark-bg);
  color: var(--color-bg);
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
}

.page-footer a { color: var(--color-bg); }
.page-footer a:hover { color: var(--color-accent); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  font-family: var(--font-ui);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  padding: var(--spacing-sm) var(--spacing-lg);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
}

.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-bg);
}

.btn--primary:hover {
  box-shadow: var(--shadow-teal);
  color: var(--color-bg);
  text-decoration: none;
}

.btn--cta {
  background-color: var(--color-cta);
  color: var(--color-bg);
}

.btn--cta:hover {
  opacity: 0.9;
  color: var(--color-bg);
  text-decoration: none;
}

.btn--dark {
  background-color: var(--color-text-body);
  color: var(--color-bg);
}

.btn--dark:hover {
  background-color: var(--color-text);
  color: var(--color-bg);
  text-decoration: none;
}

.btn--outline {
  background-color: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-body);
}

.btn--outline:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  text-decoration: none;
}

/* Badges / tags */
.badge {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: 9999px;
}

.badge--primary {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

/* ------------------------------------------------------------
   11. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .media-text {
    grid-template-columns: 1fr;
  }

  .media-text--img-left,
  .media-text--img-right,
  .media-text--img-sm,
  .media-text--img-lg {
    grid-template-columns: 1fr;
  }

  .cover-hero {
    padding: var(--spacing-2xl) var(--spacing-md);
    min-height: 300px;
  }
}

/* ------------------------------------------------------------
   12. BREAKPOINTS REFERENCE
   
   --bp-sm:  576px
   --bp-md:  768px
   --bp-lg:  1024px
   --bp-xl:  1240px
   ------------------------------------------------------------ */