/**
 * F1GMAT APU Theme · style.css
 * Editorial warm cream palette with Georgia serif body and gold-dark accents.
 * Works with colors.css, table.css, node.css in the same directory.
 */

:root {
  --fg-paper: #FBFAF7;
  --fg-paper-services: #F8F3E6;
  --fg-paper-lift: #F8F3E6;
  --fg-paper-warm: #F5EFDF;
  --fg-paper-aged: #EDE5D1;
  --fg-paper-promo: #E9DFC5;
  --fg-paper-premium: #DCCEA8;
  --fg-paper-footer: #E3D7B8;
  --fg-ink: #1A1A1A;
  --fg-ink-soft: #3D3D3D;
  --fg-ink-muted: #525252;
  --fg-hairline: #D4CFC4;
  --fg-hairline-soft: #E5E0D3;
  --fg-teal: #0E7490;
  --fg-teal-dark: #0A5669;
  --fg-gold: #C89B2D;
  --fg-gold-dark: #8A6B1F;
  --fg-violet: #7C3AED;

  /* Reading column widths — content stays centered at max-width even when
     the band/container is full-viewport */
  --fg-column-prose: 720px;
  --fg-column-wide: 880px;
}

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  background: var(--fg-paper);
  color: var(--fg-ink-soft);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(16px, 1vw + 14px, 18px);
  line-height: 1.75;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  max-width: 100vw;
}

/* Mobile viewport protection — prevent horizontal scroll from any overflowing
   content (images, tables, videos, iframes, pre/code blocks) */
#page-wrapper,
#page,
#main-wrapper,
.layout-container {
  max-width: 100vw;
  overflow-x: hidden;
}

img,
video,
iframe,
embed,
object {
  max-width: 100%;
  height: auto;
}

/* Tables, pre, code blocks get a scrollable wrapper instead of overflowing */
.node__content table,
.field--name-body table,
.view-content table,
article table {
  max-width: 100%;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.node__content pre,
.field--name-body pre,
article pre {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Prevent long words (URLs, IDs) from overflowing on mobile */
.node__content,
.field--name-body,
.view-content,
article p,
article li {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

#page-wrapper,
#page,
#main-wrapper,
#main,
main,
.main-content,
.layout-container,
.region-content,
.region-help,
.page-content,
.node,
.node__content,
article {
  background: var(--fg-paper);
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--fg-ink);
  font-weight: 400;
  letter-spacing: -0.2px;
  line-height: 1.25;
  margin: 0 0 0.5rem;
}

h1, .h1, .page-title, .node__title {
  font-size: clamp(1.875rem, 3vw + 1rem, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.8px;
  margin-bottom: 1.25rem;
}

/* Page title (H1) on two-sidebar layouts — constrain to align with
   the body content column instead of spanning full page width.

   Drupal Bootstrap Barrio renders the page-title OUTSIDE the
   layout-content wrapper, so by default it spans the full
   layout-container width. On two-sidebar layouts, the body content
   sits in a narrower column (typically after a ~25% left sidebar).
   We offset the title to match. */

@media (min-width: 992px) {
  body.layout-two-sidebars .page-title,
  body.layout-two-sidebars .block-page-title-block,
  body.layout-two-sidebars h1.page-title,
  body.layout-two-sidebars .region-header-below-left h1,
  .layout-two-sidebars .block-page-title-block {
    max-width: var(--fg-column-wide);
    margin-left: 25%;
    margin-right: auto;
    padding-left: clamp(16px, 2vw, 24px);
    padding-right: clamp(16px, 2vw, 24px);
  }

  /* On pages with only a left sidebar or no sidebars, use narrower
     centered constraint for visual rhythm */
  body.layout-one-sidebar .page-title,
  body.layout-one-sidebar .block-page-title-block,
  body.layout-no-sidebars .page-title,
  body.layout-no-sidebars .block-page-title-block,
  body.path-frontpage .page-title {
    max-width: var(--fg-column-wide);
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(16px, 3vw, 32px);
    padding-right: clamp(16px, 3vw, 32px);
  }
}

@media (min-width: 1200px) {
  body.layout-two-sidebars .page-title,
  body.layout-two-sidebars .block-page-title-block,
  body.layout-two-sidebars h1.page-title {
    /* At xl+ the sidebar gets proportionally narrower visually but
       Bootstrap's col-lg-3 is still 25%. Keep the same offset. */
    margin-left: 25%;
  }
}

/* On mobile/tablet where sidebars stack below content, H1 goes back
   to full-width with standard content padding */
@media (max-width: 991.98px) {
  body.layout-two-sidebars .page-title,
  body.layout-two-sidebars .block-page-title-block,
  body.layout-two-sidebars h1.page-title {
    margin-left: 0;
    padding-left: clamp(16px, 3vw, 32px);
    padding-right: clamp(16px, 3vw, 32px);
  }
}

h2, .h2 {
  font-size: clamp(1.375rem, 1.5vw + 1rem, 2rem);
  padding-bottom: 8px;
  border-bottom: 0.5px solid var(--fg-hairline);
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}

h3, .h3 {
  color: var(--fg-gold-dark);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.9375rem, 0.5vw + 0.875rem, 1.125rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  margin-top: 2.25rem;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

h4, .h4 {
  color: var(--fg-ink-soft);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
  font-weight: 400;
  font-style: italic;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

h5, h6, .h5, .h6 {
  color: var(--fg-ink-muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-top: 1.25rem;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  color: inherit;
  text-decoration: none;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
  color: var(--fg-teal);
}

/* Body prose */
p {
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--fg-ink-soft);
  font-size: clamp(16px, 1vw + 14px, 18px);
  line-height: 1.75;
  margin: 0 0 1.125rem;
}

/* Strong — traditional editorial bold.
   Weight 600 is Georgia's true semibold/bold. Reads as clearly emphasized
   without being chunky. Used frequently for section labels and mid-prose
   emphasis. */
strong, b {
  color: var(--fg-ink);
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0;
}

/* Strong inside headings inherits the heading's own treatment —
   don't override size, color, or weight set by h1-h6 rules */
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong,
h1 b, h2 b, h3 b, h4 b, h5 b, h6 b,
.h1 strong, .h2 strong, .h3 strong, .h4 strong {
  color: inherit;
  font-weight: inherit;
  font-family: inherit;
  font-style: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
}

/* Strong inside links inherits link color; keeps weight bump */
a strong, a b,
strong a, b a {
  color: inherit;
  font-weight: 600;
  text-decoration: inherit;
}

/* Strong inside buttons inherits button text color (usually cream) */
.btn strong, .btn b,
.btn-primary strong, .btn-primary b,
.btn-secondary strong, .btn-secondary b,
button strong, button b {
  color: inherit;
  font-weight: 600;
}

/* Strong inside authored callouts inherits the callout's color treatment */
.case-study strong, .case-study b,
.pull-quote strong, .pull-quote b,
.prompt-box strong, .prompt-box b,
blockquote strong, blockquote b {
  color: inherit;
  font-weight: 600;
}

/* Footer strong stays ink-black with weight bump */
.site-footer strong, .site-footer b {
  color: var(--fg-ink);
  font-weight: 600;
}

/* Sidebar strong stays ink-black with weight bump, inherits size */
.sidebar strong, .sidebar b,
aside strong, aside b {
  color: var(--fg-ink);
  font-weight: 600;
  font-size: inherit;
}

em, i {
  color: var(--fg-ink);
  font-style: italic;
}

small {
  font-size: 0.8125rem;
}

/* Links — Tier 1: Internal editorial links (default teal for discovery/reference) */
a, a:link, a:visited {
  color: var(--fg-teal);
  text-decoration: underline;
  text-decoration-color: var(--fg-teal);
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

a:hover,
a:focus {
  color: var(--fg-teal-dark);
  text-decoration-color: var(--fg-teal-dark);
}

/* Links — Tier 2: Commerce links (store.f1gmat.com and premium.f1gmat.com)
   Editorial blue + weight 500 + thicker underline. Signals "takes you
   somewhere different" vs. the Tier 1 reference links. */
article a[href*="store.f1gmat.com"],
article a[href*="premium.f1gmat.com"],
.node__content a[href*="store.f1gmat.com"],
.node__content a[href*="premium.f1gmat.com"],
.field--name-body a[href*="store.f1gmat.com"],
.field--name-body a[href*="premium.f1gmat.com"] {
  color: #1D4ED8;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: #1D4ED8;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

/* Tier 2 hover — color and background only. NO padding/margin/border
   changes because those alter box dimensions and cause surrounding
   text to reflow in constrained containers (li, td, grid cells). */
article a[href*="store.f1gmat.com"]:hover,
article a[href*="premium.f1gmat.com"]:hover,
.node__content a[href*="store.f1gmat.com"]:hover,
.node__content a[href*="premium.f1gmat.com"]:hover,
.field--name-body a[href*="store.f1gmat.com"]:hover,
.field--name-body a[href*="premium.f1gmat.com"]:hover {
  color: #1E40AF;
  text-decoration-color: #1E40AF;
  background: rgba(29, 78, 216, 0.08);
}

/* Navigation links */
.navbar a,
.nav-link,
.menu-item a,
.breadcrumb a,
nav a,
#navbar-top a,
#navbar-main a {
  color: var(--fg-ink);
  text-decoration: none;
  font-weight: 400;
  font-family: Georgia, serif;
}

.navbar a:hover,
.nav-link:hover,
#navbar-top a:hover,
#navbar-main a:hover {
  color: var(--fg-teal);
  text-decoration: none;
}

/* Primary menu nav-link font size — capped at 14px on desktop so it
   doesn't inherit the fluid body clamp() size */
#navbar-main .nav-link,
#navbar-main .navbar-nav .nav-link,
.navbar-expand-xl .nav-link {
  font-size: 14px;
  font-family: Georgia, serif;
  font-weight: 400;
  line-height: 1.4;
  padding: 6px 10px;
  color: var(--fg-ink);
  letter-spacing: 0;
}

#navbar-main .dropdown-toggle::after {
  font-size: 10px;
  vertical-align: middle;
  margin-left: 4px;
}

/* Navbar dropdown items — desktop only (≥1200px).
   Mobile/tablet use offcanvas drawer with different styling below. */
@media (min-width: 1200px) {
  #navbar-main .dropdown-item,
  #navbar-main .dropdown-menu .dropdown-item a {
    font-size: 14px;
    font-family: Georgia, serif;
    font-weight: 400;
    line-height: 1.5;
    padding: 8px 14px;
    color: var(--fg-ink);
    white-space: normal;
    max-width: 380px;
    text-decoration: none;
    display: block;
    width: 100%;
  }

  #navbar-main .dropdown-menu {
    background: var(--fg-paper);
    border: 0.5px solid var(--fg-hairline);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-radius: 0;
    padding: 8px 0;
    overflow: visible;
    max-height: none;
    min-width: 100%;
    width: max-content;
    max-width: 380px;
  }

  #navbar-main .dropdown-item:hover,
  #navbar-main .dropdown-item a:hover {
    background: var(--fg-paper-aged);
    color: var(--fg-teal);
    text-decoration: none;
  }
}

/* Catch-all: kill underlines on every <a> inside any dropdown menu.
   Bootstrap Barrio renders menus in two DOM patterns:
     Pattern A: <li><a class="dropdown-item">text</a></li>
     Pattern B: <li class="dropdown-item"><a>text</a></li>
   The global `a { text-decoration: underline }` rule bleeds through
   on hover in Pattern B because the <a> itself has no .dropdown-item
   class. Using !important as a last resort — standard specificity
   approaches confirmed insufficient against Bootstrap + Drupal cascade. */
.dropdown-menu a,
.dropdown-menu a:link,
.dropdown-menu a:visited,
.dropdown-menu a:hover,
.dropdown-menu a:focus,
.dropdown-menu .dropdown-item,
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
#navbar-main .dropdown-menu a,
#navbar-main .dropdown-menu a:hover,
#navbar-main .dropdown-menu a:focus {
  text-decoration: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   NAVBAR — two nav elements in the DOM:
   - #navbar-top : logo only (class="navbar navbar-dark bg-transparent")
   - #navbar-main : primary menu with offcanvas toggle
                    (class="navbar navbar-dark bg-light navbar-expand-xl")

   The mobile menu uses Bootstrap Offcanvas (not Collapse). Button has
   data-bs-toggle="offcanvas" and data-bs-target="#CollapsingNavbar".
   The drawer itself is a .offcanvas.offcanvas-end sibling.

   Breakpoint: navbar-expand-xl means mobile-mode below 1200px.
   ═══════════════════════════════════════════════════════════════ */

/* Logo navbar — transparent, no visible background needed */
#navbar-top {
  background: var(--fg-paper);
  border-bottom: 0;
  padding: 12px clamp(12px, 3vw, 24px);
}

