/*
Theme Name: Tigreaux BLDR Theme
Theme URI: https://buddylovedogrescue.org
Description: Custom WordPress theme for Buddy Love Dog Rescue by Tigreaux BLDR
Author: Tigreaux BLDR
Author URI: https://tigreaux.com
Template: kadence
Version: 1.0.0
*/

/* ================================================
   BRAND TOKENS
   ================================================ */
:root {
  --bl-navy:       #2B4F8C;
  --bl-navy-dark:  #1a3a6e;
  --bl-teal:       #3B9E8A;
  --bl-sage:       #4A7A6E;
  --bl-red:        #D84E2F;
  --bl-cream:      #F2EDE6;
  --bl-ink:        #1C2B3A;
  --bl-white:      #FAFAF8;
  --bl-border:     rgba(28,43,58,0.1);
  --bl-radius:     12px;
  --bl-shadow:     0 2px 16px rgba(28,43,58,0.08);
  --bl-transition: 0.2s ease;
}

/* ================================================
   BUTTONS
   ================================================ */
.dog-btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: var(--bl-radius);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  transition: all var(--bl-transition);
  cursor: pointer;
  border: 2px solid transparent;
  line-height: 1.2;
}
.dog-btn--primary            { background: var(--bl-teal); color: #fff; border-color: var(--bl-teal); }
.dog-btn--primary:hover      { background: var(--bl-sage); border-color: var(--bl-sage); color: #fff; transform: translateY(-1px); }
.dog-btn--secondary          { background: transparent; color: var(--bl-teal); border-color: var(--bl-teal); }
.dog-btn--secondary:hover    { background: var(--bl-teal); color: #fff; }
.dog-btn--foster             { background: var(--bl-red); color: #fff; border-color: var(--bl-red); }
.dog-btn--foster:hover       { background: #b83d22; border-color: #b83d22; color: #fff; }
.dog-btn--ghost              { background: transparent; color: var(--bl-ink); border-color: var(--bl-border); border-width: 1px; }
.dog-btn--ghost:hover        { background: var(--bl-cream); }
.dog-btn--block              { display: block; width: 100%; margin-bottom: 8px; }

/* ================================================
   URGENT BAR (single dog page top alert)
   ================================================ */
.dog-urgent-bar {
  background: var(--bl-red);
  color: #fff;
  padding: 13px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}
.dog-urgent-pulse {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
  animation: urgentPulse 1.4s ease-in-out infinite;
}
@keyframes urgentPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.5); }
  50%      { box-shadow: 0 0 0 7px rgba(255,255,255,0); }
}

/* ================================================
   DOG PROFILE HERO
   ================================================ */
.dog-hero {
  background: var(--bl-navy);
  padding: 52px 24px 44px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.dog-hero-paws {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.dog-paw { opacity: 0; }
@keyframes pawAppear {
  0%   { opacity: 0;    transform: scale(0.5); }
  12%  { opacity: 0.16; transform: scale(1.08); }
  30%  { opacity: 0.11; transform: scale(1); }
  100% { opacity: 0;    transform: scale(1); }
}
.dog-paw-1  { animation: pawAppear 4s ease-in-out infinite; animation-delay: 0s; }
.dog-paw-2  { animation: pawAppear 4s ease-in-out infinite; animation-delay: 0.36s; }
.dog-paw-3  { animation: pawAppear 4s ease-in-out infinite; animation-delay: 0.72s; }
.dog-paw-4  { animation: pawAppear 4s ease-in-out infinite; animation-delay: 1.08s; }
.dog-paw-5  { animation: pawAppear 4s ease-in-out infinite; animation-delay: 1.44s; }
.dog-paw-6  { animation: pawAppear 4s ease-in-out infinite; animation-delay: 1.80s; }
.dog-paw-7  { animation: pawAppear 4s ease-in-out infinite; animation-delay: 2.16s; }
.dog-paw-8  { animation: pawAppear 4s ease-in-out infinite; animation-delay: 2.52s; }
.dog-paw-9  { animation: pawAppear 4s ease-in-out infinite; animation-delay: 2.88s; }
.dog-paw-10 { animation: pawAppear 4s ease-in-out infinite; animation-delay: 3.24s; }
.dog-paw-11 { animation: pawAppear 4s ease-in-out infinite; animation-delay: 3.60s; }
.dog-paw-12 { animation: pawAppear 4s ease-in-out infinite; animation-delay: 3.96s; }
.dog-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 680px;
  margin: 0 auto;
}
.dog-hero-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 8px;
}
.dog-hero-title {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 700;
  color: #fff;
  margin: 0 0 18px;
  line-height: 1.1;
}
.dog-hero-accent  { color: #9FE1CB; }
.dog-hero-newname { font-size: 15px; color: rgba(255,255,255,0.65); margin: -10px 0 16px; }
.dog-hero-badge-wrap { display: flex; justify-content: center; }
.dog-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: 99px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.dog-status--available   { background: #E1F5EE; color: #085041; }
.dog-status--needs_foster{ background: #FAEEDA; color: #633806; }
.dog-status--urgent      { background: var(--bl-red); color: #fff; }
.dog-status--review      { background: #EEEDFE; color: #3C3489; }
.dog-status--pending     { background: #E6F1FB; color: #0C447C; }
.dog-status--adopted     { background: #9FE1CB; color: #085041; }
.dog-status-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.75;
  flex-shrink: 0;
}

/* ================================================
   DOG PROFILE SECTION
   ================================================ */
.dog-profile-section { background: var(--bl-white); padding: 48px 24px; }
.dog-profile-container {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) {
  .dog-profile-container { grid-template-columns: 1fr; }
}
.dog-photo-main {
  border-radius: var(--bl-radius);
  overflow: hidden;
  background: var(--bl-cream);
  box-shadow: var(--bl-shadow);
}
.dog-photo-main-img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.dog-photo-placeholder {
  aspect-ratio: 4/3;
  background: var(--bl-cream);
  border-radius: var(--bl-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  font-size: 14px;
}
.dog-thumb-strip { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.dog-thumb {
  width: 72px; height: 54px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  background: none;
  transition: border-color var(--bl-transition);
}
.dog-thumb.is-active { border-color: var(--bl-teal); }
.dog-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dog-video-link {
  display: inline-block;
  margin-top: 12px;
  font-size: 14px;
  color: var(--bl-teal);
  font-weight: 600;
  text-decoration: none;
}
.dog-video-link:hover { text-decoration: underline; }
.dog-info-col { display: flex; flex-direction: column; gap: 20px; }
.dog-info-name { font-size: 28px; font-weight: 700; color: var(--bl-ink); margin: 0; }
.dog-info-meta { font-size: 14px; color: #666; margin: 0; line-height: 1.5; }
.dog-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dog-stat {
  background: var(--bl-cream);
  border-radius: 8px;
  padding: 10px 14px;
  border: 0.5px solid rgba(28,43,58,0.06);
}
.dog-stat-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #999;
  margin-bottom: 3px;
}
.dog-stat-value { font-size: 14px; font-weight: 500; color: var(--bl-ink); }
.dog-tags-section { display: flex; flex-direction: column; gap: 7px; }
.dog-tags-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #999;
}
.dog-tags-row { display: flex; flex-wrap: wrap; gap: 6px; }
.dog-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 99px;
}
.dog-tag--positive { background: #E1F5EE; color: #085041; }
.dog-tag--negative { background: #FCEBEB; color: #791F1F; }
.dog-tag--neutral  { background: var(--bl-cream); color: #4A3728; border: 0.5px solid rgba(28,43,58,0.12); }
.dog-tag--medical  { background: #EEEDFE; color: #3C3489; }
.dog-medical-note {
  font-size: 13px;
  color: #555;
  background: #EEEDFE;
  border-radius: 8px;
  padding: 10px 14px;
  line-height: 1.6;
  margin: 0;
}
.dog-fee-cta    { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.dog-fee-block  { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.dog-fee-label  { font-size: 13px; color: #888; }
.dog-fee-amount { font-size: 26px; font-weight: 700; color: var(--bl-navy); }
.dog-cta-stack  { display: flex; flex-direction: column; gap: 8px; }
.dog-status-notice {
  background: var(--bl-cream);
  border-radius: var(--bl-radius);
  padding: 16px;
  font-size: 14px;
  line-height: 1.6;
  color: #555;
}
.dog-status-notice strong { color: var(--bl-ink); display: block; margin-bottom: 4px; }
.dog-status-notice a { color: var(--bl-teal); }

/* ================================================
   SHARE BUTTONS
   ================================================ */
.dog-share-row {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 0.5px solid var(--bl-border);
}
.dog-share-label {
  font-size: 11px;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  display: block;
  margin-bottom: 10px;
}
.dog-share-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.dog-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--bl-transition);
  border: 1.5px solid transparent;
}
.dog-share-btn svg { flex-shrink: 0; }
.dog-share-btn--facebook       { background: #1877F2; color: #fff; border-color: #1877F2; }
.dog-share-btn--facebook:hover { background: #1558b0; border-color: #1558b0; color: #fff; }
.dog-share-btn--email          { background: transparent; color: var(--bl-teal); border-color: var(--bl-teal); }
.dog-share-btn--email:hover    { background: var(--bl-teal); color: #fff; }
.dog-share-btn--sms            { background: transparent; color: var(--bl-navy); border-color: var(--bl-navy); }
.dog-share-btn--sms:hover      { background: var(--bl-navy); color: #fff; }

/* ================================================
   STORY SECTION + STICKY SIDEBAR
   ================================================ */
.dog-story-section {
  background: #fff;
  border-top: 1px solid var(--bl-border);
  padding: 48px 24px 64px;
}
.dog-story-container {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) {
  .dog-story-container { grid-template-columns: 1fr; }
  .dog-story-sidebar   { order: -1; }
}
.dog-story-heading { font-size: 26px; font-weight: 700; color: var(--bl-ink); margin: 0 0 20px; }
.dog-story-body    { font-size: 16px; line-height: 1.85; color: #333; }
.dog-story-body p  { margin-bottom: 16px; }
.dog-story-sidebar { position: relative; }
.dog-sidebar-card {
  background: var(--bl-navy);
  border-radius: var(--bl-radius);
  padding: 24px;
  position: sticky;
  top: 90px;
}
.dog-sidebar-card h3    { font-size: 17px; font-weight: 700; color: #fff; margin: 0 0 10px; }
.dog-sidebar-card p     { font-size: 13px; color: rgba(255,255,255,0.72); line-height: 1.6; margin-bottom: 16px; }
.dog-sidebar-fee        { color: rgba(255,255,255,0.9) !important; font-size: 14px !important; }
.dog-sidebar-fee strong { color: #fff; }
.dog-sidebar-share {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  margin-top: 12px;
  line-height: 1.5;
  text-align: center;
}
.dog-sidebar-share a       { color: #9FE1CB; text-decoration: none; }
.dog-sidebar-share a:hover { text-decoration: underline; }
.dog-sidebar-card .dog-btn--primary       { background: var(--bl-red); border-color: var(--bl-red); color: #fff; }
.dog-sidebar-card .dog-btn--primary:hover { background: #b83d22; border-color: #b83d22; }
.dog-sidebar-card .dog-btn--foster        { background: rgba(255,255,255,0.12); border: 1.5px solid rgba(255,255,255,0.25); color: #fff; }
.dog-sidebar-card .dog-btn--foster:hover  { background: rgba(255,255,255,0.2); }

/* ================================================
   HAPPY TAILS SECTION
   ================================================ */
.dog-ht-section   { padding: 64px 24px; background: linear-gradient(135deg, #E1F5EE 0%, #F2EDE6 100%); }
.dog-ht-container { max-width: 900px; margin: 0 auto; }
.dog-ht-header    { text-align: center; margin-bottom: 32px; }
.dog-ht-paw       { font-size: 32px; display: block; margin-bottom: 8px; }
.dog-ht-header h2 { font-size: 30px; font-weight: 700; color: var(--bl-ink); margin: 0 0 8px; }
.dog-ht-family    { font-size: 15px; color: var(--bl-sage); font-weight: 600; }
.dog-ht-story     { font-size: 16px; line-height: 1.8; color: #333; margin-bottom: 32px; }
.dog-ht-gallery   { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 12px; margin-bottom: 32px; }
.dog-ht-photo img { width: 100%; border-radius: var(--bl-radius); object-fit: cover; aspect-ratio: 4/3; display: block; }
.dog-ht-share     { text-align: center; font-size: 14px; color: #666; }
.dog-ht-share a   { color: var(--bl-teal); font-weight: 600; text-decoration: none; }

/* ================================================
   MORE DOGS SECTION
   ================================================ */
.dog-more-section      { padding: 64px 24px; background: var(--bl-cream); }
.dog-more-container    { max-width: 1100px; margin: 0 auto; }
.dog-more-container h2 { font-size: 26px; font-weight: 700; color: var(--bl-ink); margin: 0 0 32px; text-align: center; }
.dog-more-grid         { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 24px; }

/* ================================================
   DOG CARD (used on archive + more dogs sections)
   ================================================ */
.dog-card         { background: #fff; border-radius: var(--bl-radius); overflow: hidden; box-shadow: var(--bl-shadow); transition: transform var(--bl-transition), box-shadow var(--bl-transition); }
.dog-card:hover   { transform: translateY(-4px); box-shadow: 0 10px 36px rgba(28,43,58,0.13); }
.dog-card--urgent { box-shadow: 0 0 0 2.5px var(--bl-red), var(--bl-shadow); }
.dog-card-link    { text-decoration: none; color: inherit; display: block; }
.dog-card-status  { padding: 7px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; display: flex; align-items: center; gap: 6px; }
.dog-card-photo-wrap { position: relative; padding-top: 75%; overflow: hidden; background: var(--bl-cream); }
.dog-card-photo   { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.dog-card:hover .dog-card-photo { transform: scale(1.04); }
.dog-card-body    { padding: 16px; }
.dog-card-name    { font-size: 19px; font-weight: 700; color: var(--bl-ink); margin: 0 0 4px; }
.dog-card-breed   { font-size: 13px; color: #777; margin: 0 0 10px; }
.dog-card-meta    { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--bl-ink); margin-bottom: 10px; }
.dog-meta-sep     { color: #ccc; }
.dog-card-tags    { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.dog-card-cta     { font-size: 13px; font-weight: 600; color: var(--bl-teal); display: block; }

/* ================================================
   DOGS ARCHIVE PAGE
   ================================================ */
.dogs-page-header   { background: var(--bl-navy); padding: 64px 24px 48px; text-align: center; position: relative; overflow: hidden; }
.dogs-header-inner  { max-width: 680px; margin: 0 auto; position: relative; z-index: 2; }
.dogs-page-title    { font-size: clamp(2rem,5vw,3rem); color: #fff; margin: 0 0 16px; font-weight: 700; }
.dogs-page-subtitle { font-size: 18px; color: rgba(255,255,255,0.75); line-height: 1.6; margin: 0; }
.dogs-filter-bar    { background: var(--bl-white); border-bottom: 1px solid var(--bl-border); position: sticky; top: 0; z-index: 100; padding: 0 24px; }
.dogs-filter-inner  { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 0; }
.dogs-status-tabs   { display: flex; gap: 4px; flex-wrap: wrap; }
.status-tab         { padding: 6px 16px; border-radius: 99px; font-size: 13px; font-weight: 500; color: var(--bl-ink); text-decoration: none; transition: all var(--bl-transition); border: 1px solid transparent; }
.status-tab:hover   { background: var(--bl-cream); }
.status-tab.is-active { background: var(--bl-navy); color: #fff; }
.dogs-quick-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.dog-filter-select  { padding: 6px 12px; border: 1px solid var(--bl-border); border-radius: 8px; font-size: 13px; color: var(--bl-ink); background: #fff; cursor: pointer; }
.dog-filter-checkbox{ display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.urgent-section       { max-width: 1200px; margin: 0 auto 16px; padding: 0 24px; }
.urgent-section-label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--bl-red); text-transform: uppercase; letter-spacing: 0.06em; }
.urgent-pulse         { width: 10px; height: 10px; border-radius: 50%; background: var(--bl-red); animation: urgentPulse 1.4s ease-in-out infinite; }
.dogs-grid-section  { padding: 32px 24px 64px; background: var(--bl-cream); min-height: 400px; }
.dogs-grid-inner    { max-width: 1200px; margin: 0 auto; }
.dogs-grid          { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 24px; }
.dogs-empty         { text-align: center; padding: 64px 24px; color: #888; font-size: 16px; }
.dogs-pagination    { margin-top: 48px; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.dogs-pagination .page-numbers { padding: 8px 14px; border-radius: 8px; border: 1px solid var(--bl-border); text-decoration: none; color: var(--bl-ink); font-size: 14px; transition: all var(--bl-transition); }
.dogs-pagination .page-numbers.current,
.dogs-pagination .page-numbers:hover { background: var(--bl-navy); color: #fff; border-color: var(--bl-navy); }
.foster-cta-banner  { background: var(--bl-teal); padding: 48px 24px; }
.foster-cta-inner   { max-width: 900px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.foster-cta-text h2 { font-size: 24px; color: #fff; margin: 0 0 8px; font-weight: 700; }
.foster-cta-text p  { color: rgba(255,255,255,0.85); font-size: 16px; margin: 0; max-width: 540px; line-height: 1.6; }
.foster-cta-banner .dog-btn--primary       { background: #fff; color: var(--bl-teal); border-color: #fff; white-space: nowrap; }
.foster-cta-banner .dog-btn--primary:hover { background: var(--bl-cream); }

/* ================================================
   URGENT SITUATIONS (home page section)
   ================================================ */
.bl-urgent-section  { background: #fff8f6; border-top: 4px solid var(--bl-red); padding: 48px 24px; }
.bl-urgent-inner    { max-width: 1200px; margin: 0 auto; }
.bl-urgent-header   { margin-bottom: 32px; }
.bl-urgent-title-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.bl-urgent-pulse {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--bl-red);
  flex-shrink: 0;
  animation: urgentPulse 1.4s ease-in-out infinite;
}
.bl-urgent-title    { font-size: 26px; font-weight: 700; color: var(--bl-ink); margin: 0; }
.bl-urgent-sub      { font-size: 15px; color: #666; line-height: 1.65; max-width: 680px; margin: 0; }
.bl-urgent-grid     { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 20px; margin-bottom: 24px; }
.bl-urgent-card {
  background: #fff;
  border-radius: var(--bl-radius);
  overflow: hidden;
  border: 2px solid var(--bl-red);
  box-shadow: 0 2px 12px rgba(216,78,47,0.1);
  transition: transform var(--bl-transition), box-shadow var(--bl-transition);
}
.bl-urgent-card:hover          { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(216,78,47,0.18); }
.bl-urgent-card-link           { text-decoration: none; color: inherit; display: block; }
.bl-urgent-photo-wrap          { position: relative; padding-top: 72%; overflow: hidden; background: #f5ede8; }
.bl-urgent-photo               { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.bl-urgent-card:hover .bl-urgent-photo { transform: scale(1.04); }
.bl-urgent-situation-badge {
  position: absolute;
  top: 10px; left: 10px;
  background: var(--bl-red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 4px 10px;
  border-radius: 99px;
}
.bl-urgent-card-body    { padding: 14px 16px 16px; }
.bl-urgent-dog-name     { font-size: 18px; font-weight: 700; color: var(--bl-ink); margin: 0 0 4px; }
.bl-urgent-dog-meta     { font-size: 13px; color: #888; margin: 0 0 12px; }
.bl-urgent-card-actions { display: flex; align-items: center; justify-content: space-between; }
.bl-urgent-help-btn     { background: var(--bl-red); color: #fff; font-size: 12px; font-weight: 700; padding: 7px 16px; border-radius: 8px; display: inline-block; }
.bl-urgent-share-link   { font-size: 12px; color: var(--bl-teal); font-weight: 600; }
.bl-urgent-view-all     { text-align: center; margin-top: 8px; }
.bl-urgent-view-all-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--bl-red);
  text-decoration: none;
  border-bottom: 1px solid rgba(216,78,47,0.3);
  padding-bottom: 2px;
  transition: border-color var(--bl-transition);
}
.bl-urgent-view-all-link:hover { border-color: var(--bl-red); }

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 768px) {
  .dog-hero             { padding: 40px 20px 36px; }
  .dog-profile-section  { padding: 32px 16px; }
  .dog-story-section    { padding: 32px 16px 48px; }
  .dogs-filter-inner    { flex-direction: column; align-items: flex-start; }
  .dogs-quick-filters   { margin-left: 0; }
  .foster-cta-inner     { flex-direction: column; text-align: center; }
  .dog-stats-grid       { grid-template-columns: 1fr 1fr; }
  .dog-cta-stack .dog-btn { text-align: center; }
  .bl-urgent-grid       { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .dogs-page-header     { padding: 40px 16px 32px; }
  .dogs-grid            { grid-template-columns: 1fr; }
  .dog-stats-grid       { grid-template-columns: 1fr; }
  .dog-hero-title       { font-size: 1.9rem; }
  .bl-urgent-grid       { grid-template-columns: 1fr; }
}
 /*
 * Happy Tails Page Styles
 * ADD TO BOTTOM OF: tigreaux-buddy-love/style.css
 */

/* ================================================
   HAPPY TAILS HERO
   ================================================ */
.ht-hero {
  background: var(--bl-navy);
  padding: 100px 24px 64px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.ht-hero-paws {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}
.ht-hero-inner {
  position: relative; z-index: 1;
  max-width: 720px; margin: 0 auto;
}
.ht-hero-eyebrow {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.55); margin-bottom: 16px;
}
.ht-hero-title {
  font-family: 'Fraunces', 'Georgia', serif;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 900; color: #fff; line-height: 1.1;
  margin-bottom: 16px;
}
.ht-hero-accent { color: #9FE1CB; font-style: italic; }
.ht-hero-sub {
  font-size: 17px; color: rgba(255,255,255,0.75);
  line-height: 1.75; margin-bottom: 28px;
  max-width: 580px; margin-left: auto; margin-right: auto;
}
.ht-hero-count {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 99px; padding: 10px 22px;
}
.ht-count-num {
  font-family: 'Fraunces', 'Georgia', serif;
  font-size: 1.6rem; font-weight: 900; color: #9FE1CB; line-height: 1;
}
.ht-count-label { font-size: 13px; color: rgba(255,255,255,0.7); }

/* ================================================
   BREADCRUMB
   ================================================ */
.ht-page-nav { background: var(--bl-cream); border-bottom: 1px solid var(--bl-border); padding: 14px 0; }
.ht-page-nav-inner { max-width: 1100px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: #888; }
.ht-nav-item { color: var(--bl-teal); font-weight: 500; text-decoration: none; }
.ht-nav-sep  { color: #ccc; }

/* ================================================
   FILTER BAR
   ================================================ */
.ht-filter-bar {
  background: #fff;
  border-bottom: 1px solid var(--bl-border);
  padding: 16px 0;
  position: sticky; top: 56px; z-index: 90;
  box-shadow: 0 2px 12px rgba(28,43,58,0.06);
}
.ht-filter-inner {
  max-width: 1100px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.ht-filter-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1; }
.ht-search-wrap {
  position: relative; flex: 1; min-width: 200px;
}
.ht-search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: #aaa; pointer-events: none;
}
.ht-search-input {
  width: 100%; padding: 9px 12px 9px 36px;
  border: 1px solid var(--bl-border); border-radius: 8px;
  font-size: 13px; color: var(--bl-ink); outline: none;
  transition: border-color 0.2s ease;
  font-family: 'DM Sans', sans-serif;
}
.ht-search-input:focus { border-color: var(--bl-teal); }
.ht-filter-select {
  padding: 9px 12px; border: 1px solid var(--bl-border);
  border-radius: 8px; font-size: 13px; color: var(--bl-ink);
  background: #fff; cursor: pointer; outline: none;
  font-family: 'DM Sans', sans-serif;
}
.ht-filter-btn {
  padding: 9px 18px; background: var(--bl-navy); color: #fff;
  border: none; border-radius: 8px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background 0.2s ease;
  font-family: 'DM Sans', sans-serif;
}
.ht-filter-btn:hover { background: var(--bl-navy-dark, #1a3a6e); }
.ht-filter-clear {
  font-size: 13px; color: #888; font-weight: 500;
  text-decoration: none; white-space: nowrap;
  transition: color 0.2s ease;
}
.ht-filter-clear:hover { color: var(--bl-red); }
.ht-filter-count { font-size: 13px; color: #aaa; margin-left: auto; white-space: nowrap; }

/* ================================================
   STORIES GRID
   ================================================ */
.ht-grid-section { background: var(--bl-cream); padding: 40px 24px 64px; min-height: 400px; }
.ht-grid-inner   { max-width: 1100px; margin: 0 auto; }
.ht-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

/* ── Story Card ─────────────────────────────────── */
.ht-card {
  background: #fff;
  border-radius: var(--bl-radius);
  overflow: hidden;
  box-shadow: var(--bl-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex; flex-direction: column;
}
.ht-card:hover { transform: translateY(-5px); box-shadow: 0 14px 40px rgba(28,43,58,0.13); }

/* Photo */
.ht-card-photo-wrap {
  position: relative; padding-top: 68%; overflow: hidden;
  background: linear-gradient(135deg, #E1F5EE, var(--bl-cream));
}
.ht-card-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform 0.4s ease;
}
.ht-card:hover .ht-card-photo { transform: scale(1.04); }
.ht-card-photo-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 56px; opacity: 0.3;
}
.ht-card-adopted-badge {
  position: absolute; bottom: 10px; left: 10px;
  background: #9FE1CB; color: #085041;
  font-size: 10px; font-weight: 700;
  padding: 4px 12px; border-radius: 99px;
  display: flex; align-items: center; gap: 5px;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.ht-badge-paw  { font-size: 10px; }
.ht-badge-date { opacity: 0.75; font-weight: 500; }

/* Body */
.ht-card-body { padding: 18px 18px 20px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.ht-card-names { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ht-card-dog-name { font-family: 'Fraunces','Georgia',serif; font-size: 20px; font-weight: 700; color: var(--bl-ink); margin: 0; }
.ht-card-new-name { font-size: 13px; color: var(--bl-teal); font-weight: 600; white-space: nowrap; }
.ht-card-family   { font-size: 13px; color: #888; font-weight: 500; }
.ht-card-meta-row { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #777; flex-wrap: wrap; }
.ht-meta-sep      { color: #ddd; }
.ht-card-time     { font-size: 11px; color: var(--bl-teal); font-weight: 600; background: #E1F5EE; padding: 3px 9px; border-radius: 99px; width: fit-content; }
.ht-card-excerpt  { font-size: 14px; color: #555; line-height: 1.7; flex: 1; font-style: italic; }
.ht-card-more-photos { display: flex; gap: 6px; }
.ht-mini-photo {
  width: 48px; height: 48px; border-radius: 6px; overflow: hidden;
  background: var(--bl-cream); flex-shrink: 0;
}
.ht-mini-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ht-mini-more {
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #888;
  background: var(--bl-cream);
}
.ht-card-read-more {
  font-size: 13px; font-weight: 600; color: var(--bl-teal);
  text-decoration: none; margin-top: auto; display: block;
  transition: gap 0.2s ease;
}
.ht-card-read-more:hover { text-decoration: underline; }

/* Pagination */
.ht-pagination { margin-top: 48px; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.ht-pagination .page-numbers {
  padding: 8px 14px; border-radius: 8px;
  border: 1px solid var(--bl-border); text-decoration: none;
  color: var(--bl-ink); font-size: 14px; transition: all 0.2s ease;
}
.ht-pagination .page-numbers.current,
.ht-pagination .page-numbers:hover { background: var(--bl-navy); color: #fff; border-color: var(--bl-navy); }

/* Empty state */
.ht-empty { text-align: center; padding: 80px 24px; }
.ht-empty-icon { font-size: 56px; margin-bottom: 16px; display: block; }
.ht-empty h2   { font-family: 'Fraunces','Georgia',serif; font-size: 24px; color: var(--bl-ink); margin-bottom: 10px; }
.ht-empty p    { font-size: 15px; color: #888; line-height: 1.7; }
.ht-empty a    { color: var(--bl-teal); font-weight: 600; }

/* ================================================
   SUBMIT YOUR STORY SECTION
   ================================================ */
.ht-submit-section { background: #fff; padding: 72px 24px; }
.ht-submit-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 440px;
  gap: 56px; align-items: start;
}
@media (max-width: 900px) {
  .ht-submit-inner { grid-template-columns: 1fr; gap: 32px; }
}
.ht-submit-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--bl-teal);
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.ht-submit-eyebrow::before { content: ''; width: 20px; height: 2px; background: var(--bl-teal); border-radius: 99px; }
.ht-submit-title { font-family: 'Fraunces','Georgia',serif; font-size: clamp(1.8rem,3vw,2.4rem); font-weight: 700; color: var(--bl-ink); margin-bottom: 12px; line-height: 1.2; }
.ht-submit-sub   { font-size: 15px; color: #555; line-height: 1.75; margin-bottom: 24px; }
.ht-submit-checklist { display: flex; flex-direction: column; gap: 10px; }
.ht-submit-check-item { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--bl-ink); line-height: 1.55; }
.ht-check-icon {
  width: 22px; height: 22px; border-radius: 50%;
  background: #E1F5EE; color: #085041;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0; margin-top: 1px;
}

/* Form card */
.ht-submit-form-card {
  background: var(--bl-navy); border-radius: 20px; padding: 32px;
  position: sticky; top: 90px;
}
.ht-form-title { font-family: 'Fraunces','Georgia',serif; font-size: 1.3rem; font-weight: 700; color: #fff; margin-bottom: 6px; }
.ht-form-sub   { font-size: 13px; color: rgba(255,255,255,0.6); margin-bottom: 20px; line-height: 1.5; }
.ht-submission-form { display: flex; flex-direction: column; gap: 14px; }
.ht-form-field { display: flex; flex-direction: column; gap: 6px; }
.ht-form-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 640px) { .ht-form-row { grid-template-columns: 1fr; } }
.ht-form-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: rgba(255,255,255,0.65);
}
.ht-form-input,
.ht-form-textarea {
  width: 100%; background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2); border-radius: 8px;
  padding: 10px 14px; font-family: 'DM Sans', sans-serif;
  font-size: 14px; color: #fff; outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.ht-form-input::placeholder,
.ht-form-textarea::placeholder { color: rgba(255,255,255,0.35); }
.ht-form-input:focus,
.ht-form-textarea:focus { border-color: #9FE1CB; background: rgba(255,255,255,0.15); }
.ht-form-textarea { resize: vertical; min-height: 100px; }
.ht-form-hint { font-size: 11px; color: rgba(255,255,255,0.45); line-height: 1.5; }
.ht-form-checkbox-label {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; color: rgba(255,255,255,0.78);
  line-height: 1.55; cursor: pointer;
}
.ht-form-checkbox-label input { margin-top: 2px; flex-shrink: 0; }
.ht-form-photos-note {
  display: flex; align-items: flex-start; gap: 12px;
  background: rgba(159,225,203,0.1);
  border: 1px solid rgba(159,225,203,0.25);
  border-radius: 8px; padding: 12px 14px;
  font-size: 13px; color: rgba(255,255,255,0.75); line-height: 1.6;
}
.ht-form-photos-note a { color: #9FE1CB; font-weight: 600; }
.ht-photos-note-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.ht-form-photos-note strong { color: #fff; display: block; margin-bottom: 3px; font-size: 14px; }
.ht-form-submit {
  background: #9FE1CB; color: #085041;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px; font-weight: 700;
  padding: 14px; border-radius: var(--bl-radius);
  border: none; cursor: pointer;
  transition: all 0.2s ease;
}
.ht-form-submit:hover { background: #7dd4b8; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(159,225,203,0.3); }
.ht-form-privacy { font-size: 11px; color: rgba(255,255,255,0.4); text-align: center; line-height: 1.5; }

/* Success / error states */
.ht-form-success {
  text-align: center; padding: 24px 16px;
}
.ht-success-icon { font-size: 48px; margin-bottom: 12px; display: block; }
.ht-form-success h3 { font-family: 'Fraunces','Georgia',serif; font-size: 1.3rem; font-weight: 700; color: #fff; margin-bottom: 10px; }
.ht-form-success p  { font-size: 14px; color: rgba(255,255,255,0.75); line-height: 1.6; }
.ht-form-success a  { color: #9FE1CB; }
.ht-form-error {
  background: rgba(216,78,47,0.2); border: 1px solid rgba(216,78,47,0.4);
  border-radius: 8px; padding: 10px 14px;
  font-size: 13px; color: #fff; margin-bottom: 4px;
}

/* ================================================
   BOTTOM CTA
   ================================================ */
.ht-bottom-cta {
  background: linear-gradient(135deg, #3B9E8A, #4A7A6E);
  padding: 64px 32px; text-align: center;
}
.ht-bottom-cta h2 { font-family: 'Fraunces','Georgia',serif; font-size: 2rem; font-weight: 700; color: #fff; margin-bottom: 12px; }
.ht-bottom-cta p  { font-size: 16px; color: rgba(255,255,255,0.82); line-height: 1.65; margin-bottom: 28px; max-width: 480px; margin-left: auto; margin-right: auto; }
.ht-bottom-btns   { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.ht-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: var(--bl-radius);
  font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 600;
  cursor: pointer; border: 2px solid transparent; transition: all 0.2s ease;
  text-decoration: none;
}
.ht-btn-white   { background: #fff; color: var(--bl-teal); border-color: #fff; }
.ht-btn-white:hover { background: var(--bl-cream); transform: translateY(-2px); }
.ht-btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
.ht-btn-outline:hover { background: rgba(255,255,255,0.12); border-color: #fff; }

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 768px) {
  .ht-hero       { padding: 80px 20px 48px; }
  .ht-grid       { grid-template-columns: 1fr 1fr; }
  .ht-filter-bar { position: static; }
}
@media (max-width: 480px) {
  .ht-grid { grid-template-columns: 1fr; }
}