/*
 * Small overrides layered AFTER site.css/custom.css/components.css to account for
 * behaviors of the stripped Squarespace runtime that the clone reproduces itself.
 * Keep this minimal — site.css is the source of truth for the visual design.
 */

/* Squarespace's ImageLoader normally constrains images; without it, guarantee
 * content images never overflow their column. */
img {
  max-width: 100%;
}

/* The vendor iframe already uses width:100% and reflows its own controls.
 * Constrain only its outer host; never scale or modify the vendor form DOM. */
.cna-widget-group > .campusexplorer-widget {
  max-width: 100%;
}
/* Some migrated CTA slots are centered flex items. Their automatic minimum
 * otherwise keeps the max-content caption wider than a narrow phone. */
:has(> .cna-widget-group) {
  min-width: 0;
  max-width: 100%;
}
.cna-widget-group {
  min-width: 0;
}

/* These classes are applied only to measured, undersized widget placements.
 * Stack the entire sibling row so the form cannot cover text or images. */
.sqs-layout .sqs-row.cna-widget-stack-row > .col {
  float: none !important;
  width: 100% !important;
}
.sqs-layout .sqs-block.cna-widget-stack-block {
  float: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
}

/* Font requests must never gate text visibility; ordinary CSS stacks fall back. */
html.wf-loading * {
  animation: none !important;
}

/* The live header is fixed (custom.css: #header{position:fixed}). Desktop clears
 * it via #page{padding-top:96px}; on mobile Bedford shrinks that padding, so the
 * fixed header overlaps content. Restore a top clearance on small screens. */
@media only screen and (max-width: 767px) {
  #page {
    padding-top: 88px !important;
  }
}
@media only screen and (max-width: 640px) {
  #page {
    padding-top: 78px !important;
  }
}

/* Gallery slideshow (homepage / lesson hero). Squarespace's stripped JS used to
 * size the in-content slideshow and crop the image; reproduce a cropped banner:
 * the single slide fills a fixed-height container with object-fit:cover, and the
 * caption overlays at the bottom (site.css handles meta styling). */
.sqs-gallery-block-slideshow {
  position: relative;
  overflow: hidden;
}
.sqs-gallery-block-slideshow .sqs-gallery {
  position: relative;
  width: 100%;
  height: 300px; /* live banner height (measured, fixed on desktop/tablet) */
}
/* Live enlarges the mobile banner and shrinks the caption (measured 600px / 30px). */
@media only screen and (max-width: 640px) {
  .sqs-gallery-block-slideshow .sqs-gallery {
    height: 600px;
  }
}
.sqs-gallery-block-slideshow .sqs-gallery .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
}
.sqs-gallery-block-slideshow .sqs-gallery .slide > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Squarespace's stripped slideshow JS used to size + center the caption overlay.
 * site.css already sets text-align:center on .meta, but without a width/vertical
 * placement the caption collapses to bottom-left. Restore the live look: a
 * full-width, vertically-centered caption. */
.sqs-gallery-block-slideshow .sqs-gallery .slide .meta {
  /* Live promoted banners have transparent captions. The inherited gallery
   * gradient otherwise creates a horizontal dark band over the navy overlay. */
  background: transparent;
  left: 0;
  right: 0;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  width: 100%;
  max-width: 100%;
  text-align: center;
  z-index: 2;
}

/* Match the rest of live's slideshow banner treatment (homepage + lesson heroes),
 * which the stripped Squarespace JS otherwise established: */

/* (a) Hide the meta-title line — live shows only the description. */
.sqs-gallery-block-slideshow .sqs-gallery .slide .meta .meta-title {
  display: none !important;
}

/* (b) Darkening navy overlay. site.css defines .color-overlay as
 * rgba(30,55,98,.7) but leaves it static/transparent/zero-height without the JS;
 * force it to cover the slide beneath the caption so the white text reads. */
.sqs-gallery-block-slideshow .sqs-gallery .slide .color-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(30, 55, 98, 0.7);
  z-index: 1;
}

/* (c) Full-bleed: break the banner out of the content column to the viewport
 * edges, matching the live edge-to-edge hero. */
