/*
 * =============================================================
 *  BNI Theme — rezension.cb
 *  Strategy: Mobile-First. Import AFTER styles.css.
 *  Rules:
 *    - Comments always precede their declaration
 *    - All spacing via --spacing-* variables (4pt grid)
 *    - Base styles = mobile; scale up via min-width breakpoints
 * =============================================================
 */

/* ---------------------------------------------------------------
   1. DESIGN TOKENS
--------------------------------------------------------------- */
:root {
  /* Color Palette */
  --color-primary:      #CF2030;
  --color-primary-dark: #A81828;
  --color-white:        #FFFFFF;
  /* BNI Red background for the full page */
  --color-bg-page:      var(--color-primary);
  /* Light neutral used for inputs and secondary hover */
  --color-bg-nav:       #F5F7F7;
  --color-text-heading: #000000;
  --color-text-body:    #333333;
  --color-footer-bg:    #CF2030;
  --color-footer-text:  #FFFFFF;

  /* Typography */
  --font-heading: Arial, sans-serif;
  --font-base:    "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* 4-Level Type Scale (mobile-first base values) */
  /* L1: Hero heading — strongest anchor */
  --text-size-l1: 28px;
  /* L2: Section / question emphasis */
  --text-size-l2: 18px;
  /* L3: Standard body text */
  --text-size-l3: 14px;
  /* L4: Metadata, labels, button text */
  --text-size-l4: 11px;

  /* Force base.css body text to map to our 14px scale (matching UI spans) */
  --text-size-body: var(--text-size-l3) !important;

  --font-weight-bold:    700;
  --font-weight-medium:  600;
  --font-weight-regular: 400;

  /* Spacing System — 4pt Grid
     Values: 4, 8, 12, 16, 24, 32, 48, 64 px
     (reference: UX Grundprinzipien — 4pt Multiplikatoren) */
  --spacing-xs:      4px;
  --spacing-sm:      8px;
  /* Used for input/button vertical padding */
  --spacing-compact: 12px;
  --spacing-md:      16px;
  --spacing-lg:      24px;
  --spacing-xl:      32px;
  /* Used for desktop card vertical padding */
  --spacing-xxl:     48px;
  /* Used for desktop card horizontal padding */
  --spacing-section: 64px;

  /* Derived spacing aliases */
  --heading-gap:       var(--spacing-md);
  --container-padding: var(--spacing-md);

  /* Layout */
  --container-max-width: 1170px;

  /* Button tokens */
  --btn-bg:          #CF2030;
  --btn-color:       #FFFFFF;
  --btn-border:      1px solid #CF2030;
  /* Pill shape */
  --btn-radius:      25px;
  --btn-padding:     var(--spacing-compact) var(--spacing-lg);
  --btn-font-size:   var(--text-size-l4);
  --btn-font-weight: var(--font-weight-medium);

  /* Semantic aliases (referenced by components) */
  --page-bg:           var(--color-bg-page);
  --surface:           var(--color-white);
  --text-heading:      var(--color-text-heading);
  --text-body:         var(--color-text-body);
  --text-label:        #555555;
  --input-border:      #CCCCCC;
  /* Re-uses nav background for input fill */
  --input-bg:          var(--color-bg-nav);
  --input-focus-border: var(--color-primary);
  --input-focus-ring:  rgba(207, 32, 48, 0.15);
  --progress-fill:     var(--color-primary);
  --required-color:    var(--color-primary);
  --error-color:       #DC2626;
  --shadow-ambient:    0 4px 20px rgba(0, 0, 0, 0.08);
  /* BNI prefers sharp corners for cards and inputs */
  --radius-lg: 0;
  --radius-md: 0;
}

/* ---------------------------------------------------------------
   2. BASE RESET & BODY
--------------------------------------------------------------- */
body {
  font-family: var(--font-base);
  font-size: var(--text-size-l3);
  color: var(--color-text-body);
  background-color: var(--color-bg-page);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------
   3. TYPOGRAPHY (4-LEVEL SYSTEM)
   Tighten-Trick: -0.02em letter-spacing compresses headlines
   for a more premium, editorial feel
--------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-text-heading);
  margin-bottom: var(--heading-gap);
  letter-spacing: -0.02em;
}

/* L1: Hero — page's strongest visual anchor */
h1 {
  font-size: var(--text-size-l1);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
  /* Matches vertical rhythm of form elements below */
  margin-bottom: var(--spacing-lg);
}

/* L2: Section / question headings */
h2, h3, h4 {
  font-size: var(--text-size-l2);
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
  letter-spacing: -0.015em;
}

