/* ============================================================
   THE FLEX CULT — Global Design System
   theflexcult.com/assets/style.css
   
   CSS VARIABLES (brand colours — change here, updates everywhere):
   --ink        : primary dark colour
   --amber      : accent / brand colour  
   --cream      : page background
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Serif+Display:ital@0;1&family=Instrument+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300&display=swap');

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
img, video { max-width: 100%; display: block; }
a { color: inherit; }
button { cursor: pointer; font-family: inherit; }

/* ── Brand tokens ── */
:root {
  /* Colours */
  --ink:           #1a1a18;
  --ink2:          #2e2e2b;
  --ink3:          #3d3d39;
  --amber:         #e8a020;
  --amber-light:   #fdf3e0;
  --amber-mid:     #f5d080;
  --amber-dark:    #b87a10;
  --cream:         #faf8f3;
  --cream2:        #f2ede3;
  --cream3:        #e8e1d4;
  --white:         #ffffff;
  --muted:         #7a7570;
  --muted-light:   #a09890;
  --border:        #e0d9ce;
  --border-dark:   #c8bfb0;

  /* Typography */
  --font-headline: 'Bebas Neue', sans-serif;
  --font-display:  'DM Serif Display', Georgia, serif;
  --font-body:     'Instrument Sans', system-ui, sans-serif;

  /* Spacing scale */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* Layout */
  --container:     1180px;
  --container-sm:  760px;
  --radius:        3px;
  --radius-md:     6px;

  /* Transitions */
  --ease: cubic-bezier(.4,0,.2,1);
}

/* ── Body ── */
body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Grain texture overlay */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
}

/* ── Layout helpers ── */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}
.container-sm {
  max-width: var(--container-sm);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

/* ── Typography ── */
.t-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--amber);
}
.t-eyebrow::before {
  content: ''; width: 20px; height: 1.5px; background: var(--amber); flex-shrink: 0;
}
.t-headline {
  font-family: var(--font-headline);
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  letter-spacing: .03em; line-height: .95; color: var(--ink);
}
.t-headline-xl {
  font-family: var(--font-headline);
  font-size: clamp(3.5rem, 8vw, 7rem);
  letter-spacing: .02em; line-height: .92; color: var(--ink);
}
.t-display {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  line-height: 1.2; color: var(--ink);
}
.t-body-lg  { font-size: 16px; font-weight: 300; line-height: 1.8; color: var(--muted); }
.t-body     { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--muted); }
.t-body-sm  { font-size: 13px; font-weight: 300; line-height: 1.7; color: var(--muted); }
.t-label    { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-weight: 600;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; border-radius: var(--radius);
  transition: all .2s var(--ease);
  padding: 13px 26px; line-height: 1;
  border: 1.5px solid transparent;
}
.btn-dark {
  background: var(--ink); color: var(--cream); border-color: var(--ink);
}
.btn-dark:hover { background: var(--amber); color: var(--ink); border-color: var(--amber); }

.btn-amber {
  background: var(--amber); color: var(--ink); border-color: var(--amber);
}
.btn-amber:hover { background: var(--amber-dark); color: var(--cream); border-color: var(--amber-dark); }

.btn-outline {
  background: transparent; color: var(--ink); border-color: var(--border-dark);
}
.btn-outline:hover { border-color: var(--ink); }

.btn-ghost {
  background: none; border: none; padding: 0;
  font-size: 13px; font-weight: 500; letter-spacing: .01em; text-transform: none;
  color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px;
  border-bottom: 1.5px solid var(--ink); padding-bottom: 1px;
  transition: color .2s, border-color .2s;
}
.btn-ghost:hover { color: var(--amber); border-color: var(--amber); }

/* ── Tags / pills ── */
.tag {
  display: inline-block;
  font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 10px; border-radius: var(--radius);
  background: var(--amber-light); color: var(--amber-dark);
}
.tag-dark {
  background: rgba(255,255,255,.08); color: rgba(250,248,243,.55);
  border: 1px solid rgba(255,255,255,.1);
}