.sqs-block-gallery:has(.sqs-gallery-block-slideshow) {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 0;
  padding-right: 0;
}

/* (d) Caption font sizing to match live (measured on the live banner: the
 * description <p> is 28px futura-pt/weight-300, and its lead <strong> is 70px).
 * The clone's in-content gallery misses the promoted-gallery rule that sizes
 * these, so it fell back to the base 14px. */
.sqs-gallery-block-slideshow .sqs-gallery .slide .meta .meta-description p {
  font-family: "futura-pt", "Futura", "Century Gothic", "Trebuchet MS", sans-serif;
  font-weight: 300;
  font-size: 28px;
  line-height: 1.3em;
}
.sqs-gallery-block-slideshow .sqs-gallery .slide .meta .meta-description strong {
  font-weight: 300;
  font-size: 70px;
  line-height: 1.1em;
}
/* Mobile caption sizing to match live (measured: p 18px, strong 30px). */
@media only screen and (max-width: 640px) {
  .sqs-gallery-block-slideshow .sqs-gallery .slide .meta .meta-description p {
    font-size: 18px;
  }
  .sqs-gallery-block-slideshow .sqs-gallery .slide .meta .meta-description strong {
    font-size: 30px;
  }
}

/* Live constrains the caption to 90% width on small screens (site.css does this
 * only for #promotedGalleryWrapper galleries, which our clone's banner isn't in).
 * left/right 0 + margin auto keeps it horizontally centered. */
@media only screen and (max-width: 767px) {
  .sqs-gallery-block-slideshow .sqs-gallery .slide .meta {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
  /* Live also constrains each caption <p> to 90% centered (site.css promoted-
   * gallery rule: .meta .meta-inside p{width:90% !important}). */
  .sqs-gallery-block-slideshow .sqs-gallery .slide .meta .meta-inside p {
    width: 90% !important;
    margin-left: auto;
    margin-right: auto;
  }
}

/* site.css hides slideshow captions entirely at <=480px
 * (.sqs-gallery-block-slideshow .meta{display:none!important}) and only re-enables
 * them inside #promotedGalleryWrapper. Live's banner sits in that wrapper (Bedford
 * JS promotes it); our clone's doesn't, so re-enable the caption here — matches
 * live, which DOES show the banner text on phones. */
@media only screen and (max-width: 480px) {
  .sqs-gallery-block-slideshow .sqs-gallery .slide .meta {
    display: block !important;
  }
}

/* Lazy images our loader fills: fade-in parity with Squarespace's img.loaded. */
img.thumb-image {
  opacity: 1;
}

/* Blog listing like/share widgets are neutralized (no Squarespace JS). Keep their
 * box space but don't show broken/empty interactive affordances. */
.sqs-simple-like {
  cursor: default;
}

/* Summary block "autogrid" layout (the /blog-with-email-capture-post-previews page).
 * Squarespace's gallery-layout-autogrid.js absolutely-positions items into a grid;
 * with that JS stripped, reproduce the 3-up grid (data-slides-per-row=3, gutter 60,
 * aspect 1.5) with CSS so previews don't stack single-column. */
.summary-block-setting-design-autogrid .summary-item-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 60px;
  row-gap: 44px;
}
.summary-block-setting-design-autogrid .summary-item {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
}
.summary-block-setting-design-autogrid .summary-thumbnail-container {
  display: block;
}
.summary-block-setting-design-autogrid .summary-thumbnail {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.summary-block-setting-design-autogrid .summary-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media only screen and (max-width: 767px) {
  .summary-block-setting-design-autogrid .summary-item-list {
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
  }
}
@media only screen and (max-width: 480px) {
  .summary-block-setting-design-autogrid .summary-item-list {
    grid-template-columns: 1fr;
  }
}

/* Live's current global H2 setting; leave body/strong weights and hero sizes alone. */
h2 {
  font-size: 30px;
  line-height: 1.2em;
}

/* The CNA Classes Online source reduces H2s on phones. Scope this to the
 * captured collection; the general 30px setting must not erase that breakpoint. */
@media only screen and (max-width: 640px) {
  /* The source sidebar has no visible links on phones. Preserve the preview's
   * existing fixed-header clearance instead of adding its empty toggle spacer. */
  #folderNav.cna-classes-folder-nav {
    display: none;
  }
  #content[data-collection-id="6a550f677825930f69ece6c2"] h2 {
    font-size: 26px;
  }
}