#navbar-top .navbar-brand {
  margin: 0;
  padding: 0;
}

#navbar-top .navbar-brand img {
  max-height: 64px;
  width: auto;
  height: auto;
}

/* Primary menu navbar — sits below logo, holds the toggler and menu */
#navbar-main {
  background: var(--fg-paper) !important;
  padding: 8px clamp(12px, 3vw, 24px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

/* Kill Bootstrap's navbar-dark / bg-light color overrides so our palette wins */
#navbar-main.navbar-dark,
#navbar-main.bg-light {
  background-color: var(--fg-paper) !important;
  color: var(--fg-ink);
}

/* The toggler is the ONLY visible element in #navbar-main on mobile.
   Force it visible below the xl breakpoint (1199.98px). */
#navbar-main .navbar-toggler,
.navbar-expand-xl .navbar-toggler,
button.navbar-toggler[data-bs-toggle="offcanvas"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: var(--fg-paper);
  border: 0.5px solid var(--fg-ink);
  color: var(--fg-ink);
  padding: 8px 12px;
  border-radius: 0;
  cursor: pointer;
  margin-left: auto;
  position: relative;
  z-index: 10;
}

#navbar-main .navbar-toggler:focus,
.navbar-expand-xl .navbar-toggler:focus {
  outline: 0;
  box-shadow: 0 0 0 2px rgba(138, 107, 31, 0.25);
}

#navbar-main .navbar-toggler-icon,
.navbar-expand-xl .navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%231A1A1A' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Hide the toggler at xl breakpoint and up — the menu renders inline */
@media (min-width: 1200px) {
  #navbar-main .navbar-toggler,
  .navbar-expand-xl .navbar-toggler,
  button.navbar-toggler[data-bs-toggle="offcanvas"] {
    display: none !important;
  }

  /* At xl+, the offcanvas markup should render as a static inline menu.
     Bootstrap's navbar-expand-xl handles this but only for .navbar-collapse,
     not for offcanvas. We force the offcanvas to display inline at xl+. */
  #navbar-main .offcanvas,
  #navbar-main .offcanvas-end {
    position: static;
    display: flex;
    flex: 1 1 auto;
    visibility: visible;
    background: transparent;
    border: 0;
    transform: none;
    transition: none;
    width: auto;
    height: auto;
    max-width: none;
  }

  #navbar-main .offcanvas-header {
    display: none;
  }

  #navbar-main .offcanvas-body {
    display: flex;
    flex: 1 1 auto;
    padding: 0;
  }

  #navbar-main .navbar-nav {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }
}

/* Below xl — mobile/tablet — offcanvas behaves as drawer */
@media (max-width: 1199.98px) {
  /* The offcanvas drawer slides in from the right when toggled */
  .offcanvas-end,
  #CollapsingNavbar.offcanvas-end {
    background: var(--fg-paper);
    border-left: 0.5px solid var(--fg-hairline);
    width: min(320px, 85vw);
  }

  .offcanvas-header {
    border-bottom: 0.5px solid var(--fg-hairline);
    padding: 16px 20px;
  }

  .offcanvas-header .btn-close {
    background-size: 1em;
    opacity: 0.7;
  }

  .offcanvas-body {
    padding: 12px 20px;
    overflow-y: auto;
  }

  .offcanvas-body .region-primary-menu {
    margin: 0;
    padding: 0;
  }

  .offcanvas-body .navbar-nav {
    flex-direction: column;
    width: 100%;
    gap: 0;
  }

  .offcanvas-body .nav-item {
    width: 100%;
    border-bottom: 0.5px solid var(--fg-hairline);
  }

  .offcanvas-body .nav-item:last-child {
    border-bottom: 0;
  }

  .offcanvas-body .nav-link {
    padding: 12px 0;
    font-family: Georgia, serif;
    font-size: 15px;
    font-weight: 400;
    color: var(--fg-ink);
    letter-spacing: 0;
    text-transform: none;
    display: block;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
  }

  .offcanvas-body .nav-link:hover,
  .offcanvas-body .nav-link:focus {
    color: var(--fg-teal);
  }

  /* Nested dropdowns in mobile drawer — indent with gold border */
  .offcanvas-body .dropdown-menu {
    position: static;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--fg-gold-dark);
    margin: 4px 0 8px 8px;
    padding: 4px 0 4px 12px;
    background: transparent;
    display: none;
  }

  .offcanvas-body .dropdown-menu.show {
    display: block;
  }

  .offcanvas-body .dropdown-item {
    padding: 8px 0;
    font-family: Georgia, serif;
    font-size: 14px;
    color: var(--fg-ink-soft);
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.5;
    text-decoration: none;
    max-width: 100%;
  }

  .offcanvas-body .dropdown-item a,
  .offcanvas-body .dropdown-menu a,
  .offcanvas-body .dropdown-menu li a {
    color: var(--fg-ink-soft);
    text-decoration: none;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: block;
    max-width: 100%;
  }

  .offcanvas-body .dropdown-item a:hover {
    color: var(--fg-teal);
  }

  /* Hide logo inside the primary nav on mobile if duplicated */
  #navbar-main .navbar-brand {
    display: none;
  }
}

/* Backdrop when offcanvas is open */
.offcanvas-backdrop {
  background-color: rgba(26, 26, 26, 0.45);
}

.offcanvas-backdrop.show {
  opacity: 1;
}

/* Dropdown menus */
.dropdown-menu {
  background: var(--fg-paper);
  border: 0.5px solid var(--fg-hairline);
  border-radius: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.dropdown-item {
  color: var(--fg-ink);
  font-family: Georgia, serif;
  text-decoration: none;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--fg-paper-aged);
  color: var(--fg-teal);
  text-decoration: none;
}