/* Review text (success page): italic + regular weight to
   distinguish generated content from structural copy */
.review-block__text {
  font-size: var(--text-size-l3);
  font-weight: var(--font-weight-regular) !important;
  font-style: italic;
  line-height: 1.5;
  color: var(--text-body);
  letter-spacing: normal;
  /* Compact spacing to label above */
  padding: var(--spacing-xs) 0;
}

/* L4: Labels — uppercase signifier style for all metadata,
   form labels, and UI hints (per UX Grundprinzipien) */
.label-accent,
.review-block__label,
.next-steps__title,
.cta-restart__headline,
.progress-label,
.step-indicator,
label,
.instructions-accordion summary span {
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-label);
  margin-bottom: var(--spacing-sm);
  display: block;
}

/* Step counter: BNI Red reinforces progress as primary action */
.progress-label {
  color: var(--color-primary);
}

.highlight-number {
  font-size: var(--text-size-l1);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

/* ---------------------------------------------------------------
   4. INSTRUCTIONS ACCORDION & SEPARATOR
   The separator line divides the help section from step tracking
--------------------------------------------------------------- */
.instructions-accordion {
  border: none;
  background: none;
  /* margin-bottom: 0 — card gap already provides section separation */
  margin-bottom: 0;
  padding-bottom: var(--spacing-md);
  /* Horizontal rule between instructions and progress indicator */
  border-bottom: 1px solid #eeeeee;
}

.instructions-accordion summary {
  padding: 0;
  cursor: pointer;
  list-style: none;
}

/* Remove default disclosure arrow in WebKit */
.instructions-accordion summary::-webkit-details-marker {
  display: none;
}

/* ---------------------------------------------------------------
   5. LAYOUT / CONTAINER
--------------------------------------------------------------- */
.container {
  max-width: var(--container-max-width);
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
  margin-left: auto;
  margin-right: auto;
}

/* ---------------------------------------------------------------
   6. HIDDEN LEGACY ELEMENTS
   Hides any markup that has been removed from HTML but may
   exist in cached or older builds. Safe to keep as a fallback.
--------------------------------------------------------------- */
.navbar,
.app-header,
.brand,
.brand-logo,
#themeToggle,
.theme-toggle {
  display: none !important;
}

/* ---------------------------------------------------------------
   7. FORM ACTIONS (PREV / NEXT / SUBMIT BUTTONS)
   Mobile-first: stationary in the document flow by default.
   Sticky behaviour is added via .has-sticky-actions (set by JS)
   only on steps that require scrolling (indices 1 and 3).
--------------------------------------------------------------- */
.form-actions {
  display: flex !important;
  gap: var(--spacing-compact);
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-md);
  /* Subtle rule separates actions from content above */
  border-top: 1px solid #eeeeee;
}

.form-actions .btn {
  flex: 1;
  /* Reset base.css 100% width to allow flex distribution */
  width: auto;
}

.form-actions .btn-secondary {
  flex: 0 0 auto;
  min-width: 120px;
  width: auto;
}

/* Sticky: fixed bottom bar with glassmorphism effect.
   The mixed transparent background picks up BNI Red from the
   page edges and white from the card centre — no hard cut. */
@media (max-width: 600px) {
  .has-sticky-actions .form-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 !important;
    /* Safe-area padding handles iPhone home-bar */
    padding: var(--spacing-md) var(--spacing-lg) calc(var(--spacing-md) + env(safe-area-inset-bottom)) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    /* Glassmorphism blends surrounding colors through the bar */
    background: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.1);
    z-index: 1000;
  }

  /* Clearance so last list items are never hidden behind the bar */
  .has-sticky-actions #reviewForm {
    /* ~3x button height + padding = comfortable scroll-through */
    padding-bottom: 120px;
  }
}