/* At the existing page cap (956px + 64px outer padding), this article is
 * 701px wide. Its half-row floats are 367.5px including 34px padding: just
 * 0.5px short of the shared widget guard's 334px inner minimum. Reserve that
 * half pixel only at full desktop width so source-style text wrapping returns;
 * narrower articles keep the shared safe stacking behavior unchanged. */
@media only screen and (min-width: 1020px) {
  #content[data-collection-id="6a550f677825930f69ece6c2"] .sqs-block.float:has(.cna-widget-group) {
    min-width: 368px;
  }
}

/* Lesson guide: reproduce the source's promoted hero and image-poster runtime
 * without changing the shared banner, fonts, content, or widget safety guard. */
#content[data-collection-id="5b217fa882908573d1130fd3"] {
  --lesson-guide-page-inset: 96px;
}
#content[data-collection-id="5b217fa882908573d1130fd3"] .sqs-block-gallery:has(.sqs-gallery-block-slideshow) {
  padding-top: 0 !important;
  padding-bottom: 0;
  margin-left: calc(50% - 50vw - 127.5px);
  transform: translateY(calc(-1 * var(--lesson-guide-page-inset)));
}
#content[data-collection-id="5b217fa882908573d1130fd3"] .sqs-gallery {
  height: 600px;
}
#folderNav.cna-lesson-guide-folder-nav { margin-top: 600px; }
@media only screen and (min-width: 641px) {
  #content[data-collection-id="5b217fa882908573d1130fd3"] .sqs-block-gallery + .sqs-block-html {
    padding-top: 0;
  }
}
/* Bedford's compact desktop banner depends on DEVICE height, not window width. */
@media only screen and (max-device-height: 640px) and (min-width: 641px) {
  #folderNav.cna-lesson-guide-folder-nav { margin-top: 300px; }
  #content[data-collection-id="5b217fa882908573d1130fd3"] .sqs-gallery {
    height: 300px;
  }
}
#content[data-collection-id="5b217fa882908573d1130fd3"] .sqs-gallery .slide .meta {
  width: 1084px;
  margin: 0 auto;
  padding: 0;
  text-rendering: optimizeLegibility;
}
#content[data-collection-id="5b217fa882908573d1130fd3"] .meta .meta-inside {
  padding: 0 32px;
}
#content[data-collection-id="5b217fa882908573d1130fd3"] .sqs-gallery .slide .meta .meta-description p {
  width: 700px;
  margin: 20px auto;
  letter-spacing: 4px;
  color: #d9d9d9;
}
#content[data-collection-id="5b217fa882908573d1130fd3"] .sqs-gallery .slide .meta .meta-description strong {
  display: block;
  letter-spacing: normal;
  color: #fff;
}
/* The source scales its 11vw poster titles by the card/viewport width ratio.
 * A size container expresses the same geometry without JS or hidden text. */