/* Breadcrumbs */
.breadcrumb,
nav.breadcrumb,
.block-system-breadcrumb-block {
  background: transparent;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 0.8px;
  color: var(--fg-ink-muted);
  padding: 12px 0;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.breadcrumb ul,
nav.breadcrumb ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.breadcrumb li,
nav.breadcrumb li {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border-top: 0;
}

.breadcrumb li::before,
nav.breadcrumb li::before {
  content: "";
  display: none;
}

.breadcrumb li + li::before,
nav.breadcrumb li + li::before {
  content: "›";
  display: inline-block;
  padding: 0 8px;
  color: var(--fg-gold-dark);
  font-weight: 500;
}

.breadcrumb a,
.breadcrumb-item a,
nav.breadcrumb a {
  color: var(--fg-ink-muted);
  text-decoration: none;
  font-weight: 500;
}

.breadcrumb a:hover,
.breadcrumb-item a:hover,
nav.breadcrumb a:hover {
  color: var(--fg-teal);
  text-decoration: underline;
}

.breadcrumb li:last-child,
nav.breadcrumb li:last-child {
  color: var(--fg-ink);
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--fg-gold-dark);
  content: "›";
}

/* Lists */
/* Lists — article/node/field content only (editorial prose lists with bullets) */
article ul,
.node__content ul,
.field-content ul,
.field--name-body ul {
  padding-left: 24px;
  margin: 14px 0 22px;
  list-style: none;
}

article ul li,
.node__content ul li,
.field-content ul li,
.field--name-body ul li {
  position: relative;
  padding: 3px 0 3px 18px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--fg-ink-soft);
  list-style: none;
}

article ul li::before,
.node__content ul li::before,
.field-content ul li::before,
.field--name-body ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.68em;
  width: 5px;
  height: 5px;
  background: var(--fg-gold-dark);
  border-radius: 50%;
  transform: translateY(-50%);
}

/* Nested lists — smaller hollow bullet, less indent */
article ul ul,
.node__content ul ul,
.field-content ul ul,
.field--name-body ul ul {
  margin: 4px 0 4px 0;
  padding-left: 20px;
}

article ul ul li::before,
.node__content ul ul li::before,
.field-content ul ul li::before,
.field--name-body ul ul li::before {
  width: 4px;
  height: 4px;
  background: transparent;
  border: 0.5px solid var(--fg-gold-dark);
}

article ol,
.node__content ol,
.field-content ol,
.field--name-body ol {
  padding-left: 30px;
  margin: 14px 0 22px;
}

article ol li,
.node__content ol li,
.field-content ol li,
.field--name-body ol li {
  font-size: 17px;
  line-height: 1.7;
  color: var(--fg-ink-soft);
  padding: 3px 0;
  padding-left: 6px;
}

article ol li::marker,
.node__content ol li::marker,
.field-content ol li::marker,
.field--name-body ol li::marker {
  color: var(--fg-gold-dark);
  font-weight: 500;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.875em;
}

/* Tight list mode — when list items are short single-line entries */
article ul.tight-list li,
.node__content ul.tight-list li {
  padding-top: 1px;
  padding-bottom: 1px;
}

/* ═══════════════════════════════════════════════════════════════
   VIEWS BLOCKS — editorial card/box treatment, not bulleted prose
   ═══════════════════════════════════════════════════════════════
   Views-rendered content (taxonomy listings, related blocks, row
   grids) uses navigation-style cards with gold-dark left border
   instead of bullets. Scales responsively.
   ═══════════════════════════════════════════════════════════════ */

/* Reset Views list items — no bullets, they're navigation cards */
.view-content ul,
.views-row ul,
.views-field ul,
.block-views-block ul,
.block-views ul,
.views-element-container ul,
.region-content .view ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.view-content ul li,
.views-row ul li,
.views-field ul li,
.block-views-block ul li,
.block-views ul li,
.views-element-container ul li,
.region-content .view ul li {
  list-style: none;
  padding: 0;
  margin: 0;
  position: static;
}

.view-content ul li::before,
.views-row ul li::before,
.views-field ul li::before,
.block-views-block ul li::before,
.block-views ul li::before,
.views-element-container ul li::before {
  content: "";
  display: none;
}

/* Views links — editorial cards with gold-dark left border */
/* Views card links — same teal+underline style as product cards */
.view-content ul li a,
.view-content ul li a:link,
.view-content ul li a:visited,
.views-row ul li a,
.views-field ul li a,
.block-views-block ul li a,
.block-views ul li a,
.views-element-container ul li a {
  display: block;
  padding: 12px 16px;
  background: transparent;
  border-left: 3px solid var(--fg-gold-dark);
  border-bottom: 0.5px solid var(--fg-hairline);
  color: var(--fg-teal);
  font-family: Georgia, serif;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 400;
  text-decoration: underline;
  text-decoration-color: var(--fg-teal);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.view-content ul li a:hover,
.views-row ul li a:hover,
.views-field ul li a:hover,
.block-views-block ul li a:hover,
.block-views ul li a:hover,
.views-element-container ul li a:hover {
  background-color: var(--fg-paper-aged);
  border-left-color: var(--fg-teal);
  color: var(--fg-teal-dark);
  text-decoration-color: var(--fg-teal-dark);
}

/* Views rows (not list-based — the default teaser/full row layout) */
.views-row {
  padding: 18px 0;
  border-bottom: 0.5px solid var(--fg-hairline);
}

.views-row:last-child {
  border-bottom: 0;
}

/* Grid-style Views (class="views-view-grid") — responsive card grid */
.views-view-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  padding: 0;
}

.views-view-grid > .views-row {
  padding: 14px 16px;
  background: var(--fg-paper);
  border: 0.5px solid var(--fg-hairline);
  border-left: 3px solid var(--fg-gold-dark);
  border-bottom: 0.5px solid var(--fg-hairline);
  transition: background 0.15s ease;
}

.views-view-grid > .views-row:hover {
  background: var(--fg-paper-aged);
}

/* Views field titles — cleaner hierarchy */
.views-field-title,
.views-field-name {
  font-family: Georgia, serif;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 4px;
}

.views-field-title a,
.views-field-name a {
  color: var(--fg-ink);
  text-decoration: none;
}

.views-field-title a:hover,
.views-field-name a:hover {
  color: var(--fg-teal);
  text-decoration: underline;
}

/* Taxonomy term link fields — pill/tag treatment */
.views-field-field-tags a,
.views-field-field-category a,
.views-field-name a.term {
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--fg-gold-dark);
  text-decoration: none;
  padding: 3px 10px;
  border: 0.5px solid var(--fg-gold-dark);
  font-weight: 500;
  margin: 0 6px 6px 0;
  background: transparent;
  transition: background 0.15s ease, color 0.15s ease;
}

.views-field-field-tags a:hover,
.views-field-field-category a:hover,
.views-field-name a.term:hover {
  background: var(--fg-gold-dark);
  color: var(--fg-paper);
}

/* Block-level views lists (smaller cards) */
.block-views-block .view-content ul,
.block-views .view-content ul {
  grid-template-columns: 1fr;
  gap: 2px;
}

.block-views-block .view-content ul li a,
.block-views .view-content ul li a {
  font-size: 14px;
  padding: 10px 12px 10px 14px;
}

/* Blockquotes */
blockquote {
  margin: 24px 0;
  padding: 18px 0 18px 24px;
  border-left: 3px solid var(--fg-gold-dark);
  background: transparent;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--fg-ink);
  font-style: italic;
}

blockquote p {
  font-size: inherit;
  color: inherit;
  margin-bottom: 0.5rem;
}

blockquote cite,
blockquote footer,
blockquote small {
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.75rem;
  color: var(--fg-gold-dark);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-style: normal;
  margin-top: 8px;
  font-weight: 500;
}

/* Sidebar */
.sidebar,
.sidebar aside,
aside.section,
.region-sidebar-first,
.region-sidebar-second {
  background: var(--fg-paper);
}

.sidebar .block,
aside .block {
  background: transparent;
  border: 0;
  border-bottom: 0.5px solid var(--fg-hairline);
  padding: 16px 0;
  margin-bottom: 8px;
}

.sidebar .block:last-child,
aside .block:last-child {
  border-bottom: 0;
}

.sidebar .block-title,
.sidebar .block > h2,
.sidebar .block > h3,
.sidebar .block > h4,
.sidebar .block > .block__title,
aside .block-title,
aside .block > h2,
aside .block > h3,
aside .block > h4,
aside .block > .block__title,
.region-sidebar-first h2,
.region-sidebar-first h3,
.region-sidebar-first h4,
.region-sidebar-second h2,
.region-sidebar-second h3,
.region-sidebar-second h4 {
  color: var(--fg-gold-dark);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 500;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  padding-bottom: 8px;
  margin-bottom: 12px;
  margin-top: 0;
  border-bottom: 3px double var(--fg-gold-dark);
  border-top: 0;
  line-height: 1.3;
}

.sidebar a,
.sidebar .block a,
.sidebar ul li a,
aside a,
aside .block a {
  color: var(--fg-ink);
  font-family: Georgia, serif;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  line-height: 1.5;
}

.sidebar a:hover,
aside a:hover {
  color: var(--fg-teal);
  text-decoration: underline;
}

.sidebar ul,
aside ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.sidebar ul li,
aside ul li {
  padding: 5px 0;
  font-size: 14px;
  line-height: 1.5;
  border-top: 0.5px solid var(--fg-hairline);
}

