/* American Camino Outfitters - site-wide theme layer (Cassiopeia loads this file automatically as template.user). */
/* Joomla 6 Cassiopeia compiles Bootstrap with an empty variable prefix, so the reference --bs-* tokens are written here as --* (e.g. --btn-bg). */

/* ---------- Self-hosted fonts (SIL OFL 1.1, latin subset) ---------- */
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/barlow-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/barlow-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-condensed-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-condensed-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:italic;font-weight:600;font-display:swap;src:url(../fonts/barlow-condensed-latin-600-italic.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:italic;font-weight:700;font-display:swap;src:url(../fonts/barlow-condensed-latin-700-italic.woff2) format("woff2")}
@font-face{font-family:"Kalam";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/kalam-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Kalam";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/kalam-latin-700-normal.woff2) format("woff2")}

/* American Camino Outfitters - Bootstrap 5.3 theme layer (Joomla 6)
   Load AFTER Bootstrap (Joomla: template user.css / joomla.asset.json dependency on "bootstrap.css").
   CSS-only: no Sass rebuild needed. Token values mirror tokens.json. */

:root,
[data-bs-theme="light"] {
  /* brand */
  --aco-navy: #1e355d;
  --aco-navy-dark: #142542;
  --aco-slate: #6b7b95;
  --aco-mist: #adb7c5;
  --aco-frost: #e0e5ea;
  --aco-red: #b2292e;
  --aco-red-dark: #8e1f23;
  --aco-gold: #e0a526;
  --aco-ink: #1b2433;
  --aco-ink-muted: #4a5872;
  --aco-surface-alt: #f3f5f8;
  --aco-font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;

  /* Bootstrap theme colours */
  --primary: #1e355d;          --primary-rgb: 30, 53, 93;
  --secondary: #4a5872;        --secondary-rgb: 74, 88, 114;
  --success: #2d6a4f;          --success-rgb: 45, 106, 79;
  --info: #2f6690;             --info-rgb: 47, 102, 144;
  --warning: #e0a526;          --warning-rgb: 224, 165, 38  ;/*224, 165, 38*/
  --danger: #b2292e;           --danger-rgb: 178, 41, 46;
  --light: #f3f5f8;            --light-rgb: 243, 245, 248;
  --dark: #142542;             --dark-rgb: 20, 37, 66;

  --primary-text-emphasis: #142542;
  --primary-bg-subtle: #e0e5ea;
  --primary-border-subtle: #adb7c5;
  --danger-text-emphasis: #8e1f23;
  --danger-bg-subtle: #f6e1e2;
  --danger-border-subtle: #e2a9ab;
  --warning-text-emphasis: #5c4106;
  --warning-bg-subtle: #fbf0d6;
  --warning-border-subtle: #f0d088;
  --success-text-emphasis: #1c4432;
  --success-bg-subtle: #dcebe3;
  --success-border-subtle: #a6cbb8;
  --info-text-emphasis: #1e4260;
  --info-bg-subtle: #dde9f2;
  --info-border-subtle: #a7c4da;

  /* body & type */
  --body-font-family: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --body-font-size: 1.0625rem;
  --body-line-height: 1.6;
  --body-color: #1b2433;       --body-color-rgb: 27, 36, 51;
  --body-bg: #ffffff;
  --emphasis-color: #142542;
  --secondary-color: #4a5872;
  --tertiary-bg: #f3f5f8;      --tertiary-bg-rgb: 243, 245, 248;
  --heading-color: #1e355d;
  --link-color: #1e355d;       --link-color-rgb: 30, 53, 93;
  --link-hover-color: #b2292e; --link-hover-color-rgb: 178, 41, 46;

  /* shape */
  --border-color: #e0e5ea;
  --border-radius-sm: 4px;
  --border-radius: 6px;
  --border-radius-lg: 10px;
  --border-radius-pill: 50rem;
  --box-shadow-sm: 0 1px 2px rgba(20, 37, 66, .08);
  --box-shadow: 0 8px 24px rgba(20, 37, 66, .12);
  --focus-ring-color: rgba(30, 53, 93, .35);

  /* Cassiopeia (Joomla's default template) reads these */
  --cassiopeia-color-primary: #1e355d;
  --cassiopeia-color-link: #1e355d;
  --cassiopeia-color-hover: #b2292e;
  --cassiopeia-font-family-body: var(--body-font-family);
  --cassiopeia-font-family-headings: var(--aco-font-display);
  /*--mod_grid _card--*/
  --white-1: rgba(255, 253, 248, 1);
}
/*----------- Body ---------------*/
body {
  background:#f6f1e7 url(../images/textures/paper.jpg) repeat;
}
.container-top-b {
  position: relative;
  padding: 110px 0 0;
  background: #ebe2cf url(../images/textures/paper.jpg);
  background-blend-mode: multiply;
}

/* ---------- Headings ---------- */
h1, h2, h3, h4, .h1, .h2, .h3, .h4, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--aco-font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: .005em;
}
h1, .h1 { text-transform: uppercase; }
h3, .h3, h4, .h4 { font-weight: 600; }
.aco-display { font-family: var(--aco-font-display); font-weight: 700; text-transform: uppercase; line-height: 1; letter-spacing: .01em; }
.aco-eyebrow { font-family: var(--aco-font-display); font-size: .9375rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--aco-red); }
.lead { font-size: 1.25rem; font-weight: 400; }

