/* Footer background: theme_variables.html generates a --hb-color-footer-bg
   CSS variable from params.yaml's theme.surfaces.footer.background, but no
   template anywhere actually applies it (checked - header's equivalent,
   #site-header.header { background-color: var(--hb-color-header-bg) }, in
   navbar.css, has no footer counterpart). Without this, changing
   theme.surfaces.footer.background in params.yaml has no visible effect. */
.page-footer {
  background-color: var(--hb-color-footer-bg);
  color: var(--hb-color-footer-fg);
}

/* Navbar logo sizing (ArtistPR wordmark is wide, not square) */
.navbar-brand img {
  height: 56px;
  width: auto;
  max-width: none;
}

/* Center the brand in the mobile header only. The desktop navbar keeps its
   normal left-aligned brand and flex layout.

   Taking .order-0 out of flex flow (position: absolute) means it no longer
   contributes its own height to .navbar's auto height - the row shrinks to
   whatever the toggle/search icons need, which is shorter than the 56px
   logo. The theme's own .navbar-brand img rule is `max-h-full` (max-height:
   100% of its ancestor chain), so once that ancestor chain is shorter than
   56px, the image gets clamped down to fit it even though height: 56px
   above says otherwise - max-height always wins over height when smaller.
   A forced `height: 56px !important` on the image alone (tried before)
   fixes the visible size but then overflows past this shorter header bar's
   background instead. The actual fix is to keep .navbar's own row tall
   enough to contain the 56px logo in the first place - min-height: 56px
   breaks the clamp at the source instead of fighting it after the fact,
   and the toggle/search icons just get vertically centered (align-items:
   center, already the row's default) within the now-taller row, same line
   as the logo, nothing wrapping.

   top is a fixed 28px (half of the 56px row), not top: 50% - #nav-menu is
   also a direct child of .navbar and, once the toggle is checked, wraps
   onto its own full-width row below the toggle/logo row (it's order-3 with
   w-full, forced upward by flex-wrap). That makes .navbar's own total
   height balloon to fit the open menu list. top: 50% would then center the
   logo in the middle of that whole taller box instead of staying put in
   the first row, dropping it down on top of the first menu link - a fixed
   28px always centers it in just the first 56px row, regardless of
   whether the menu below it is open or closed.

   height: 56px on .order-0 itself is ALSO required, not just on the img -
   .order-0 carries the theme's own `h-full` utility (height: 100% of
   .navbar), and once it's position: absolute, that percentage resolves
   against .navbar's own height - which balloons when the menu opens (same
   ballooning as above). translate(-50%, -50%)'s Y component is relative to
   the translated element's OWN height, so an h-full .order-0 stretched to
   match a few-hundred-pixel-tall open .navbar got shifted up by half of
   THAT, flinging the logo off the top of the screen entirely while the
   menu was open (caught with a real headless-Chrome screenshot of the open
   state, not just a grep of the compiled CSS - a plain `height: 56px`
   override pins .order-0's own box to a fixed, known size so the translate
   math stays correct regardless of how tall the open menu makes .navbar.

   Same fix already proven and shipped on artistpr and artistpr-help -
   applied here verbatim. */
@media (max-width: 1023px) {
  #site-header .navbar {
    position: relative;
    min-height: 56px;
  }

  #site-header .navbar > .order-0 {
    position: absolute;
    left: 50%;
    top: 28px;
    height: 56px;
    transform: translate(-50%, -50%);
  }

  /* Mobile only: the search button only shows once the menu is open, as
     the first item of the opened list - it's hidden in the collapsed
     header row entirely (closed state would otherwise show it both next
     to the hamburger AND again inside the opened menu). #nav-menu and the
     search button's wrapping div (.order-1) are both direct children of
     .navbar; the label (the hamburger/X toggle) keeps its own order (3)
     so it stays alone in the fixed top row - search gets a higher order
     so it falls right after that row, and #nav-menu gets a higher order
     still so the links come after search. width: 100% + justify-content:
     center + matching vertical padding makes the search row read as a
     normal first list item instead of a stray icon. */
  #site-header .navbar > .order-1 {
    display: none;
  }

  /* The toggle row needs its own min-height: 56px too, matching the logo's
     height - once the search button is pulled out of that row (order: 4
     below), the label is the only thing left in it, and a flex line's
     cross-size is just its tallest item's own height (~24px for the
     label's icon) unless something forces it taller. .navbar's min-height
     above doesn't help here: it only pads out a SHORTER-than-56px navbar,
     but the open menu makes .navbar's total content far taller than 56px,
     so there's no leftover space for align-content to redistribute onto
     this first line. Without this, the label's row collapsed to ~24-31px
     and the search row (and absolutely positioned, 56px-centered logo)
     ended up landing right on top of each other.

     margin-left: auto is also required here - the hamburger's
     right-alignment in the stock theme comes from the search button's own
     `ml-auto` class consuming the row's leftover space in front of it,
     with the hamburger simply sitting right after it. With search removed
     from flow (display: none above), there was nothing left to push the
     hamburger right, so it fell back to the flex line's start (left)
     instead of staying on the right where it has always been - this
     margin keeps it pinned right regardless of whether the search button
     is in flow. */
  #site-header .navbar > label[for="nav-toggle"] {
    min-height: 56px;
    margin-left: auto;
  }

  #nav-toggle:checked ~ .order-1 {
    display: flex;
    order: 4;
    width: 100%;
    margin-left: 0;
    justify-content: center;
    padding: 0.6rem 0;
  }

  #nav-toggle:checked ~ #nav-menu {
    order: 5;
  }
}

