/* ==========================================================================
   CREATORS UNCHAINED — GLOBAL LAYOUT
   Tokens live in components/theme-toggle.css. Card grid lives in
   components/grid-card.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BASE
   -------------------------------------------------------------------------- */
body {
  hyphens: manual;
  background: var(--cu-bg-main);
  background-image: none; /* Olivero's watermark pattern */
  color: var(--cu-text-main);
  font-family: var(--cu-font);
}

.page-wrapper {
  max-width: none;
  background: var(--cu-bg-main);
}

.cu-container {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--cu-container);
  margin-inline: auto;
  padding-inline: var(--cu-gutter);
}

a {
  color: var(--cu-link);
}

a:hover {
  color: var(--cu-link-hover);
}

.layout-content p,
.layout-content li,
.node__content p,
.node__content li {
  font-family: var(--cu-font);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   2. HEADER
   -------------------------------------------------------------------------- */
.cu-header {
  position: relative;
  z-index: 20;
  background: var(--cu-header-bg);
  border-bottom: 1px solid var(--cu-border);
  font-family: var(--cu-font);
}

.cu-row {
  position: relative; /* anchor for contextual pencils */
}

#cu-header .block {
  margin-block: 0;
}

/* ---- Row 1: branding + ad ---- */
.cu-row-1 {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding-block: 10px;
}

.cu-row-1 > .region {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}

/* Olivero draws the branding as a blue box — flatten it */
#cu-header .site-branding {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: none;
}

#cu-header .site-branding__inner {
  height: auto;
  padding: 0;
  gap: 12px;
}

#cu-header .site-branding__logo img {
  max-height: 48px;
}

#cu-header .site-branding__text {
  display: grid;
  gap: 2px;
  color: var(--cu-text-main);
}

#cu-header .site-branding__name {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

#cu-header .site-branding__name a {
  color: var(--cu-text-main);
  text-decoration: none;
}

#cu-header .site-branding__slogan {
  color: var(--cu-text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.3;
}

/* Anything after the branding in row 1 = the ad slot (incl. BigPipe placeholder) */
.cu-row-1 > .region > :not(.site-branding) {
  display: flex;
  flex: 0 1 728px;
  justify-content: flex-end;
  min-width: 0;
  max-width: 728px;
  overflow: hidden;
}

.cu-row-1 > .region > :not(.site-branding) img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

/* ---- Row 2: hero banner ---- */
.cu-hero {
  background: var(--cu-header-bg);
}

.cu-row-2 {
  padding-block: 0 14px;
}

.cu-row-2 .region,
.cu-row-2 .block,
.cu-row-2 .field,
.cu-row-2 .field__item {
  width: 100%;
  margin: 0;
}

.cu-row-2 img,
.cu-row-2 picture,
.cu-row-2 video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 380px;
  object-fit: cover;
  border-radius: var(--cu-radius);
}

/* ---- Row 3: main nav bar ---- */
.cu-navbar {
  background: var(--cu-bg-elevated);
  border-top: 1px solid var(--cu-border);
  border-bottom: 1px solid var(--cu-border);
}

.cu-row-3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 52px;
}

.cu-navbar__menu {
  flex: 1 1 auto;
  min-width: 0;
}

.cu-navbar__search {
  flex: 0 1 300px;
  min-width: 180px;
}

/* Primary menu — neutralise Olivero's mobile-first giant links */
#cu-header .primary-nav .block__title,
#cu-header .block-menu > h2 {
  position: absolute !important;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  word-wrap: normal;
}

#cu-header .primary-nav__menu--level-1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#cu-header .primary-nav__menu-item--level-1 {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  margin: 0;
}

#cu-header .primary-nav__menu-link--level-1 {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  padding: 8px 12px;
  border-radius: var(--cu-radius-sm);
  color: var(--cu-text-main);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
}

#cu-header .primary-nav__menu-link--level-1:hover,
#cu-header .primary-nav__menu-link--active-trail {
  color: var(--cu-text-main);
  background: var(--cu-bg-surface);
}

#cu-header .primary-nav__menu-link-inner {
  padding: 0;
}

#cu-header .primary-nav__menu-link-inner::after {
  content: none;
}

