/* ==========================================================================
   iak-infopages.css — IAK design-system layout for information pages
   Shared by: About Us (id 4), Privacy (3), Terms (5), Delivery (6).
   Loaded from controller/information/information.php via addStyle().
   Mirrors the design system at iakwholesale.netlify.app.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&family=Public+Sans:wght@800&display=swap');

[data-theme="dark"] .iak-info-page p {
	color: #fff !important;
}

.iak-info-page {
  --info-accent: #c13538;        /* red    */
  --info-eyebrow: #f69138;       /* orange */
  --info-ink: #18181a;           /* headings */
  --info-body: #5a5a5e;          /* paragraphs */
  --info-hero-bg: #141416;
  --info-page-bg: #fff8f0;
  --info-card-bg: #ffffff;
  --info-card-border: rgba(20, 20, 23, 0.08);
  --info-soft: #ffe8d2;          /* soft orange chip */

  background: var(--info-page-bg);
  font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  /* clip (not hidden) prevents horizontal overflow without creating a scroll
     container — keeps the Delivery sidebar's position:sticky working. */
  overflow-x: clip;
}

/* ---- shared width container ------------------------------------------------ */
.iak-info-container {
  width: 100%;
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- hero ------------------------------------------------------------------ */
.iak-info-hero {
  position: relative;
  background: var(--info-hero-bg);
  padding: 72px 0 64px;
  overflow: hidden;
}
.iak-info-hero--with-stats { padding-bottom: 132px; }
.iak-info-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 85% -10%, rgba(193, 53, 56, 0.55), rgba(0, 0, 0, 0) 55%);
  pointer-events: none;
}
.iak-info-hero .iak-info-container { position: relative; z-index: 1; }

.iak-info-eyebrow {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--info-eyebrow);
}
.iak-info-title {
  margin: 0;
  max-width: 820px;
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: #fff;
}
.iak-info-subtitle {
  margin: 18px 0 0;
  max-width: 600px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}

/* ---- stat cards (overlap hero bottom) -------------------------------------- */
.iak-info-stats {
  position: relative;
  z-index: 2;
  margin-top: -64px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.iak-info-stat {
  background: var(--info-card-bg);
  border: 1px solid var(--info-card-border);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 12px 32px rgba(20, 20, 23, 0.10), 0 4px 12px rgba(20, 20, 23, 0.06);
}
.iak-info-stat-num {
  display: block;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--info-accent);
}
.iak-info-stat-label {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--info-body);
}
/* icon variant (Delivery): dark numbers + soft-orange icon chip */
.iak-info-stat--icon .iak-info-stat-num { color: var(--info-ink); font-size: 22px; }
.iak-info-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: var(--info-soft);
  color: var(--info-accent);
  font-size: 15px;
}

/* ---- numbered reading sections (from {{ description }} or hardcoded) -------- */
.iak-info-sections {
  counter-reset: info-sec;
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 0 0;
}
/* Section titles in the DB content (.iak-about-section__title) carry their own
   numbered span (styled in iak-global.css), so they must NOT also get the
   CSS-counter number — exclude them to avoid a duplicate "01 01". */
.iak-info-sections h2:not(.iak-about-section__title) {
  counter-increment: info-sec;
  margin: 44px 0 16px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--info-ink);
  scroll-margin-top: 110px;
}
.iak-info-sections h2:first-child { margin-top: 0; }
.iak-info-sections h2:not(.iak-about-section__title)::before {
  content: counter(info-sec, decimal-leading-zero);
  margin-right: 12px;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--info-accent);
  vertical-align: middle;
}
.iak-info-sections p {
  margin: 0 0 18px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--info-body);
}
.iak-info-sections p:last-child { margin-bottom: 0; }
.iak-info-sections strong { color: var(--info-ink); font-weight: 700; }

/* ==========================================================================
   Delivery-specific layout & components
   ========================================================================== */
.iak-deliv-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.iak-deliv-toc {
  position: sticky;
  top: 100px;
  padding-top: 56px;
}
.iak-deliv-toc-title {
  margin: 0 0 12px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--info-body);
}
.iak-deliv-toc nav { display: flex; flex-direction: column; border-left: 1px solid var(--info-card-border); }
.iak-deliv-toc nav a {
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 500;
  color: #2c2c2e;
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -1px;
  transition: color .15s, border-color .15s;
}
.iak-deliv-toc nav a:hover {
  color: var(--info-accent);
  border-left-color: var(--info-accent);
}
.iak-deliv-toc nav a.is-active {
  color: var(--info-accent);
  border-left-color: var(--info-accent);
  font-weight: 700;
}
.iak-deliv-main .iak-info-sections { max-width: none; margin: 0; }

/* shared sub-card grids */
.iak-deliv-states,
.iak-deliv-mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 8px 0 8px; }
.iak-deliv-mini { grid-template-columns: repeat(3, 1fr); }

.iak-deliv-state,
.iak-deliv-mini-card {
  background: var(--info-card-bg);
  border: 1px solid var(--info-card-border);
  border-radius: 12px;
  padding: 16px 18px;
}
.iak-deliv-state-code,
.iak-deliv-mini-num {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 18px;
  font-weight: 500;
  color: var(--info-accent);
}
.iak-deliv-mini-num { font-family: "Public Sans", sans-serif; font-weight: 800; font-size: 20px; color: var(--info-ink); }
.iak-deliv-state-name,
.iak-deliv-mini-label { display: block; margin-top: 4px; font-size: 13px; color: var(--info-body); }

