/*
================================================================================
  FROOTS REVAMPED CORE
  froots-revamped-core.css

  Version history:
  v1.0  2026  Initial revamped version
              - Fixed all CSS syntax errors from froots-full-core.css
              - Removed duplicate clearfix and images section
              - Added missing BS3 compatibility classes
              - Added img-responsive to core (used universally)
              - Cleaned up duplicate h1 declarations
              - Removed fragile inline-style attribute selectors
              - Fixed invalid comments in .injected-content
              - Removed hardcoded font-family from .container

  Bootstrap 3 compatibility layer:
  All col-xs-*, col-sm-*, col-md-*, col-lg-* class names are preserved.
  All BS3 utility class names are preserved (pull-left, pull-right,
  center-block, text-center, btn-block, img-thumbnail, etc.)
================================================================================
*/

/* ── Custom Properties ─────────────────────────────────────────────────────── */
:root {
  /* Core Brand */
  --ackee-red:        #B34100;
  --ackee-leaf:       #ABB93D;
  --ackee-gold:       #D4AF37;

  /* Foliage Scale */
  --leaf-tinge:       #F4F6E4;
  --leaf-light:       #99A834;
  --leaf-mid:         #88962D;
  --leaf-dark:        #768526;

  /* Interactive */
  --dustyblue:        #5A7D9A;
  --gold:             #E6C48C;
  --dustygreen:       #4D7C6F;
  --plumred:          #844C5A;

  /* Surface */
  --bg-ivory:         #FCF8EF;
  --bg-sand:          #F5EFE2;
  --bg-lightsage:     #F4F6F2;
  --bg-ackeepod:      #FFF5F0;

  /* Typography */
  --text-charcoal:    #2B2B2B;
  --text-slate:       #708090;
  --darkborder:       #3A3D40;
  --lightborder:      #E2E2E2;

  /* Semantic */
  --forest-green:     #6B7D2F;
  --deep-red:         #913200;
  --silver-gray:      #D1D5DB;

  /* Framework */
  --primary-color:    #007bff;
  --secondary-color:  #6c757d;
  --success-color:    #28a745;
  --danger-color:     #dc3545;
  --warning-color:    #ffc107;
  --info-color:       #17a2b8;
  --light-color:      #f8f9fa;
  --dark-color:       #343a40;

  --font-family-base:    Georgia, serif;
  --font-family-heading: 'Playfair Display', serif;
  --font-family-mono:    'Courier New', monospace;

  --font-size-base: 0.875rem;  /* 14px — matches Bootstrap 3 */
  --font-size-lg:   1.25rem;
  --font-size-sm:   0.75rem;   /* 12px — matches Bootstrap 3 */
  --line-height-base: 1.6;

  --border-radius:  0.375rem;
  --border-color:   #dee2e6;
  --box-shadow:     0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --box-shadow-lg:  0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --transition:     all 0.15s ease-in-out;

  --container-max-width: 1200px;
  --gutter:              1rem;
  --grid-gutter-x:       1.5rem;
  --grid-gutter-y:       0;

  /* BS3 compatibility aliases */
  --navbar-bg:      var(--ackee-leaf);
  --heading-color:  var(--ackee-red);
}

/* ── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 14px;  /* matches Bootstrap 3 base */
  line-height: var(--line-height-base);
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--dark-color);
  background-color: #fefefe;
}

/* ── Typography ────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 1rem;
}

h1 { font-size: 2.25rem;  color: var(--heading-color); }  /* 36px */
h2 { font-size: 1.875rem; }  /* 30px */
h3 { font-size: 1.5rem; }    /* 24px */
h4 { font-size: 1.125rem; }  /* 18px */
h5 { font-size: 0.875rem; }  /* 14px */
h6 { font-size: 0.75rem; }   /* 12px */

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.15s ease-in-out;
}

a:hover {
  text-decoration: underline;
}

blockquote {
  float: right;
  width: 45%;
  margin: 1em 0 1em 1.5em;
  padding: 1em;
  background-color: #f9f4ec;
  border-left: 4px solid #a46c3e;
  font-style: italic;
  font-size: 1.05em;
}