/* Sub-menu caret button */
#cu-header .primary-nav__button-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0 0 0 -8px;
  padding: 0;
  overflow: visible;
  text-indent: 0;
  cursor: pointer;
  color: var(--cu-text-muted);
  border: 0;
  background: none;
}

#cu-header .primary-nav__button-toggle .icon--menu-toggle,
#cu-header .primary-nav__button-toggle .icon--menu-toggle::before,
#cu-header .primary-nav__button-toggle .icon--menu-toggle::after {
  all: unset;
}

#cu-header .primary-nav__button-toggle .icon--menu-toggle {
  width: 7px;
  height: 7px;
  transform: rotate(45deg) translateY(-2px);
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

#cu-header .primary-nav__menu-🥕 {
  display: none;
}

/* Sub-menu dropdown (opens on hover, keyboard focus, or Olivero's click toggle) */
#cu-header .primary-nav__menu--level-2 {
  position: absolute;
  z-index: 30;
  top: 100%;
  left: 0;
  visibility: hidden;
  overflow: visible;
  min-width: 220px;
  max-height: none;
  transform: none;
  margin: 4px 0 0;
  padding: 6px;
  list-style: none;
  transition: opacity 0.15s, visibility 0.15s;
  opacity: 0;
  border: 1px solid var(--cu-border);
  border-radius: var(--cu-radius-sm);
  background: var(--cu-bg-surface);
  box-shadow: var(--cu-shadow-hover);
}

#cu-header .primary-nav__menu-item--has-children:hover > .primary-nav__menu--level-2,
#cu-header .primary-nav__menu-item--has-children:focus-within > .primary-nav__menu--level-2,
#cu-header .primary-nav__menu--level-2.is-active-menu-parent {
  visibility: visible;
  opacity: 1;
}

#cu-header .primary-nav__menu-item--level-2 {
  margin: 0;
  padding: 0;
}

#cu-header .primary-nav__menu-link--level-2 {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--cu-text-main);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
}

#cu-header .primary-nav__menu-link--level-2:hover {
  background: var(--cu-bg-elevated);
}

/* Search (works for Olivero's narrow/wide or the plain search block) */
#cu-header .block-search,
#cu-header .search-block-form {
  width: 100%;
  margin: 0;
}

#cu-header .block-search > h2 {
  display: none;
}

#cu-header .search-block-form form,
#cu-header .block-search form {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  margin: 0;
}

#cu-header .block-search .form-item,
#cu-header .search-block-form .form-item {
  flex: 1 1 auto;
  margin: 0;
}

#cu-header .block-search .form-item label {
  position: absolute !important;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
}

#cu-header .block-search input[type="search"],
#cu-header .block-search .form-search {
  box-sizing: border-box;
  width: 100%;
  min-height: 38px;
  margin: 0;
  padding: 6px 14px;
  color: var(--cu-text-main);
  border: 1px solid var(--cu-border);
  border-right: 0;
  border-radius: 999px 0 0 999px;
  background: var(--cu-bg-surface);
  font: 400 0.9rem/1.2 var(--cu-font);
}

#cu-header .block-search input[type="search"]:focus {
  outline: 2px solid var(--cu-accent);
  outline-offset: -1px;
}

#cu-header .block-search .form-actions {
  margin: 0;
}

#cu-header .block-search .form-actions input,
#cu-header .block-search .form-actions button,
#cu-header .block-search .form-submit {
  height: 38px;
  min-height: 38px;
  margin: 0;
  padding: 6px 14px;
  cursor: pointer;
  color: var(--cu-accent-contrast);
  border: 1px solid var(--cu-accent);
  border-radius: 0 999px 999px 0;
  background: var(--cu-accent);
  font: 600 0.85rem/1.2 var(--cu-font);
}

/* Olivero's icon-only submit (when the block sits in an Olivero menu region) */
#cu-header .block-search .search-form__submit {
  width: auto;
  height: 38px;
  color: var(--cu-accent-contrast);
}

/* ---- Row 4: user menus + toggle ---- */
.cu-subbar {
  background: var(--cu-header-bg);
}

.cu-row-4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 46px;
  padding-block: 6px;
}

.cu-subbar__menus {
  flex: 1 1 auto;
  min-width: 0;
}

#cu-header .region--secondary-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 4px 28px;
  margin: 0;
}

