/*
 * Shannonigans private sitewide typography study.
 * Exists only in the WPVibe draft theme until explicitly published.
 */

/* Font files are preloaded in header.php to avoid a late @import and visible font swap. */

/* Neue Haas Grotesk direction: body, navigation, utility copy, metadata, and forms. */
body,
body .main-container,
body .main-container p,
body .main-container li,
body .main-container blockquote,
body .main-container figcaption,
body .main-container label,
body .main-container input,
body .main-container textarea,
body .main-container select,
body .main-container button,
body .main-container .btn,
body .main-container .t-entry-meta,
body .main-container .t-entry-excerpt,
body .main-container .reading-time,
body .main-container .ams-native-view,
body .main-container .ams-native-meta,
body .main-container .ams-native-num,
body .main-container .ams-native-footer-label,
body .main-container .ams-mobile-substack-dek {
  font-family: "Libre Franklin", Arial, sans-serif !important;
}

/* Noe Text direction: page, story, card, and editorial display type. */
body .main-container h1,
body .main-container h2,
body .main-container h3,
body .main-container h4,
body .main-container h5,
body .main-container h6,
body .main-container .heading-text,
body .main-container .heading-text *,
body .main-container .t-entry-title,
body .main-container .t-entry-title a,
body .main-container .post-title,
body .main-container .post-title a,
body .main-container .ams-native-hero-title h1,
body .main-container .ams-native-hero-title h1 span,
body .main-container .ams-native-selected-grid h2,
body .main-container .ams-native-selected-grid h2 a,
body .main-container .ams-native-selected-grid h3,
body .main-container .ams-native-selected-grid h3 a,
body .main-container .ams-native-feed .rss_item .title,
body .main-container .ams-native-feed .rss_item .title a,
body .main-container .ams-native-side-label h2,
body .main-container .ams-native-side-label h2 a,
body .main-container .ams-native-side-tagline h3,
body .main-container .ams-native-side-tagline h3 a,
body .main-container .ams-mobile-selected-title,
body .main-container .ams-mobile-substack-title,
body .main-container .ams-clips-grid .t-entry-title,
body .main-container .ams-clips-grid .t-entry-title a {
  font-family: "Instrument Serif", Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
}

/* Custom Uncode header: one sans system across top-level links and dropdowns. */
body .ams-shared-site-header.ams-native-custom-header .ams-menu > .ams-menu-item > a,
body #masthead .menu-primary-inner > li > a {
  font-family: "Libre Franklin", Arial, sans-serif !important;
  font-weight: 700 !important;
}

body .ams-shared-site-header.ams-native-custom-header .ams-submenu a,
body #masthead .menu-primary-inner .sub-menu a,
body #masthead .menu-primary-inner .drop-menu a,
html body:not(.wp-admin) #masthead #menu-shannonigans-header .drop-menu > li > a {
  font-family: "Libre Franklin", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.025em !important;
}

/* Shared footer: sans framework with a serif editorial headline. */
body .ams-native-footer,
body .ams-native-footer p,
body .ams-native-footer a,
body .ams-native-footer label,
body .ams-native-footer input,
body .ams-native-footer textarea,
body .ams-native-footer select,
body .ams-native-footer button,
body .ams-native-footer .ams-native-footer-label,
body .ams-native-footer-bar,
body .ams-native-footer-bar p,
body .ams-native-footer-bar a {
  font-family: "Libre Franklin", Arial, sans-serif !important;
}

body .ams-native-footer h1,
body .ams-native-footer h2,
body .ams-native-footer h3,
body .ams-native-footer h1 a,
body .ams-native-footer h2 a,
body .ams-native-footer h3 a {
  font-family: "Instrument Serif", Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
}

/* Homepage section labels: story serif in Shannonigans red. */
body.page-id-181122 .ams-native-selected-section .ams-native-kicker p,
body.page-id-181122 .ams-native-substack-head .ams-native-kicker p {
  font-size: 0 !important;
  line-height: 1 !important;
}

body.page-id-181122 .ams-native-selected-section .ams-native-kicker p::after,
body.page-id-181122 .ams-native-substack-head .ams-native-kicker p::after,
body.page-id-181122 .ams-native-explore-head h2::after {
  display: block;
  color: #FF2C2C;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(30px, 3.2vw, 40px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: none;
}

body.page-id-181122 .ams-native-selected-section .ams-native-kicker p::after {
  content: "Selected work";
}

body.page-id-181122 .ams-native-substack-head .ams-native-kicker p::after {
  content: "Latest from Substack";
}

body.page-id-181122 .ams-native-explore-head h2 {
  font-size: 0 !important;
  line-height: 1 !important;
}

body.page-id-181122 .ams-native-explore-head h2 span {
  display: none !important;
}