blockquote footer {
  margin-top: 0.5em;
  font-style: normal;
  font-size: 0.9em;
  color: #555;
}

@media (max-width: 767px) {
  blockquote {
    float: none;
    width: 100%;
    margin: 1em 0;
  }
}

/* ── Container ─────────────────────────────────────────────────────────────── */
/* Matches Bootstrap 3 exactly: 1200px computed at largest breakpoint */
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 15px;
  padding-left: 15px;
}

@media (min-width: 768px)  { .container { max-width: 750px; } }
@media (min-width: 992px)  { .container { max-width: 970px; } }
@media (min-width: 1200px) { .container { max-width: 1200px; } }

.container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

/* ── Grid ───────────────────────────────────────────────────────────────────── */

/* ============================================================
   REVERT BLOCK A — Float-based grid
   ============================================================
   This block replaces the original flexbox .row and [class*="col-"]
   with Bootstrap 3's float-based approach.

   WHY: Bootstrap 3 floated all columns unconditionally, allowing
   col-md-* elements to sit side by side without a .row parent.
   Our flexbox approach required .row as a flex container, which
   broke HTML written for Bootstrap 3.

   TO REVERT THIS BLOCK:
   Step 1 — Replace .row and [class*="col-"] with:

     .row {
       display: flex;
       flex-wrap: wrap;
       margin-right: -15px;
       margin-left: -15px;
     }

     [class*="col-"] {
       padding-right: 15px;
       padding-left: 15px;
       min-height: 1px;
       width: 100%;
     }

   Step 2 — Change all column width definitions back to flex, e.g:
     .col-md-1 { width: 8.333333%; }
   becomes:
     .col-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
   (applies to ALL col-* definitions across all breakpoints)

   Step 3 — Change the mobile stacking rule from:
     [class*="col-md-"] { width: 100%; float: none; }
   back to:
     [class*="col-md-"] { flex: 0 0 100%; max-width: 100%; }
   ============================================================ */

/* .row — clears floats, applies negative margins */
.row {
  margin-right: -15px;
  margin-left: -15px;
}

.row::before,
.row::after {
  content: "";
  display: table;
  clear: both;
}

/* All columns float left — matches Bootstrap 3 exactly */
[class*="col-"] {
  float: left;
  padding-right: 15px;
  padding-left: 15px;
  min-height: 1px;
  width: 100%;
  position: relative;
}

/* ============================================================
   END REVERT BLOCK A
   ============================================================ */

/* Default columns (no breakpoint — mobile first, full width) */
.col-1  { width: 8.333333%; }
.col-2  { width: 16.666667%; }
.col-3  { width: 25%; }
.col-4  { width: 33.333333%; }
.col-5  { width: 41.666667%; }
.col-6  { width: 50%; }
.col-7  { width: 58.333333%; }
.col-8  { width: 66.666667%; }
.col-9  { width: 75%; }
.col-10 { width: 83.333333%; }
.col-11 { width: 91.666667%; }
.col-12 { width: 100%; }
.col-auto { width: auto; }

/* BS3 xs — applies at all sizes */
.col-xs-1  { width: 8.333333%; }
.col-xs-2  { width: 16.666667%; }
.col-xs-3  { width: 25%; }
.col-xs-4  { width: 33.333333%; }
.col-xs-5  { width: 41.666667%; }
.col-xs-6  { width: 50%; }
.col-xs-7  { width: 58.333333%; }
.col-xs-8  { width: 66.666667%; }
.col-xs-9  { width: 75%; }
.col-xs-10 { width: 83.333333%; }
.col-xs-11 { width: 91.666667%; }
.col-xs-12 { width: 100%; }

/* BS3 col-md-*, col-sm-*, col-lg-* stack to full width below 768px */
@media (max-width: 767px) {
  [class*="col-md-"],
  [class*="col-sm-"],
  [class*="col-lg-"] {
    width: 100%;
    float: none;
  }
}