/* steps */
.iak-deliv-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 8px 0; }
.iak-deliv-step {
  display: flex;
  gap: 14px;
  background: var(--info-card-bg);
  border: 1px solid var(--info-card-border);
  border-radius: 12px;
  padding: 18px;
}
.iak-deliv-step-num {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--info-soft);
  color: var(--info-accent);
  font-weight: 800;
  font-size: 14px;
}
.iak-deliv-step-body h4,
.iak-deliv-highlight-body h4,
.iak-deliv-payment-body h4 { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--info-ink); }
.iak-deliv-step-body p,
.iak-deliv-highlight-body p,
.iak-deliv-payment-body p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--info-body); }

/* pickup highlight */
.iak-deliv-highlight {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: #fff6ef;
  border: 1px solid var(--info-card-border);
  border-radius: 14px;
  padding: 20px;
  margin: 8px 0;
}
.iak-deliv-highlight-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--info-accent);
  color: #fff;
  font-size: 16px;
}

/* payment methods */
.iak-deliv-payments { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 8px 0; }
.iak-deliv-payment {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--info-card-bg);
  border: 1px solid var(--info-card-border);
  border-radius: 12px;
  padding: 16px 18px;
}
.iak-deliv-payment-icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--info-soft);
  color: var(--info-accent);
  font-size: 15px;
}
.iak-deliv-payment-body { flex: 1 1 auto; }
.iak-deliv-badge {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
line-height: initial;
}
.iak-deliv-badge--ok { background: rgba(31, 138, 91, 0.12); color: #1f8a5b; }
.iak-deliv-badge--soon { background: rgba(246, 145, 56, 0.16); color: #c16910; }

/* support CTA */
.iak-deliv-cta {
  position: relative;
  margin: 8px 0 96px;
  background: var(--info-accent);
  border-radius: 18px;
  padding: 40px;
  overflow: hidden;
}
.iak-deliv-cta::after {
  content: "\f4ad"; /* fa comment */
  font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", sans-serif;
  font-weight: 900;
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 180px;
  color: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}
.iak-deliv-cta-body { position: relative; z-index: 1; max-width: 620px; }
.iak-deliv-cta-eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.iak-deliv-cta-title { margin: 0 0 12px; font-size: 28px; font-weight: 800; line-height: 1.2; color: #fff; }
.iak-deliv-cta-text { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.88); }
.iak-deliv-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.iak-deliv-btn {
  display: inline-flex;
  align-items: center;
  padding: 11px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s, color .15s;
  text-transform: capitalize;
}
.iak-deliv-btn--light { background: #fff; color: var(--info-ink); }
.iak-deliv-btn--light:hover { background: rgba(255, 255, 255, 0.9); color: var(--info-ink); }
.iak-deliv-btn--ghost { background: rgba(255, 255, 255, 0.12); color: #fff; border: 1px solid rgba(255, 255, 255, 0.4); }
.iak-deliv-btn--ghost:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }

/* ---- responsive ------------------------------------------------------------ */
@media (max-width: 992px) {
  .iak-info-stats { grid-template-columns: repeat(2, 1fr); }
  .iak-deliv-layout { grid-template-columns: 1fr; gap: 0; }
  .iak-deliv-toc { display: none; }
  .iak-deliv-states, .iak-deliv-mini, .iak-deliv-steps { grid-template-columns: repeat(2, 1fr); }
  .iak-deliv-payments { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .iak-info-hero { padding: 56px 0 48px; }
  .iak-info-hero--with-stats { padding-bottom: 116px; }
  .iak-info-sections { padding: 44px 0 72px; }
  .iak-info-sections h2,
  .iak-deliv-cta-title { font-size: 24px; }
  .iak-info-title {
	font-size: 26px;
  }
  .iak-info-subtitle {
	font-size: 16px;
  }
  .iak-deliv-highlight,
  .iak-deliv-payment {
		padding: 18px;
		flex-direction: column;
		align-items: flex-start;
	}
  .iak-deliv-cta { padding: 22px; }
  .iak-deliv-cta::after { display: none; }
}
@media (max-width: 480px) {
  .iak-info-stats { grid-template-columns: 1fr; margin-top: -48px; }
  .iak-deliv-states, .iak-deliv-mini, .iak-deliv-steps { grid-template-columns: 1fr; }
}

/* ---- dark mode (site uses [data-theme="dark"]) ----------------------------- */
[data-theme="dark"] .iak-info-page {
  --info-page-bg: #161618;
  --info-ink: #f4f4f5;
  --info-body: #b4b4b8;
  --info-card-bg: #1f1f22;
  --info-card-border: rgba(255, 255, 255, 0.08);
  --info-soft: rgba(246, 145, 56, 0.16);
}
[data-theme="dark"] .iak-deliv-highlight { background: #26201b; }
[data-theme="dark"] .iak-deliv-toc nav a { color: #d4d4d8; }

[data-theme="dark"] .iak-deliv-btn--light,
[data-theme="dark"] .iak-deliv-btn--ghost:hover {
	background: #fff !important;
    color: #18181a !important;
	border: 1px solid #fff !important;
}

[data-theme="dark"] .iak-deliv-btn--light:hover,
[data-theme="dark"] .iak-deliv-btn--ghost {
	background: rgba(255, 255, 255, .14) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, .28) !important;
}

[data-theme="dark"] .iak-deliv-step-num,
[data-theme="dark"] .iak-info-stat-icon,
[data-theme="dark"] .iak-info-sections h2::before,
[data-theme="dark"] .iak-deliv-state-code,
[data-theme="dark"] .iak-deliv-mini-num,
[data-theme="dark"] .iak-deliv-payment-icon {
	color: #fff !important;
}