/* ---------- Buttons ---------- */
.btn { --btn-font-weight: 600; --btn-padding-x: 1.25rem; --btn-padding-y: .5rem; }
.btn-lg { --btn-padding-x: 1.75rem; --btn-padding-y: .75rem; --btn-font-size: 1.125rem; }
.btn-primary {
  --btn-bg: #1e355d; --btn-border-color: #1e355d;
  --btn-hover-bg: #142542; --btn-hover-border-color: #142542;
  --btn-active-bg: #142542; --btn-active-border-color: #142542;
  --btn-disabled-bg: #6b7b95; --btn-disabled-border-color: #6b7b95;
  --btn-focus-shadow-rgb: 30, 53, 93;
}
.btn-outline-primary {
  --btn-color: #1e355d; --btn-border-color: #1e355d;
  --btn-hover-bg: #1e355d; --btn-hover-border-color: #1e355d; --btn-hover-color: #fff;
  --btn-active-bg: #142542; --btn-active-border-color: #142542; --btn-active-color: #fff;
  --btn-disabled-color: #6b7b95; --btn-disabled-border-color: #6b7b95;
  --btn-focus-shadow-rgb: 30, 53, 93;
}
.btn-accent, .btn-danger {
  --btn-color: #fff; --btn-bg: #b2292e; --btn-border-color: #b2292e;
  --btn-hover-color: #fff; --btn-hover-bg: #8e1f23; --btn-hover-border-color: #8e1f23;
  --btn-active-color: #fff; --btn-active-bg: #8e1f23; --btn-active-border-color: #8e1f23;
  --btn-disabled-color: #fff; --btn-disabled-bg: #c9787b; --btn-disabled-border-color: #c9787b;
  --btn-focus-shadow-rgb: 178, 41, 46;
}
.btn-outline-accent {
  --btn-color: #b2292e; --btn-border-color: #b2292e;
  --btn-hover-color: #fff; --btn-hover-bg: #b2292e; --btn-hover-border-color: #b2292e;
  --btn-active-color: #fff; --btn-active-bg: #8e1f23; --btn-active-border-color: #8e1f23;
  --btn-focus-shadow-rgb: 178, 41, 46;
}
.btn-light {
  --btn-color: #1e355d; --btn-bg: #fff; --btn-border-color: #fff;
  --btn-hover-color: #1e355d; --btn-hover-bg: #e0e5ea; --btn-hover-border-color: #e0e5ea;
  --btn-active-bg: #e0e5ea;
}
.btn-outline-light { --btn-hover-color: #1e355d; --btn-active-color: #1e355d; }

/* ---------- Accent utilities (Bootstrap has no Sass map here; hand-written to match BS naming) ---------- */
.text-accent { color: #b2292e !important; }
.bg-accent { background-color: #b2292e !important; }
.text-bg-accent { color: #fff !important; background-color: #b2292e !important; }
.border-accent { border-color: #b2292e !important; }
.link-accent { color: #b2292e !important; text-decoration-color: rgba(178, 41, 46, .5) !important; }
.link-accent:hover { color: #8e1f23 !important; }
.bg-navy-dark { background-color: #142542 !important; }
.text-mist { color: #adb7c5 !important; }

/* ---------- Forms ---------- */
.form-control, .form-select { border-color: #6b7b95; }
.form-control:focus, .form-select:focus {
  border-color: #1e355d;
  box-shadow: 0 0 0 .25rem rgba(30, 53, 93, .25);
}
.form-check-input { border-color: #6b7b95; }
.form-check-input:checked { background-color: #1e355d; border-color: #1e355d; }
.form-check-input:focus { border-color: #1e355d; box-shadow: 0 0 0 .25rem rgba(30, 53, 93, .25); }
.form-label { font-weight: 600; color: #1b2433; }
.form-text { color: #4a5872; }
.form-range::-webkit-slider-thumb { background-color: #1e355d; }
.form-range::-moz-range-thumb { background-color: #1e355d; }

/* ---------- Components that compile hex in Bootstrap's dist CSS ---------- */
.nav-pills { --nav-pills-link-active-bg: #1e355d; }
.nav { --nav-link-color: #1e355d; --nav-link-hover-color: #b2292e; }
.pagination { --pagination-color: #1e355d; --pagination-hover-color: #142542; --pagination-active-bg: #1e355d; --pagination-active-border-color: #1e355d; --pagination-focus-box-shadow: 0 0 0 .25rem rgba(30, 53, 93, .25); }
.dropdown-menu { --dropdown-link-active-bg: #1e355d; }
.list-group { --list-group-active-bg: #1e355d; --list-group-active-border-color: #1e355d; }
.progress, .progress-stacked { --progress-bar-bg: #1e355d; }
.accordion { --accordion-active-color: #142542; --accordion-active-bg: #e0e5ea; --accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(30, 53, 93, .25); }
.navbar-dark, .navbar[data-bs-theme="dark"] { --navbar-color: rgba(255, 255, 255, .85); --navbar-hover-color: #fff; --navbar-active-color: #fff; }
.badge { font-weight: 600; letter-spacing: .02em; }
.card { --card-border-color: #e0e5ea; --card-title-color: #1e355d; }

/* ---------- Brand extensions (aco-*) ---------- */
.aco-section { padding-block: 3rem; }
@media (min-width: 992px) { .aco-section { padding-block: 5rem; } }

.aco-navbar { border-bottom: 4px solid #b2292e; }
.aco-navbar .navbar-brand img { height: 56px; width: auto; }
.aco-navbar .nav-link { font-family: var(--aco-font-display); font-size: 1.125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

.aco-hero { position: relative; color: #fff; background: #1e355d center / cover no-repeat; }
.aco-hero::before { content: ""; position: absolute; inset: 0; background: rgba(20, 37, 66, .72); }
.aco-hero > * { position: relative; }
.aco-hero .aco-eyebrow { color: #e0a526; }
.aco-hero h1, .aco-hero .h1, .aco-hero .aco-display { color: #fff; }

.aco-tour-card { transition: box-shadow .2s ease, transform .2s ease; }
.aco-tour-card:hover { box-shadow: var(--box-shadow); transform: translateY(-2px); }
.aco-tour-card .card-img-top { aspect-ratio: 4 / 3; object-fit: cover; }
.aco-tour-card .aco-price { font-family: var(--aco-font-display); font-size: 1.75rem; font-weight: 700; color: #1e355d; line-height: 1; }
@media (prefers-reduced-motion: reduce) { .aco-tour-card, .aco-tour-card:hover { transition: none; transform: none; } }

.aco-testimonial { border-top: 4px solid #b2292e; }
.aco-testimonial blockquote { font-size: 1.1875rem; line-height: 1.55; }
.aco-testimonial img { width: 64px; height: 64px; object-fit: cover; }
/* Grid Card testimonials: stack avatar, name and text from the top (the module's grid spreads them over tall cards) */
.card-item.aco-testimonial .card-item__inner { align-content: start; }
.card-item.aco-testimonial .card-item__body { display: block; }

/* ---------- Footer (version D: navy base under a wooden shelf) ----------
   Cassiopeia's "footer" position, restyled. Modules sit in a grid in their ordering:
   the first is the wide brand column (badge + tagline), the rest are link columns, and
   mod_footer_copyright (.footer-copyright) runs full width along the bottom.
   Column headings are the modules' own titles (Show Title, module style html5, h2.h6). */
.container-footer.footer { position: relative; margin-top: 22px; background: #142542; color: #adb7c5; font-size: .875rem; }
.container-footer.footer::before { content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 22px; background: linear-gradient(180deg, #d2a46a 0, #b3844d 40%, #87602f 100%); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .28), 0 12px 16px rgba(20, 37, 66, .28); z-index: 3; }
.container-footer .grid-child { display: grid; grid-template-columns: 2fr repeat(4, minmax(0, 1fr)); gap: 1.5rem; align-items: start; padding: 64px 12px 1.5rem; }
.container-footer .grid-child > :first-child { padding-right: 2rem; }
.container-footer .grid-child > * { margin: 0; min-width: 0; }
.container-footer :is(p, ul):last-child { margin-bottom: 0; }
.container-footer :is(h2, .h6) { margin-bottom: 1rem; color: #fff; font-family: var(--aco-font-display); font-size: 1rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.container-footer a:not(.btn) { color: #fff; text-decoration: none; }
.container-footer a:not(.btn):is(:hover, :focus-visible) { color: #e0a526; text-decoration: underline; }
.container-footer .mod-menu { display: grid; gap: .5rem; padding: 0; margin: 0; list-style: none; }
.container-footer .mod-menu .nav-item, .container-footer .mod-menu a { padding: 0; }
/* Footer link lists are flat: no dropdown toggles or submenus */
.container-footer .mod-menu :is(.mod-menu__toggle-sub, .icon-chevron-down, .mod-menu__sub) { display: none; }
.container-footer .mod-custom img { max-width: 88px; height: auto; }
.footer-copyright { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: .5rem !important; padding-top: 1.5rem; border-top: 1px solid rgba(173, 183, 197, .25); }
.footer-copyright__logo { width: 56px; height: auto; }
.footer-copyright__text { margin: 0; }
.footer-copyright__right { display: inline-flex; align-items: center; gap: .5rem; margin-left: auto; }
@media (max-width: 991.98px) {
  .container-footer .grid-child { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 48px; }
  .container-footer .grid-child > :first-child { grid-column: 1 / -1; padding-right: 0; }
}
@media (max-width: 575.98px) {
  .container-footer .grid-child { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Header (version D: transparent, sits on the page ground) ----------
   Cassiopeia's markup, restyled: badge (template Logo) + wordmark (CSS, inside the home link),
   main menu (mod_menu in "menu") and the CTA (mod_custom in "search") on one row from lg up.
   Below lg the mod_menu override's burger replaces both: it opens the menu full screen,
   with the CTA pinned to the bottom of the panel (mobile-menu.js). */
.container-header {
  background: none;
  box-shadow: none;
  padding-block: 1rem;
}
.container-header .grid-child { padding: 0 .75rem; }
.container-header .navbar-brand { margin: 0; padding: 0; font-size: 1rem; }
.container-header .brand-logo { display: flex; align-items: center; gap: 1rem; text-decoration: none; }
.container-header .brand-logo img { width: 80px; height: 80px; }
.container-header .brand-logo::after {
  content: "";
  width: 334px; /* wordmark is 652x43, shown 22px tall */
  height: 22px;
  background: url(../images/logos/aco-wordmark.svg) left center / contain no-repeat;
}
/* The tagline duplicates the logo's alt text, so keep it for screen readers only */
.container-header .site-description {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.container-header .mod-menu { color: var(--aco-navy); }
.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span {
  display: block;
  padding: .5rem;
  font-family: var(--aco-font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.5;
  text-transform: uppercase;
}
.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > a:focus-visible { color: var(--aco-red); }
.container-header .mod-menu > li::after { display: none; }

/* Items with children: chevron (mod_menu's toggle button) sits right of the link */
.container-header .mod-menu > li.parent { display: flex; flex-wrap: wrap; align-items: center; }
.container-header .mod-menu__toggle-sub { display: inline-flex; align-items: center; padding: .25rem; margin-left: -.5rem; border: 0; background: none; font-size: .75rem; line-height: 1; cursor: pointer; }
.container-header .mod-menu__toggle-sub .icon-chevron-down { transition: transform .2s ease; }
.container-header .mod-menu__toggle-sub[aria-expanded="true"] .icon-chevron-down { transform: rotate(180deg); }
.container-header .mod-menu > li.parent:is(:hover, :focus-within) > a { color: var(--aco-red); }
.container-header .mod-menu > li.parent > .mod-menu__sub { flex-basis: 100%; }

/*---- Misc ----*/
.our-story-brian {
    --mgc-card-bg:transparent;
  margin-top:2rem;
  .card-item__inner {
    &:has(.card-item__media){
    gap: 1rem;
      align-items: start !important;
  }
  }
  .italic {
    font-style: italic;
  }

  /* Below md the side-by-side photo (col-4) gets too narrow: stack it above the text, full width */
  @media (max-width: 767.98px) {
    .card-item__inner > .card-item__media { width: 100%; }
    .card-item__inner > .card-item__body { flex-basis: 100%; }
  }
}

.site-grid {
  margin-top:70px;
}
.itemid-101 .site-grid {
  margin-top:0;
}
img.top-100, figure.top-100 {
  top:100px !important;
}
img.top-50, figure.top-50 {
  top:50px !important;
}
img.top-25, figure.top-25 {
  top:25px !important;
}
img.top-10, figure.top-10 {
  top:25px !important;
}
img.bottom-100, figure.bottom-100 {
  bottom:100px !important;
}
img.bottom-50, figure.bottom-50 {
  bottom:50px !important;
}
img.bottom-25, figure.bottom-50 {
  bottom:25px !important;
}
img.bottom-10, figure.bottom-10 {
  bottom:10px !important;
}

@media (min-width: 992px) {
  /* Dropdowns open on hover and keyboard focus as well as on the chevron (click/Enter still toggles) */
  .container-header .mod-menu .parent:is(:hover, :focus-within) > ul { display: block; }
  .container-header .mod-menu .parent:is(:hover, :focus-within) > .mod-menu__toggle-sub .icon-chevron-down { transform: rotate(180deg); }
  .container-header .mod-menu > li.parent > .mod-menu__sub { left: 0; min-width: 13rem; padding: .5rem 0; background: #fffdf8; border-top: 3px solid var(--aco-red); box-shadow: 0 12px 24px rgba(20, 37, 66, .18); }
  .container-header .mod-menu .mod-menu__sub a { display: block; padding: .4rem 1rem; color: var(--aco-navy); font-family: var(--aco-font-display); font-size: 1rem; font-weight: 600; letter-spacing: .03em; text-decoration: none; white-space: nowrap; }
  .container-header .mod-menu .mod-menu__sub a:is(:hover, :focus-visible) { color: var(--aco-red); background: rgba(224, 165, 38, .14); text-decoration: none; }
}
@media (prefers-reduced-motion: reduce) { .container-header .mod-menu__toggle-sub .icon-chevron-down { transition: none; } }
.container-header .container-search p { margin: 0; }

@media (min-width: 992px) {
  .container-header {
    --aco-container: 960px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--aco-container)) minmax(0, 1fr);
    align-items: center;
  }
  .container-header > .grid-child { grid-column: 2; grid-row: 1; width: auto; max-width: none; margin: 0; }
  .container-header > .grid-child:not(.container-nav) { justify-self: start; }
  .container-header .container-nav { justify-self: end; flex-wrap: nowrap; align-items: center; gap: 1rem; padding-bottom: 0; }
  .container-header .container-nav .container-search { margin: 0; }
  .container-header .mod-menu { flex: 0 1 auto; gap: .25rem; }
  .container-header .mod-menu > li + li { margin-left: 0; }
}
@media (min-width: 1200px) { .container-header { --aco-container: 1140px; } }
@media (min-width: 1400px) { .container-header { --aco-container: 1320px; } }
/* ---------- Headroom header (headroom.js) ----------
   Sticky, so it keeps its place in the flow (no jump). Scrolling down slides it away, scrolling up
   brings it back on a paper background with a shadow and a slightly smaller badge.
   Cassiopeia forces position: relative !important below lg, hence the !important here.
   Pinned uses translate: none, not 0: any translate makes the header the containing block
   for the fixed mobile menu panel. */
html body .container-header { position: sticky !important; top: 0; z-index: 1000; transition: translate .3s ease, background-color .3s ease, box-shadow .3s ease; }
.container-header.aco-headroom.is-unpinned { translate: 0 -100%; }
.container-header.aco-headroom:not(.is-top) { background: #f6f1e7 url(../images/textures/paper.jpg); box-shadow: 0 6px 18px rgba(20, 37, 66, .14); }
.container-header .brand-logo { transform-origin: left center; transition: scale .3s ease; }
.container-header.aco-headroom:not(.is-top) .brand-logo { scale: .86; }
.aco-menu-open .container-header.aco-headroom { box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  html body .container-header, .container-header .brand-logo { transition: none; }
}

/* ---------- Main menu: inline from lg up, burger + full-screen panel below ---------- */
.aco-menu-toggle { display: none; }
@media (min-width: 992px) {
  .container-header .container-nav .aco-menu-panel { display: flex; align-items: center; margin: 0; padding: 0; }
}
@media (max-width: 991.98px) {
  .container-header { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 1rem; }
  .container-header > .grid-child { width: auto; margin: 0; }
  .container-header .container-nav { display: contents; }
  .container-header .container-search { display: none; }

  /* Burger -> X. It stays exactly where it is and sits above the open panel. */
  .aco-menu-toggle { position: relative; z-index: 1002; display: inline-flex; flex: none; align-items: center; justify-content: center; width: 48px; height: 48px; margin-right: .25rem; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--aco-navy); cursor: pointer; transition: color .3s ease; }
  .aco-menu-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
  .aco-menu-toggle__bars { position: relative; display: block; width: 28px; height: 20px; }
  .aco-menu-toggle__bars span { position: absolute; left: 0; width: 100%; height: 3px; border-radius: 2px; background: currentColor; transition: top .2s ease .2s, transform .2s ease, opacity .2s ease; }
  .aco-menu-toggle__bars span:nth-child(1) { top: 0; }
  .aco-menu-toggle__bars span:nth-child(2) { top: 8.5px; transform-origin: left center; }
  .aco-menu-toggle__bars span:nth-child(3) { top: 17px; }
  .aco-menu-toggle[aria-expanded="true"] { color: #fff; }
  .aco-menu-toggle[aria-expanded="true"] .aco-menu-toggle__bars span { transition: top .2s ease, transform .2s ease .2s, opacity .2s ease; }
  .aco-menu-toggle[aria-expanded="true"] .aco-menu-toggle__bars span:nth-child(1) { top: 8.5px; transform: rotate(45deg); }
  .aco-menu-toggle[aria-expanded="true"] .aco-menu-toggle__bars span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .aco-menu-toggle[aria-expanded="true"] .aco-menu-toggle__bars span:nth-child(3) { top: 8.5px; transform: rotate(-45deg); }

  /* Full-screen panel */
  /* Keep the page from shifting sideways when scrolling is locked */
  html { scrollbar-gutter: stable; }
  .container-header .container-nav .aco-menu-panel { position: fixed; inset: 0; z-index: 1001; display: flex; flex-direction: column; justify-content: safe center; margin: 0; padding: 11rem 2rem 9rem; overflow: hidden auto; overscroll-behavior: contain; background: var(--aco-navy-dark); visibility: hidden; opacity: 0; transition: opacity .3s ease, visibility 0s linear .3s; }
  .container-header .container-nav .aco-menu-panel::before { content: ""; position: absolute; left: -220px; top: -290px; width: 440px; height: 440px; border-radius: 50%; background: #e0a526 url(../images/textures/wash-gold.jpg); opacity: .9; pointer-events: none; }
  /* Scrollable by touch, wheel and keyboard, without a visible scrollbar */
  .container-header .container-nav .aco-menu-panel { scrollbar-width: none; }
  .container-header .container-nav .aco-menu-panel::-webkit-scrollbar { display: none; }
  .container-header .container-nav .aco-menu-panel:focus { outline: 0; }
  .aco-menu-open .container-header .container-nav .aco-menu-panel { visibility: visible; opacity: 1; transition: opacity .3s ease; }
  .container-header .aco-menu-panel .mod-menu { position: relative; display: flex; flex-direction: column; flex: none; gap: .25rem; color: #fff; }
  .container-header .aco-menu-panel .mod-menu a:focus-visible { outline-offset: 4px; }
  .container-header .aco-menu-panel .mod-menu > li { opacity: 0; transform: translateY(14px); transition: opacity .3s ease, transform .3s ease; }
  .aco-menu-open .container-header .aco-menu-panel .mod-menu > li { opacity: 1; transform: none; }
  .aco-menu-open .aco-menu-panel .mod-menu > li:nth-child(2) { transition-delay: .05s; }
  .aco-menu-open .aco-menu-panel .mod-menu > li:nth-child(3) { transition-delay: .1s; }
  .aco-menu-open .aco-menu-panel .mod-menu > li:nth-child(4) { transition-delay: .15s; }
  .aco-menu-open .aco-menu-panel .mod-menu > li:nth-child(5) { transition-delay: .2s; }
  .aco-menu-open .aco-menu-panel .mod-menu > li:nth-child(n+6) { transition-delay: .25s; }
  .container-header .aco-menu-panel .mod-menu > li > a { padding: .15rem 0; color: #fff; font-size: clamp(2rem, 9vw, 3rem); font-weight: 700; line-height: 1.1; letter-spacing: .02em; text-decoration: none; }
  .container-header .aco-menu-panel .mod-menu > li.parent:is(:hover, :focus-within) > a { color: #fff; }
  .container-header .aco-menu-panel .mod-menu > li.active > a { color: var(--aco-gold); }
  .container-header .aco-menu-panel .mod-menu a:is(:hover, :focus-visible) { color: var(--aco-gold); text-decoration: none; }
  /* Children are always listed under their parent; no chevron in the panel */
  .container-header .aco-menu-panel .mod-menu__toggle-sub { display: none; }
  .container-header .aco-menu-panel .mod-menu .parent > ul { display: block; position: static; margin: .25rem 0 .5rem; padding: 0 0 0 1rem; border-left: 2px solid var(--aco-red); background: none; box-shadow: none; }
  .container-header .aco-menu-panel .mod-menu__sub a { display: block; padding: .3rem 0; color: var(--aco-frost); font-family: var(--aco-font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: .03em; text-decoration: none; }

  /* The header CTA joins the open menu, pinned to the bottom */
  .aco-menu-open .container-header .container-search { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1002; margin: 0; padding: 1rem 1rem max(1rem, env(safe-area-inset-bottom)); text-align: center; background: var(--aco-navy-dark); box-shadow: 0 -10px 24px rgba(0, 0, 0, .35); }
  .aco-menu-open .container-header .container-search .btn { padding: .75rem 2rem; font-size: 1.125rem; }

  /* Lock html only: overflow on body too would make body a scroll container and unstick the header */
  /* The scrollbar gutter shows the root background: match the panel so it reads as full screen */
  html:has(.aco-menu-open) { overflow: hidden; background: var(--aco-navy-dark); }
  .aco-menu-open .back-to-top-link { display: none; }
}
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
  .aco-menu-toggle, .aco-menu-toggle__bars span, .aco-menu-toggle[aria-expanded="true"] .aco-menu-toggle__bars span, .aco-menu-panel, .aco-menu-open .aco-menu-panel, .container-header .aco-menu-panel .mod-menu > li { transition: none !important; }
}
@media (max-width: 575.98px) {
  .container-header .brand-logo { gap: .5rem; }
  .container-header .brand-logo img { width: 44px; height: 44px; }
  .container-header .brand-logo::after { width: 182px; height: 12px; }
}

/* ---------- PDF link at the end of an article (PDF Link Text + PDF File fields, article override) ---------- */
.aco-pdf-link { margin: 2rem 0 0; }
.aco-pdf-link a { display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1.1rem; border: 2px solid #b2292e; border-radius: 6px; color: #b2292e; font-weight: 600; text-decoration: none; transition: background .2s ease, color .2s ease; }
.aco-pdf-link a:hover, .aco-pdf-link a:focus-visible { background: #b2292e; color: #fff; }
.aco-pdf-link svg { flex: 0 0 auto; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .aco-pdf-link a { transition: none; } }

/* ---------- Print button beside the article title (custom field "Print Button?", includes/print.php) ---------- */
.aco-title-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; }
.aco-title-row > :is(h1, h2) { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
.aco-print { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1rem; border: 2px solid #1e355d; border-radius: 6px; background: transparent; color: #1e355d; font-weight: 600; line-height: 1.2; cursor: pointer; transition: background .2s ease, color .2s ease; }
.aco-print:hover, .aco-print:focus-visible { background: #1e355d; color: #fff; }
.aco-print svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Printing: just the article ---------- */
@media print {
  .container-header, .container-footer, footer, .container-banner:not(:has(.ip-banner)), .ip-crumbs, .mod-breadcrumbs__wrapper,
  .tour-aside, .ip-aside, .aco-aside, .pagenavigation, .d-signup, .ip-book, .aco-tour-actions, .aco-pdf-link,
  .container-top-a, .container-top-b, .container-bottom-a, .container-bottom-b, .back-to-top-link, .aco-print,
  .ip-banner > :not(.container), .ip-visual, .star, .trail, .dots, .arc { display: none !important; }
  .site-grid > * { grid-column: full-start / full-end; }
  .ip-body > [class*="col-"], .tour-layout > [class*="col-"], .aco-plain-body > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
  .ip-banner .col-lg-6 { flex: 0 0 100%; max-width: 100%; }
  body { background: #fff !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
}

/* ---------- Menus: items with Link Class "hide-header" stay out of the header menu (desktop and mobile panel) but still show in the footer ---------- */
header li:has(.hide-header) { display: none !important; }

/* ---------- Footer social links (module 122): Font Awesome brand icon + label ---------- */
.aco-social a { display: inline-flex; align-items: center; gap: .6rem; }
.aco-social .fa-brands { font-size: 1.5rem; }

/* ---------- Footer badges (module 120): ACO badge with the Catholic Owned badge to its right, both 88px tall ---------- */
.aco-footer-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.container-footer .aco-footer-badges img { width: auto; max-width: none; height: 88px; }
.aco-footer-badges a { display: inline-block; line-height: 0; border-radius: 4px; }
.aco-footer-badges a:focus-visible { outline: 2px solid #e0a526; outline-offset: 4px; }