/* sm — 576px and up */
@media (min-width: 576px) {
  .col-sm-1  { width: 8.333333%; }
  .col-sm-2  { width: 16.666667%; }
  .col-sm-3  { width: 25%; }
  .col-sm-4  { width: 33.333333%; }
  .col-sm-5  { width: 41.666667%; }
  .col-sm-6  { width: 50%; }
  .col-sm-7  { width: 58.333333%; }
  .col-sm-8  { width: 66.666667%; }
  .col-sm-9  { width: 75%; }
  .col-sm-10 { width: 83.333333%; }
  .col-sm-11 { width: 91.666667%; }
  .col-sm-12 { width: 100%; }
  .col-sm-auto { width: auto; }
}

/* md — 768px and up */
@media (min-width: 768px) {
  .col-md-1  { width: 8.333333%; }
  .col-md-2  { width: 16.666667%; }
  .col-md-3  { width: 25%; }
  .col-md-4  { width: 33.333333%; }
  .col-md-5  { width: 41.666667%; }
  .col-md-6  { width: 50%; }
  .col-md-7  { width: 58.333333%; }
  .col-md-8  { width: 66.666667%; }
  .col-md-9  { width: 75%; }
  .col-md-10 { width: 83.333333%; }
  .col-md-11 { width: 91.666667%; }
  .col-md-12 { width: 100%; }
  .col-md-auto { width: auto; }
}

/* lg — 1024px and up */
@media (min-width: 1024px) {
  .col-lg-1  { width: 8.333333%; }
  .col-lg-2  { width: 16.666667%; }
  .col-lg-3  { width: 25%; }
  .col-lg-4  { width: 33.333333%; }
  .col-lg-5  { width: 41.666667%; }
  .col-lg-6  { width: 50%; }
  .col-lg-7  { width: 58.333333%; }
  .col-lg-8  { width: 66.666667%; }
  .col-lg-9  { width: 75%; }
  .col-lg-10 { width: 83.333333%; }
  .col-lg-11 { width: 91.666667%; }
  .col-lg-12 { width: 100%; }
  .col-lg-auto { width: auto; }
}

/* xl — 1200px and up */
@media (min-width: 1200px) {
  .col-xl-1  { width: 8.333333%; }
  .col-xl-2  { width: 16.666667%; }
  .col-xl-3  { width: 25%; }
  .col-xl-4  { width: 33.333333%; }
  .col-xl-5  { width: 41.666667%; }
  .col-xl-6  { width: 50%; }
  .col-xl-7  { width: 58.333333%; }
  .col-xl-8  { width: 66.666667%; }
  .col-xl-9  { width: 75%; }
  .col-xl-10 { width: 83.333333%; }
  .col-xl-11 { width: 91.666667%; }
  .col-xl-12 { width: 100%; }
  .col-xl-auto { width: auto; }
}

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: 0.35rem 1.25rem;
  margin-bottom: 0;
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--border-radius);
  transition: var(--transition);
  user-select: none;
  white-space: nowrap;
}

.btn:hover { text-decoration: none; }
.btn:focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }

/* BS3 btn-block */
.btn-block { display: block; width: 100%; }
.btn-block + .btn-block { margin-top: 0.5rem; }

.btn-sm { padding: 0.25rem 0.5rem;   font-size: var(--font-size-sm); border-radius: calc(var(--border-radius) * 0.75); }
.btn-lg { padding: 0.75rem 1.5rem;   font-size: var(--font-size-lg); border-radius: calc(var(--border-radius) * 1.25); }
.btn-xs { padding: 0.125rem 0.35rem; font-size: 0.75rem;             border-radius: calc(var(--border-radius) * 0.5); }

