/* FXinvestia — layout for the page sections (2-pages in the package).

   This file only arranges things: section spacing, the centred content width, card grids
   and the calculator. Colours, fonts, heading weights and button styles are the theme's own
   (Blocksy's CSS variables, with plain fallbacks for any other theme).

   Classes used in the page code
     fxi-section        one band of a page, full width, content centred
     fxi-alt            light background band
     fxi-page-head      the band at the top of a page (page title)
     fxi-narrow         keeps text to a comfortable reading width
     fxi-grid fxi-grid-2 / -3 / -4   card grid (on a Columns block)
     fxi-card           bordered card (on a Column)
     fxi-card-featured  the highlighted card
     fxi-lead           larger intro paragraph
     fxi-label          small label above a card title
     fxi-price          large price line
     fxi-note           small print
     fxi-faq            question list (on Details blocks)                                      */

.fxi-section,
.fxi-calc,
.fxi-widget {
  --fxi-accent: var(--theme-palette-color-1, var(--paletteColor1, #2872fa));
  --fxi-heading: var(--theme-headings-color, var(--theme-heading-color, var(--theme-palette-color-4, inherit)));
  --fxi-border: var(--theme-border-color, var(--theme-palette-color-5, #e1e8ed));
  --fxi-alt: var(--theme-palette-color-6, #f2f5f7);
  --fxi-surface: var(--theme-palette-color-8, #ffffff);
  --fxi-radius: 6px;
  --fxi-gap: 24px;
  /* same content width as the theme's header and footer */
  --fxi-width: min(var(--theme-container-edge-spacing, 90vw), var(--theme-normal-container-max-width, 1200px));
  box-sizing: border-box;
}
.fxi-section *, .fxi-section *::before, .fxi-section *::after,
.fxi-calc *, .fxi-widget * { box-sizing: border-box; }

/* ---------- Page and sections ---------- */

.fxi-page { overflow-x: clip; }
.fxi-page > * { margin-top: 0; margin-bottom: 0; }

.fxi-section {
  margin: 0;
  padding-block: clamp(48px, 6vw, 88px);
  padding-inline: clamp(16px, 4vw, 48px);
}
/* edge-to-edge pages: the band fills the screen and its content lines up with the header */
.fxi-page > .fxi-section { padding-inline: max(0px, calc((100% - var(--fxi-width)) / 2)); }
.fxi-section.fxi-alt { background-color: var(--fxi-alt); }
.fxi-section.fxi-page-head { padding-block: clamp(40px, 5vw, 72px); background-color: var(--fxi-alt); }
/* if the theme's header is set to sit on top of the page, keep the title clear of it */
body:has(.ct-header [data-transparent]) .fxi-page > .fxi-section:first-child { padding-top: calc(var(--header-height, 120px) + clamp(32px, 4vw, 56px)); }

/* Vertical rhythm inside a section. Classic themes wrap a group's content in one extra div, so both cases are covered. */
.fxi-section > :where(*),
.fxi-section > .wp-block-group__inner-container > :where(*) { margin-top: 0; margin-bottom: var(--fxi-gap); }
.fxi-section > :where(:last-child),
.fxi-section > .wp-block-group__inner-container > :where(:last-child),
.fxi-section > .wp-block-group__inner-container { margin-bottom: 0; }
.fxi-section :where(h1, h2) { margin-top: 0; margin-bottom: 12px; text-wrap: balance; }
.fxi-section :where(h2) + :where(.wp-block-columns, .wp-block-table, .fxi-calc, .fxi-widget, .wp-block-latest-posts, details) { margin-top: 20px; }

.fxi-section.fxi-narrow > :where(*),
.fxi-section.fxi-narrow > .wp-block-group__inner-container > :where(*),
.fxi-section :where(.fxi-lead) { max-width: 760px; margin-left: auto; margin-right: auto; }
.fxi-section :where(p.fxi-lead) { font-size: 1.125em; margin-bottom: 32px; text-wrap: balance; }
.fxi-section :where(p.fxi-lead.has-text-align-left) { margin-left: 0; }
.fxi-section :where(.fxi-note) { font-size: .875em; opacity: .85; }
.fxi-section :where(.wp-block-buttons) { gap: 12px; }

/* ---------- Card grid (Columns block) ---------- */

.fxi-section .wp-block-columns.fxi-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fxi-gap); align-items: stretch; }
.fxi-section .wp-block-columns.fxi-grid > .wp-block-column { flex-basis: auto; margin: 0; min-width: 0; }
@media (min-width: 640px) {
  .fxi-section .wp-block-columns:is(.fxi-grid-2, .fxi-grid-4) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .fxi-section .wp-block-columns.fxi-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .fxi-section .wp-block-columns.fxi-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.fxi-section .fxi-card {
  display: flex; flex-direction: column;
  padding: 28px;
  background-color: var(--fxi-surface);
  border: 1px solid var(--fxi-border);
  border-radius: var(--fxi-radius);
}
@media (max-width: 480px) { .fxi-section .fxi-card { padding: 22px; } }
.fxi-section .fxi-card.fxi-card-featured { border-color: var(--fxi-accent); box-shadow: inset 0 0 0 1px var(--fxi-accent); }
.fxi-section .fxi-card > * { margin-top: 0; margin-bottom: 14px; }
.fxi-section .fxi-card > :last-child { margin-bottom: 0; }
/* buttons sit at the bottom of the card, so cards in a row line up */
.fxi-section .fxi-card > .wp-block-buttons:last-child { margin-top: auto; padding-top: 8px; }
.fxi-section .fxi-card h3 { font-size: 1.25rem; line-height: 1.45; margin-bottom: 10px; }
.fxi-section .fxi-card :where(ul, ol) { padding-left: 1.2em; }
.fxi-section .fxi-card :where(li) { margin-bottom: 6px; }
.fxi-section .fxi-label { margin-bottom: 6px; font-size: .875em; font-weight: 700; color: var(--fxi-accent); }
.fxi-section .fxi-price { font-size: 1.125em; }
.fxi-section .fxi-price strong { font-size: 1.9em; line-height: 1.2; color: var(--fxi-heading); }

/* ---------- Table and questions ---------- */

.fxi-section .wp-block-table { overflow-x: auto; }
.fxi-section .wp-block-table table { width: 100%; min-width: 520px; border-collapse: collapse; background-color: var(--fxi-surface); }
.fxi-section .wp-block-table :is(th, td) { padding: 12px 16px; border: 1px solid var(--fxi-border); text-align: left; vertical-align: top; }
.fxi-section .wp-block-table thead th { color: var(--fxi-heading); font-weight: 700; border-bottom-width: 2px; }

.fxi-section details.fxi-faq { margin-bottom: 0; padding: 16px 0; border-bottom: 1px solid var(--fxi-border); }
.fxi-section details.fxi-faq:first-of-type { border-top: 1px solid var(--fxi-border); }
.fxi-section details.fxi-faq > summary { cursor: pointer; font-weight: 600; color: var(--fxi-heading); }
.fxi-section details.fxi-faq > :not(summary) { margin: 12px 0 0; }

/* ---------- Latest posts (core block), kept to the same grid gap ---------- */
.fxi-section .wp-block-latest-posts { margin-left: 0; padding-left: 0; }
.fxi-section .wp-block-latest-posts.is-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--fxi-gap); }
.fxi-section .wp-block-latest-posts.is-grid li { width: auto; margin: 0; }
.fxi-section .wp-block-latest-posts__featured-image img { width: 100%; height: auto; border-radius: var(--fxi-radius); }
.fxi-section .wp-block-latest-posts__post-title { display: block; font-weight: 700; color: var(--fxi-heading); }
.fxi-section .wp-block-latest-posts__post-date { font-size: .875em; opacity: .8; }

/* ---------- Lot size calculator ---------- */

.fxi-calc { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fxi-gap); padding: 28px; background-color: var(--fxi-surface); border: 1px solid var(--fxi-border); border-radius: var(--fxi-radius); }
@media (min-width: 860px) { .fxi-calc { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; } }
@media (max-width: 480px) { .fxi-calc { padding: 20px; } }
.fxi-calc__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 20px; }
@media (min-width: 560px) { .fxi-calc__form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fxi-calc .fxi-calc__field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.fxi-calc .fxi-calc__field > label { font-weight: 600; color: var(--fxi-heading); }
.fxi-calc .fxi-calc__field > input { width: 100%; max-width: 100%; }
:where(.fxi-calc) :where(input) { min-height: 42px; padding: 8px 12px; border: 1px solid var(--fxi-border); border-radius: 4px; font: inherit; color: inherit; background: var(--fxi-surface); }
.fxi-calc .fxi-calc__hint { font-size: .875em; opacity: .8; }
.fxi-calc__result { padding: 20px; background-color: var(--fxi-alt); border-radius: var(--fxi-radius); }
.fxi-calc .fxi-calc__row { display: flex; flex-direction: column; gap: 2px; margin: 0 0 14px; }
.fxi-calc .fxi-calc__row > span { font-size: .9375em; }
.fxi-calc .fxi-calc__row > strong { font-size: 1.6em; line-height: 1.25; color: var(--fxi-heading); font-variant-numeric: tabular-nums; }
.fxi-calc .fxi-calc__note { margin: 0; font-size: .875em; opacity: .85; }

/* ---------- TradingView widgets ---------- */

.fxi-widget { border: 1px solid var(--fxi-border); border-radius: var(--fxi-radius); background-color: var(--fxi-surface); overflow: hidden; }
.fxi-widget--ticker { border-left: 0; border-right: 0; border-radius: 0; }
.fxi-widget .fxi-widget__empty { margin: 0; padding: 24px; text-align: center; }
.fxi-widget .fxi-widget__credit { padding: 6px 12px; font-size: .8125em; text-align: right; }
/* the price strip runs edge to edge when it sits directly on a page */
.fxi-page > .fxi-widget--ticker { margin: 0; }