/* Christopher Mangun — small additions on top of the Asli template */

/* Case-study cards: the copy sits on the photo, so the shade has to carry it.
   Hovering lifts the shade to show more of the image, but never far enough to lose the text. */
.pricing-table__overlay {
  --overlay-opacity: 0.82;
}
.pricing-table:hover .pricing-table__overlay {
  opacity: 0.72;
}

/* Case-study mastheads: several covers are light product shots, so the title needs more shade */
.masthead__overlay {
  --overlay-opacity: 0.68;
}

/* Loader: name only — no count-down circle, no sliding images, no footer text */
.preloader__wrapper-images-outer,
.preloader__wrapper-counter,
.preloader__footer {
  display: none !important;
}

/* Case-studies list (test page): no counter, no text floating over the images — captions sit under each image */
.cm-case-list .infinite-list__wrapper-headings,
.cm-case-list .infinite-list__counters {
  display: none !important;
}

/* Overlay menu: smaller type so every item (incl. the 12-item Case Studies list) fits on screen */
:root {
  --overlay-menu-item-max-font-size: 88;
  --overlay-menu-item-min-font-size: 34;
  --overlay-submenu-item-max-font-size: 24;
  --overlay-submenu-item-min-font-size: 17;
}
.menu-overlay .sub-menu > li > a {
  padding: 0.1rem 0;
}

/* Client logo on a case-study page */
.cm-client-logo {
  height: 44px;
  width: auto;
  max-width: 260px;
  opacity: 0.9;
}

/* Top bar: a shade behind the fixed bar so the menu control stays visible over light images */
.header__bar_fixed {
  background-color: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* --- Visible top-bar navigation (the overlay Menu stays, but is no longer the only way in) */
.cm-nav-link {
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
}
.cm-nav-link .header__label {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --- Hero: proof figures and the three actions */
.cm-proof-bar {
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 1.25rem;
}
.cm-proof {
  display: block;
  text-decoration: none;
}
.cm-proof__figure {
  display: block;
  line-height: 1.1;
}
.cm-proof__label {
  display: block;
  opacity: 0.7;
  font-size: 0.7rem;
}
.cm-proof:hover .cm-proof__label {
  opacity: 1;
}
.cm-hero-actions .button {
  font-size: 0.8rem;
}
.cm-hero-link {
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-bottom: 1rem;
}

/* --- Skip link: first stop for keyboard and screen-reader users */
.cm-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 0.75rem 1.25rem;
  background: #060707;
  color: #fff;
  border: 1px solid #fff;
}
.cm-skip:focus {
  left: 1rem;
  top: 1rem;
}

/* --- Visible focus for keyboard users (the template relies on hover alone) */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-accent, #e2d6a0);
  outline-offset: 3px;
}

/* --- Respect reduced motion: no parallax drift, no cursor follower, no character animation */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .cursor-follower,
  .js-cursor-follower {
    display: none !important;
  }
  .js-parallax__inner {
    transform: none !important;
  }
}

/* Available to assistive technology and search engines, not to the eye */
.cm-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Menu: resume + profile links sit under the items, inline so they all stay in view */
.cm-menu-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.cm-menu-links .button {
  margin: 0 !important;
  font-size: 0.75rem;
}
.header__col-overlay {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
}

/* --- Accent on light backgrounds: the template's accent is 4.29:1 on the resume's light
   panels, below the 4.5:1 WCAG AA threshold. Darkened to 4.95:1 there only; the dark
   pages keep the original accent. */
[data-arts-color-theme="light"],
.bg-light-1,
.bg-light-2,
.bg-light-3,
.bg-gray-1 {
  --color-accent: #5c5b45;
}

/* The fixed bar always carries a dark shade, so its controls are light on every page —
   on light pages the template's dark label fell to 3.65:1 against that shade. 0.55 shade
   with white text measures 6.09:1. */
.header__bar_fixed .header__label,
.header__bar_fixed .header__label-burger,
.header__bar_fixed .cm-nav-link .header__label-normal,
.header__bar_fixed .cm-nav-link .header__label-hover {
  color: #fff;
}
.header__bar_fixed .header__burger-line {
  background-color: #fff;
}

/* --- Top bar control aligned to the menu's own columns.
   The overlay menu lays each item out as [counter][gap][heading]. The Menu/Close control
   is given the same box model, so the hamburger (and the X) sits in the counter column and
   the word sits in the heading column. Counter metrics come from main.css:
   70px wide with a gutter/2 gap, 50px with a full gutter below 992px. */
.header__bar_fixed .header__burger {
  order: -1;                       /* control on the left, nav links pushed right */
  padding-left: var(--gutter-horizontal);
  flex-direction: row;
  align-items: center;
}
.header__bar_fixed .cm-nav {
  margin-left: auto;
}
.header__bar_fixed .header__burger-wrapper-lines {
  order: 1;
  width: 50px;
  display: flex;
  justify-content: center;
  flex: 0 0 50px;
}
.header__bar_fixed .header__burger-label {
  order: 2;
  margin-right: 0 !important;
  margin-left: var(--gutter-horizontal);
}
.header__bar_fixed .header__burger .header__border-vertical {
  display: none;
}
@media screen and (min-width: 992px) {
  .header__bar_fixed .header__burger-wrapper-lines {
    width: 70px;
    flex: 0 0 70px;
  }
  .header__bar_fixed .header__burger-label {
    margin-left: calc(var(--gutter-horizontal) / 2);
  }
}

/* --- Case-study index: the lane is blank until curtains.js runs, because the infinite
   list positions every item with JS transforms and paints the photographs into a WebGL
   canvas. Showing the markup's <img> elements early was tried and does not help: the items
   have no layout position until the component initialises. Making that page meaningful
   without JS needs a different template page, not a CSS override. */

