/* =============================================================
   COMPONENTS  — css/components.css
   Top bar, logo, footer (white theme), misc UI.
   ============================================================= */

/* ═══════════════════════════════════════════════════════════════
   TOP BAR
   Slim banner above the sticky header. Dark green background,
   white text. Right side has USA flag + Europe coming-soon tooltip.
   ════════════════════════════════════════════════════════════ */
.pq-topbar {
  background:  var(--pq-green);
  color:       rgba(255,255,255,.9);
  font-size:   .78rem;
  font-weight: 500;
  line-height: 1;
}
.pq-topbar__inner {
  display:               grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:           center;
  height:                36px;
  width:                 min(calc(100% - 2 * var(--pq-gutter)), var(--pq-max));
  margin-inline:         auto;
  gap:                   16px;
}

/* Left — shipping message */
.pq-topbar__left  { display: flex; align-items: center; }
.pq-topbar__msg {
  display:     flex;
  align-items: center;
  gap:         7px;
  white-space: nowrap;
}
.pq-topbar__msg svg { opacity: .8; flex-shrink: 0; }
.pq-topbar__msg strong { color: #fff; font-weight: 700; }

/* Center — promo */
.pq-topbar__center {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  white-space:      nowrap;
  font-weight:      600;
  color:            rgba(255,255,255,.85);
}

/* Right — region switcher */
.pq-topbar__right { display: flex; justify-content: flex-end; }

.pq-region { position: relative; }

.pq-region__btn {
  display:       flex;
  align-items:   center;
  gap:           7px;
  background:    none;
  border:        none;
  cursor:        pointer;
  font-family:   var(--pq-font);
  font-size:     .78rem;
  font-weight:   600;
  color:         rgba(255,255,255,.9);
  padding:       4px 0;
  transition:    color var(--pq-ease);
}
.pq-region__btn:hover,
.pq-region__btn--active { color: #fff; }

/* Flag SVG sizing */
.pq-flag {
  width:         20px;
  height:        14px;
  border-radius: 2px;
  flex-shrink:   0;
  box-shadow:    0 0 0 1px rgba(255,255,255,.15);
}

/* Hover dropdown */
.pq-region__dropdown {
  display:       none;
  position:      absolute;
  top:           calc(100% + 10px);
  right:         0;
  min-width:     200px;
  background:    var(--pq-white);
  border:        1px solid var(--pq-border);
  border-radius: var(--pq-radius-lg);
  box-shadow:    var(--pq-shadow-lg);
  padding:       6px;
  z-index:       500;
}
.pq-region:hover .pq-region__dropdown { display: block; }

/* Arrow pointer */
.pq-region__dropdown::before {
  content:      '';
  position:     absolute;
  top:          -6px; right: 16px;
  width:        11px; height: 11px;
  background:   var(--pq-white);
  border-left:  1px solid var(--pq-border);
  border-top:   1px solid var(--pq-border);
  transform:    rotate(45deg);
}

.pq-region__option {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       10px 12px;
  border-radius: var(--pq-radius);
  color:         var(--pq-ink);
  font-size:     .85rem;
  font-weight:   600;
}
.pq-region__option--soon {
  opacity:  .65;
  cursor:   default;
  pointer-events: none;
}
.pq-region__badge {
  margin-left:   auto;
  background:    var(--pq-sand);
  border:        1px solid var(--pq-border);
  border-radius: 999px;
  padding:       2px 8px;
  font-size:     .68rem;
  font-weight:   700;
  color:         var(--pq-muted);
  white-space:   nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   LOGO — inside header
   the_custom_logo() wraps img in <a class="custom-logo-link">
   We target both our .pq-logo img and WP's output.
   ════════════════════════════════════════════════════════════ */
.pq-logo img,
.pq-logo .custom-logo-link img,
.custom-logo-link img {
  height:     40px;
  width:      auto;
  max-width:  200px;
  object-fit: contain;
  display:    block;
}
/* Remove WP's default link styles on custom logo anchor */
.custom-logo-link { display: inline-flex; line-height: 0; }

/* ═══════════════════════════════════════════════════════════════
   FOOTER  — white background, rich layout
   ════════════════════════════════════════════════════════════ */
.pq-footer {
  background:  var(--pq-white);
  color:       var(--pq-ink);
  border-top:  1px solid var(--pq-border);
  padding-top: 0;
}

/* ── Trust bar (4-up icon row at very top of footer) ──────── */
.pq-footer__trustbar {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   0;
  border-bottom:         1px solid var(--pq-border);
}
.pq-footer__trust-item {
  display:       flex;
  align-items:   center;
  gap:           14px;
  padding:       24px 28px;
  border-right:  1px solid var(--pq-border);
}
.pq-footer__trust-item:last-child { border-right: none; }
.pq-footer__trust-icon {
  width:         44px;
  height:        44px;
  border-radius: 50%;
  background:    var(--pq-sand);
  display:       grid;
  place-items:   center;
  flex-shrink:   0;
  color:         var(--pq-green);
}
.pq-footer__trust-item strong {
  display:     block;
  font-size:   .875rem;
  font-weight: 800;
  color:       var(--pq-ink);
  line-height: 1.3;
}
.pq-footer__trust-item span {
  display:   block;
  font-size: .78rem;
  color:     var(--pq-muted);
  margin-top: 2px;
}

/* ── Main grid ────────────────────────────────────────────── */
.pq-footer__main {
  display:               grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1.4fr;
  gap:                   clamp(20px, 3vw, 48px);
  padding:               clamp(36px, 5vw, 64px) 0 clamp(32px, 4vw, 56px);
  border-bottom:         1px solid var(--pq-border);
}

/* Brand column */
.pq-footer__brand {}
.pq-footer__logo { display: inline-block; margin-bottom: 16px; }
.pq-footer__logo img { height: 32px; width: auto; }

.pq-footer__brand p {
  font-size:   .875rem;
  color:       var(--pq-muted);
  line-height: 1.65;
  margin-bottom: 18px;
  max-width:   280px;
}

/* Social icons */
.pq-footer__social {
  display: flex;
  gap:     10px;
}
.pq-footer__social a {
  width:         36px;
  height:        36px;
  border-radius: 50%;
  border:        1.5px solid var(--pq-border);
  display:       grid;
  place-items:   center;
  color:         var(--pq-muted);
  transition:    border-color var(--pq-ease), color var(--pq-ease), background var(--pq-ease);
}
.pq-footer__social a:hover {
  border-color: var(--pq-green);
  color:        var(--pq-green);
  background:   var(--pq-sage);
}

/* Link columns */
.pq-footer__col h4 {
  font-size:      .72rem;
  font-weight:    800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color:          var(--pq-muted);
  margin-bottom:  16px;
}
.pq-footer__col ul { list-style: none; margin: 0; padding: 0; }
.pq-footer__col ul li { margin-bottom: 10px; }
.pq-footer__col a {
  font-size:   .875rem;
  color:       var(--pq-ink);
  font-weight: 500;
  transition:  color var(--pq-ease);
}
.pq-footer__col a:hover { color: var(--pq-green); }

/* Newsletter column */
.pq-footer__col--newsletter h4 { /* inherits */ }
.pq-footer__col--newsletter > p {
  font-size:     .875rem;
  color:         var(--pq-muted);
  line-height:   1.6;
  margin-bottom: 14px;
}
.pq-footer__fine {
  font-size:  .74rem !important;
  color:      var(--pq-muted) !important;
  margin-top: 8px;
}

/* Newsletter form */
.pq-newsletter {
  display:       flex;
  border:        1.5px solid var(--pq-border);
  border-radius: 999px;
  overflow:      hidden;
  background:    var(--pq-white);
  transition:    border-color var(--pq-ease);
}
.pq-newsletter:focus-within { border-color: var(--pq-green); }
.pq-newsletter input {
  flex:       1;
  border:     0;
  padding:    11px 14px;
  font:       inherit;
  font-size:  .85rem;
  background: transparent;
  outline:    none;
  min-width:  0;
  color:      var(--pq-ink);
}
.pq-newsletter button {
  width:         40px;
  height:        40px;
  border:        0;
  border-radius: 50%;
  background:    var(--pq-green);
  color:         #fff;
  cursor:        pointer;
  font-size:     .95rem;
  flex-shrink:   0;
  margin:        3px;
  display:       grid;
  place-items:   center;
  transition:    background var(--pq-ease);
}
.pq-newsletter button:hover { background: var(--pq-green-mid); }

/* Payment icons */
.pq-footer__pay {
  display:    flex;
  flex-wrap:  wrap;
  gap:        6px;
  margin-top: 14px;
}
.pq-footer__pay span {
  background:    var(--pq-sand);
  border:        1px solid var(--pq-border);
  border-radius: 6px;
  padding:       4px 8px;
  font-size:     .68rem;
  font-weight:   700;
  color:         var(--pq-muted);
  letter-spacing: .04em;
}

/* ── Bottom bar ───────────────────────────────────────────── */
.pq-footer__bottom {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             12px;
  padding:         18px 0;
  font-size:       .8rem;
  color:           var(--pq-muted);
}
.pq-footer__legal {
  display: flex;
  gap:     20px;
}
.pq-footer__legal a {
  font-size:  .8rem;
  color:      var(--pq-muted);
  transition: color var(--pq-ease);
}
.pq-footer__legal a:hover { color: var(--pq-green); }

/* ── Single-product trust badges ────────────────────────────── */
.pq-single-trust span {
  background:    var(--pq-sand);
  border:        1px solid var(--pq-border);
  border-radius: 999px;
  padding:       6px 10px;
  font-size:     .78rem;
  font-weight:   700;
}

/* PawQuest fallback logo when no custom logo is configured */
.pq-logo,.pq-footer__logo{display:inline-flex;align-items:center;gap:10px;font-weight:900;letter-spacing:-.035em;color:var(--pq-ink)}
.pq-logo-mark{width:38px;height:38px;border-radius:12px;background:var(--pq-green);color:#fff;display:grid;place-items:center;font-weight:900;position:relative;line-height:1}
.pq-logo-mark::after{content:'🐾';font-size:11px;position:absolute;right:4px;bottom:3px;line-height:1}
.pq-logo-text{font-size:1.25rem;line-height:1}.pq-logo-text span{color:var(--pq-green-light)}
.pq-footer__logo .pq-logo-mark{width:34px;height:34px}.pq-footer__logo .pq-logo-text{font-size:1.05rem}
.pq-footer-menu{display:flex;gap:14px;flex-wrap:wrap}.pq-footer-menu a{color:var(--pq-muted);font-size:.82rem}
.pq-page-shell{background:var(--pq-white);border:1px solid var(--pq-border);border-radius:var(--pq-radius-lg);box-shadow:var(--pq-shadow);padding:clamp(24px,4vw,48px)}
.pq-page-header h1{font-size:clamp(2rem,4vw,3.5rem);line-height:1;letter-spacing:-.055em;margin-bottom:18px}.pq-page-content>*+*{margin-top:1rem}
.pq-post-card{padding:22px;border:1px solid var(--pq-border);border-radius:16px;background:var(--pq-white);box-shadow:var(--pq-shadow);margin-bottom:16px}.pq-post-card h2{letter-spacing:-.035em}