/*
 * Site header polish.
 *
 * The big site title + tagline at the very top of the page (above the
 * Affiliate Store primary menu) comes from the active WordPress THEME's
 * own header.php — not from this plugin. Most themes (anything built on
 * the "_s"/underscores starter, which covers the WordPress default
 * themes and the majority of popular free themes like Astra,
 * GeneratePress, OceanWP, Kadence) wrap it in a predictable structure:
 *
 *   <div class="site-branding">
 *     <h1 class="site-title"><a href="...">Site Name</a></h1>
 *     <p class="site-description">Tagline</p>
 *   </div>
 *
 * This file styles that standard structure so it looks like a designed
 * header instead of raw unstyled text, and ties its color to whichever
 * skin is active. If your theme uses different class names for its
 * header, these rules simply won't apply — let us know your theme name
 * and this can be tailored to it specifically.
 *
 * Font-size, color, and text-decoration use !important because most
 * themes already apply their own (often heavier) styling here, and
 * without it this can lose the override battle unpredictably depending
 * on which stylesheet happens to load second.
 */

.site-branding {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 20px 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.site-branding .custom-logo { max-height: 56px; width: auto; margin-bottom: 6px; }

.site-title,
.site-title a {
  font-size: 26px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -.01em;
  text-decoration: none !important;
  color: var(--aap-dark-2, #232f3e) !important;
  margin: 0 !important;
}
.site-title a:hover { color: var(--aap-primary, #ff9900) !important; }

.site-description {
  font-size: 14px !important;
  color: var(--aap-muted, #6b7280) !important;
  margin: 0 !important;
  font-weight: 400 !important;
}

/* A thin brand-colored accent line under the whole header, so the
   plain white expanse reads as an intentional, designed header band
   rather than empty space. */
.site-header,
header.site-header {
  border-bottom: 3px solid var(--aap-primary, #ff9900);
  background: var(--aap-card-bg, #ffffff);
}

@media (max-width: 600px) {
  .site-branding { padding: 20px 16px 16px; }
  .site-title, .site-title a { font-size: 21px !important; }
}