body.page-id-181122 .ams-native-explore-head h2::after {
  content: "Explore";
}

body.page-id-181122 .ams-native-selected-section > .row-parent,
body.page-id-181122 .ams-native-explore-head > .row-parent,
body.page-id-181122 .ams-native-substack-head > .row-parent {
  padding-top: 22px !important;
  padding-bottom: 14px !important;
}

body.page-id-181122 .ams-native-selected-section::before,
body.page-id-181122 .ams-native-explore-head::before,
body.page-id-181122 .ams-native-substack-head::before {
  top: 0 !important;
  border-top-color: #FF2C2C !important;
}

/* Homepage mobile components are generated separately after page load. */
@media (max-width: 767px) {
  body.page-id-181122 .ams-mobile-clean-head h2 {
    color: #FF2C2C !important;
    font-family: "Instrument Serif", Georgia, serif !important;
    font-size: 27px !important;
    font-weight: 400 !important;
    line-height: 0.95 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
    white-space: normal !important;
  }

  body.page-id-181122 .ams-mobile-clean-head a {
    font-family: "Libre Franklin", Arial, sans-serif !important;
  }
}

/* Editorial landing-page titles: Shannonigans red with a full-column rule. */
body .ams-clips-main .ams-clips-heading {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  color: #FF2C2C !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid #FF2C2C !important;
  padding-bottom: 12px !important;
  margin-bottom: 24px !important;
}

@media (max-width: 767px) {
  body .ams-clips-main .ams-clips-heading {
    padding-bottom: 9px !important;
    margin-bottom: 18px !important;
  }
}

/* Sitewide social links in the blue copyright bar. */
body .ams-native-footer-bar .ams-footer-socials {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 22px !important;
  min-height: 22px;
}

body .ams-native-footer-bar .ams-footer-social-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  color: #000 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: opacity 160ms ease, transform 160ms ease;
}

body .ams-native-footer-bar .ams-footer-social-link img {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  max-width: none !important;
}

body .ams-native-footer-bar .ams-footer-social-link:hover,
body .ams-native-footer-bar .ams-footer-social-link:focus-visible {
  opacity: 0.58;
  transform: translateY(-1px);
}

@media (max-width: 767px) {
  body .ams-native-footer-bar,
  body .ams-native-footer-bar p {
    text-align: center !important;
  }

  body .ams-native-footer-bar .ams-footer-socials {
    justify-content: center !important;
    margin-top: 14px !important;
  }
}

/* Individual story headline package: sans dek with an open lime frame. */
body.ams-clean-story-template .header-wrapper h1::before {
  content: "";
  display: block;
  width: min(820px, 90%);
  margin: 0 auto 18px;
  border-top: 1px solid #D1ED81;
}

body.ams-clean-story-template .header-wrapper .ams-story-dekhead {
  box-sizing: border-box !important;
  font-family: "Libre Franklin", Arial, sans-serif !important;
  border-top: 0 !important;
  border-bottom: 1px solid #D1ED81 !important;
  padding-top: 0 !important;
  padding-bottom: 15px !important;
}

@media (max-width: 767px) {
  body.ams-clean-story-template .header-wrapper h1::before {
    width: 92%;
    margin-bottom: 14px;
  }

  body.ams-clean-story-template .header-wrapper .ams-story-dekhead {
    padding-top: 0 !important;
    padding-bottom: 12px !important;
  }
}

/* Mobile homepage hero: center the blue panel against the slide itself,
 * with arrows aligned to the panel. Keep the photo and green slide counter.
 * Include phones in landscape without applying this to ordinary desktop screens. */