/* ── Cards ── */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: background .2s;
}
.card:hover { background: var(--cream); }

/* ── Divider ── */
.divider { height: 1px; background: var(--border); }

/* ── Section spacing ── */
.section {
  padding-block: clamp(3rem, 7vw, 5.5rem);
}
.section-header { margin-bottom: clamp(2rem, 4vw, 3rem); }

/* ── Animations ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.fade-up { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.fade-up.visible { opacity: 1; transform: translateY(0); }
.fade-up.delay-1 { transition-delay: .1s; }
.fade-up.delay-2 { transition-delay: .2s; }
.fade-up.delay-3 { transition-delay: .3s; }
.fade-up.delay-4 { transition-delay: .4s; }

/* ── Marquee ── */
.marquee-strip {
  background: var(--amber);
  padding: 11px 0;
  overflow: hidden;
}
.marquee-inner {
  display: flex; width: max-content; gap: 0;
  animation: marqueeScroll 30s linear infinite;
  white-space: nowrap;
}
.marquee-item {
  font-family: var(--font-headline);
  font-size: 13px; letter-spacing: .12em; color: var(--ink);
  padding: 0 2rem;
  display: inline-flex; align-items: center; gap: 2rem;
}
.marquee-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ink); opacity: .35; }

/* ── Blog post content styles ── */
.post-content { max-width: 680px; }
.post-content h2 {
  font-family: var(--font-headline);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  letter-spacing: .03em; line-height: 1;
  color: var(--ink); margin: 2.5rem 0 1rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--amber);
  display: inline-block;
}
.post-content h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--ink); margin: 2rem 0 .75rem;
}
.post-content p { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--ink2); margin-bottom: 1.25rem; }
.post-content strong { font-weight: 600; color: var(--ink); }
.post-content em { font-style: italic; }
.post-content a { color: var(--amber-dark); text-decoration: underline; text-underline-offset: 2px; }
.post-content ul, .post-content ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.post-content li { font-size: 16px; font-weight: 300; line-height: 1.8; color: var(--ink2); margin-bottom: .4rem; }
.post-content blockquote {
  border-left: 3px solid var(--amber);
  padding: 1rem 1.5rem;
  background: var(--amber-light);
  margin: 1.5rem 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.post-content blockquote p { color: var(--ink); font-weight: 400; margin: 0; }

/* Post info box */
.post-info-box {
  background: var(--amber-light);
  border: 1px solid var(--amber-mid);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  font-size: 14px; color: var(--ink); line-height: 1.65;
  margin: 1.5rem 0;
}
.post-disclaimer {
  background: var(--cream2);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  font-size: 13px; color: var(--muted); line-height: 1.65;
  margin: 2rem 0;
}

/* Post table */
.post-content table {
  width: 100%; border-collapse: collapse;
  margin: 1.5rem 0; font-size: 14px;
}
.post-content th {
  background: var(--ink); color: var(--cream);
  padding: 10px 14px; text-align: left;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.post-content td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--ink2); font-weight: 300; line-height: 1.6;
}
.post-content tr:nth-child(even) td { background: var(--cream2); }

/* ── Responsive tables: stack on mobile ─────────────────────
   On screens narrower than 640px, table rows become stacked
   cards. The thead is hidden and each td shows its column
   header as a label via data-label (set by JS on page load).
──────────────────────────────────────────────────────────── */
.table-scroll-wrap {
  margin: 1.5rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-scroll-wrap table {
  width: 100%;
  table-layout: auto;
  word-break: normal;
  overflow-wrap: normal;
}

/* ── Responsive utilities ── */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}

/* ── Related posts grid (shared across all blog pages) ─────── */
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1.5rem;
}
@media (max-width: 780px) { .related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .related-grid { grid-template-columns: 1fr; } }