/* Extra breathing room after the "Artists" dropdown in the main nav -
   it's currently the only dropdown item in the menu, so .nav-dropdown is
   an unambiguous target without needing a more specific selector. */
@media (min-width: 1024px) {
  .navbar-nav .nav-dropdown {
    margin-right: 1.5rem;
  }
}

/* Footer logo sizing.
   NOTE: the footer PNG logo <img> isn't wrapped in a `.footer-logo` element
   (that class only applies to the inline-SVG code path) and carries no class
   of its own, so it's targeted via its alt text (ties to identity.name -
   "ArtistPR" - update this selector if that name ever changes). */
footer img[alt="ArtistPR"] {
  height: 56px;
  width: auto;
  max-width: none;
}

/* Footer address block (identity.tagline, repurposed) - render real newlines as line breaks */
footer img[alt="ArtistPR"] + p {
  white-space: pre-line;
  line-height: 1.6;
}

/* Home page "Here's How We Can Help" features grid: fixed 2x2 at every
   screen size (overrides the stock grid-cols-1 md:grid-cols-2
   lg:grid-cols-3 responsive stepping entirely). */
#how-we-help .grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* Home page testimonials: same `card` per-item styling as the blog post
   grid (view: card-carousel, a site-level view that delegates its
   per-item render straight to the stock "card" view - see
   layouts/_partials/views/card-carousel*.html), wrapped in a horizontal
   scroll-snap track with prev/next arrows instead of card's grid, since
   swiping alone wasn't discoverable. Same 80rem/3-column math as
   #latest-posts so cards are the same size as a blog post card, 3
   visible at once on desktop. */
.card-carousel-track {
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.card-carousel-track::-webkit-scrollbar {
  display: none;
}
.card-carousel-track > * {
  flex-shrink: 0;
  flex-basis: calc((80rem - 3rem) / 3);
  scroll-snap-align: center;
}
@media (max-width: 1024px) {
  .card-carousel-track > * {
    flex-basis: 85vw;
  }
}

/* Hide Hugo Blox "Made with..." attribution. hide_attribution in params.yaml
   is a no-op on the free tier (build warns "requires HugoBlox Premium" and
   ignores it) -- hiding via CSS per explicit request. The <p class="powered-by">
   attribution line is a sibling immediately after </footer>; the copyright
   notice is a *different* element nested inside <footer> with the same
   "powered-by" class, so this is scoped by the adjacent-sibling combinator
   rather than the shared class name. */
footer + p.powered-by {
  display: none !important;
}
/* Same attribution, smaller "Powered by Hugo Blox" credit inside the search modal */
a[href="https://hugoblox.com"] {
  display: none !important;
}

/* Center the footer copyright line (its wrapping flex container doesn't
   center by default even though the text itself has text-center) */
footer div.flex.flex-wrap.items-baseline {
  justify-content: center;
}

/* The markdown block's own wrapper (Hugo Blox's blox/markdown/block.html)
   is `flex flex-col items-center` - items-center makes each child
   shrink-to-fit instead of stretching to the container's width. The
   marquee track below is `width: max-content` so it can be as wide as
   its (very long) unclipped logo list; overflow:hidden on the marquee
   clips what's *painted*, but doesn't stop that huge intrinsic width
   from sizing its shrink-to-fit ancestor, which blows the whole section
   out past max-w-prose and (with mx-auto centering it) clips the equally
   wide caption text on both edges on mobile. Stretching this one
   section's flex item forces the marquee/caption to size against a real,
   viewport-bound width instead; text-align:center replaces the centering
   items-center was providing incidentally. */
#as-featured-on .flex.flex-col.items-center {
  align-items: stretch;
  text-align: center;
}