.sidebar ul li:first-child,
aside ul li:first-child {
  border-top: 0;
}

.sidebar ul li::before,
aside ul li::before {
  content: "";
  display: none;
}

@media (max-width: 1023px) {
  .sidebar .block {
    display: none;
  }
}

/* Authored content classes */
.case-study {
  background: var(--fg-paper-aged);
  padding: 20px 24px;
  margin: 24px 0;
  border-left: 3px solid var(--fg-teal);
  border-radius: 0;
}

.case-study .cs-label,
.case-study > strong:first-child {
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--fg-teal);
  font-weight: 500;
  margin-bottom: 6px;
}

.case-study p,
.case-study .cs-text {
  color: var(--fg-ink-soft);
  font-family: Georgia, serif;
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 0.5rem;
}

.case-study p:last-child {
  margin-bottom: 0;
}

.pull-quote {
  margin: 36px 0;
  padding: 26px 32px;
  text-align: center;
  border-top: 3px double var(--fg-ink);
  border-bottom: 3px double var(--fg-ink);
  font-family: Georgia, serif;
  font-size: 1.625rem;
  line-height: 1.35;
  color: var(--fg-ink);
  font-style: italic;
  letter-spacing: -0.2px;
  background: transparent;
}

.pull-quote .pq-attrib {
  display: block;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fg-gold-dark);
  font-style: normal;
  margin-top: 10px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 500;
}

.prompt-box {
  background: transparent;
  border-top: 3px solid var(--fg-ink);
  border-bottom: 3px solid var(--fg-ink);
  padding: 18px 0;
  margin: 24px 0;
}

.prompt-box .pb-label {
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--fg-gold-dark);
  font-weight: 500;
  margin-bottom: 8px;
}

.prompt-box .pb-text {
  font-family: Georgia, serif;
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--fg-ink);
  font-style: italic;
}

.prompt-box .pb-words {
  display: block;
  font-size: 12px;
  color: var(--fg-ink-muted);
  font-style: normal;
  margin-top: 6px;
  font-family: Arial, Helvetica, sans-serif;
}

.tip-callout {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--fg-gold-dark);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  display: block;
  margin: 1.5rem 0 0.5rem;
}

/* Buttons */
.btn,
.button {
  display: inline-block;
  padding: 10px 20px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3px;
  line-height: 1.3;
  border-radius: 0;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-primary,
button.btn-primary,
a.btn-primary,
input[type="submit"].btn-primary,
.button--primary {
  background: var(--fg-ink);
  border-color: var(--fg-ink);
  color: var(--fg-paper);
}

.btn-primary:hover,
.btn-primary:focus,
button.btn-primary:hover,
a.btn-primary:hover,
.button--primary:hover {
  background: var(--fg-teal);
  border-color: var(--fg-teal);
  color: var(--fg-paper);
}

.btn-primary,
.btn-primary *,
button.btn-primary,
button.btn-primary *,
a.btn-primary,
a.btn-primary * {
  color: var(--fg-paper);
}

.btn-secondary,
.button--secondary {
  background: transparent;
  border-color: var(--fg-ink);
  color: var(--fg-ink);
}

.btn-secondary:hover,
.button--secondary:hover {
  background: var(--fg-ink);
  color: var(--fg-paper);
}

/* Cards */
.card {
  background: transparent;
  border: 0.5px solid var(--fg-hairline);
  border-radius: 0;
}

.card-header {
  background: var(--fg-paper-aged);
  border-bottom: 0.5px solid var(--fg-hairline);
  font-family: Georgia, serif;
  color: var(--fg-ink);
}

.card-body {
  background: transparent;
  color: var(--fg-ink-soft);
}

.card-title {
  color: var(--fg-ink);
  font-family: Georgia, serif;
  font-weight: 400;
}

/* Alerts */
.alert {
  background: var(--fg-paper-aged);
  border: 0;
  border-left: 3px solid var(--fg-teal);
  border-radius: 0;
  color: var(--fg-ink);
  font-family: Georgia, serif;
  padding: 14px 18px;
}

.alert-success { border-left-color: var(--fg-teal); }
.alert-warning { border-left-color: var(--fg-gold-dark); }
.alert-danger { border-left-color: #991B1B; }
.alert-info { border-left-color: var(--fg-teal); }

/* Pagination */
.pagination .page-link,
.pager__item a {
  background: transparent;
  border: 0.5px solid var(--fg-hairline);
  color: var(--fg-ink);
  border-radius: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}

.pagination .page-link:hover,
.pager__item a:hover {
  background: var(--fg-paper-aged);
  color: var(--fg-teal);
  border-color: var(--fg-teal);
}

.pagination .active .page-link,
.pager__item--current a {
  background: var(--fg-ink);
  color: var(--fg-paper);
  border-color: var(--fg-ink);
}

/* Forms */
.form-control,
input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="tel"],
input[type="url"],
textarea,
select {
  background: var(--fg-paper);
  border: 0.5px solid var(--fg-ink);
  border-radius: 0;
  color: var(--fg-ink);
  font-family: Georgia, serif;
  font-size: 14px;
  padding: 8px 12px;
  width: 100%;
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--fg-teal);
  box-shadow: 0 0 0 2px rgba(14, 116, 144, 0.15);
  outline: 0;
}

.form-label,
label {
  color: var(--fg-ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
  display: inline-block;
}

/* Drupal status messages */
.messages,
.messages--status {
  background: var(--fg-paper-aged);
  border: 0;
  border-left: 3px solid var(--fg-teal);
  border-radius: 0;
  color: var(--fg-ink);
  padding: 14px 18px;
  font-family: Georgia, serif;
}

.messages--error { border-left-color: #991B1B; }
.messages--warning { border-left-color: var(--fg-gold-dark); }

/* Drupal-specific content elements */
.node__meta,
.node__submitted,
.meta,
.submitted {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: var(--fg-ink-muted);
  letter-spacing: 0.3px;
  padding: 14px 0;
  border-top: 0.5px solid var(--fg-hairline);
  border-bottom: 0.5px solid var(--fg-hairline);
  margin-bottom: 20px;
  font-style: normal;
}

.field__label {
  color: var(--fg-ink-muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 500;
  margin-right: 8px;
}

.field--type-entity-reference {
  background: transparent;
  border: 0;
  border-bottom: 0.5px solid var(--fg-hairline);
  padding: 8px 0;
  margin: 12px 0;
  width: auto;
  margin-left: 0;
}

.field--type-entity-reference .field__items a,
.field--name-field-tags a,
.field--name-field-category a,
.taxonomy-term a.term {
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--fg-gold-dark);
  text-decoration: none;
  padding: 3px 10px;
  border: 0.5px solid var(--fg-gold-dark);
  font-weight: 500;
  margin: 0 6px 6px 0;
  background: transparent;
}

.field--type-entity-reference .field__items a:hover,
.field--name-field-tags a:hover,
.field--name-field-category a:hover {
  background: var(--fg-gold-dark);
  color: var(--fg-paper);
}

.views-row {
  padding: 16px 0;
  border-bottom: 0.5px solid var(--fg-hairline);
}

.views-row:last-child {
  border-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════
   AUTHOR BIO & CUSTOM EDITORIAL BLOCKS
   ═══════════════════════════════════════════════════════════════
   Option C treatment: warm-paper background (barely perceptible
   shift from body paper), single 2px gold-dark left rule. Subtle
   but clearly signals "this is a different content type."

   Applies automatically to:
   - .region-highlighted (the author strip above article body)
   - Any block with class .block-author-bio (for placing author
     bios elsewhere on the page)
   - Any block with class .editorial-block (reusable for tips,
     callouts, sidebar notes that need subtle zone definition)
   ═══════════════════════════════════════════════════════════════ */

/* Author strip region (currently holds the Atul Jose bio above article) */
.region-highlighted {
  background: var(--fg-paper);
  padding: 0;
}

.region-highlighted > .block,
.region-highlighted > section,
.region-highlighted .container,
.region-highlighted .container-fluid {
  max-width: var(--fg-column-wide);
  margin: 20px auto;
  padding: 0;
  background: var(--fg-paper-warm);
  position: relative;
  overflow: visible;
}

/* The gold-dark left accent rule — 2px on the leftmost edge */
.region-highlighted > .block::before,
.region-highlighted > section::before,
.region-highlighted .container::before,
.region-highlighted .container-fluid::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--fg-gold-dark);
}

/* Inner padding so content doesn't touch the accent rule */
.region-highlighted > .block > *,
.region-highlighted > section > *,
.region-highlighted .container > *,
.region-highlighted .container-fluid > * {
  padding-left: clamp(20px, 3vw, 32px);
  padding-right: clamp(20px, 3vw, 32px);
}

.region-highlighted > .block > *:first-child,
.region-highlighted > section > *:first-child,
.region-highlighted .container > *:first-child,
.region-highlighted .container-fluid > *:first-child {
  padding-top: clamp(22px, 3vw, 30px);
}

.region-highlighted > .block > *:last-child,
.region-highlighted > section > *:last-child,
.region-highlighted .container > *:last-child,
.region-highlighted .container-fluid > *:last-child {
  padding-bottom: clamp(22px, 3vw, 30px);
}

/* Headlines inside author strip — editorial Georgia, not the
   huge fluid H1 size inherited from body */
.region-highlighted h2,
.region-highlighted h3 {
  font-family: Georgia, serif;
  font-size: clamp(17px, 1vw + 0.875rem, 20px);
  color: var(--fg-ink);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.2px;
  border: 0;
  padding-bottom: 0;
  margin: 0 0 10px;
  text-transform: none;
}

.region-highlighted p {
  font-family: Georgia, serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-ink-soft);
  margin: 0 0 10px;
  max-width: 65ch;
}