#cu-header .secondary-nav {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0;
}

#cu-header .secondary-nav::before {
  content: none;
}

#cu-header .secondary-nav__menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#cu-header .secondary-nav__menu-item {
  width: auto;
  max-width: none;
  margin: 0;
}

#cu-header .secondary-nav__menu-link {
  color: var(--cu-text-muted);
  text-decoration: none;
  white-space: nowrap;
}

#cu-header .secondary-nav__menu-link:hover {
  color: var(--cu-text-main);
}

#cu-header .secondary-nav__menu-link::after {
  border-top-width: 2px;
}

/* Dashboard menu: separate it visually from the account menu */
#cu-header #block-theme2-dashboard {
  padding-inline-start: 18px;
  border-inline-start: 2px solid var(--cu-border);
}

/* ---- Mobile menu button (hidden on desktop) ---- */
.cu-nav-toggle {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
  padding: 8px 12px;
  cursor: pointer;
  color: var(--cu-text-main);
  border: 1px solid var(--cu-border);
  border-radius: var(--cu-radius-sm);
  background: var(--cu-bg-elevated);
  font: 600 0.9rem/1 var(--cu-font);
}

.cu-nav-toggle__bars {
  display: inline-grid;
  gap: 3px;
}

.cu-nav-toggle__bars span {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

@media (max-width: 900px) {
  .cu-row-1 {
    flex-wrap: wrap;
  }

  .cu-row-1 > .region {
    flex-wrap: wrap;
  }

  .cu-row-1 > .region > :not(.site-branding) {
    flex: 1 1 100%;
    justify-content: center;
    max-width: none;
    order: 5;
  }

  .cu-nav-toggle {
    display: inline-flex;
    order: 2;
  }

  .cu-row-1 > .region {
    display: contents;
  }

  .cu-row-1 .site-branding {
    order: 1;
  }

  #cu-header .site-branding__name {
    font-size: 1.3rem;
  }

  /* Collapsed nav (only when JS is running; without JS it stays open) */
  html.js .cu-header__nav {
    display: none;
  }

  html.js .cu-header.is-nav-open .cu-header__nav {
    display: block;
  }

  .cu-row-3,
  .cu-row-4 {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding-block: 12px;
  }

  .cu-navbar__search {
    flex-basis: auto;
    min-width: 0;
  }

  #cu-header .primary-nav__menu--level-1 {
    flex-direction: column;
    align-items: stretch;
  }

  #cu-header .primary-nav__menu-item--level-1 {
    flex-wrap: wrap;
  }

  #cu-header .primary-nav__menu-link--level-1 {
    flex: 1 1 auto;
  }

  #cu-header .primary-nav__menu--level-2 {
    position: static;
    display: none;
    flex-basis: 100%;
    margin: 0 0 6px 12px;
    box-shadow: none;
  }

  #cu-header .primary-nav__menu--level-2.is-active-menu-parent {
    display: block;
  }

  #cu-header .region--secondary-menu {
    flex-direction: column;
    align-items: flex-start;
  }

  #cu-header #block-theme2-dashboard {
    padding-inline-start: 0;
    border: 0;
  }

  .cu-theme-toggle {
    align-self: flex-start;
  }
}

/* ---- Phones: menu buttons + "Creators" menu (header-nav.js) ---- */
.cu-nav-toggles {
  display: none;
}

.cu-main-fold__wrap {
  display: none;
}