/* "As Featured On" logo marquee (plain markdown block - see content/_index.md).
   The stock `logos` block's carousel/marquee display_mode is unusable here
   (see the item_images bug noted where this section replaced that block),
   so this reimplements the same infinite-scroll technique by hand: the
   track's image list is duplicated once in the markup, and translateX(-50%)
   lands exactly on the start of the second (identical) half, making the
   loop seamless. */
.as-featured-on-marquee {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.as-featured-on-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
  gap: 4rem;
  animation: as-featured-on-scroll 25s linear infinite;
}
.as-featured-on-marquee:hover .as-featured-on-track {
  animation-play-state: paused;
}
@keyframes as-featured-on-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.as-featured-on-track img {
  height: 2.75rem;
  width: auto;
  max-width: none;
  flex-shrink: 0;
  transition: filter 0.2s;
}
.as-featured-on-track img:hover {
  filter: grayscale(1);
}

/* Icons in the "Here's How We Can Help" features grid: match the live
   WP home page's icon-box widgets exactly (icon_size: 80px, no
   background/frame - Elementor's default icon-box view is bare, not
   "stacked"). Icon size is an inline style (height:1.4rem) from the
   theme's own FeatureCard component, so it needs !important to override;
   the circular wrapper's background/radius are plain Tailwind classes,
   so the extra #how-we-help specificity is enough without !important
   there, but included for certainty against the dark: variant. */
#how-we-help svg {
  height: 80px !important;
  width: auto !important;
}
#how-we-help .rounded-2xl.bg-primary-100 {
  background: transparent !important;
  border-radius: 0 !important;
  width: 80px;
  height: 80px;
  margin-left: auto;
  margin-right: auto;
}
#how-we-help h3 {
  text-align: center;
  text-transform: uppercase;
}

/* Match the features section's max-width to the section right below it
   (the "Your Music, Exposed!" markdown block, which uses Tailwind's
   max-w-prose = 65ch). Features itself defaults to max-w-7xl. */
#how-we-help .max-w-7xl {
  max-width: 65ch;
}

/* Latest From The Blog: the stock `card` view wrapper hardcodes a single
   column capped at 65ch (it's designed as a text-first list view, not a
   card grid) - override to a real responsive 1/2/3-column grid at a
   wider container width suited to cards. Scoped to #latest-posts so the
   `card` view still behaves normally anywhere else it might be used. */
#latest-posts .max-w-\[65ch\] {
  max-width: 80rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 640px) {
  #latest-posts .max-w-\[65ch\] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  #latest-posts .max-w-\[65ch\] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Bottom CTA button: the cta-card component hardcodes its button to a
   white pill in "light" text mode (no content/design field exists to
   change it - checked the component source) - override to match the
   hero block's own primary_action button exactly (same gradient the
   {{< button >}} shortcode's default style now also uses - see the
   site-level layouts/_shortcodes/button.html override), reusing the
   theme's own --color-primary-*/--color-secondary-* custom properties
   so it stays in sync with any future theme recolor. */
#section-cta-card a {
  background: linear-gradient(to right, var(--color-primary-600), var(--color-secondary-600)) !important;
  color: #fff !important;
}
#section-cta-card a:hover {
  background: linear-gradient(to right, var(--color-primary-500), var(--color-secondary-500)) !important;
}

/* Center the "Get Started Now" button in the Your Music, Exposed! section.
   Targets the button by its id prefix (set by the button shortcode)
   rather than the surrounding <p>, so the paragraph text above it stays
   left-aligned - only the button itself is centered. */
#your-music-exposed a[id^="button-"] {
  display: table;
  margin-left: auto;
  margin-right: auto;
}

/* Hide date/tags/author across every post-listing view in the theme
   (card.html and date-title-summary.html - the two views actually in use
   sitewide: card for the home Latest Posts section and the /blog/ archive
   itself, date-title-summary for taxonomy-style listings). No "categories"
   badge exists in any of these view templates to begin with. Native
   design.show_date toggles were already set where available; this covers
   what has no config flag (tags, author) plus date for the view that has
   no toggle either. Bullet separators next to the hidden author/date are
   hidden too via adjacent-sibling selectors so no orphaned "•" remains. */
time[datetime] {
  display: none !important;
}
div.flex.items-center.gap-2:has(+ h3[id^="card-title-"]) {
  display: none !important;
}
div.flex.items-center.gap-2.min-w-0:has(> .relative.h-6.w-6) {
  display: none !important;
}
div.flex.items-center.gap-2.min-w-0:has(> .relative.h-6.w-6) + span.opacity-40,
time[datetime] + span.opacity-40 {
  display: none !important;
}
/* With date/read-time both hidden, the meta row's own border-top divider
   (card.html: <div class="pt-3 border-t ...">) now sits above nothing but
   a lone "Read more" link, reading as a stray/unnecessary line - drop
   the line, keep the spacing. */