.region-highlighted p:last-of-type {
  margin-bottom: 12px;
}

/* Italic attribution style inside author strip (quote/credit pattern) */
.region-highlighted em,
.region-highlighted i {
  font-style: italic;
  color: var(--fg-ink-muted);
}

/* Contact CTA button inside author strip */
.region-highlighted a[href*="contact-f1gmat"] {
  display: inline-block;
  background: var(--fg-ink);
  color: var(--fg-paper);
  padding: 9px 18px;
  margin: 10px 0 4px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-decoration: none;
  border: 1px solid var(--fg-ink);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.region-highlighted a[href*="contact-f1gmat"]:hover {
  background: var(--fg-teal);
  border-color: var(--fg-teal);
  color: var(--fg-paper);
}

/* Avatar/image inside author strip — keep circular framing */
.region-highlighted img {
  border-radius: 50%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* Reusable class — apply to ANY block that should get the Option C
   treatment, whether in sidebar, main content, or elsewhere. Usage:
   add .block-author-bio to the block wrapper via Drupal block admin
   "Classes" field, or via a custom block-type template. */
.block-author-bio,
.block.block-author-bio,
.editorial-block {
  background: var(--fg-paper-warm);
  border: 0;
  padding: clamp(22px, 3vw, 30px) clamp(20px, 3vw, 32px);
  margin: 24px 0;
  position: relative;
  max-width: var(--fg-column-wide);
}

.block-author-bio::before,
.block.block-author-bio::before,
.editorial-block::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--fg-gold-dark);
}

.block-author-bio .block-title,
.block-author-bio > h2,
.editorial-block .block-title,
.editorial-block > h2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--fg-gold-dark);
  font-weight: 500;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  line-height: 1.3;
}

.block-author-bio h3,
.block-author-bio .content h3,
.editorial-block h3,
.editorial-block .content h3 {
  font-family: Georgia, serif;
  font-size: clamp(17px, 1vw + 0.875rem, 20px);
  color: var(--fg-ink);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.2px;
  border: 0;
  padding: 0;
  margin: 0 0 10px;
  text-transform: none;
}

.block-author-bio p,
.editorial-block p {
  font-family: Georgia, serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-ink-soft);
  margin: 0 0 10px;
  max-width: 65ch;
}

.block-author-bio p:last-of-type,
.editorial-block p:last-of-type {
  margin-bottom: 0;
}

/* Author bio / editorial block links — premium treatment.
   Teal-dark text (7.2:1 contrast, AAA) with gold-dark bottom border
   instead of underline. On hover, text shifts to gold-dark and border
   thickens slightly. Gold is used as accent only — pure gold text
   would fail WCAG AA against the paper-warm background.
   Covers three container patterns:
     .block-author-bio    → reusable class added via block admin
     .editorial-block     → reusable class for editorial callouts
     .region-highlighted  → the Drupal region holding author strip on live site
   The :not([href*="contact-f1gmat"]) exclusion preserves the contact CTA
   button styling that already exists in .region-highlighted. */
.block-author-bio a:not(.btn):not(.btn-primary),
.editorial-block a:not(.btn):not(.btn-primary),
.region-highlighted a:not(.btn):not(.btn-primary):not([href*="contact-f1gmat"]) {
  color: var(--fg-teal-dark);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1.5px solid var(--fg-gold-dark);
  padding-bottom: 1px;
}

.block-author-bio a:not(.btn):not(.btn-primary):hover,
.editorial-block a:not(.btn):not(.btn-primary):hover,
.region-highlighted a:not(.btn):not(.btn-primary):not([href*="contact-f1gmat"]):hover {
  color: var(--fg-gold-dark);
  border-bottom-color: var(--fg-gold);
  border-bottom-width: 2px;
}

/* Author avatar image inside .block-author-bio — circular */
.block-author-bio img,
.block-author-bio .field--type-image img {
  border-radius: 50%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* Mobile — tighter padding, single-column avatar stacking handled
   by natural block flow */
@media (max-width: 767px) {
  .region-highlighted > .block > *,
  .region-highlighted > section > *,
  .region-highlighted .container > *,
  .region-highlighted .container-fluid > * {
    padding-left: 18px;
    padding-right: 18px;
  }

  .block-author-bio,
  .editorial-block {
    padding: 20px 18px;
    margin: 20px 0;
  }
}

/* Accordion (Bootstrap 5) */
.accordion {
  background: var(--fg-paper);
  margin: 24px 0;
}

.accordion-item {
  background: var(--fg-paper);
  border: 0.5px solid var(--fg-hairline);
  border-radius: 0;
  color: var(--fg-ink);
}

.accordion-button,
button.accordion-button {
  background: var(--fg-paper);
  color: var(--fg-ink);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 17px;
  font-weight: 400;
  padding: 16px 20px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.4;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.accordion-button:not(.collapsed) {
  background: var(--fg-paper-aged);
  color: var(--fg-ink);
  font-weight: 500;
  box-shadow: inset 0 -0.5px 0 var(--fg-hairline);
}

.accordion-button:hover {
  background: var(--fg-paper-aged);
  color: var(--fg-teal);
}

.accordion-button:focus {
  outline: 0;
  border: 0;
  box-shadow: 0 0 0 2px rgba(138, 107, 31, 0.15);
  z-index: 1;
}

.accordion-button::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238A6B1F'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 14px;
  width: 14px;
  height: 14px;
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.accordion-button:not(.collapsed)::after {
  transform: rotate(-180deg);
}

.accordion-body {
  background: var(--fg-paper);
  color: var(--fg-ink-soft);
  font-family: Georgia, 'Times New Roman', serif;
  padding: 18px 22px;
  line-height: 1.7;
  border-top: 0.5px solid var(--fg-hairline);
}

.accordion-body p {
  color: var(--fg-ink-soft);
  font-family: Georgia, serif;
  font-size: 17px;
  line-height: 1.75;
  margin-bottom: 1rem;
}

.accordion-body p:last-child {
  margin-bottom: 0;
}

.accordion-body strong {
  color: var(--fg-ink);
  font-weight: 500;
}

.accordion-body em {
  color: var(--fg-ink);
  font-style: italic;
}

.accordion-body a {
  color: var(--fg-teal);
  text-decoration: underline;
  font-family: Georgia, serif;
}

.accordion-body a:hover {
  color: var(--fg-teal-dark);
}

.accordion-collapse {
  background: var(--fg-paper);
}

/* Footer */
.site-footer,
footer.site-footer {
  background: var(--fg-paper-footer);
  color: var(--fg-ink);
  border-top: 4px double var(--fg-ink);
  border-bottom: 4px double var(--fg-ink);
  padding: 36px clamp(20px, 4vw, 48px) 20px;
  font-family: Georgia, serif;
}

/* Inner footer containers — constrain to wide column, center */
.site-footer .container,
.site-footer .container-fluid,
.site-footer__top,
.site-footer__bottom,
footer.site-footer .container,
footer.site-footer .container-fluid {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  color: var(--fg-ink);
  background: transparent;
}

/* Bottom footer section (copyright, secondary links) */
.site-footer__bottom {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 0.5px solid var(--fg-hairline);
  font-size: 13px;
  color: var(--fg-ink-muted);
}

.site-footer .content {
  color: var(--fg-ink);
  background: transparent;
}

.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6,
.site-footer .block-title {
  color: var(--fg-ink);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 11px;
  font-weight: 500;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  padding-bottom: 10px;
  margin-bottom: 14px;
  margin-top: 0;
  border-bottom: 3px double var(--fg-gold-dark);
  border-top: 0;
  line-height: 1.3;
}

.site-footer a,
.site-footer a:link,
.site-footer a:visited {
  color: var(--fg-ink);
  font-family: Georgia, serif;
  font-style: normal;
  font-weight: 400;
  text-decoration: none;
  font-size: 14px;
}

.site-footer a:hover {
  color: var(--fg-teal);
  text-decoration: underline;
}

.site-footer ul,
.site-footer ul li {
  list-style: none;
  padding-left: 0;
}

.site-footer ul li::before {
  content: "";
  display: none;
}

.featured-bottom {
  background: var(--fg-paper-footer);
  padding: 24px 0;
  border-top: 4px double var(--fg-ink);
}

/* ═══════════════════════════════════════════════════════════════
   BELOW-CONTENT BLOCKS — Featured Bottom regions
   ═══════════════════════════════════════════════════════════════
   Two regions, two distinct purposes:

   1. region-featured-bottom-first  = ONE product CTA per page
      (Below Content F1GMAT Essay Guide). Warm lift band, editorial
      card treatment, prominent CTA button.

   2. region-featured-bottom-second = Newsletter signup
      (F1GMAT Newsletter Block). Subtle treatment, form-focused,
      less commercial pressure than the product band.

   Future enhancement: the product block's title + copy can be made
   dynamic per article via Drupal's Block Visibility by node content
   type, taxonomy term, or a custom block provider module. The CSS
   here is stable regardless of which product is shown.

   Both regions span full viewport width for zone separation, with
   content centered at the article column measure (720px).
   ═══════════════════════════════════════════════════════════════ */

/* Both bands span full viewport */
.region-featured-bottom-first,
.region-featured-bottom-second {
  width: 100%;
  max-width: 100vw;
  margin: 0;
  padding: 0;
  position: relative;
}

/* ─── REGION 1 — PRODUCT CTA (featured-bottom-first) ─── */
.region-featured-bottom-first {
  background: var(--fg-paper-lift);
  border-top: 3px double var(--fg-ink);
  border-bottom: 0.5px solid var(--fg-hairline);
  padding: 0;
}

.region-featured-bottom-first > .block {
  max-width: var(--fg-column-prose);
  margin: 0 auto;
  padding: 32px clamp(16px, 4vw, 48px);
  background: transparent;
  border: 0;
}

/* Block title in product region becomes small kicker label */
.region-featured-bottom-first .block-title,
.region-featured-bottom-first h2.block-title,
.region-featured-bottom-first > .block > h2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--fg-gold-dark);
  font-weight: 500;
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  line-height: 1.3;
}