@media (max-width: 900px) {
  .cu-nav-toggles {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 8px;
    margin-inline-start: auto;
    order: 2;
  }

  .cu-nav-toggles .cu-nav-toggle {
    margin: 0;
  }

  /* The open drawer's button is highlighted. */
  .cu-nav-toggle[aria-expanded="true"] {
    color: var(--cu-accent-contrast);
    border-color: var(--cu-accent);
    background: var(--cu-accent);
  }

  /* -- Creators menu: site menu folded behind a "Main menu" row -- */
  .cu-header.is-mode-creators .cu-main-fold__wrap {
    display: block;
    padding-block: 10px 0;
  }

  .cu-main-fold {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    color: var(--cu-text-muted);
    border: 1px solid var(--cu-border);
    border-radius: var(--cu-radius-sm);
    background: transparent;
    font: 600 0.9rem/1 var(--cu-font);
  }

  .cu-main-fold[aria-expanded="true"] {
    color: var(--cu-text-main);
  }

  html.js .cu-header.is-mode-creators:not(.is-main-unfolded) .cu-row-3 {
    display: none;
  }

  /* -- Creators menu: account menu up front, as a big list -- */
  .cu-header.is-mode-creators #block-theme2-account-menu {
    width: 100%;
    font-size: 1.05rem;
  }

  .cu-header.is-mode-creators #block-theme2-account-menu .secondary-nav__menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .cu-header.is-mode-creators #block-theme2-account-menu .secondary-nav__menu-link {
    display: block;
    padding: 11px 4px;
    color: var(--cu-text-main);
    border-bottom: 1px solid var(--cu-border);
  }

  /* Back office (Analytics...) stays as it is: small and muted, set apart. */
  .cu-header.is-mode-creators #block-theme2-dashboard {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 2px solid var(--cu-border);
  }
}

/* --------------------------------------------------------------------------
   3. MAIN LAYOUT
   -------------------------------------------------------------------------- */
.cu-main {
  position: relative;
  z-index: 1;
  background: var(--cu-bg-main);
}

.cu-main__inner {
  padding-block: 28px 56px;
}

.cu-main__grid.has-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 32px;
}