.btn-primary   { color: #fff; background-color: var(--primary-color);   border-color: var(--primary-color); }
.btn-primary:hover { background-color: #0056b3; border-color: #004085; color: #fff; }

.btn-secondary { color: #fff; background-color: var(--secondary-color); border-color: var(--secondary-color); }
.btn-secondary:hover { background-color: #545b62; border-color: #4e555b; color: #fff; }

.btn-success   { color: #fff; background-color: var(--success-color);   border-color: var(--success-color); }
.btn-success:hover { background-color: #1e7e34; border-color: #1c7430; color: #fff; }

.btn-danger    { color: #fff; background-color: var(--danger-color);    border-color: var(--danger-color); }
.btn-danger:hover { background-color: #c82333; border-color: #bd2130; color: #fff; }

.btn-warning   { color: #212529; background-color: var(--warning-color); border-color: var(--warning-color); }
.btn-warning:hover { background-color: #e0a800; border-color: #d39e00; }

.btn-info      { color: #fff; background-color: var(--info-color);      border-color: var(--info-color); }
.btn-info:hover { background-color: #117a8b; border-color: #10707f; color: #fff; }

/* BS3 btn-default — maps to secondary */
.btn-default   { color: #333; background-color: #fff; border-color: #ccc; }
.btn-default:hover { background-color: #e6e6e6; border-color: #adadad; color: #333; }

/* BS3 btn-dark */
.btn-dark      { color: #fff; background-color: var(--dark-color); border-color: var(--dark-color); }
.btn-dark:hover { background-color: #23272b; border-color: #1d2124; color: #fff; }

.btn-link      { color: var(--primary-color); background-color: transparent; border-color: transparent; }
.btn-link:hover { color: #0056b3; text-decoration: underline; }

.btn-outline-primary { color: var(--primary-color); border-color: var(--primary-color); background-color: transparent; }
.btn-outline-primary:hover { color: #fff; background-color: var(--primary-color); }

/* ── Forms ─────────────────────────────────────────────────────────────────── */
.form-group   { margin-bottom: 1rem; }
.form-label   { display: inline-block; margin-bottom: 0.5rem; font-weight: 500; }

.form-control {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: var(--dark-color);
  background-color: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus {
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.form-control::placeholder { color: var(--secondary-color); opacity: 1; }
.form-control-sm { padding: 0.25rem 0.5rem; font-size: var(--font-size-sm); }
.form-control-lg { padding: 0.75rem 1rem;   font-size: var(--font-size-lg); }

select { font-size: 16px; } /* Prevents iOS zoom */

/* ── Tables ─────────────────────────────────────────────────────────────────── */
.table { width: 100%; margin-bottom: 1rem; color: var(--dark-color); border-collapse: collapse; }
.table th, .table td { padding: 0.75rem; vertical-align: top; border-top: 1px solid var(--border-color); }
.table thead th { vertical-align: bottom; border-bottom: 2px solid var(--border-color); font-weight: 500; }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(0, 0, 0, 0.05); }
.table-hover tbody tr:hover { background-color: rgba(0, 0, 0, 0.075); }
.table-bordered { border: 1px solid var(--border-color); }
.table-bordered th, .table-bordered td { border: 1px solid var(--border-color); }
.table-condensed th, .table-condensed td { padding: 0.4rem; }
.table-responsive { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Alerts ─────────────────────────────────────────────────────────────────── */
.alert { position: relative; padding: 0.75rem 1.25rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: var(--border-radius); }
.alert-primary   { color: #004085; background-color: #cce5ff; border-color: #b8daff; }
.alert-secondary { color: #383d41; background-color: #e2e3e5; border-color: #d6d8db; }
.alert-success   { color: #155724; background-color: #d4edda; border-color: #c3e6cb; }
.alert-danger    { color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; }
.alert-warning   { color: #856404; background-color: #fff3cd; border-color: #ffeaa7; }
.alert-info      { color: #0c5460; background-color: #d1ecf1; border-color: #bee5eb; }

/* ── Cards ──────────────────────────────────────────────────────────────────── */
.card {
  background-color: #fafafa;
  padding: 1.5rem;
  border-radius: var(--border-radius);
  border: 1px solid #e0e0e0;
  box-shadow: var(--box-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin-bottom: 1rem;
}

.card:hover { transform: translateY(-4px); box-shadow: 5px -5px 12px rgba(0, 0, 0, 0.3); }
.card-title { margin-bottom: 0.75rem; font-size: 1.25rem; font-weight: 500; }
.card-text  { margin-bottom: 1rem; }

.card-row { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 1.5rem; }
.card-row .card { flex: 1 1 calc(33.333% - 1.5rem); margin-bottom: 0; }
@media (max-width: 1000px) { .card-row .card { flex: 1 1 calc(50% - 1rem); } }
@media (max-width: 640px)  { .card-row .card { flex: 1 1 100%; } }

/* ── Badges ─────────────────────────────────────────────────────────────────── */
.badge { display: inline-block; padding: 0.25em 0.4em; font-size: 75%; font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: var(--border-radius); }
.badge-primary   { color: #fff; background-color: var(--primary-color); }
.badge-secondary { color: #fff; background-color: var(--secondary-color); }
.badge-success   { color: #fff; background-color: var(--success-color); }
.badge-danger    { color: #fff; background-color: var(--danger-color); }
.badge-warning   { color: #212529; background-color: var(--warning-color); }
.badge-info      { color: #fff; background-color: var(--info-color); }

/* ── List Group ─────────────────────────────────────────────────────────────── */
.list-group { display: flex; flex-direction: column; padding-left: 0; margin-bottom: 0; border-radius: var(--border-radius); }
.list-group-item { position: relative; display: block; padding: 0.75rem 1.25rem; background-color: #fff; border: 1px solid rgba(0,0,0,.125); text-decoration: none; color: #495057; }
.list-group-item:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; }
.list-group-item:last-child  { border-bottom-right-radius: inherit; border-bottom-left-radius: inherit; }
.list-group-item + .list-group-item { border-top-width: 0; }
.list-group-item:hover { background-color: #f8f9fa; }
.list-group-item.active { color: #fff; background-color: var(--primary-color); border-color: var(--primary-color); }

/* ── BS3 Nav / Navbar compatibility ─────────────────────────────────────────── */
.nav { display: flex; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; }
.nav-link { display: block; padding: 0.5rem 1rem; text-decoration: none; }
.navbar { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 0.5rem 1rem; }
.navbar-collapse { flex-basis: 100%; flex-grow: 1; align-items: center; }
.navbar-nav { display: flex; flex-direction: column; padding-left: 0; margin-bottom: 0; list-style: none; }
.navbar-toggle { background: none; border: 1px solid transparent; padding: 9px 10px; border-radius: 4px; cursor: pointer; }
.navbar-default { background-color: #f8f9fa; border-color: #e7e7e7; }
.navbar-static  { position: static; }
.collapse { display: none; }
.collapse.in { display: block; }
.navbar-collapse.collapse { display: flex !important; }

@media (max-width: 767px) {
  .navbar-collapse.collapse { display: none !important; }
  .navbar-collapse.collapse.in { display: block !important; }
  .navbar-nav { flex-direction: column; }
}

/* ── BS3 Modal compatibility ─────────────────────────────────────────────────── */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1050; overflow-x: hidden; overflow-y: auto; background-color: rgba(0,0,0,0.5); }
.modal.fade .modal-dialog { transition: transform 0.3s ease-out; transform: translateY(-25%); }
.modal.in .modal-dialog,
.modal.show .modal-dialog { transform: translateY(0); }
.modal-dialog { position: relative; margin: 1.75rem auto; max-width: 500px; }
.modal-dialog.modal-lg { max-width: 800px; }
.modal-dialog.modal-sm { max-width: 300px; }
.modal-content { position: relative; background-color: #fff; border: 1px solid rgba(0,0,0,.2); border-radius: var(--border-radius); box-shadow: var(--box-shadow-lg); }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 1rem; border-bottom: 1px solid var(--border-color); }
.modal-body   { position: relative; padding: 1rem; }
.modal-footer { display: flex; align-items: center; justify-content: flex-end; padding: 1rem; border-top: 1px solid var(--border-color); gap: 0.5rem; }
.modal-title  { margin-bottom: 0; line-height: 1.5; }

/* ── BS3 Image Classes ───────────────────────────────────────────────────────── */
.img-responsive {
  max-width: 100%;
  height: auto;
  display: block;
}

.img-thumbnail {
  padding: 0.25rem;
  background-color: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  max-width: 100%;
  height: auto;
}

.img-rounded { border-radius: var(--border-radius); }
.img-circle  { border-radius: 50%; }

/* ── BS3 Common Utility Classes ──────────────────────────────────────────────── */

/* .boxed — used extensively across YDS and Fiwi Roots pages */
.boxed {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 1rem;
  margin-bottom: 1rem;
}

/* .sticky — used on navbars */
.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* .masthead — used on page headers */
.masthead { padding: 0; }

/* BS3 active state */
.active { font-weight: bold; }

/* ── Custom Site Classes (from style.css — preserved for compatibility) ───────── */

/* .sc — small caps style */
.sc { font-variant: small-caps; }

/* .st — strong title */
.st { font-weight: bold; }

/* .il — inline */
.il { display: inline; }

/* .handwrite — handwritten style headings */
.handwrite { font-family: 'Dancing Script', cursive, Georgia, serif; }

/* .shadow — text shadow */
.shadow { text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }

/* .text-xs, .text-sm, .text-smr — custom font size utilities */
.text-xs  { font-size: 0.7rem !important; }
.text-sm  { font-size: 0.8rem !important; }
.text-smr { font-size: 0.85rem !important; }
.text-sc  { font-size: 0.9rem !important; font-variant: small-caps; }

/* ── Spacing Utilities ───────────────────────────────────────────────────────── */
.m-0 { margin: 0 !important; }           .m-1 { margin: 0.5rem !important; }
.m-2 { margin: 1rem !important; }        .m-3 { margin: 1.5rem !important; }
.m-4 { margin: 2rem !important; }        .m-5 { margin: 3rem !important; }

.mt-0 { margin-top: 0 !important; }      .mt-1 { margin-top: 0.5rem !important; }
.mt-2 { margin-top: 1rem !important; }   .mt-3 { margin-top: 1.5rem !important; }
.mt-4 { margin-top: 2rem !important; }   .mt-5 { margin-top: 3rem !important; }

.mb-0 { margin-bottom: 0 !important; }   .mb-1 { margin-bottom: 0.5rem !important; }
.mb-2 { margin-bottom: 1rem !important; }.mb-3 { margin-bottom: 1.5rem !important; }
.mb-4 { margin-bottom: 2rem !important; }.mb-5 { margin-bottom: 3rem !important; }

.ml-0 { margin-left: 0 !important; }     .ml-1 { margin-left: 0.5rem !important; }
.ml-2 { margin-left: 1rem !important; }  .ml-3 { margin-left: 1.5rem !important; }
.ml-4 { margin-left: 2rem !important; }  .ml-5 { margin-left: 3rem !important; }

.mr-0 { margin-right: 0 !important; }    .mr-1 { margin-right: 0.5rem !important; }
.mr-2 { margin-right: 1rem !important; } .mr-3 { margin-right: 1.5rem !important; }
.mr-4 { margin-right: 2rem !important; } .mr-5 { margin-right: 3rem !important; }

.p-0 { padding: 0 !important; }          .p-1 { padding: 0.5rem !important; }
.p-2 { padding: 1rem !important; }       .p-3 { padding: 1.5rem !important; }
.p-4 { padding: 2rem !important; }       .p-5 { padding: 3rem !important; }

.pt-0 { padding-top: 0 !important; }     .pt-1 { padding-top: 0.5rem !important; }
.pt-2 { padding-top: 1rem !important; }  .pt-3 { padding-top: 1.5rem !important; }
.pt-4 { padding-top: 2rem !important; }  .pt-5 { padding-top: 3rem !important; }

.pb-0 { padding-bottom: 0 !important; }  .pb-1 { padding-bottom: 0.5rem !important; }
.pb-2 { padding-bottom: 1rem !important; }.pb-3 { padding-bottom: 1.5rem !important; }
.pb-4 { padding-bottom: 2rem !important; }.pb-5 { padding-bottom: 3rem !important; }

.pl-0 { padding-left: 0 !important; }    .pl-1 { padding-left: 0.5rem !important; }
.pl-2 { padding-left: 1rem !important; } .pl-3 { padding-left: 1.5rem !important; }
.pl-4 { padding-left: 2rem !important; } .pl-5 { padding-left: 3rem !important; }

.pr-0 { padding-right: 0 !important; }   .pr-1 { padding-right: 0.5rem !important; }
.pr-2 { padding-right: 1rem !important; }.pr-3 { padding-right: 1.5rem !important; }
.pr-4 { padding-right: 2rem !important; }.pr-5 { padding-right: 3rem !important; }

/* ── Text Utilities ──────────────────────────────────────────────────────────── */
.text-left     { text-align: left !important; }
.text-right    { text-align: right !important; }
.text-center   { text-align: center !important; }
.text-justify  { text-align: justify !important; }

.text-uppercase  { text-transform: uppercase !important; }
.text-lowercase  { text-transform: lowercase !important; }
.text-capitalize { text-transform: capitalize !important; }

.font-weight-light  { font-weight: 300 !important; }
.font-weight-normal { font-weight: 400 !important; }
.font-weight-bold   { font-weight: 700 !important; }

.text-muted   { color: var(--secondary-color) !important; }
.text-primary { color: var(--primary-color) !important; }
.text-success { color: var(--success-color) !important; }
.text-danger  { color: var(--danger-color) !important; }
.text-warning { color: var(--warning-color) !important; }
.text-info    { color: var(--info-color) !important; }
.text-white   { color: #fff !important; }
.text-dark    { color: var(--dark-color) !important; }

/* ── Display Utilities ───────────────────────────────────────────────────────── */
.d-none         { display: none !important; }
.d-inline       { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block        { display: block !important; }
.d-flex         { display: flex !important; }
.d-inline-flex  { display: inline-flex !important; }

/* BS3 show/hide */
.hidden { display: none !important; }
.show   { display: block !important; }
.invisible { visibility: hidden !important; }
.visible   { visibility: visible !important; }

@media (min-width: 768px) {
  .hidden-md { display: none !important; }
  .visible-md { display: block !important; }
}
@media (max-width: 767px) {
  .hidden-xs { display: none !important; }
  .visible-xs { display: block !important; }
}

@media (min-width: 576px) {
  .d-sm-none { display: none !important; } .d-sm-block { display: block !important; }
  .d-sm-flex { display: flex !important; } .d-sm-inline-block { display: inline-block !important; }
}
@media (min-width: 768px) {
  .d-md-none { display: none !important; } .d-md-block { display: block !important; }
  .d-md-flex { display: flex !important; } .d-md-inline-block { display: inline-block !important; }
}
@media (min-width: 1024px) {
  .d-lg-none { display: none !important; } .d-lg-block { display: block !important; }
  .d-lg-flex { display: flex !important; } .d-lg-inline-block { display: inline-block !important; }
}

/* ── Float Utilities ─────────────────────────────────────────────────────────── */
/* pull-left / pull-right match Bootstrap 3 exactly */
.pull-left  { float: left !important; }
.pull-right { float: right !important; }
.float-left  { float: left !important; }
.float-right { float: right !important; }
.float-none  { float: none !important; }

.center-block { display: block; margin-left: auto; margin-right: auto; }
.center-flex  { display: flex; justify-content: center; align-items: center; }

.clearfix::after { display: block; clear: both; content: ""; }

/* ── Position Utilities ──────────────────────────────────────────────────────── */
.position-static   { position: static !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed    { position: fixed !important; }
.position-sticky   { position: sticky !important; }

/* ── Border Utilities ────────────────────────────────────────────────────────── */
.border        { border: 1px solid var(--border-color) !important; }
.border-0      { border: 0 !important; }
.border-top    { border-top: 1px solid var(--border-color) !important; }
.border-bottom { border-bottom: 1px solid var(--border-color) !important; }
.border-left   { border-left: 1px solid var(--border-color) !important; }
.border-right  { border-right: 1px solid var(--border-color) !important; }

.rounded        { border-radius: var(--border-radius) !important; }
.rounded-0      { border-radius: 0 !important; }
.rounded-circle { border-radius: 50% !important; }

/* ── Shadow Utilities ────────────────────────────────────────────────────────── */
.shadow-none { box-shadow: none !important; }
.shadow      { box-shadow: var(--box-shadow) !important; }
.shadow-lg   { box-shadow: var(--box-shadow-lg) !important; }

/* ── Width / Height Utilities ────────────────────────────────────────────────── */
.w-25 { width: 25% !important; } .w-50 { width: 50% !important; }
.w-75 { width: 75% !important; } .w-100 { width: 100% !important; }
.w-auto { width: auto !important; }

.h-25 { height: 25% !important; } .h-50 { height: 50% !important; }
.h-75 { height: 75% !important; } .h-100 { height: 100% !important; }
.h-auto { height: auto !important; }

/* ── Flexbox Utilities ───────────────────────────────────────────────────────── */
.align-start    { align-items: flex-start !important; }
.align-end      { align-items: flex-end !important; }
.align-center   { align-items: center !important; }
.align-baseline { align-items: baseline !important; }
.align-stretch  { align-items: stretch !important; }

.justify-start   { justify-content: flex-start !important; }
.justify-end     { justify-content: flex-end !important; }
.justify-center  { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.justify-around  { justify-content: space-around !important; }
.justify-evenly  { justify-content: space-evenly !important; }

.flex-row            { flex-direction: row !important; }
.flex-column         { flex-direction: column !important; }
.flex-row-reverse    { flex-direction: row-reverse !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }
.flex-wrap           { flex-wrap: wrap !important; }
.flex-nowrap         { flex-wrap: nowrap !important; }
.flex-fill           { flex: 1 1 auto !important; }
.flex-grow-0         { flex-grow: 0 !important; }
.flex-grow-1         { flex-grow: 1 !important; }
.flex-shrink-0       { flex-shrink: 0 !important; }
.flex-shrink-1       { flex-shrink: 1 !important; }

/* ── Vertical Alignment ──────────────────────────────────────────────────────── */
.v-align-middle   { vertical-align: middle !important; }
.v-align-top      { vertical-align: top !important; }
.v-align-bottom   { vertical-align: bottom !important; }
.v-align-baseline { vertical-align: baseline !important; }

/* ── Overflow ────────────────────────────────────────────────────────────────── */
.overflow-auto   { overflow: auto !important; }
.overflow-hidden { overflow: hidden !important; }

/* ── Screen Reader ───────────────────────────────────────────────────────────── */
.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
}

/* ── Misc Component Classes ──────────────────────────────────────────────────── */
.logo-ackee { width: 170px; height: auto; display: block; max-width: 100%; margin: 0 auto; }

.footer {
  margin-top: 3rem;
  padding: 30px 0;
  text-align: center;
  background-color: var(--bg-lightsage);
}

.book-view {
  font-family: var(--font-family-base);
  max-width: 85ch;
  margin: 0 auto;
  padding: 0 1rem;
  line-height: 1.6;
}
.book-view a { color: #5F7005; text-decoration: none; }
.book-font   { font-family: var(--font-family-base); }
/* .default-font — commented out 2026 during Bootstrap 3 migration.
   Originally set font-size: 22px which overrides the 14px base font size
   matching Bootstrap 3. If body text appears too small on content pages
   after migration, uncomment and adjust the font-size value as needed.
   The font family is not affected by this class — it stays as Georgia, serif.
.default-font { font-size: 22px; line-height: 1.4; } */

/* ── .injected-content ───────────────────────────────────────────────────────── */
.injected-content { background-color: var(--bg-sand); }

.injected-content h2 {
  color: black;
  font-size: 1.125rem;
  margin-top: 1rem;
  line-height: 1.6;
}

.injected-content h3 {
  color: black;
  font-size: 1rem;
  margin-top: 1rem;
  line-height: 1.6;
}

.injected-content h4 {
  color: black;
  font-size: 1rem;
  margin-top: 1rem;
  line-height: 1.6;
}

@media (max-width: 767px) {
  select {
    font-size: 16px;
    padding: 0.75rem;
    width: 100%;
  }

  /* Constrain floated images on mobile to 45% max-width.
     Without this, large images with pull-left or pull-right consume
     most of the screen width leaving insufficient space for text to
     wrap beside them. 45% ensures text always has at least 55% of
     the column width — workable on all phone sizes in both portrait
     and landscape. 767px threshold matches Bootstrap 3's mobile
     breakpoint where col-md-* columns stack to full width. */
  .pull-left,
  .pull-right {
    max-width: 45%;
  }
}