/* --- One left edge across the site.
   Most sections use the template's gutter system (container-fluid-gutters, padding =
   --gutter-horizontal). The case-study cards were the exception: a centred Bootstrap
   .container, which inset their content much further than everything above and below.
   They now share the same gutter, so every section starts on the same line. */
.pricing-table__content.container {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: var(--gutter-horizontal);
  padding-right: var(--gutter-horizontal);
}
.pricing-table__content.container > .row {
  margin-left: 0;
  margin-right: 0;
}
.pricing-table__content.container > .row > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

/* The resume's sections were centred Bootstrap containers, so its body sat 66px inside the
   gutter its own header, footer and closing actions use. Same gutter, one left edge. */
.page-wrapper__content > .section.container {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: var(--gutter-horizontal);
  padding-right: var(--gutter-horizontal);
}

/* --- Case-study card: the brand and case study lead, the phase is a small supporting
   line beneath — the same relationship the phase page has between its H1 and the line
   under it. The template sizes this slot as an h4, which reads as a second headline. */
.pricing-table__cost {
  font-size: 0.8rem !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-top: 0.75rem !important;
}

/* --- Case Studies submenu: brand first, case study after a space in a lighter weight, so
   twelve long lines scan as a list of clients rather than a wall of equal-weight text. */
.menu-overlay .sub-menu .cm-menu-brand {
  white-space: nowrap;
}
.menu-overlay .sub-menu .cm-menu-case {
  opacity: 0.68;
  font-size: 0.86em;
}
.menu-overlay .sub-menu > li > a {
  padding: 0.25rem 0;
  line-height: 1.35;
}

/* --- Contact: the details are a short stack, not a form. No labels, no blank rows between
   them, and the lines sit close enough to read as one block. */
.cm-contact-item {
  margin-top: 0.4rem;
}
.cm-contact-item:first-of-type {
  margin-top: 0;
}
.cm-contact-item .h4 {
  line-height: 1.22;
  margin: 0;
}

/* The template paints a permanent 2px underline through background-image, despite the
   class name. It becomes a hover affordance instead, so the stack reads as clean lines. */
.cm-contact-item a.underline-hover-self {
  background-size: 0% 2px;
  transition: background-size 0.25s ease;
}
.cm-contact-item a.underline-hover-self:hover,
.cm-contact-item a.underline-hover-self:focus-visible {
  background-size: 100% 2px;
}

/* --- A short page must not reveal the white body behind it. The contact page's content
   is only ~440px tall on a phone, leaving a third of the screen white under a dark page.
   The wrapper always covers the viewport, and the contact section fills it so its
   photograph reaches the bottom rather than stopping mid-screen. */
main.page-wrapper {
  min-height: 100vh;
}
.section-contacts-fullscreen {
  min-height: 100vh;
}

/* --- Overlay menu on small screens: twelve submenu entries plus the three buttons do not
   fit a 667px-tall phone. The type steps down, the column scrolls, and the buttons shrink
   so the last entry is never hidden behind them. */
@media screen and (max-height: 820px), screen and (max-width: 767px) {
  .menu-overlay .sub-menu > li > a {
    padding: 0.18rem 0;
    line-height: 1.3;
  }
  /* The template clamps between a min at ~360px and a max at ~1920px, so on a phone the
     MINIMUM is what governs — raising only the max changed nothing. */
  :root {
    --overlay-submenu-item-max-font-size: 26;
    --overlay-submenu-item-min-font-size: 23;
  }
  /* The open submenu is absolutely positioned inside a container with overflow:hidden,
     so entries past that container's height were clipped rather than reachable. Bounding
     it and letting it scroll means the type can be legible without losing the last items. */
  .menu-overlay .sub-menu {
    max-height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 0.5rem;
  }

  .cm-menu-links {
    gap: 0.4rem;
    margin-top: 1rem;
  }
  .cm-menu-links .button {
    font-size: 0.62rem;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
  }
  .cm-menu-links .button .button__icon {
    display: none;                 /* the arrow costs width the label needs */
  }
  /* Centring a list taller than its scroll container clips the top of it — the first
     entries end up above the scrollable area and behind the close bar. Start-aligned,
     with room for the bar, so the list begins at IPG Health and scrolls if it must. */
  .header__col-overlay {
    justify-content: flex-start;
    padding-top: 4rem;
    padding-bottom: 0.5rem;
  }
}

/* --- References: two named endorsements after the case cards, so a reader meets the work
   before the praise. Equal-height cards with the attribution pinned to the bottom, because
   quotes of different lengths otherwise leave the names floating at different heights. */
.cm-endorsements__title {
  opacity: 0.68;
}
.cm-endorsement {
  display: flex;
  flex-direction: column;
  width: 100%;
}
/* The template gives blockquote its own bordered, padded box. Inside a card that reads as
   a box within a box, so the card is the only frame. */
.cm-endorsement__quote {
  font-size: 1.05rem;
  line-height: 1.55;
  quotes: "\201C" "\201D";
  border: 0;
  padding: 0;
  margin: 0;
}
.cm-endorsement__quote::before {
  content: open-quote;
}
.cm-endorsement__quote::after {
  content: close-quote;
}
.cm-endorsement__by {
  padding-top: 1.5rem;
}
.cm-endorsement__name,
.cm-endorsement__role {
  display: block;
}
.cm-endorsement__name {
  color: var(--color-accent, #e2d6a0);
}
.cm-endorsement__role {
  opacity: 0.68;
  margin-top: 0.2rem;
}