@media (max-width: 1000px) {
  .cu-main__grid.has-sidebar {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Olivero narrows content to a 14-col grid; let full pages use the width */
.cu-main .region--content,
.cu-main .region--content-above,
.cu-main .region--content-below {
  display: block;
}

.cu-main .block {
  margin-block-end: 24px;
}

.cu-main .page-title {
  margin: 0 0 20px;
  color: var(--cu-text-main);
  font-family: var(--cu-font);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Menus placed in content regions sit in a horizontal row */
:is(.region--highlighted, .region--content-above, .region--content, .region--content-below) .block-menu ul.menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

:is(.region--highlighted, .region--content-above, .region--content, .region--content-below) .block-menu ul.menu li {
  margin: 0;
  padding: 0;
}

:is(.region--highlighted, .region--content-above, .region--content, .region--content-below) .block-menu ul.menu a {
  font-weight: 600;
  text-decoration: none;
}

/* Olivero node surfaces in dark mode */
html.cu-dark-mode .node--view-mode-full,
html.cu-dark-mode .text-content {
  color: var(--cu-text-main);
}

html.cu-dark-mode .button--primary,
html.cu-dark-mode .button--primary:hover {
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   4. NODE HERO BANNERS (SFW / NSFW)
   -------------------------------------------------------------------------- */
/* Hide the SFW banner only if the NSFW banner actually has an image */
.node:has(.field--name-field-nsfw-banner img) .field--name-field-sfw-banner {
  display: none !important;
}

.field--name-field-sfw-banner,
.field--name-field-nsfw-banner {
  display: flex;
  justify-content: center;
  width: 100%;
}

.field--name-field-sfw-banner img,
.field--name-field-nsfw-banner img {
  display: block;
  width: 100%;
  max-width: 1400px;
  height: auto;
  max-height: 400px;
  margin: 0 auto 24px;
  object-fit: cover;
  border-radius: var(--cu-radius);
}

/* --------------------------------------------------------------------------
   5. STREAM MEDIA HIERARCHY (TRAILERS > THUMBS)
   -------------------------------------------------------------------------- */
/* NSFW thumbnail wins over SFW. The SFW loop is only hidden when an NSFW
   loop is actually rendered (see grid-card.css), so a card with an NSFW
   thumbnail but no NSFW loop still gets the SFW loop on hover. */
.node:has(.field--name-field-nsfw-thumbnail img) .field--name-field-sfw-thumbnail {
  display: none !important;
}

.node:has(.field--name-field-nsfw-loop-id .bunny-hover-wrapper) .field--name-field-sfw-loop-id {
  display: none !important;
}

.node:has(.field--name-field-nsfw-trailer) .field--name-field-sfw-trailer {
  display: none !important;
}

.node:has(.field--name-field-nsfw-trailer) .field--name-field-nsfw-thumbnail,
.node:has(.field--name-field-nsfw-trailer) .field--name-field-sfw-thumbnail,
.node:has(.field--name-field-sfw-trailer) .field--name-field-nsfw-thumbnail,
.node:has(.field--name-field-sfw-trailer) .field--name-field-sfw-thumbnail,
.node:has(.field--name-field-nsfw-trailer) .field--name-field-nsfw-loop-id,
.node:has(.field--name-field-nsfw-trailer) .field--name-field-sfw-loop-id,
.node:has(.field--name-field-sfw-trailer) .field--name-field-nsfw-loop-id,
.node:has(.field--name-field-sfw-trailer) .field--name-field-sfw-loop-id {
  display: none !important;
}

/* --------------------------------------------------------------------------
   6. BUY / PAYWALL BUTTONS
   -------------------------------------------------------------------------- */
.flag-buy-now a {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 600px;
  margin-bottom: 10px;
  padding: 14px;
  transition: filter 0.15s;
  text-align: center;
  text-decoration: none;
  color: var(--cu-buy-text) !important;
  border-radius: var(--cu-radius-sm);
  background-color: var(--cu-buy);
  font-size: 1.1em;
  font-weight: 700;
}

.flag-buy-now a:hover {
  filter: brightness(0.93);
}

.cu-paywall-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  max-width: 600px;
  margin-top: 0;
}

.cu-paywall-wrapper button {
  flex: 1 1 200px;
  padding: 8px;
  cursor: not-allowed;
  opacity: 0.7;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 0.9em;
  font-weight: 600;
}

.cu-paywall-wrapper button.cu-lightning {
  background-color: #f7931a;
}

.cu-paywall-wrapper button.cu-stablecoin {
  background-color: #85bb65;
}

/* External-only / processing / free states (set in theme2.theme) */
.cu-external-only-badge a,
a.cu-external-only-badge,
.cu-processing-badge a,
a.cu-processing-badge,
.cu-free-badge a,
a.cu-free-badge {
  display: inline-block;
  padding: 10px 15px;
  text-decoration: none !important;
  border-radius: 6px;
  font-weight: 600;
}

.cu-external-only-badge a,
a.cu-external-only-badge,
.cu-external-only-badge a:hover,
a.cu-external-only-badge:hover {
  pointer-events: none;
  cursor: not-allowed;
  color: #856404 !important;
  border: 1px solid #ffeeba;
  background-color: #fff9c4 !important;
  box-shadow: none;
  filter: none;
}

.cu-processing-badge a,
a.cu-processing-badge,
.cu-processing-badge a:hover,
a.cu-processing-badge:hover {
  pointer-events: none;
  cursor: wait;
  color: #616161 !important;
  border: 1px solid #bdbdbd;
  background-color: #e0e0e0 !important;
  box-shadow: none;
  filter: none;
}

.cu-free-badge a,
a.cu-free-badge {
  color: #155724 !important;
  border: 1px solid #c3e6cb;
  background-color: #d4edda !important;
}

.cu-free-badge a:hover,
a.cu-free-badge:hover {
  background-color: #c3e6cb !important;
}

/* --------------------------------------------------------------------------
   7. SMALL BADGES / PILLS
   -------------------------------------------------------------------------- */
.cu-green-flag-table-badge {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 6px;
  color: #000000;
  border: 1px solid #00aa00;
  border-radius: 4px;
  background-color: #00ff00;
  font-size: 0.85em;
  font-weight: bold;
}

.cu-flag-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  margin-right: 8px;
  padding: 0 8px;
  cursor: help;
  vertical-align: middle;
  color: #ffffff;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
}

.cu-pill-light-green  { color: #000000; border: 1px solid #4caf50; background-color: #81c784; }
.cu-pill-light-blue   { color: #000000; border: 1px solid #03a9f4; background-color: #4fc3f7; }
.cu-pill-light-orange { color: #000000; border: 1px solid #ff9800; background-color: #ffb74d; }
.cu-pill-bright-green  { border: 1px solid #00c853; background-color: #00e676; }
.cu-pill-bright-blue   { border: 1px solid #0039cb; background-color: #2962ff; }
.cu-pill-bright-orange { border: 1px solid #e65100; background-color: #ff6d00; }

span.cu-admin-badge[title*="Founder"] {
  filter: hue-rotate(285deg) saturate(2);
}

span.cu-admin-badge[title*="Silver"] {
  filter: grayscale(100%) brightness(1.3);
}

/* --------------------------------------------------------------------------
   8. SPLASH / AGE GATE OVERLAY
   Fixed high-contrast palette (white card, near-black text) in both light and
   dark mode. Selectors are prefixed with `html body` and use !important so
   Olivero's .text-content link/paragraph styles (blue text, underline bar,
   serif font) and inline styles from the block body can't override them.
   Buttons are matched by class AND by link target, so they work whatever
   markup the block body uses:
     Register  (/user/register)  solid blue, white label
     Log In    (/user/login)     light blue, the lightest button
     Continue  (dismiss)         white with dark outline
   -------------------------------------------------------------------------- */
.cu-splash-overlay {
  position: fixed;
  z-index: 99999;
  inset: 0;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgb(10 10 15 / 88%);
  backdrop-filter: blur(8px);
}

html body .cu-splash-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 600px;
  padding: 36px 32px 32px;
  text-align: center;
  color: #0b0c0f;
  border: 1px solid #c9ced8;
  border-radius: var(--cu-radius);
  background: #ffffff;
  box-shadow: 0 20px 40px rgb(0 0 0 / 60%);
  font-family: var(--cu-font);
  color-scheme: light;
}

/* All splash text: solid near-black, full opacity, site sans-serif font */
html body .cu-splash-card :is(h1, h2, h3, h4, h5, h6, p, li, span, div, strong, b, em, i, small, label, font) {
  color: #0b0c0f !important;
  opacity: 1 !important;
  font-family: var(--cu-font) !important;
}

html body .cu-splash-card :is(h1, h2, h3) {
  margin: 0 0 18px;
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1.2;
}

html body .cu-splash-card p {
  margin: 0 0 22px;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.55;
}

/* Public notice: pale yellow panel, dark text */
html body .cu-splash-card .cu-splash-notice {
  margin: 0 0 28px;
  padding: 14px 18px;
  text-align: left;
  border-left: 4px solid #e0a800;
  border-radius: 4px;
  background: #fff4cc;
}

html body .cu-splash-card .cu-splash-notice,
html body .cu-splash-card .cu-splash-notice * {
  color: #1f1600 !important;
  font-size: 1.02rem;
  line-height: 1.5;
}

html body .cu-splash-card .cu-splash-notice p {
  margin: 0;
}

html body .cu-splash-card .cu-splash-notice strong {
  font-weight: 800;
}

/* Inline text links inside the copy (not buttons) */
html body .cu-splash-card a:not(.cu-splash-btn):not([href*="/user/login"]):not([href*="/user/register"]) {
  color: #0b0c0f !important;
  font-weight: 700;
  text-decoration: underline !important;
  box-shadow: none !important;
}

/* ---- Buttons ---- */
html body .cu-splash-card .cu-splash-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0;
}

html body .cu-splash-card :is(.cu-splash-btn, .cu-splash-actions a, .cu-splash-actions button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 48px;
  margin: 0;
  padding: 12px 22px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  text-decoration: none !important;
  opacity: 1 !important;
  border: 2px solid transparent;
  border-radius: 8px;
  box-shadow: none !important; /* kills Olivero's blue underline bar */
  font-family: var(--cu-font) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.2;
}

/* Labels inside buttons follow the button colour */
html body .cu-splash-card :is(.cu-splash-btn, .cu-splash-actions a, .cu-splash-actions button) * {
  color: inherit !important;
  font: inherit !important;
}

/* Register / primary: solid blue, white label */
html body .cu-splash-card :is(.cu-splash-btn-primary, a[href*="/user/register"]),
html body .cu-splash-card :is(.cu-splash-btn-primary, a[href*="/user/register"]):hover {
  color: #ffffff !important;
  border-color: #0050c8;
  background: #0058d6;
}

html body .cu-splash-card :is(.cu-splash-btn-primary, a[href*="/user/register"]):hover {
  background: #0047ad;
}

/* Continue / outline: white with dark outline and dark label */
html body .cu-splash-card :is(.cu-splash-btn-outline, #cu-splash-dismiss),
html body .cu-splash-card :is(.cu-splash-btn-outline, #cu-splash-dismiss):hover {
  color: #0b0c0f !important;
  border-color: #0b0c0f;
  background: #ffffff;
}

html body .cu-splash-card :is(.cu-splash-btn-outline, #cu-splash-dismiss):hover {
  background: #eef0f4;
}

/* Secondary (anything else): dark grey, white label */
html body .cu-splash-card .cu-splash-btn-secondary {
  color: #ffffff !important;
  background: #2b2f3a;
}

/* Log In: the light one. Placed last so it wins over the class rules above. */
html body .cu-splash-card a[href*="/user/login"],
html body .cu-splash-card a[href*="/user/login"]:hover {
  color: #0a3a8c !important;
  border-color: #8db8ff;
  background: #e3eeff;
}

html body .cu-splash-card a[href*="/user/login"]:hover {
  background: #cfe1ff;
}

:is(.cu-splash-btn, .cu-splash-actions a, .cu-splash-actions button):focus-visible {
  outline: 3px solid #ffbf47;
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   9. VIEWS UPSELL BANNER (logged-out gate on cart/bookmarks)
   -------------------------------------------------------------------------- */
.cu-upsell-wrapper {
  max-width: 800px;
  margin: 2rem 0;
}

.cu-upsell-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3rem;
  padding: 1.5rem;
  color: var(--cu-bg-surface);
  border-radius: var(--cu-radius-sm);
  background-color: var(--cu-text-main);
}

.cu-upsell-banner-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.cu-upsell-banner-text {
  font-family: var(--cu-font);
  font-size: 1.1rem;
  font-weight: 600;
}

.cu-upsell-close {
  cursor: pointer;
  opacity: 0.7;
}

.cu-upsell-close:hover {
  opacity: 1;
}

.cu-upsell-text h3 {
  margin-bottom: 2rem;
}

.cu-upsell-text p {
  margin-bottom: 1.5rem;
  font-size: 1.15rem;
}

/* --------------------------------------------------------------------------
   9b. NOTICES — the one banner / call-out component (cu_access_notice(),
   template: cu_access/templates/cu-notice.html.twig)
     .cu-notice--upsell   bold banner: log in / Professionals only
     .cu-notice--cta      centred card with title + button (upgrade, members only)
     .cu-notice--info     quiet call-out with instructions
     .cu-notice--warning  something is blocked right now
   The .cu-upsell-* rules above are kept for any Views headers still using them.
   -------------------------------------------------------------------------- */
.cu-notice {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  box-sizing: border-box;
  max-width: 800px;
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--cu-border);
  border-radius: var(--cu-radius-sm);
  background: var(--cu-bg-surface);
  color: var(--cu-text-main);
  font-family: var(--cu-font);
}

.cu-notice__icon {
  flex: none;
}

.cu-notice__icon-bg {
  fill: var(--cu-buy);
}

.cu-notice__icon-mark {
  fill: var(--cu-buy-text);
}

.cu-notice__body {
  flex: 1;
  min-width: 0;
}

.cu-notice__title {
  margin: 0 0 0.5rem;
  font-size: 1.35rem;
  line-height: 1.3;
}

.cu-notice__message {
  line-height: 1.55;
}

.cu-notice__message p:last-child {
  margin-bottom: 0;
}

.cu-notice__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.cu-notice__actions .button {
  margin: 0;
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--cu-border);
  border-radius: var(--cu-radius-sm);
  background: var(--cu-bg-elevated);
  color: var(--cu-text-main);
  font-weight: 600;
  text-decoration: none;
}

.cu-notice__actions .button--primary {
  border-color: var(--cu-accent);
  background: var(--cu-accent);
  color: var(--cu-accent-contrast);
}

.cu-notice__actions .button:hover {
  filter: brightness(1.08);
}

/* Upsell: the bold inverted banner (was .cu-upsell-banner) */
.cu-notice--upsell {
  align-items: center;
  margin-bottom: 3rem;
  padding: 1.5rem;
  border-color: transparent;
  background: var(--cu-text-main);
  color: var(--cu-bg-surface);
}

.cu-notice--upsell .cu-notice__message {
  font-size: 1.1rem;
  font-weight: 600;
}

.cu-notice--upsell .cu-notice__actions {
  margin-top: 0.75rem;
}

.cu-notice--upsell .cu-notice__actions .button:not(.button--primary) {
  border-color: var(--cu-bg-surface);
  background: transparent;
  color: var(--cu-bg-surface);
}

/* CTA: centred card */
.cu-notice--cta {
  flex-direction: column;
  align-items: center;
  max-width: 600px;
  margin: 2.5rem auto;
  padding: 2.5rem 1.5rem;
  border-radius: var(--cu-radius);
  background: var(--cu-bg-elevated);
  text-align: center;
}

.cu-notice--cta .cu-notice__title {
  color: var(--cu-accent-warm);
}

.cu-notice--cta .cu-notice__message {
  font-size: 1.1rem;
}

.cu-notice--cta .cu-notice__actions {
  justify-content: center;
  margin-top: 1.5rem;
}

/* Info: quiet call-out */
.cu-notice--info {
  max-width: none;
  border-width: 0 0 0 4px;
  border-color: var(--cu-accent);
  border-radius: 0;
  background: var(--cu-bg-elevated);
}

.cu-notice--info a {
  font-weight: 700;
  text-decoration: underline;
}

/* Warning: blocked right now */
.cu-notice--warning {
  align-items: center;
  border-width: 0 0 0 4px;
  border-color: var(--cu-accent-warm);
  background: var(--cu-bg-elevated);
}

@media (max-width: 600px) {
  .cu-notice--upsell {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Manage Subscribers form (was an inline light-grey box that ignored dark mode) */
.cu-manage-subscribers-form {
  box-sizing: border-box;
  max-width: 800px;
  padding: 20px;
  border: 1px solid var(--cu-border);
  border-radius: var(--cu-radius-sm);
  background: var(--cu-bg-surface);
}

.cu-manage-subscribers-form .form-submit {
  margin-top: 20px;
}

/* --------------------------------------------------------------------------
   10. FORMS / FIELD GROUPS / TAGGING
   -------------------------------------------------------------------------- */
.cu-large-description .fieldset__description,
.cu-large-description .details-description,
.cu-large-description .form-item__description,
.cu-large-description > .description {
  display: block;
  margin-bottom: 15px;
  color: var(--cu-text-main);
  font-size: 1.2rem;
  font-weight: 600;
}

div[class*="field--name-field-tagging-"] {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

div[class*="field--name-field-tagging-"] .field__label {
  margin: 0;
  font-weight: bold;
}

div[class*="field--name-field-tagging-"] .field__item {
  margin: 0;
}

html.cu-dark-mode :is(input, select, textarea):not([type="submit"], [type="checkbox"], [type="radio"]) {
  color: var(--cu-text-main);
  border-color: var(--cu-border);
  background-color: var(--cu-bg-elevated);
}

/* --------------------------------------------------------------------------
   11. FOOTER
   -------------------------------------------------------------------------- */
.cu-footer {
  padding-block: 32px;
  color: var(--cu-text-muted);
  border-top: 1px solid var(--cu-border);
  background: var(--cu-header-bg);
}

.cu-footer a {
  color: var(--cu-text-main);
}

.cu-footer .region {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  width: auto;
  margin: 0;
  padding: 0;
}

.cu-footer .region > *,
.cu-footer .block {
  margin: 0;
}

.cu-footer .block-menu > h2 {
  position: absolute !important;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
}

.cu-footer .site-footer__top + .site-footer__bottom {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--cu-border);
}

.cu-footer .block-menu ul.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --------------------------------------------------------------------------
   12. CONTEXTUAL PENCILS (admin only)
   -------------------------------------------------------------------------- */
#cu-header .contextual {
  z-index: 100;
}

#cu-header .contextual .contextual-links {
  right: 0;
  left: auto;
  text-align: right;
}

/* ---- Professional Bio: "Contact" button under the author name ----
   Built in theme2_preprocess_node(), printed by
   node--bio-professional--full.html.twig. */
.cu-bio-contact {
  margin: 1.25rem 0 2rem;
  padding: 1.25rem 0;
  border-block: 1px solid rgba(128, 128, 128, 0.3);
}

.cu-bio-contact .button {
  margin: 0;
  padding: 0.9rem 2.25rem;
  font-size: 1.1rem;
  font-weight: 700;
}