/* Content inside block — headlines, paragraphs, links */
.region-featured-bottom-first .block-content h2,
.region-featured-bottom-first .block-content h3,
.region-featured-bottom-first .content h2,
.region-featured-bottom-first .content h3,
.region-featured-bottom-first .field--name-body h2,
.region-featured-bottom-first .field--name-body h3 {
  font-family: Georgia, serif;
  font-size: clamp(20px, 1.5vw + 1rem, 26px);
  color: var(--fg-ink);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.3px;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  text-transform: none;
}

.region-featured-bottom-first h2 strong,
.region-featured-bottom-first h3 strong {
  font-weight: 600;
}

.region-featured-bottom-first p {
  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--fg-ink-soft);
  margin-bottom: 14px;
  max-width: 60ch;
}

.region-featured-bottom-first p:last-child {
  margin-bottom: 0;
}

/* Product region lists — scannable cards with gold-dark left border */
.region-featured-bottom-first ul {
  list-style: none;
  padding: 0;
  margin: 14px 0 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2px;
  border-top: 0.5px solid var(--fg-hairline);
}

.region-featured-bottom-first ul li {
  list-style: none;
  padding: 0;
  margin: 0;
  position: static;
  border: 0;
}

.region-featured-bottom-first ul li::before {
  content: "";
  display: none;
}

/* Product link cards — TEAL blue text with underline (matches sidebar
   blue link style). No animation. No transforms. Pure static appearance
   with only color change on hover. The underline is present in rest
   state AND hover state, so there's no text-decoration transition
   that could trigger a subpixel rerender. */
.region-featured-bottom-first ul li a,
.region-featured-bottom-first ul li a:link,
.region-featured-bottom-first ul li a:visited {
  display: block;
  padding: 12px 14px;
  background: transparent;
  border-left: 2px solid var(--fg-gold-dark);
  border-bottom: 0.5px solid var(--fg-hairline);
  color: var(--fg-teal);
  font-family: Georgia, serif;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 400;
  text-decoration: underline;
  text-decoration-color: var(--fg-teal);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.region-featured-bottom-first ul li a:hover,
.region-featured-bottom-first ul li a:focus {
  background-color: var(--fg-paper-aged);
  border-left-color: var(--fg-teal);
  color: var(--fg-teal-dark);
  text-decoration: underline;
  text-decoration-color: var(--fg-teal-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.region-featured-bottom-first ul li a:focus-visible {
  outline: 2px solid var(--fg-gold-dark);
  outline-offset: -2px;
}

/* Force consistent weight and remove any inherited font-weight shifts
   from <strong> or other children inside these cards */
.region-featured-bottom-first ul li a strong,
.region-featured-bottom-first ul li a b {
  font-weight: 400;
  color: inherit;
}

/* ═══════════════════════════════════════════════════════════════
   STANDALONE GAMIFIED CTA — .cta-animated
   ═══════════════════════════════════════════════════════════════
   For ONE prominent CTA link where we want maximum CTR — like
   "See MBA Essay Examples (preview)" at the end of an article.
   The animation only appears on this specific class, so there's
   no grid-wide shake risk.

   Apply in content by adding the class:
     <a href="/all-mba-essay-examples" class="cta-animated">
       See MBA Essay Examples (preview)
     </a>

   Or wrap like:
     <p class="cta-animated-wrap">
       Want to read Essay Examples before purchasing?
       <a href="/all-mba-essay-examples" class="cta-animated">
         See MBA Essay Examples (preview)
       </a>
     </p>
   ═══════════════════════════════════════════════════════════════ */

.cta-animated,
a.cta-animated,
.region-featured-bottom-first a.cta-animated,
.field--name-body a.cta-animated,
.node__content a.cta-animated,
article a.cta-animated {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--fg-ink);
  color: var(--fg-paper) !important;
  border: 1px solid var(--fg-ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-decoration: none !important;
  border-radius: 0;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  margin: 8px 0;
}

.cta-animated::after,
a.cta-animated::after {
  content: "→";
  display: inline-block;
  font-family: Arial, sans-serif;
  font-weight: 500;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.cta-animated:hover,
a.cta-animated:hover {
  background: var(--fg-teal);
  border-color: var(--fg-teal);
  color: var(--fg-paper) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(14, 116, 144, 0.3);
  text-decoration: none !important;
}

.cta-animated:hover::after {
  transform: translateX(4px);
}

.cta-animated:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(14, 116, 144, 0.2);
}

.cta-animated:focus-visible {
  outline: 2px solid var(--fg-gold-dark);
  outline-offset: 3px;
}

/* Softer variant — ghost button style for secondary CTAs */
.cta-animated--ghost {
  background: transparent;
  color: var(--fg-ink) !important;
  border-color: var(--fg-ink);
}

.cta-animated--ghost:hover {
  background: var(--fg-ink);
  color: var(--fg-paper) !important;
  border-color: var(--fg-ink);
  box-shadow: 0 4px 10px rgba(26, 26, 26, 0.2);
}

/* Primary CTA button in product region — subtle scale gamification
   using transform (GPU-accelerated, no layout shift) */
.region-featured-bottom-first a.btn,
.region-featured-bottom-first a.btn-primary,
.region-featured-bottom-first .btn-primary {
  display: inline-block;
  margin-top: 6px;
  margin-right: 10px;
  padding: 11px 22px;
  background: var(--fg-ink);
  color: var(--fg-paper);
  border: 1px solid var(--fg-ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none !important;
  border-radius: 0;
  position: relative;
  transform-origin: center;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.region-featured-bottom-first a.btn-primary:hover,
.region-featured-bottom-first .btn-primary:hover {
  background: var(--fg-teal);
  border-color: var(--fg-teal);
  color: var(--fg-paper);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(14, 116, 144, 0.25);
}

.region-featured-bottom-first a.btn-primary:active,
.region-featured-bottom-first .btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(14, 116, 144, 0.15);
}

.region-featured-bottom-first a.btn-secondary {
  background: transparent;
  color: var(--fg-ink);
  border: 1px solid var(--fg-ink);
}

.region-featured-bottom-first a.btn-secondary:hover {
  background: var(--fg-ink);
  color: var(--fg-paper);
}

/* Book-cover + text layout for product promo */
.region-featured-bottom-first .promo-with-image,
.region-featured-bottom-first .field--type-image + .field--type-text-with-summary {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 28px;
  align-items: start;
}

/* Images inside product block — breathing room, no harsh edges */
.region-featured-bottom-first img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 0 16px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-radius: 2px;
}

/* If image is floated (WYSIWYG pattern: `<img style="float:left">`
   followed by text), add proper spacing around it */
.region-featured-bottom-first img[style*="float:left"],
.region-featured-bottom-first img[style*="float: left"],
.region-featured-bottom-first .align-left img,
.region-featured-bottom-first img.align-left {
  float: left;
  margin: 4px 24px 16px 0;
  max-width: 200px;
  clear: both;
}

.region-featured-bottom-first img[style*="float:right"],
.region-featured-bottom-first img[style*="float: right"],
.region-featured-bottom-first .align-right img,
.region-featured-bottom-first img.align-right {
  float: right;
  margin: 4px 0 16px 24px;
  max-width: 200px;
  clear: both;
}

/* Clear floats after block content */
.region-featured-bottom-first > .block::after,
.region-featured-bottom-first .block-content::after,
.region-featured-bottom-first .field--name-body::after {
  content: "";
  display: table;
  clear: both;
}

/* If the block uses a two-column flex layout manually (image div + text div) */
.region-featured-bottom-first .block-content > div:first-child img,
.region-featured-bottom-first .field--name-body > div:first-child img {
  float: left;
  margin: 0 24px 16px 0;
  max-width: 180px;
}

/* ─── REGION 2 — NEWSLETTER (featured-bottom-second) ─── */
.region-featured-bottom-second {
  background: var(--fg-paper-aged);
  border-top: 0.5px solid var(--fg-hairline);
  border-bottom: 3px double var(--fg-ink);
  padding: 0;
}

.region-featured-bottom-second > .block {
  max-width: var(--fg-column-prose);
  margin: 0 auto;
  padding: 28px clamp(16px, 4vw, 48px);
  background: transparent;
  border: 0;
  text-align: left;
}

/* Newsletter block title — quieter editorial label */
.region-featured-bottom-second .block-title,
.region-featured-bottom-second h2.block-title,
.region-featured-bottom-second > .block > h2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--fg-gold-dark);
  font-weight: 500;
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  line-height: 1.3;
}

/* Newsletter headline — Georgia italic, lighter feel than product */
.region-featured-bottom-second .block-content h2,
.region-featured-bottom-second .block-content h3,
.region-featured-bottom-second p:first-of-type {
  font-family: Georgia, serif;
  font-size: clamp(17px, 1vw + 0.875rem, 20px);
  color: var(--fg-ink);
  font-weight: 400;
  font-style: italic;
  line-height: 1.4;
  letter-spacing: -0.2px;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  text-transform: none;
  max-width: 60ch;
}

.region-featured-bottom-second p {
  font-family: Georgia, serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-ink-soft);
  margin-bottom: 12px;
  max-width: 60ch;
}