#content[data-collection-id="5b217fa882908573d1130fd3"] .design-layout-poster {
  container-type: inline-size;
}
#content[data-collection-id="5b217fa882908573d1130fd3"] .design-layout-poster .image-title {
  font-size: max(0.75rem, 8.25cqw);
  visibility: visible;
}
@media only screen and (min-width: 1020px) {
  #content[data-collection-id="5b217fa882908573d1130fd3"] .sqs-block.float:has(.cna-widget-group) {
    min-width: 368px;
  }
}
@media only screen and (max-width: 767px) {
  #page:has(> #content[data-collection-id="5b217fa882908573d1130fd3"]) {
    padding-top: 32px !important;
  }
  #content[data-collection-id="5b217fa882908573d1130fd3"] {
    --lesson-guide-page-inset: 32px;
  }
  #content[data-collection-id="5b217fa882908573d1130fd3"] .sqs-gallery .slide .meta {
    width: 90%;
  }
  #content[data-collection-id="5b217fa882908573d1130fd3"] .meta .meta-inside {
    padding: 0 20px;
  }
}
@media only screen and (max-width: 640px) {
  #folderNav.cna-lesson-guide-folder-nav { display: none; }
  #page:has(> #content[data-collection-id="5b217fa882908573d1130fd3"]) {
    padding-top: 64px !important;
  }
  #content[data-collection-id="5b217fa882908573d1130fd3"] {
    --lesson-guide-page-inset: 64px;
  }
  #content[data-collection-id="5b217fa882908573d1130fd3"] .sqs-block-gallery:has(.sqs-gallery-block-slideshow) {
    margin-left: calc(50% - 50vw);
  }
  #content[data-collection-id="5b217fa882908573d1130fd3"] .meta .meta-inside {
    padding: 20px;
  }
  #content[data-collection-id="5b217fa882908573d1130fd3"] .sqs-gallery .slide .meta .meta-description p {
    margin: 10px auto;
    letter-spacing: 1px;
  }
  #content[data-collection-id="5b217fa882908573d1130fd3"] h2 { font-size: 26px; }
}

/* Spanish page: reproduce its promoted gallery without moving content or
 * changing the shared banners, font loader, caption/disclaimer or widget guard. */
#content[data-collection-id="5b217fa582908573d1130f94"] {
  --espanol-page-inset: 96px;
}
#content[data-collection-id="5b217fa582908573d1130f94"] .sqs-block-gallery:has(.sqs-gallery-block-slideshow) {
  padding-top: 0 !important;
  padding-bottom: 0;
  transform: translateY(calc(-1 * var(--espanol-page-inset)));
}
#content[data-collection-id="5b217fa582908573d1130f94"] .sqs-gallery {
  height: 600px;
}
@media only screen and (min-width: 641px) {
  #content[data-collection-id="5b217fa582908573d1130f94"] .sqs-block-gallery + .sqs-block-html {
    padding-top: 0;
  }
}
/* Source uses device height; its fixed header overlaps the compact title.
 * Preserve that source behavior, rather than quietly redesigning the banner. */
@media only screen and (max-device-height: 640px) and (min-width: 641px) {
  #content[data-collection-id="5b217fa582908573d1130f94"] .sqs-gallery {
    height: 300px;
  }
}
#content[data-collection-id="5b217fa582908573d1130f94"] .sqs-gallery .slide .meta {
  width: 1084px;
  margin: 0 auto;
  padding: 0;
  text-rendering: optimizeLegibility;
}
#content[data-collection-id="5b217fa582908573d1130f94"] .meta .meta-inside {
  padding: 0 32px;
}
#content[data-collection-id="5b217fa582908573d1130f94"] .sqs-gallery .slide .meta .meta-description p {
  width: 700px;
  margin: 20px auto;
  letter-spacing: 4px;
  color: #d9d9d9;
}
#content[data-collection-id="5b217fa582908573d1130f94"] .sqs-gallery .slide .meta .meta-description strong {
  display: block;
  letter-spacing: normal;
  color: #fff;
}
@media only screen and (max-width: 767px) {
  #page:has(> #content[data-collection-id="5b217fa582908573d1130f94"]) {
    padding-top: 32px !important;
  }
  #content[data-collection-id="5b217fa582908573d1130f94"] {
    --espanol-page-inset: 32px;
  }
  #content[data-collection-id="5b217fa582908573d1130f94"] .sqs-gallery .slide .meta {
    width: 90%;
  }
  #content[data-collection-id="5b217fa582908573d1130f94"] .meta .meta-inside {
    padding: 0 20px;
  }
}
@media only screen and (max-width: 640px) {
  #page:has(> #content[data-collection-id="5b217fa582908573d1130f94"]) {
    padding-top: 40px !important;
  }
  #content[data-collection-id="5b217fa582908573d1130f94"] {
    --espanol-page-inset: 40px;
  }
  #content[data-collection-id="5b217fa582908573d1130f94"] .meta .meta-inside {
    padding: 20px;
  }
  #content[data-collection-id="5b217fa582908573d1130f94"] .sqs-gallery .slide .meta .meta-description p {
    margin: 10px auto;
    letter-spacing: 1px;
  }
  #content[data-collection-id="5b217fa582908573d1130f94"] h2 { font-size: 26px; }
}