/* ---------------------------------------------------------------
   8. BUTTONS
--------------------------------------------------------------- */
.btn,
button[type="submit"],
input[type="submit"] {
  background-color: var(--btn-bg);
  color: var(--btn-color);
  border: var(--btn-border);
  border-radius: var(--btn-radius);
  padding: var(--btn-padding);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  font-family: var(--font-base);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.btn:hover:not(:disabled),
button[type="submit"]:hover:not(:disabled) {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  transform: scale(0.99);
}

.btn:active:not(:disabled) {
  transform: scale(0.98);
}

/* Disabled state signifies unfulfilled step requirement */
.btn:disabled {
  background-color: #E0E0E0 !important;
  border-color: #CCCCCC !important;
  color: #999999 !important;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Secondary: outline style for back/cancel actions */
.btn-secondary {
  background-color: transparent;
  color: var(--color-text-body);
  border: 1px solid #CCCCCC;
  border-radius: var(--btn-radius);
}

.btn-secondary:hover:not(:disabled) {
  background-color: var(--color-bg-nav);
  color: var(--color-text-heading);
}

/* CTA button used on success page (copy, Google link, restart).
   Full-width, uppercase for strong affordance */
.copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  color: var(--color-white) !important;
  border: 1px solid var(--color-primary);
  border-radius: var(--btn-radius);
  padding: var(--btn-padding);
  font-family: var(--font-base);
  font-size: var(--text-size-l4) !important;
  font-weight: var(--font-weight-medium) !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  /* Vertical separation from adjacent elements */
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.copy-btn:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-white) !important;
  transform: translateY(-1px);
}

.copy-btn:active {
  transform: translateY(0);
}

/* ---------------------------------------------------------------
   9. INPUTS & FORM ELEMENTS
--------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select,
.company-item,
.choice span {
  font-family: var(--font-base);
  font-size: var(--text-size-l3);
  border: 1px solid var(--input-border) !important;
  /* BNI: sharp corners */
  border-radius: 0;
  background-color: var(--input-bg);
  color: var(--color-text-body);
  /* Compact/md: 12px top/bottom, 16px left/right */
  padding: var(--spacing-compact) var(--spacing-md);
  width: 100%;
  transition: all 0.2s ease;
  line-height: 1.5;
  outline: none;
  box-shadow: none;
}

/* Inner text containers must not inherit the outer border */
.company-item .company-name {
  border: none !important;
  padding: 0 !important;
  width: auto !important;
  background: transparent !important;
}

/* Choice pills: reset uppercase/letter-spacing inherited from the label rule.
   .choice IS a label element, so its span inherits text-transform + tracking.
   Resetting here keeps 14px (base.css) readable without overflow. */
.choice span {
  border: 1px solid var(--input-border) !important;
  /* Override inherited label uppercase — pills use sentence/title case */
  text-transform: none;
  /* Reset letter-spacing so text isn't artificially widened */
  letter-spacing: 0;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--input-focus-ring);
  background-color: var(--color-white);
}

/* Selected state: BNI Red fill as strong selection signifier */
.company-item.is-selected,
.choice input:checked + span {
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
  border-color: var(--color-primary) !important;
  font-weight: var(--font-weight-bold) !important;
}

.company-item.is-selected .company-name {
  color: var(--color-white) !important;
}

/* ---------------------------------------------------------------
   10. CARD / SURFACE
   Mobile-first: compact padding, scales up for larger viewports.
   Symmetric vertical padding ensures equal whitespace above H1
   and below the last form element (per UX Grundprinzipien).
--------------------------------------------------------------- */
.card {
  background-color: var(--color-white);
  border: 1px solid #e0e0e0;
  /* BNI: sharp corners */
  border-radius: 0;
  box-shadow: var(--shadow-ambient);
  /* Mobile base: 32px top/bottom, 24px sides */
  padding: var(--spacing-xl) var(--spacing-lg);
}

/* Tablet: slightly more horizontal breathing room */
@media (min-width: 480px) {
  .card {
    padding: var(--spacing-xl) var(--spacing-xl);
  }
}

/* Desktop: generous 48px vertical, 64px horizontal */
@media (min-width: 768px) {
  .card {
    padding: var(--spacing-xxl) var(--spacing-section);
  }
}

/* ---------------------------------------------------------------
   11. SECTION UTILITIES (used wherever needed in markup)
--------------------------------------------------------------- */
.section-white {
  background-color: var(--color-white);
}

.section-light {
  background-color: var(--color-bg-nav);
}

.section-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* ---------------------------------------------------------------
   12. FOOTER
--------------------------------------------------------------- */
footer,
.site-footer {
  background-color: var(--color-footer-bg);
  color: var(--color-footer-text);
}

footer a,
.site-footer a {
  color: var(--color-footer-text);
  text-decoration: none;
}

footer a:hover,
.site-footer a:hover {
  text-decoration: underline;
  opacity: 0.85;
}

/* ---------------------------------------------------------------
   13. LINKS
--------------------------------------------------------------- */
a {
  color: var(--color-primary);
}

a:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* ---------------------------------------------------------------
   14. FOCUS VISIBLE (accessibility)
   Visible focus ring for keyboard navigation
--------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}