/*
================================================================================
  JAMAICA TIMELINE — SITE DELTA STYLESHEET
  jamaicatimeline.css

  SCOPE
  Site-exclusive. Lives at https://jamaicatimeline.com/css/jamaicatimeline.css
  This file is NOT shared. Nothing here affects any other cartycorp property.

  LOAD ORDER — this file MUST load last:
    1. froots-revamped-core.css
    2. froots-revamped-images.css
    3. froots-revamped-collapsible.css   (only if the page uses collapsibles)
    4. froots-revamped-navbar.css
    5. addons.css
    6. jt-features.css               <-- this file

  Loading last means every rule below wins on equal specificity.
  No !important is used anywhere except where noted in section 12.

  Version history:
  v1.0  2026  Initial version
              - Ports the Falmouth article look onto the froots framework
              - Repairs html root to 16px so rem values are portable
              - Sets prose to 20px without disturbing --font-size-base
              - Corrects navbar contrast failure site-wide
              - Adds .series-nav, .jt-panel, .jt-pullquote components
================================================================================
*/


/* ==============================================================================
   1. TOKENS
   Five values the Falmouth design uses that froots does not define.
   Everything else (--ackee-red, --bg-sand, --text-charcoal, --ackee-leaf,
   --ackee-gold, --dustyblue) comes from froots-revamped-core.css unchanged.
   ============================================================================== */
:root {
  --jt-nav-bg:    #fff6da;                 /* cream navbar — no froots equivalent */
  --jt-muted:     #4f5b63;                 /* --text-slate #708090 is too light   */
  --jt-line:      rgba(43, 43, 43, 0.12);  /* hairline, derived from charcoal     */
  --jt-max:       1100px;                  /* froots container is 1200px          */
  --jt-measure:   75ch;                    /* prose reading width — see note §6   */
}


/* ==============================================================================
   2. ROOT FONT SIZE — THE IMPORTANT ONE
   froots core sets html { font-size: 14px } for Bootstrap 3 parity, which
   silently shrinks every rem value in this file by 12.5%. Restoring 16px
   makes rem values portable and lands --font-size-base on 14px, which is
   the parity the framework was aiming for in the first place.
   ============================================================================== */
html {
  font-size: 16px;
}

/* Prose at 20px. Set on body directly rather than by redefining
   --font-size-base, so .btn and .form-control stay at 14px. */
body {
  font-size:        1.25rem;      /* 20px */
  line-height:      1.7;
  font-family:      Georgia, serif;
  color:            var(--text-charcoal);
  background-color: #fff;
}

/* Tables inherit body size otherwise, which is too large for dense data. */
.table {
  font-size: 1rem;                /* 16px */
}


/* ==============================================================================
   3. TYPOGRAPHY
   froots core points every heading at 'Playfair Display', which is never
   linked anywhere in the framework and silently falls back to generic serif.
   Jamaica Timeline uses Oswald — link it in the page head.
   ============================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Oswald', sans-serif;
}

h1 {
  font-size:  clamp(1.8rem, 4vw, 2.5rem);   /* 28.8px → 40px */
  line-height: 1.1;
  margin:     15px 0;
  max-width:  900px;
  color:      var(--ackee-red);
  text-wrap:  balance;
}

h2 {
  font-size:  1.875rem;           /* 30px */
  color:      var(--ackee-red);
  margin-top: 40px;
}