/* Blog (list, pagination/filter views and single posts). Live's Bedford rule
 * `.hide-blog-sidebar.collection-type-blog #page #content{max-width:700px}` is a
 * compound selector: the clone keeps `hide-blog-sidebar` on <body> and puts
 * `collection-type-blog` on <main id="page">, so it never matched and the
 * article measured 701px on desktop and 449px at 768px instead of live's fixed
 * 700px. Restore the live width with an equivalent split selector. */
.hide-blog-sidebar .collection-type-blog#page #content {
  width: 100%;
  max-width: 700px;
  display: block;
  margin: 0 auto;
}

/* At that 700px article the source's half-row embeds (a floated sqs-col-6 block,
 * or a block filling the second sqs-col-6 column) have a 333px inner width: the
 * 325px form and its 332.19px two-line caption fit, exactly as they render on
 * live beside the text, but the shared widget guard's 334px inner minimum
 * stacked them. Reserve one pixel for those two blog shapes only, from the
 * width where the article is already full size (764px viewport - 64px #page
 * padding = 700px; live floats there too). The one pixel comes from the text
 * column, not the article edge: the column pair still sums to the row width,
 * so nothing overflows. Narrower articles keep the shared safe stacking. */
@media only screen and (min-width: 764px) {
  #content[data-collection-id="5b217fa082908573d1130efb"] .sqs-block.float.sqs-col-6:has(.cna-widget-group) {
    min-width: 368px;
  }
  #content[data-collection-id="5b217fa082908573d1130efb"] .sqs-row > .col.sqs-col-6:has(> .sqs-block:not(.float) .cna-widget-group) {
    width: 368px;
  }
  #content[data-collection-id="5b217fa082908573d1130efb"] .sqs-row > .col.sqs-col-6:has(+ .col.sqs-col-6 > .sqs-block:not(.float) .cna-widget-group) {
    width: calc(100% - 368px);
  }
}

/* Buttons retain Bedford's original folder/toggle styling, not browser chrome. */
#headerNav .folder-toggle,
#sidecarNav .folder-toggle,
button.mobile-nav-toggle {
  appearance: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  margin: 0;
  text-align: inherit;
}
#sidecarNav .folder-toggle { width: 100%; text-align: left; }
#headerNav .folder-toggle:focus-visible,
#sidecarNav .folder-toggle:focus-visible,
.mobile-nav-toggle:focus-visible,
#headerNav a:focus-visible,
#sidecarNav a:focus-visible {
  outline: 2px solid #1e3762;
  outline-offset: 3px;
}
/* React controls disclosure state for mouse, touch AND keyboard. Hidden links
 * must not remain tabbable under Bedford's transform-only dropdown rules. */
#headerNav .subnav[hidden], #sidecarNav .subnav[hidden] { display: none !important; }
html:not(.touch-styles) body:not(.force-mobile-nav) #headerNav .folder .subnav:not([hidden]) {
  transform: scale(1, 1);
}
html:not(.touch-styles) body:not(.force-mobile-nav) #headerNav .folder .subnav:not([hidden]) > div {
  opacity: 1;
}
/* The long-nav fallback needs the same hidden duplicate fixed toggle as mobile. */
body.force-mobile-nav .mobile-nav-toggle.fixed-nav-toggle { display: none; }

/* The last main-nav item ("En Español") is styled as an outline nav-button with white
 * text + white border (invisible on the white header). The live site ships this
 * exact inline override to force the label black; reproduce it. */
.nav-button-style-outline.enable-nav-button #headerNav nav > div:not(.folder):last-child a,
.nav-button-style-outline.enable-nav-button #sidecarNav nav > div:not(.folder):last-child a {
  color: #000 !important;
}