.related-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: transform .2s var(--ease), border-color .2s;
}
.related-card:hover { transform: translateY(-3px); border-color: var(--amber); }

.related-card-img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block;
}
.related-card-img-placeholder {
  width: 100%; aspect-ratio: 16/9;
  background: var(--cream2);
}
.related-card-body {
  padding: 1rem; flex: 1;
  display: flex; flex-direction: column; gap: .35rem;
}
.related-card-cat {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--amber);
}
.related-card-title {
  font-size: .88rem; font-weight: 600; color: var(--ink); line-height: 1.4;
}
.related-card-desc {
  font-size: .78rem; color: var(--muted); line-height: 1.55; margin-top: .15rem;
}

/* ── Mobile in-article TOC (cloned from sidebar by script.js) ──
   On post pages, the sidebar (and its "In This Article" card)
   stacks below the article on narrow screens. We clone that card
   into the top of the article body, collapsed by default, and
   hide the original sidebar copy on mobile so it isn't repeated. */
.toc-mobile-card { display: none; }
@media (max-width: 999px) {
  .toc-mobile-card {
    display: block;
    margin-bottom: 2rem;
  }
  .post-sidebar .toc-card-desktop-only { display: none; }
}
.toc-mobile-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  margin-bottom: 0 !important;
}
.toc-mobile-toggle::after {
  content: '+';
  font-size: 18px;
  font-weight: 400;
  color: var(--muted);
  margin-left: .75rem;
  flex-shrink: 0;
}
.toc-mobile-card.open .toc-mobile-toggle {
  margin-bottom: 1rem !important;
}
.toc-mobile-card.open .toc-mobile-toggle::after {
  content: '\2212';
}
.toc-mobile-card .toc-mobile-list { display: none; }

/* ============================================================
   CURRENCY SELECTOR (shared across interactive tools/calculators)
   ============================================================ */
.tool-currency-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 1rem;
}
.currency-select-wrap { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.currency-select-label {
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.currency-select {
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600; color: var(--ink);
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: .35rem .55rem; cursor: pointer; appearance: auto;
}
.currency-select:focus { outline: none; border-color: var(--amber-mid); }
   CURRENCY SELECTOR (shared across interactive tools/calculators)
   ============================================================ */
.tool-currency-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 1rem;
}
.currency-select-wrap { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.currency-select-label {
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.currency-select {
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600; color: var(--ink);
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: .35rem .55rem; cursor: pointer; appearance: auto;
}
.currency-select:focus { outline: none; border-color: var(--amber-mid); }
.toc-mobile-card.open .toc-mobile-list { display: flex; }

/* ============================================================
   FAQ ACCORDION (blog posts)
   ============================================================ */
.blog-faq { margin: 3rem 0 2rem; }
.blog-faq-title {
  font-family: var(--font-headline);
  font-size: clamp(1.3rem, 3vw, 1.7rem); letter-spacing: .02em; color: var(--ink);
  margin-bottom: 1.25rem; padding-bottom: .9rem; border-bottom: 1px solid var(--border);
}
.faq-item {
  border: 1px solid var(--border); border-radius: var(--radius-md);
  margin-bottom: .6rem; overflow: hidden; background: var(--white);
}
.faq-item summary {
  padding: 1rem 1.25rem; font-size: .95rem; font-weight: 600; color: var(--ink);
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; font-size: 1.3rem; font-weight: 400; color: var(--amber-dark); flex-shrink: 0;
}
.faq-item[open] summary::after { content: '\2212'; }
.faq-item[open] summary { border-bottom: 1px solid var(--border); }
.faq-item .faq-body {
  padding: 1rem 1.25rem 1.25rem; font-size: 14px; color: var(--ink2); font-weight: 300; line-height: 1.75;
}
.faq-item .faq-body a { color: var(--amber-dark); text-decoration: underline; text-underline-offset: 2px; }