/* Newsletter form — horizontal layout at desktop, stacked at mobile */
.region-featured-bottom-second form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  margin-top: 14px;
}

.region-featured-bottom-second .form-item,
.region-featured-bottom-second .form-wrapper {
  flex: 1 1 240px;
  margin: 0;
}

.region-featured-bottom-second label,
.region-featured-bottom-second .form-label {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fg-ink-muted);
  display: block;
  margin-bottom: 4px;
}

.region-featured-bottom-second input[type="email"],
.region-featured-bottom-second input[type="text"] {
  background: var(--fg-paper);
  border: 0.5px solid var(--fg-ink);
  border-radius: 0;
  color: var(--fg-ink);
  font-family: Georgia, serif;
  font-size: 15px;
  padding: 10px 12px;
  width: 100%;
}

.region-featured-bottom-second input:focus {
  border-color: var(--fg-teal);
  box-shadow: 0 0 0 2px rgba(14, 116, 144, 0.15);
  outline: 0;
}

.region-featured-bottom-second input[type="submit"],
.region-featured-bottom-second button[type="submit"],
.region-featured-bottom-second .btn-primary {
  background: var(--fg-ink);
  color: var(--fg-paper);
  border: 1px solid var(--fg-ink);
  padding: 10px 22px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
  margin-top: 18px;
  transition: background 0.15s ease;
}

.region-featured-bottom-second input[type="submit"]:hover,
.region-featured-bottom-second button[type="submit"]:hover,
.region-featured-bottom-second .btn-primary:hover {
  background: var(--fg-teal);
  border-color: var(--fg-teal);
}

/* ─── MOBILE — BOTH REGIONS ─── */
@media (max-width: 767px) {
  .region-featured-bottom-first > .block,
  .region-featured-bottom-second > .block {
    padding: 22px 16px;
  }

  .region-featured-bottom-first ul {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .region-featured-bottom-first .promo-with-image,
  .region-featured-bottom-first .field--type-image + .field--type-text-with-summary {
    grid-template-columns: 100px 1fr;
    gap: 16px;
  }

  .region-featured-bottom-first a.btn,
  .region-featured-bottom-first a.btn-primary,
  .region-featured-bottom-first a.btn-secondary {
    display: block;
    margin-bottom: 8px;
    margin-right: 0;
    text-align: center;
  }

  .region-featured-bottom-second form {
    flex-direction: column;
    gap: 12px;
  }

  .region-featured-bottom-second input[type="submit"],
  .region-featured-bottom-second button[type="submit"] {
    margin-top: 0;
    width: 100%;
  }
}

/* Inline-style defenses for WYSIWYG paste artifacts */
article *[style],
.node__content *[style],
.field-content *[style],
.field--name-body *[style] {
  background: transparent;
  font-family: Georgia, 'Times New Roman', serif;
}

*[style*="Roboto"],
*[style*="Arial, sans-serif"] {
  font-family: Georgia, 'Times New Roman', serif;
}

*[style*="background-color:rgb(255"],
*[style*="background-color: rgb(255"],
*[style*="background-color:#fff"],
*[style*="background-color: #fff"] {
  background: transparent;
  background-color: transparent;
}

*[style*="color:rgb(118"],
*[style*="color: rgb(118"],
*[style*="color:#767676"] {
  color: inherit;
}

.region-highlighted *[style],
.site-footer *[style] {
  background: transparent;
  color: var(--fg-ink);
  font-family: Georgia, 'Times New Roman', serif;
}

/* Paywall */
#paywall-wrapper {
  padding: 35px;
  border: 0.5px solid var(--fg-hairline);
  border-radius: 0;
  position: relative;
  margin-bottom: 30px;
  background: var(--fg-paper-aged);
}

#paywall-wrapper * {
  text-align: center;
}

#paywall-wrapper .btn {
  margin-top: 20px;
}

/* ═══════════════════════════════════════════════════════════════
   ADMIN PAGE PROTECTION
   ═══════════════════════════════════════════════════════════════
   If this CSS somehow loads on admin pages (because "Use admin theme
   when editing content" is disabled, or apu is set as admin theme),
   completely neutralize its effects. Admin theme (Claro/Seven) takes
   over. This applies to every admin path.
   ═══════════════════════════════════════════════════════════════ */

body.path-admin,
body.path-admin *,
body[class*="page-admin"],
body[class*="page-admin"] *,
body.path-user,
body.path-user *,
body[class*="page-node-edit"],
body[class*="page-node-edit"] *,
body[class*="page-node-add"],
body[class*="page-node-add"] *,
body[class*="page-user-edit"],
body[class*="page-user-edit"] *,
body.path-taxonomy-term-edit,
body.path-taxonomy-term-edit *,
body.maintenance-page,
body.maintenance-page * {
  background: revert !important;
  background-color: revert !important;
  color: revert !important;
  font-family: revert !important;
  font-size: revert !important;
  line-height: revert !important;
  font-weight: revert !important;
  font-style: revert !important;
  text-transform: revert !important;
  letter-spacing: revert !important;
  border: revert !important;
  border-radius: revert !important;
  padding: revert !important;
  margin: revert !important;
  text-decoration: revert !important;
}

/* Admin toolbar — always let browser/toolbar CSS win */
#toolbar-bar,
#toolbar-bar *,
#toolbar-administration,
#toolbar-administration *,
.toolbar,
.toolbar *,
.toolbar-bar,
.toolbar-bar *,
.toolbar-tray,
.toolbar-tray *,
.toolbar-menu,
.toolbar-menu *,
.toolbar-icon {
  background: revert !important;
  background-color: revert !important;
  color: revert !important;
  font-family: revert !important;
  font-size: revert !important;
  font-weight: revert !important;
  text-decoration: revert !important;
  border-radius: revert !important;
  padding: revert !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* CKEditor / WYSIWYG editing surfaces always use defaults */
.ck-editor,
.ck-editor *,
.ck-content,
.ck-content *,
.cke_contents,
.cke_contents *,
.ckeditor-component,
.filter-wrapper,
.filter-wrapper * {
  background: revert !important;
  color: revert !important;
  font-family: revert !important;
  font-size: revert !important;
  line-height: revert !important;
}

/* Contextual links (edit pencil icons on blocks) */
.contextual,
.contextual *,
.contextual-links,
.contextual-links *,
.contextual-region > .contextual {
  background: revert !important;
  color: revert !important;
  font-family: revert !important;
  font-size: revert !important;
}

/* Local tasks (node edit/delete tabs) */
.tabs-wrapper,
.tabs-wrapper *,
ul.tabs,
ul.tabs * {
  background: revert !important;
  color: revert !important;
  font-family: revert !important;
}

/* Quick edit / in-place editing */
.quickedit,
.quickedit *,
.quickedit-toolbar,
.quickedit-toolbar *,
#quickedit-entity-toolbar {
  background: revert !important;
  color: revert !important;
  font-family: revert !important;
}

/* Messages on admin pages stay default-styled */
body.path-admin .messages,
body[class*="page-admin"] .messages,
body[class*="page-node-edit"] .messages,
body[class*="page-node-add"] .messages {
  background: revert !important;
  border: revert !important;
  border-left: revert !important;
  color: revert !important;
  font-family: revert !important;
  padding: revert !important;
}

/* Responsive — clamp() handles size scaling above; this block is for
   layout shifts that don't interpolate well (sidebar stacking, padding) */