@media (max-width: 767px),
       (pointer: coarse) and (orientation: landscape) and (max-width: 1100px) and (max-height: 650px) {
  /* Use the slide's own full-width frame as the stable mobile anchor. */
  body.page-id-181122 .main-container .ams-native-hero-slide {
    position: relative !important;
  }

  body.page-id-181122 .main-container .ams-native-hero-slide > .row-child,
  body.page-id-181122 .main-container .ams-native-hero-slide .row-inner,
  body.page-id-181122 .main-container .ams-native-hero-slide .wpb_column,
  body.page-id-181122 .main-container .ams-native-hero-slide .uncol,
  body.page-id-181122 .main-container .ams-native-hero-slide .uncoltable,
  body.page-id-181122 .main-container .ams-native-hero-slide .uncell {
    position: static !important;
    transform: none !important;
  }

  body.page-id-181122 .main-container .ams-native-hero-slide .row-child .wpb_row .wpb_column .uncol .uncoltable .uncell .uncont {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: min(84vw, 520px) !important;
    max-width: none !important;
    height: 236px !important;
    min-height: 236px !important;
    margin: 0 auto !important;
    padding: 22px 50px !important;
    transform: translateY(-50%) !important;
    background: rgba(99, 149, 238, 0.78) !important;
    text-align: center !important;
  }

  body.page-id-181122 .main-container .ams-native-hero-slide .ams-native-hero-title,
  body.page-id-181122 .main-container .ams-native-hero-slide .ams-native-hero-link {
    position: relative !important;
    left: auto !important;
    display: block !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    text-align: center !important;
  }

  body.page-id-181122 .main-container .ams-native-hero-slide .ams-native-hero-link {
    margin-top: 15px !important;
  }

  body.page-id-181122 .main-container .ams-native-hero-slide .ams-native-hero-title h1,
  body.page-id-181122 .main-container .ams-native-hero-slide .ams-native-hero-title h1 span {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    color: #111 !important;
    font-size: clamp(26px, 7.5vw, 34px) !important;
    line-height: 1 !important;
    text-align: center !important;
    text-shadow: none !important;
  }

  body.page-id-181122 .main-container .ams-native-hero-slide .ams-native-hero-link p,
  body.page-id-181122 .main-container .ams-native-hero-slide .ams-native-hero-link a {
    display: inline-block !important;
    width: auto !important;
    margin: 0 !important;
    color: #111 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-shadow: none !important;
  }

  body.page-id-181122 .main-container .ams-native-hero-counter .uncode-owl-nav-in,
  body.page-id-181122 .main-container .ams-native-hero-counter .uncode-owl-nav-safe {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
  }

  body.page-id-181122 .main-container .ams-native-hero-counter .uncode-nav-prev,
  body.page-id-181122 .main-container .ams-native-hero-counter .uncode-nav-next {
    position: absolute !important;
    top: 50% !important;
    z-index: 3 !important;
    display: block !important;
    width: 30px !important;
    height: 40px !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    pointer-events: auto !important;
  }

  body.page-id-181122 .main-container .ams-native-hero-counter .uncode-nav-prev {
    left: 12px !important;
    right: auto !important;
    bottom: auto !important;
  }

  body.page-id-181122 .main-container .ams-native-hero-counter .uncode-nav-next {
    right: 12px !important;
    left: auto !important;
    bottom: auto !important;
  }

  body.page-id-181122 .main-container .ams-native-hero-counter .uncode-nav-prev .uncode-nav-container-wrap,
  body.page-id-181122 .main-container .ams-native-hero-counter .uncode-nav-next .uncode-nav-container-wrap {
    position: absolute !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    left: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  body.page-id-181122 .main-container .ams-native-hero-counter .uncode-nav-prev .uncode-nav-container,
  body.page-id-181122 .main-container .ams-native-hero-counter .uncode-nav-next .uncode-nav-container {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.page-id-181122 .main-container .ams-native-hero-counter .uncode-nav-prev::before,
  body.page-id-181122 .main-container .ams-native-hero-counter .uncode-nav-next::before {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    z-index: 4 !important;
    display: block !important;
    color: #fff !important;
    font-family: Arial, sans-serif !important;
    font-size: 32px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    pointer-events: none !important;
    transform: translate(-50%, -50%) !important;
  }

  body.page-id-181122 .main-container .ams-native-hero-counter .uncode-nav-prev::before {
    content: "‹" !important;
  }

  body.page-id-181122 .main-container .ams-native-hero-counter .uncode-nav-next::before {
    content: "›" !important;
  }

  body.page-id-181122 .main-container .ams-native-hero-counter .uncode-nav-prev .uncode-nav-container i,
  body.page-id-181122 .main-container .ams-native-hero-counter .uncode-nav-next .uncode-nav-container i {
    visibility: hidden !important;
  }

  body.page-id-181122 .main-container .ams-native-hero-counter .uncode-nav-container,
  body.page-id-181122 .main-container .ams-native-hero-counter .uncode-nav-container-wrap {
    color: #111 !important;
    background: transparent !important;
    pointer-events: auto !important;
  }
}

/* Align the real arrow container; the theme's nav-wrap is empty. */
@media (max-width: 767px),
       (pointer: coarse) and (orientation: landscape) and (max-width: 1100px) and (max-height: 650px) {
  html body.page-id-181122 #row-unique-2 .owl-carousel-wrapper-nav {
    position: relative !important;
  }
  html body.page-id-181122 #row-unique-2 .owl-carousel-wrapper-nav > .uncode-owl-nav-out {
    position: static !important;
  }
  html body.page-id-181122 #row-unique-2 .ams-native-hero-counter {
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    z-index: 10 !important;
    display: block !important;
    box-sizing: border-box !important;
    width: min(84vw, 520px) !important;
    max-width: none !important;
    height: 236px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
  }
}
