/*------------------------------------*\
    $BASE
    Layer 3 of 6. Kit file.

    Bare element styling, the system band and width classes, the
    container rule, and motion preferences. No component classes.
    Tokens only — no hex values, no font names.
\*------------------------------------*/
@property --jcd-color-focus {
  syntax: "<color>";
  inherits: true;
  initial-value: #FF00FF;
}

@property --jcd-color-cta-fg {
  syntax: "<color>";
  inherits: true;
  initial-value: #FF00FF;
}

@property --jcd-color-accent-text {
  syntax: "<color>";
  inherits: true;
  initial-value: #FF00FF;
}

@property --jcd-color-placeholder {
  syntax: "<color>";
  inherits: true;
  initial-value: #FF00FF;
}

@property --jcd-weight-display {
  syntax: "<number>";
  inherits: true;
  initial-value: 400;
}

/*------------------------------------*\
    $ROOT
\*------------------------------------*/

/*  16px root. The type scale in _tokens.css is fixed px and assumes it;
    112.5% would scale every value by 12.5%.                            */
html {
  font-size: 100%;
}

body {
  font-family: var(--jcd-font-sans);
  font-weight: var(--jcd-weight-regular);
  font-size: var(--jcd-text-body);
  font-optical-sizing: auto;
  line-height: var(--jcd-leading-body);
  color: var(--jcd-color-ink);
  background: var(--jcd-color-paper);
}

a {
    color: var(--jcd-color-accent-text);
    text-decoration: none;
}

a:hover {
    color: var(--jcd-color-accent-hover);
    text-decoration: none;
}

.fl-page,
.fl-page-content {
  background-color: var(--jcd-color-paper);
}


/*------------------------------------*\
    $HEADINGS
\*------------------------------------*/

h1, h2, h3, h4, h5, h6,
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6 {
  font-family: var(--jcd-font-serif);
  font-weight: var(--jcd-weight-display);
  margin-bottom: var(--jcd-space-md);
}

h1, .entry-content h1 { font-size: var(--jcd-text-h1); line-height: var(--jcd-leading-h1); }
h2, .entry-content h2 { font-size: var(--jcd-text-h2); line-height: var(--jcd-leading-h2); }
h3, .entry-content h3 { font-size: var(--jcd-text-h3); line-height: var(--jcd-leading-h3); }
h4, .entry-content h4 { font-size: var(--jcd-text-h4); line-height: var(--jcd-leading-h4); }
h5, .entry-content h5 { font-size: var(--jcd-text-lead); line-height: var(--jcd-leading-h4); }
h6, .entry-content h6 { font-size: var(--jcd-text-body); line-height: var(--jcd-leading-h4); }

p     { margin-bottom: var(--jcd-space-md); }
small { font-size: var(--jcd-text-caption); line-height: var(--jcd-leading-small); }


/*------------------------------------*\
    $UTILITY TYPE SCALE
\*------------------------------------*/
.jcd_text_h1      { font-size: var(--jcd-text-h1); }
.jcd_text_h2      { font-size: var(--jcd-text-h2); }
.jcd_text_h3      { font-size: var(--jcd-text-h3); }
.jcd_text_h4      { font-size: var(--jcd-text-h4); }
.jcd_text_lead    { font-size: var(--jcd-text-lead); }
.jcd_text_body    { font-size: var(--jcd-text-body); }
.jcd_text_caption { font-size: var(--jcd-text-caption); }
.jcd_text_kicker  { font-size: var(--jcd-text-kicker); }


/*------------------------------------*\
    $UTILITY MARGIN
\*------------------------------------*/
.jcd_mb_2xl { margin-bottom: var(--jcd-space-2xl); }
.jcd_mt_2xl { margin-top: var(--jcd-space-2xl); }


/*------------------------------------*\
    $CONTAINER
\*------------------------------------*/
.fl-row-content.fl-row-fixed-width {
  max-width: calc(var(--jcd-content-max) + (var(--jcd-page-inset) * 2));
  padding-left: var(--jcd-page-inset);
  padding-right: var(--jcd-page-inset);
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
}