div.pt-3.border-t.border-zinc-100 {
  border-top: none !important;
}

/* "Voted Top 10 Music Public Relations Firms" caption, below the As
   Featured On marquee (the badge image itself now scrolls as one of the
   marquee items, not shown separately - see content/_index.md). Small,
   centered, understated. */
.press-badge-caption {
  max-width: 36rem;
  width: 100%;
  box-sizing: border-box;
  margin: 1rem auto 0;
  padding: 0 1.5rem;
  text-align: center;
}
.press-badge-title {
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.3;
  margin: 0 0 0.25rem;
  opacity: 0.9;
}
/* Tailwind Typography's .prose blockquote styling (left border + 1em
   inline-start padding, via logical properties) was winning over the
   plain reset below on mobile - its selector specificity ends up higher
   than a single class despite the :where() wrapping. !important on the
   specific properties it sets forces this to actually be a plain,
   unindented paragraph - the left indent + border eating into an
   already-narrow mobile column is what was reading as "text cut off". */
.press-badge-quote {
  margin: 0 !important;
  padding: 0 !important;
  padding-inline-start: 0 !important;
  border: none !important;
  border-inline-start: none !important;
  max-width: 100%;
  overflow-wrap: break-word;
  font-style: italic;
  font-size: 0.8125rem;
  opacity: 0.7;
}

/* Per-post social share buttons (data/page_sharer.yaml, id="share-link-*")
   - real brand colors instead of the theme's flat neutral bubble. Colors
   are the platforms' current official brand colors (X is genuinely black
   now, not the old blue). */
#share-link-facebook {
  background-color: #1877f2;
  color: #fff;
}
#share-link-facebook:hover {
  background-color: #0d5dc9;
}
#share-link-x {
  background-color: #000;
  color: #fff;
}
#share-link-x:hover {
  background-color: #2b2b2b;
}
#share-link-linkedin {
  background-color: #0a66c2;
  color: #fff;
}
#share-link-linkedin:hover {
  background-color: #084d94;
}

/* Footer social icons (identity.social.links) - real brand colors instead
   of the theme's flat neutral, matched by href since social_links.html
   gives each icon no other per-item hook. Colors match the live
   artistpr.com site's own Elementor social-icons widget (its default
   "official colors" preset). */
footer a[href*="facebook.com"] {
  color: #1877f2 !important;
}
footer a[href*="instagram.com"] {
  color: #e1306c !important;
}
footer a[href*="twitter.com"] {
  color: #1da1f2 !important;
}
footer a[href*="youtube.com"] {
  color: #ff0000 !important;
}
footer a[href*="linkedin.com"] {
  color: #0a66c2 !important;
}
footer a[href*="trustpilot.com"] {
  color: #00b67a !important;
}
footer a[href*="facebook.com"]:hover,
footer a[href*="instagram.com"]:hover,
footer a[href*="twitter.com"]:hover,
footer a[href*="youtube.com"]:hover,
footer a[href*="linkedin.com"]:hover,
footer a[href*="trustpilot.com"]:hover {
  opacity: 0.8;
}


/* 404 sales page: reuse the LP checkout and FAQ treatment. Ported verbatim
   from artistpr's own custom.css so content/404.md (copied from the same
   repo) renders identically here. */
.sales-53-hero {
  min-height: 88svh !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.faq-item {
  border-top: 1px solid rgb(128 128 128 / 35%);
  padding: .15rem 0;
}
.faq-item:last-of-type { border-bottom: 1px solid rgb(128 128 128 / 35%); }
.faq-item summary {
  cursor: pointer;
  position: relative;
  padding: .8rem 1.6rem .8rem 0;
  font-weight: 700;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  top: .55rem;
  right: .2rem;
  font-size: 1.4rem;
  font-weight: 400;
  opacity: .7;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item .faq-body { padding: 0 0 .9rem; }
.faq-item .faq-body p:first-child { margin-top: 0; }
.checkout-buttons { margin-top: 2.25rem; }
.checkout-product-mockup { max-width: 260px; }
@media (max-width: 640px) {
  .checkout-product-mockup { max-width: 200px; }
}
/* The 404 offer page uses a scroll cue in place of a hero CTA. */
.sales-53-scroll-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 2rem auto 0;
  color: #fff;
  border: 1px solid rgb(255 255 255 / 55%);
  border-radius: 9999px;
  text-decoration: none !important;
  animation: sales-53-bounce 1.8s ease-in-out infinite;
}
.sales-53-scroll-arrow:hover {
  background: rgb(255 255 255 / 15%);
}
.sales-53-scroll-arrow svg {
  width: 1.75rem;
  height: 1.75rem;
}
@keyframes sales-53-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(.35rem); }
}
#offer {
  scroll-margin-top: 1.5rem;
}