h3 { font-size: 1.5rem;   color: #222; }
h4 { font-size: 1.125rem; color: #222; }


/* ==============================================================================
   4. MASTHEAD
   Plain div, never .row — a .row outside .container has negative margins
   and causes horizontal overflow.
   ============================================================================== */
.jt-masthead {
  background-color: #000;
  padding:          10px 0;
  text-align:       center;
}

.jt-masthead img {
  max-width: 100%;
  height:    auto;
  display:   block;
  margin:    0 auto;
}


/* ==============================================================================
   5. NAVBAR OVERRIDES
   froots-revamped-navbar.css paints .navbar with --navbar-bg (#ABB93D leaf)
   and sets .nav-links a { color: #fff } — a contrast ratio near 1.9:1, which
   fails WCAG AA badly. Its hover state (#7d9109) is darker still.
   Jamaica Timeline uses cream ground with charcoal ink at roughly 13:1.
   ============================================================================== */
.navbar {
  background-color: var(--jt-nav-bg);
  border-bottom:    3px solid var(--ackee-leaf);
  margin-bottom:    0;            /* navbar.css sets 1.6rem */
  padding:          0;            /* core BS3 compat sets 0.5rem 1rem */
  position:         sticky;
  top:              0;
  z-index:          1000;
}

.nav-container {
  max-width: var(--jt-max);
  padding:   0 20px;
}

.nav-links a {
  color:         var(--text-charcoal);
  font-family:   sans-serif;
  font-size:     18px;
  padding:       15px 20px;
  border-radius: 0;
}

.nav-links a:hover,
.nav-links a:focus {
  background-color: rgba(0, 0, 0, 0.05);
  color:            var(--ackee-red);
  text-decoration:  none;
}

.nav-links a.active {
  color:            var(--ackee-red);
  background-color: rgba(0, 0, 0, 0.05);
}

.nav-toggle {
  color: var(--text-charcoal);
}

/* Second nav list pushes to the right edge */
.nav-links.jt-nav-right {
  margin-left: auto;
}

.nav-links.jt-nav-right a {
  font-size: 14px;
}

@media (max-width: 768px) {
  .nav-group {
    background-color: var(--jt-nav-bg);
  }
  .nav-links.jt-nav-right {
    margin-left: 0;
  }
  .nav-links a {
    padding: 12px 20px;
  }
}


/* ==============================================================================
   6. PAGE SHELL
   .jt-wrap rather than overriding .container, so froots' 1200px grid stays
   available for any page that wants it.
   ============================================================================== */
.jt-wrap {
  max-width: var(--jt-max);
  margin:    0 auto;
  padding:   0 20px;
}

/* Prose measure. Falmouth runs unconstrained to 1100px, which is roughly
   110 characters at 20px Georgia — long for sustained reading. 75ch is the
   comfortable band. Set --jt-measure to none in section 1 to disable. */
.jt-article > p,
.jt-article > ul,
.jt-article > ol,
.jt-article > h2,
.jt-article > h3,
.jt-article > h4 {
  max-width: var(--jt-measure);
}


/* ==============================================================================
   7. ARTICLE FURNITURE
   ============================================================================== */
.jt-kicker {
  display:         flex;
  align-items:     center;
  gap:             10px;
  flex-wrap:       wrap;
  margin-top:      40px;
  font-family:     sans-serif;
  font-size:       0.8rem;        /* 12.8px */
  font-weight:     700;
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  color:           var(--text-charcoal);
  opacity:         0.7;
}

/* Part marker — sits between the series h1 and the page h2 */
.jt-part {
  margin:         18px 0 4px;
  font-family:    sans-serif;
  font-size:      0.8rem;
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--jt-muted);
}

.jt-sub {
  font-family: sans-serif;
  font-size:   1.05rem;           /* 16.8px */
  color:       var(--jt-muted);
  max-width:   var(--jt-measure);
}

/* Thesis line — the single-sentence claim under the deck */
.jt-thesis {
  margin-top:   20px;
  padding-left: 15px;
  border-left:  3px solid var(--ackee-red);
  font-style:   italic;
  font-size:    1.1rem;
  line-height:  1.4;
  color:        var(--jt-muted);
  max-width:    var(--jt-measure);
}

/* Drop cap. Requires class="lead" on the opening paragraph. */
.lead::first-letter {
  float:         left;
  font-size:     4rem;            /* 64px */
  line-height:   0.8;
  padding-top:   4px;
  padding-right: 12px;
  color:         var(--ackee-red);
}

/* In-article links. Without this, froots core paints them Bootstrap blue
   (#007bff) on cream — legible but entirely off-brand. */
.jt-article a {
  color:                var(--ackee-red);
  text-decoration:      underline;
  text-underline-offset: 2px;
}

.jt-article a:hover,
.jt-article a:focus {
  color:            var(--deep-red);
  background-color: transparent;
}


/* ==============================================================================
   8. SERIES NAVIGATION
   New component. Two variants:
     .series-nav.top    — breadcrumb, pipe-separated
     .series-nav.bottom — prev / next, space-between
   The bottom variant expects an empty <span></span> as the prev-slot spacer
   when there is no previous page.
   ============================================================================== */
.series-nav {
  display:       flex;
  flex-wrap:     wrap;
  align-items:   center;
  gap:           8px;
  font-family:   sans-serif;
  font-size:     0.85rem;         /* 13.6px */
  color:         var(--jt-muted);
  border-top:    1px solid var(--jt-line);
  border-bottom: 1px solid var(--jt-line);
  padding:       12px 0;
}

.series-nav.top {
  margin: 0 0 30px;
}

.series-nav.bottom {
  justify-content: space-between;
  margin:          50px 0 0;
}

.series-nav a {
  color:           var(--ackee-red);
  font-weight:     600;
  text-decoration: none;
}

.series-nav a:hover,
.series-nav a:focus {
  text-decoration:  underline;
  background-color: transparent;
}


/* ==============================================================================
   9. EVIDENCE PANEL
   Deliberately NOT an override of .card — froots .card carries a hover
   translateY(-4px) that makes a static evidence box read as a broken button.
   .card and .card-row stay untouched and available.
   ============================================================================== */
.jt-panel {
  background:    var(--bg-sand);
  border:        1px solid var(--jt-line);
  border-radius: 12px;
  padding:       25px;
  margin:        30px 0;
  overflow:      hidden;
}

.jt-panel > :first-child { margin-top: 0; }
.jt-panel > :last-child  { margin-bottom: 0; }

.evidence-title {
  display:        block;
  margin-bottom:  15px;
  padding-bottom: 5px;
  border-bottom:  2px solid var(--ackee-red);
  font-family:    sans-serif;
  font-size:      0.85rem;
  font-weight:    800;
  text-transform: uppercase;
  color:          var(--ackee-red);
}


/* ==============================================================================
   10. PULL QUOTE
   froots core sets blockquote { float: right; width: 45% }. Without this
   reset a full-width pull quote silently becomes a right-hand sidebar.
   ============================================================================== */
.jt-pullquote {
  float:       none;
  width:       auto;
  max-width:   var(--jt-measure);
  margin:      30px 0;
  padding:     0 0 0 20px;
  background:  transparent;
  border-left: 4px solid var(--ackee-red);
  font-style:  italic;
  font-size:   1.05rem;
  line-height: 1.5;
  color:       var(--jt-muted);
}

.jt-pullquote footer {
  margin-top:  0.5em;
  font-style:  normal;
  font-size:   0.85rem;
  color:       var(--jt-muted);
}


/* ==============================================================================
   11. TABLE HEADER UTILITIES
   Replaces the inline style="background-color: #4D7C6F" pattern used on
   american-loyalists.html.
   ============================================================================== */
.thead-dustygreen th { background-color: var(--dustygreen); color: #fff; }
.thead-dustyblue  th { background-color: var(--dustyblue);  color: #fff; }
.thead-leaf       th { background-color: var(--leaf-dark);  color: #fff; }


/* ==============================================================================
   12. FOOTER
   Separate class from froots .footer, which is sage-backed with 30px padding.
   ============================================================================== */
.jt-footer {
  padding:     60px 0;
  text-align:  center;
  font-family: sans-serif;
  font-size:   0.9rem;            /* 14.4px */
  color:       var(--jt-muted);
  background:  transparent;
}

.jt-footer a {
  color:           var(--ackee-red);
  text-decoration: none;
  font-weight:     600;
}

.jt-footer a:hover {
  text-decoration:  underline;
  background-color: transparent;
}


/* ==============================================================================
   13. ACCESSIBILITY FLOOR
   ============================================================================== */
a:focus-visible,
button:focus-visible {
  outline:        2px solid var(--ackee-red);
  outline-offset: 2px;
}

@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;
  }
}


/* ==============================================================================
   14. PRINT
   ============================================================================== */
@media print {
  .navbar,
  .jt-masthead,
  .series-nav,
  .adsbygoogle { display: none !important; }

  .jt-wrap { max-width: none; padding: 0; }
  body     { font-size: 12pt; color: #000; }
}

/* ==============================================================================
   15. SOURCES APPARATUS
   Sits at the end of an article, before .series-nav.bottom. Reuses .jt-panel
   for the ground and border; this block only handles the citation typography.

   Citations run smaller than body prose (20px) because a reference list is
   scanned, not read. Hanging indent follows the convention of a printed
   bibliography — first line flush, continuation lines indented.
   ============================================================================== */
.jt-sources h3 {
  margin-top:     0;
  margin-bottom:  20px;
  padding-bottom: 5px;
  border-bottom:  2px solid var(--ackee-red);
  font-size:      1.25rem;        /* 20px */
  color:          var(--ackee-red);
}

.jt-sources-label {
  margin:         22px 0 10px;
  font-family:    sans-serif;
  font-size:      0.8rem;         /* 12.8px */
  font-weight:    700;
  letter-spacing: 0.1em;
  color:          var(--jt-muted);
}

.jt-sources-label:first-of-type {
  margin-top: 0;
}

.jt-citation {
  margin:       0 0 12px;
  padding-left: 2em;
  text-indent: -2em;              /* hanging indent */
  font-size:    0.95rem;          /* 15.2px */
  line-height:  1.45;
  color:        var(--text-charcoal);
}

.jt-citation:last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .jt-citation {
    padding-left: 1.2em;
    text-indent: -1.2em;
  }
}

@media print {
  .jt-sources { break-inside: avoid; }
}