/*------------------------------------*\
    $SYSTEM — VERTICAL RHYTHM
\*------------------------------------*/
.jcd_band_xs > .fl-row-content-wrap { padding-top: var(--jcd-band-xs); padding-bottom: var(--jcd-band-xs); }
.jcd_band_sm > .fl-row-content-wrap { padding-top: var(--jcd-band-sm); padding-bottom: var(--jcd-band-sm); }
.jcd_band_md > .fl-row-content-wrap { padding-top: var(--jcd-band-md); padding-bottom: var(--jcd-band-md); }
.jcd_band_lg > .fl-row-content-wrap { padding-top: var(--jcd-band-lg); padding-bottom: var(--jcd-band-lg); }
.jcd_band_xl > .fl-row-content-wrap { padding-top: var(--jcd-band-xl); padding-bottom: var(--jcd-band-xl); }

/*  For stacked rows sharing a background: the first carries top padding,
    the last carries bottom, the middle neither. Without these, adjacent
    bands double their gap.                                             */
.jcd_band_top_only > .fl-row-content-wrap    { padding-bottom: 0; }
.jcd_band_bottom_only > .fl-row-content-wrap { padding-top: 0; }
.jcd_band_flush > .fl-row-content-wrap       { padding-top: 0; padding-bottom: 0; }


/*------------------------------------*\
    $SYSTEM — CONTENT WIDTH
\*------------------------------------*/

/*  Applied to a ROW alongside a band class.                            */

.jcd_width_narrow > .fl-row-content-wrap > .fl-row-content {
  max-width: calc(var(--jcd-width-narrow) + (var(--jcd-page-inset) * 2));
}

.jcd_width_default > .fl-row-content-wrap > .fl-row-content {
  max-width: calc(var(--jcd-content-max) + (var(--jcd-page-inset) * 2));
}

.jcd_width_wide > .fl-row-content-wrap > .fl-row-content {
  max-width: calc(var(--jcd-width-wide) + (var(--jcd-page-inset) * 2));
}

/*  Edge to edge — full-bleed heroes, colour bands, galleries.          */
.jcd_bleed > .fl-row-content-wrap > .fl-row-content {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}


/*------------------------------------*\
    $SYSTEM — COLUMN STACK RHYTHM
\*------------------------------------*/
.jcd_stack > .fl-col-content {
  display: flex;
  flex-direction: column;
  gap: var(--jcd-space-md);
}

/* --- Gap size modifiers ------------------------------------------------ */
/*  Add alongside the base class: "jcd_stack jcd_stack_lg".              */

.jcd_stack_sm > .fl-col-content { gap: var(--jcd-space-sm); }
.jcd_stack_lg > .fl-col-content { gap: var(--jcd-space-lg); }
.jcd_stack_xl > .fl-col-content { gap: var(--jcd-space-xl); }

.jcd_stack > .fl-col-content > .fl-module,
.jcd_stack > .fl-col-content > .fl-module > .fl-module-content {
  margin-top: 0;
  margin-bottom: 0;
}

.jcd_stack > .fl-col-content > .fl-module > .fl-module-content > *:last-child,
.jcd_stack > .fl-col-content > .fl-module .fl-rich-text > *:last-child {
  margin-bottom: 0;
}


/*------------------------------------*\
    $SYSTEM — GROUP GAP
\*------------------------------------*/
.jcd_group_gap_2xl {
  margin-bottom: var(--jcd-space-2xl);
}


/*------------------------------------*\
    $MOTION
\*------------------------------------*/

/* --- Scroll reveal ------------------------------------------------------ */
.jcd_reveal[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--jcd-duration-slow) var(--jcd-ease-out),
    transform var(--jcd-duration-slow) var(--jcd-ease-out);
}

.jcd_reveal[data-reveal="visible"] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .jcd_reveal[data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/*------------------------------------*\
    $LINE BREAK HELPERS
\*------------------------------------*/

@media (max-width: 1200px) {
  br.jcd_break_lg_none { display: none; }
}

@media (max-width: 992px) {
  br.jcd_break_md_none { display: none; }
}

@media (max-width: 768px) {
  br.jcd_break_sm_none { display: none; }
}