/* 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;
}

/* 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;
}