@media (max-width: 767px) {
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  .pull-quote { padding: 18px 20px; }
  .case-study { padding: 16px 18px; margin: 20px 0; }
  .site-footer,
  footer.site-footer { padding: 28px 16px 16px; }

  /* Taxonomy view page mobile fixes */
  .page-view-taxonomy-term .layout-content,
  .page-taxonomy .layout-content,
  .view-content,
  .views-row {
    max-width: 100%;
  }

  .views-row img,
  .view-content img {
    max-width: 100%;
    height: auto;
  }

  /* Views list pages mobile — compact padding */
  .views-row {
    padding: 14px 12px;
  }

  /* Views grid on mobile — single column */
  .view-content ul,
  .views-view-grid {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .view-content ul li a {
    font-size: 14px;
    padding: 11px 14px;
  }

  /* Related block on mobile — ensure full width with padding */
  .block-views-block,
  .views-element-container {
    max-width: 100%;
    padding: 0 4px;
  }

  /* Footer columns stack on mobile with proper padding */
  .site-footer .region,
  .site-footer__bottom .region {
    padding: 0 8px;
    margin-bottom: 20px;
  }

  /* Container width protection */
  .container,
  .container-fluid {
    padding-left: 16px;
    padding-right: 16px;
    max-width: 100%;
  }

  /* Navbar on mobile - allow wrap */
  .navbar {
    padding-left: 12px;
    padding-right: 12px;
  }

  .navbar-brand img {
    max-height: 48px;
  }
}

@media (max-width: 480px) {
  .container,
  .container-fluid,
  .layout-content,
  .view-content {
    padding-left: 12px;
    padding-right: 12px;
  }

  .views-row img {
    max-width: 100%;
  }

  /* Views cards even tighter on narrow phones */
  .view-content ul li a {
    font-size: 13.5px;
    padding: 10px 12px;
  }
}

/* Utilities */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Skip-to-content link */
.visually-hidden-focusable:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  width: auto;
  height: auto;
  padding: 10px 20px;
  background: var(--fg-ink);
  color: var(--fg-paper);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  z-index: 10000;
  border: 2px solid var(--fg-gold-dark);
  border-radius: 0;
  clip: auto;
  overflow: visible;
  white-space: normal;
}

/* Reading measure — constrain body prose to comfortable line length.
   At 18px Georgia, 65ch produces ~720px line width (editorial sweet spot). */
article .field--name-body p,
article .node__content > p,
.node__content .field--name-body p {
  max-width: 65ch;
}

/* But allow tables, figures, images, and code blocks full width */
article table,
article figure,
article img,
article .case-study,
article .pull-quote,
article .prompt-box,
article pre,
article iframe,
.node__content table,
.node__content figure,
.node__content img,
.node__content .case-study,
.node__content .pull-quote,
.node__content .prompt-box,
.node__content pre {
  max-width: 100%;
}

/* Content horizontal padding — clamp scales padding to viewport.
   Applies to articles, nodes, and view-rendered pages (taxonomy, listings) */
main > section.section,
.layout-content main,
article.node,
.view-content,
.page-view-taxonomy-term .layout-content,
.page-taxonomy .layout-content,
.region-content > .block {
  padding-left: clamp(16px, 3vw, 32px);
  padding-right: clamp(16px, 3vw, 32px);
}

/* Focus-visible treatment for content links */
article a:focus-visible,
.node__content a:focus-visible,
.field--name-body a:focus-visible {
  outline: 2px solid var(--fg-gold-dark);
  outline-offset: 2px;
}

/* In-prose links get a subtle dotted underline treatment */
article .field--name-body p a,
.node__content .field--name-body p a {
  text-decoration-style: dotted;
  text-decoration-color: var(--fg-gold-dark);
  text-underline-offset: 3px;
}

article .field--name-body p a:hover,
.node__content .field--name-body p a:hover {
  text-decoration-style: solid;
  text-decoration-color: var(--fg-teal);
  color: var(--fg-teal-dark);
}


/* ═══════════════════════════════════════════════════════════════
   F1GMAT PREMIUM — SINGLE-COLUMN v5 (2026-05-09)

   Replaces all earlier appended blocks. Key fixes vs v4:

   1. Selectors target body.layout-no-sidebars (the canonical Drupal
      class), NOT main.col-md-12 (which the rendered DOM does not
      use — main has just class="col" with no size suffix).

   2. Removes the section.section padding offset that was pushing
      H1 and body 16-32px right of the breadcrumb. Now everything
      sits at the same left edge.

   3. Strips Bootstrap's row negative margin and col padding within
      our no-sidebar context so #main's edge is the single anchor.

   Architecture (no-sidebar pages):
     viewport
       #main 1480px centered, side-pad 20-40px
         breadcrumb 880px centered
         row (no margin)
           main 880px centered (no col padding)
             section.section (no extra padding)
               H1, body, charts all at the same left edge

   Tunable knobs at :root.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --apu-page-max: 1480px;
  --apu-prose: 880px;
  --apu-wide: 1280px;
  --fg-body-size: 1.1875rem;
  --fg-body-line: 1.7;
  --apu-side-pad: clamp(20px, 3vw, 40px);
}

/* Outer container, all pages */
#main,
#main.container,
#main.container-fluid {
  max-width: var(--apu-page-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--apu-side-pad);
  padding-right: var(--apu-side-pad);
  box-sizing: border-box;
}

/* ── No-sidebar pages: unified prose-width architecture ──────── */

/* Breadcrumb capped to prose width and centered */
body.layout-no-sidebars #main > #block-apu-breadcrumbs,
body.layout-no-sidebars #main > .region-breadcrumb {
  max-width: var(--apu-prose);
  margin-left: auto;
  margin-right: auto;
  padding-top: 1rem;
  padding-bottom: 0.5rem;
}

/* Strip Bootstrap row's negative margin so col content does not
   extend outside #main's padding */
body.layout-no-sidebars #main > .row,
body.layout-no-sidebars #main > .row.row-offcanvas {
  margin-left: 0;
  margin-right: 0;
  display: block;
}

/* Main capped to prose width, no col padding */
body.layout-no-sidebars #main > .row > main,
body.layout-no-sidebars #main > .row > main.col,
body.layout-no-sidebars #main > .row > main.main-content {
  max-width: var(--apu-prose);
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  flex: none;
  width: 100%;
}

/* Remove section.section's extra clamp padding so H1 and body
   sit at the SAME left edge as breadcrumb */
body.layout-no-sidebars main > section.section,
body.layout-no-sidebars .layout-content main {
  padding-left: 0;
  padding-right: 0;
}

/* .chart-wide breakout for figures and tables on no-sidebar pages */
@media (min-width: 992px) {
  body.layout-no-sidebars main .chart-wide,
  body.layout-no-sidebars main figure.chart-wide,
  body.layout-no-sidebars .field--name-body .chart-wide {
    max-width: var(--apu-wide);
    margin-left: calc((var(--apu-prose) - var(--apu-wide)) / 2);
    margin-right: calc((var(--apu-prose) - var(--apu-wide)) / 2);
    width: auto;
  }
}

/* ── Body typography (sizes only, colors inherit from palette) ── */
article p, article li,
.field--name-body p, .field--name-body li,
.node__content p, .node__content li,
main p, main li,
.region-content p, .region-content li {
  font-family: Georgia, "Adobe Caslon Pro", "Times New Roman", serif;
  font-size: var(--fg-body-size);
  line-height: var(--fg-body-line);
  letter-spacing: 0;
}

article p, .field--name-body p, .node__content p, main p {
  margin: 0 0 1.25rem;
}

/* Headings */
main h1, main h1.title, main h1.page-title,
#main .block-page-title-block h1,
.block-page-title-block h1,
article h1, .node__content h1 {
  font-family: Georgia, "Adobe Caslon Pro", "Times New Roman", serif;
  font-size: 2.75rem;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin: 1rem 0 1.75rem;
  text-align: left;
}

main h2, article h2,
.field--name-body h2, .node__content h2,
.region-content h2 {
  font-family: Georgia, "Adobe Caslon Pro", "Times New Roman", serif;
  font-size: 1.875rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.3px;
  margin: 2.5rem 0 0.75rem;
}

main h3, article h3,
.field--name-body h3, .node__content h3 {
  font-family: Georgia, "Adobe Caslon Pro", "Times New Roman", serif;
  font-size: 1.4rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.2px;
  margin: 2rem 0 0.5rem;
}

main h4, article h4,
.field--name-body h4, .node__content h4 {
  font-family: Georgia, "Adobe Caslon Pro", "Times New Roman", serif;
  font-size: 1.2rem;
  line-height: 1.35;
  font-weight: 700;
  margin: 1.75rem 0 0.5rem;
}

main h5, article h5,
.field--name-body h5, .node__content h5 {
  font-family: Georgia, "Adobe Caslon Pro", "Times New Roman", serif;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 1.5rem 0 0.5rem;
}

@media (max-width: 768px) {
  :root {
    --fg-body-size: 1.0625rem;
  }
  main h1, main h1.page-title,
  .block-page-title-block h1, article h1 {
    font-size: 2rem;
  }
  main h2, article h2 {
    font-size: 1.5rem;
  }
  main h3, article h3 {
    font-size: 1.2rem;
  }
}

/* Breadcrumb hairline cleanup */
#block-apu-breadcrumbs,
#block-apu-breadcrumbs > .content,
#block-apu-breadcrumbs nav.breadcrumb,
#block-apu-breadcrumbs nav.breadcrumb > ul,
.block-system-breadcrumb-block,
.block-system-breadcrumb-block > .content,
.block-system-breadcrumb-block nav.breadcrumb,
.region-breadcrumb > nav,
.region-breadcrumb > .block,
.breadcrumb,
nav.breadcrumb,
.block-page-title-block,
#block-apu-pagetitle,
.block-page-title-block > .content {
  border-top: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#block-apu-breadcrumbs nav.breadcrumb,
.block-system-breadcrumb-block nav.breadcrumb,
.breadcrumb {
  padding-top: 0;
  padding-bottom: 0.25rem;
  margin: 0;
}

#block-apu-breadcrumbs {
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.06) !important;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
}