/* 
Theme Name: Basil's Forever Sofa Theme
Version: 1.0
Author: Grant Frost

*/

/* ***** Main Page Styles*****  */

/* Variables */
:root {
  /* Font Size */
  font-size: 10px;

  /* Colours */
  --color-black: #333;
  --color-grey-dark: #484a4b;
  --color-grey: #888;
  --color-grey-light: #ddd;
  --color-white-light: #fff;
  --color-white-off: #f2f0ef;

  --color-green-primary: #8bd2bd;
  --color-green-secondary: #bfe6b0;
  --color-green-tertiary: #e7ffdf;
  --color-blue-primary: #86d8ec;
  --color-blue-seconadry: #90c8e2;
  --color-pink-primary: #fcb0b3;
  --color-orange-primary: #fc9e4f;

/* --- RGB NUMBERS (For changing transparency) --- */
  /* Use these inside rgba(var(--rgb-name), 0.2) */
  --rgb-black: 51, 51, 51;
  --rgb-grey-dark: 72, 74, 75;
  --rgb-green-primary: 139, 210, 189;
  --rgb-green-secondary: 191, 230, 176;
  --rgb-green-tertiary: 231, 255, 223;
  --rgb-blue-primary: 134, 216, 236;
  --rgb-blue-secondary: 144, 200, 226;
  --rgb-pink-primary: 252, 176, 179;
  --rgb-orange-primary: 252, 158, 79;

}

/* Resets, Defaults and Utilities */
*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

*::selection {
  background-color: var(--color-blue-primary);
}

body {
  background-color: var(--color-white-off);
  font-family: "Montserrat", sans-serif;
  color: var(--color-grey-dark);
  font-size: 1.6rem;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 1rem 0;
}

h2 {
  margin-bottom: 1.5rem;
}

.header__sub {
  margin-bottom: 2rem;
  text-align: center;
}

a {
  color: var(--color-grey-dark);
}

p {
  font-weight: 400;
}

.container {
  max-width: 1080px;
  margin: 0 auto;
}

@media screen and (max-width: 1080px) {
  .container {
    max-width: 900px;
  }
}

@media screen and (max-width: 900px) {
  .container {
    max-width: 600px;
    padding: 2rem;
  }
}

.btn-green-white {
  text-decoration: none;
  color: var(--color-white-light);
  background-color: var(--color-green-primary);
  padding: 1rem 2rem;
  border-radius: 20px;
  font-weight: 500;
  text-transform: capitalize;
  transition: color 0.2s ease;
}

.btn-green-white:hover {
  background-color: var(--color-white-light);
  color: var(--color-green-primary);
}

.btn-white-green {
  text-decoration: none;
  color: var(--color-green-primary);
  background-color: var(--color-white-light);
  padding: 1rem 2rem;
  border-radius: 20px;
  font-weight: 500;
  text-transform: capitalize;
  transition: color 0.2s ease;
}

.btn-white-green:hover {
  background-color: var(--color-white-light);
  color: var(--color-green-primary);
}

.link {
  color: var(--color-grey-dark);
  transition: color 0.2s ease;
}

.link:hover {
  color: var(--color-green-primary);
}

/* Legacy PHP template only: does NOT apply to Kadence blocks */
.main-banner {
  height: 30dvh;
  background-position: center 35%;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
  color: var(--color-white-light);
}

.main-banner__text-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.main-banner__main-heading {
  font-size: 4rem;
  margin-bottom: 2rem;
  font-weight: 700;
  text-shadow: 1px 1px 1px var(--color-black);
}
.main-banner__sub-heading {
  font-size: 2rem;
  font-weight: 400;
  text-shadow: 1px 1px 1px var(--color-black);
}

.banner {
  background-color: var(--color-blue-primary);
}

.banner__heading-box {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 0;
  flex-direction: column;
}

@media screen and (max-width: 900px) {
  .banner__heading-box {
    padding: 1rem 2rem;
  }
}

.banner__main-heading {
  color: var(--color-white-light);
  text-shadow: 1px 1px 1px var(--color-black);
  font-size: 3rem;
}

.banner__sub-heading {
  color: var(--color-white-light);
  text-shadow: 1px 1px 1px var(--color-black);
  font-size: 2rem;
}

@media screen and (max-width: 900px) {
  .banner__sub-heading {
    text-align: center;
  }
}

.hidden {
  display: none;
}

.flex {
  display: true;
}

/* Header & Nav */

.header__main-header {
  background-color: var(--color-white-light);
  padding: 0.5rem 0;
  position: relative;
}

.header__main-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__main-header--logo-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--color-grey-dark);
}

.header__main-header--logo-image {
  max-width: 5rem;
}

.header__main-header--logo-text {
  font-weight: 500;
}

.header__main-header--main-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

@media screen and (max-width: 900px) {
  .header__main-header--main-nav {
    display: none;
  }
}

.header__main-header--main-nav ul {
  list-style: none;
  display: flex;
  gap: 1rem;
}

.header__main-header--main-nav a {
  text-decoration: none;
  color: var(--color-grey-dark);
  font-weight: 500;
  text-transform: capitalize;
  transition: color 0.2s ease;
}

.header__main-header--main-nav a:hover {
  color: var(--color-green-primary);
}

/* Hamburger Menu */

.header__hamburger-off-screen-menu {
  color: var(--color-white-light);
  background-color: var(--color-grey-dark);
  width: 100%;
  max-width: 100vw;
  position: absolute;
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  top: 100%;
  right: -100%;
  font-size: 1.6rem;
  transition: 0.3s ease;
}

.header__hamburger-off-screen-menu.active {
  right: 0;
  display: flex;
  transition: 0.3s ease;
}

.header__hamburger-off-screen-menu ul {
  list-style-type: none;
  margin: 2rem 0;
}

.header__hamburger-off-screen-menu ul a {
  text-decoration: none;
  color: var(--color-white-light);
  font-size: 1.6rem;
  transition: color 0.2s ease;
}

.header__hamburger-off-screen-menu ul li:not(:last-child) {
  margin-bottom: 2rem;
}

.header__hamburger-off-screen-menu ul a:hover {
  color: var(--color-green-primary);
}

.header__hamburger-nav {
  display: none;
}

@media screen and (max-width: 900px) {
  .header__hamburger-nav {
    padding: 1rem 1.5rem;
    display: flex;
    border: 1px solid var(--color-grey-dark);
    border-radius: 5px;
    cursor: pointer;
  }
}

.header__hamburger-menu {
  height: 30px;
  width: 30px;
  margin-left: auto;
  position: relative;
}

.header__hamburger-menu span {
  height: 3px;
  width: 100%;
  background-color: var(--color-grey-dark);
  border-radius: 25px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 0.3s ease;
}

.header__hamburger-menu span:nth-child(1) {
  top: 25%;
}

.header__hamburger-menu span:nth-child(3) {
  top: 75%;
}

.header__hamburger-nav.active span:nth-child(1) {
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.header__hamburger-nav.active span:nth-child(2) {
  opacity: 0;
}

.header__hamburger-nav.active span:nth-child(3) {
  top: 40%;
  transform: translate(-50%, 50%) rotate(-45deg);
}

/* Legacy PHP template only: does NOT apply to Kadence blocks */
.hero {
  background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.7),
      rgba(0, 0, 0, 0)
    ),
    url(assets/imgs/basil-lying-down.jpeg);
  height: 50dvh;
  background-position: center 30%;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--color-white-light);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}

.hero .container {
  display: flex;
  flex-direction: column; /* Stack content vertically */
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  width: 100%;
  max-width: 1080px;
}

/* Headings */
.hero__main-heading {
  font-weight: 700;
  font-size: 4rem;
  margin-bottom: 2rem;
  line-height: 1.2;
  text-shadow: 1px 1px 1px var(--color-black);
}

.hero__main-heading-subtext {
  font-size: 2rem;
  margin-bottom: 2rem;
  text-shadow: 1px 1px 1px var(--color-black);
}

/* CTA Buttons */
.hero__cta-btn {
  display: inline-block;
  white-space: nowrap;
  text-align: center;
  margin: 0.5rem; /* spacing between buttons */
  padding: 1rem 2rem;
  border-radius: 20px;
  font-weight: 500;
  text-transform: capitalize;
  transition: all 0.2s ease;
}

/* Mobile Overrides */
@media screen and (max-width: 1080px) {
  .hero {
    height: auto; /* allow content to define height */
    padding: 4rem 2rem;
  }

  .hero .container {
    width: 90%;
    gap: 1rem;
  }

  .hero__main-heading {
    font-size: 3rem;
    margin-bottom: 1.5rem;
  }

  .hero__main-heading-subtext {
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
  }

  .hero__cta-btn {
    display: block !important;       /* stack buttons vertically */
    margin-right: auto !important;  
    margin-left: auto !important;
    margin-bottom: 1rem !important;  /* vertical spacing between buttons */
    width: 80% !important;           /* buttons scale nicely */
    white-space: normal !important;  /* allow text wrap if needed */
  }
}

/* Posts Section */

.posts {
  margin: 2rem 0;
}

.posts .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@media screen and (max-width: 1080px) {
  .posts .container {
    grid-template-columns: 1fr;
  }
}

/* Adoption */

.posts__adoptions {
  margin-right: 2rem;
}

@media screen and (max-width: 1080px) {
  .posts__adoptions {
    margin-right: 0;
  }
}

.posts__adoptions--listing {
  display: grid;
  grid-template-columns: 1fr 4fr;
  gap: 2rem;
  margin-bottom: 3rem;
}

@media screen and (max-width: 1080px) {
  .posts__adoptions--listing {
    grid-template-columns: 1fr;
  }
}

.posts__adoptions--image-box {
  margin: auto;
}

@media screen and (max-width: 1080px) {
  .posts__adoptions--image-box {
    text-align: center;
  }
}

.posts__adoptions--image-box img {
  width: 100%;
  height: max-content;
  border-radius: 20px;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
}

@media screen and (max-width: 1080px) {
  .posts__adoptions--image {
    width: 20%;
  }
}

.posts__adoptions--main-heading-box {
  display: flex;
  justify-content: center;
}

.posts__adoptions--main-heading {
  margin-bottom: 2rem;
}

@media screen and (max-width: 1080px) {
  .posts__adoptions--text-box {
    text-align: center;
  }
}

.posts__adoptions--name {
  display: inline-block;
  margin-bottom: 0.5rem;
}

.posts__adoptions--breed {
  font-style: italic;
  text-transform: capitalize;
  margin-bottom: 1rem;
}

.posts__adoptions--excerpt {
  margin-bottom: 1rem;
}

@media screen and (max-width: 1080px) {
  .posts__adoptions--excerpt {
    text-align: center;
  }
}

.posts__adoptions--btn-box {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

.posts__adoptions--cta-btn {
  background-color: var(--color-white-light);
  color: var(--color-grey-dark);
  margin-bottom: 2rem;
}

/* Blog Section */

@media screen and (max-width: 1080px) {
  .posts__blog {
    text-align: center;
  }
}

.posts__blog--main-heading-box {
  display: flex;
  justify-content: center;
}

.posts__blog--main-heading {
  margin-bottom: 2rem;
}

.posts__blog--heading {
  margin-bottom: 1rem;
  text-transform: capitalize;
}

.posts__blog--excerpt {
  margin-bottom: 1rem;
}

.posts__blog--link-box {
  margin-bottom: 3rem;
}

.posts__blog--btn-box {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

.posts__blog--cta-btn {
  color: var(--color-grey-dark);
  background-color: var(--color-white-light);
}

/* About Section */

.about {
  background-color: var(--color-white-light);
  padding: 2rem 0;
}

@media screen and (max-width: 1080px) {
  .about {
    padding: 0;
  }
}

.about .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

@media screen and (max-width: 1080px) {
  .about .container {
    display: flex;
    flex-direction: column;
  }
}

.about__text-box {
  margin: auto 0;
  color: var(--color-grey-dark);
  margin-right: 2rem;
}

@media screen and (max-width: 1080px) {
  .about__text-box {
    text-align: center;
    margin-bottom: 4rem;
    margin-right: 0;
  }
}

.about__main-heading {
  margin-bottom: 2rem;
  text-transform: capitalize;
}

.about__excerpt {
  margin-bottom: 2rem;
}

.about__cta-btn {
  background-color: var(--color-green-primary);
  color: var(--color-white-light);
  display: inline-block;
  margin-top: 1rem;
}

.about__cta-btn:hover {
  color: var(--color-grey-dark);
}

.about__image-box {
  display: flex;
  justify-content: center;   /* centers image horizontally */
  align-items: center;       /* centers image vertically */
  overflow: hidden;          /* hides anything outside container */
  height: 400px;             /* adjust to how tall you want the visible image */
}

.about__image {
  width: 100%;
  height: 100%;              /* fills the container height */
  display: block;
  object-fit: cover;         /* crops image to fit without distortion */
  object-position: center 30%;   /* keeps important part of image in view */
}

@media screen and (max-width: 1080px) {
  .about__image {
    margin: 0 auto;
    width: 50%;
  }
}

/* Footer Section */

.footer__main-footer {
  background-color: var(--color-grey-dark);
  color: var(--color-white-light);
  padding: 2rem 0;
}

.footer__main-footer .container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

@media screen and (max-width: 900px) {
  .footer__main-footer .container {
    grid-template-columns: 1fr;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 2rem;
  }
}

.footer__link-menu-box ul {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  list-style: none;
}

.footer__link-menu-box ul a {
  color: var(--color-white-light);
  transition: color 0.2s ease;
}
.footer__link-menu-box ul a:hover {
  color: var(--color-green-primary);
}

.footer__logo-box {
  text-align: center;
}

.footer__logo {
  max-width: 100px;
  margin-bottom: 0.5rem;
}

.footer__socials-box {
  margin-top: 2rem;
  font-size: 2rem;
}

.footer__social-link {
  color: var(--color-white-light);
  text-decoration: none;
  font-size: 3rem;
  transition: color 0.2s ease;
}

.footer__social-link:hover {
  color: var(--color-green-primary);
}

.footer__info {
  margin-bottom: 1rem;
}

.footer__info-box {
  text-align: right;
}

.footer__link {
  color: var(--color-white-light);
  transition: color 0.2s ease;
}

.footer__link:hover {
  color: var(--color-green-primary);
}

@media screen and (max-width: 900px) {
  .footer__info-box {
    text-align: center;
    justify-content: center;
  }
}

/* ***** Single Page Styles*****  */

.main__main-heading {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.main__text {
  margin-bottom: 2rem;
}

.main-content {
  margin-top: 2rem;
  margin-bottom: 5rem;
}

.main-content p {
  margin: 2rem 0;
}

.main-content h2 {
  font-size: 3rem;
}

.blog__container {
  padding: 0;
}

.meta-box {
  background-color: var(--color-green-primary);
  text-decoration: none;
  padding: 1rem 2rem;
  border-radius: 5px;
  transform: translateY(-4rem);
  display: inline-block;
}

@media screen and (max-width: 900px) {
  .meta-box {
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(0);
  }
}

.meta-box a:nth-child(1) {
  color: var(--color-white-light);
}

/* ***** Blog Archive Styles*****  */

.blog__archive .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
  margin-top: 2rem;
}

.blog__pagination-box {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  margin-bottom: 2rem;
}

.blog__pagination {
  color: var(--color-blue-primary);
  font-size: 1.6rem;
  font-weight: 500;
}

.blog__pagination a {
  transition: color 0.2s ease;
  color: var(--color-grey-dark);
}

.blog__pagination a:hover {
  color: var(--color-blue-primary);
  font-size: 1.6rem;
  font-weight: 500;
}

.blog__search-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.blog__search-field {
  border: 1px solid var(--color-grey);
  border-radius: 4px;
  padding: 0.5rem;
  margin: 1rem 0;
  font-family: "Montserrat", sans-serif;
  width: 100%;
  position: relative;
}

.blog__search-field:focus {
  outline-color: var(--color-blue-primary);
}

.blog__archive .container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.blog__article {
  border: 1px solid var(--color-grey-light);
  padding: 3rem;
  border-radius: 20px;
  background-color: var(--color-white-light);
  transition: box-shadow 0.2s ease;
}

.blog__article:hover {
  box-shadow: 0px 0px 15px rgba(134, 216, 236, 0.8);
}

@media screen and (max-width: 1080px) {
  .blog__image-box a {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.blog__heading {
  margin-bottom: 1rem;
  color: var(--color-grey-dark);
  transition: color 0.2s ease;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  display: inline;
}

.blog__heading:hover {
  color: var(--color-green-primary);
}

.blog__excerpt {
  margin-bottom: 1rem;
}

.blog__btn-box {
  margin-top: 2rem;
}

/* ***** Adoptions Listings Styles*****  */

/* Main listings wrapper */
.adoptions__listings {
   padding-top: 4rem;padding-bottom: 1rem;
}

/* Grid wrapper for dog cards */
.adoptions__listings__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 cards per row on desktop */
  gap: 2rem;
  width: 100%;
}

/* Tablet */
@media screen and (max-width: 1080px) {
  .adoptions__listings__grid {
    grid-template-columns: repeat(2, 1fr); /* 2 per row on tablet */
  }
}

/* Mobile */
@media screen and (max-width: 900px) {
  .adoptions__listings__grid {
    grid-template-columns: 1fr; /* 1 per row on mobile */
  }
}

/* Individual dog card */
.adoptions__listing {
  border: 1px solid var(--color-grey-light);
  padding: 2rem;
  border-radius: 20px;
  background-color: var(--color-white-light);
  transition: box-shadow 0.2s ease;
}

.adoptions__listing:hover {
  box-shadow: 0px 0px 15px rgba(134, 216, 236, 0.8);
}

/* Make dog images square */
.adoptions__listing--image-box img {
  width: 100%;
  aspect-ratio: 1 / 1; /* ensures square image */
  object-fit: cover;
  border-radius: 15px;
}

/* Dog Name Overlay on Image */
.adoptions__listing--image-box {
    position: relative; /* ensures overlay is positioned relative to image */
}

.adoptions__image-name {
    position: absolute;
    top: 0.9rem;   /* distance from top */
    left: 0.8rem;     /* distance from left */
    background-color: rgba(255, 255, 255, 0.85);
    color: var(--color-grey-dark);
    font-weight: 600;
    font-size: 2.2rem;
    padding: 0.3rem 0.8rem;
    border-radius: 8px;
    max-width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Reserved Badge Overlay */
.adoptions__badge-reserved {
    position: absolute;
    bottom: 0.9rem;      
    right: 0.9rem;           

    background-color: rgba(var(--rgb-orange-primary), 0.95); 
    color: var(--color-white-light); 
    
    /* Flexbox keeps the icon and text perfectly aligned */
    display: flex;
    align-items: center;
    gap: 0.4rem; /* Space between icon and text */
    
    font-weight: 700;
    font-size: 1.6rem; /* Slightly smaller than the dog name (2.2rem) */
    padding: 0.4rem 1.2rem;
    border-radius: 8px;
    z-index: 10;
    text-transform: uppercase;
    letter-spacing: 1px;
    
    /* Slightly stronger shadow to lift it off the image */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); 
    white-space: nowrap; 
}

/* Make the icon slightly larger than the text for emphasis */
.adoptions__badge-reserved i {
    font-size: 1.8rem;
}


/* Name, breed, temperament containers */
.adoptions__listing--name-box,
.adoptions__listing--breed-box,
.adoptions__listing--nature-box {
  display: flex;
  justify-content: center;
  align-items: center;
}

.adoptions__listing--name {
  color: var(--color-grey-dark);
  font-size: 2rem;
  margin-bottom: 1rem;
  text-transform: capitalize;
}

.adoptions__listing--sex {
  color: var(--color-grey);
  font-size: 1.5rem;
  margin-bottom: 1rem;
  text-transform: capitalize;
  font-style: italic;
}

.adoptions__listing--image-box {
  margin-bottom: 1rem;
}

.adoptions__listing--image-box img {
  width: 100%;
  height: 300px; /* fix height for all cards */
  object-fit: cover; /* crop excess */
  border-radius: 15px;
}

/* Responsive image heights */
@media screen and (max-width: 1080px) {
  .adoptions__listing--image-box img {
    height: 400px;
  }
}

@media screen and (max-width: 900px) {
  .adoptions__listing--image {
    height: 400px;
  }
}

.adoptions__listing--nature {
  color: var(--color-grey);
  font-size: 1.5rem;
  text-transform: capitalize;
  font-style: italic;
  font-weight: 400;
}

.adoptions__listing--excerpt-box {
  margin-bottom: 1rem;
}

/* Center text on mobile */
@media screen and (max-width: 900px) {
  .adoptions__listing--excerpt-box,
  .adoptions__listing--read-more-box {
    text-align: center;
  }
}

/* Pagination below dog cards */
.pagination {
  margin-top: auto; /* pushes pagination to bottom of container */
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1rem 0;
  
}
.pagination {
  grid-column: 1 / -1;
}


.pagination a,
.pagination span {
  display: inline-block;
  padding: 0.5rem 0.8rem;
  background-color: var(--color-green);
  color: var(--color-grey-dark);
  border-radius: 5px;
  text-decoration: none;
  transition: background-color 0.2s;
}

.pagination a:hover {
  background-color: var(--color-green-dark);
}

.pagination .current {
  font-weight: bold;
  background-color: transparent;          /* remove the dark fill */
  border: 2px solid var(--color-green-primary); /* outline using existing color */
  color: var(--color-green-primary);     /* text matches outline */
  border-radius: 5px;                     /* keeps same rounding */
  padding: 0.5rem 0.8rem;                /* maintain same spacing */
}

/* No dogs section */
.adoptions__nodogs {
  height: 20vh;
}

.adoptions__nodog-logo {
  height: 20vh;
}

@media screen and (max-width: 900px) {
  .adoptions__nodogs-img {
    width: 80vw;
  }
}


/* ***** Single Adoption Listing Styles ***** */

.single-adoption-listing .container {
  padding: 2rem 0;
}

@media screen and (max-width: 900px) {
  .single-adoption-listing .container {
    padding: 4rem 1.5rem;
  }
}

/* Header + Name */
.single-adoption-listing__header-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: stretch;
}

@media screen and (max-width: 1080px) {
  .single-adoption-listing__header-box {
    grid-template-columns: 1fr;
    justify-content: center;
    text-align: center;
  }
}

.single-adoption-listing__name {
  font-size: 4rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
  grid-column: 1 / -1;
  text-transform: capitalize;
}

@media screen and (max-width: 1080px) {
  .single-adoption-listing__name {
    text-align: center;
  }
}

/* Image Box + Banner */
.single-adoption-listing__image-box {
  display: flex;
  justify-content: center;
  align-items: stretch;
  margin-bottom: 2rem;
  margin-top:2rem;
}

.single-adoption-listing__image-box .image-wrapper {
  position: relative;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
}

.single-adoption-listing__image-box .image-wrapper img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* ----- Single Adoption Listing Banner ----- */

/* Ensure image wrapper is relative */
.single-adoption-listing__image-box .image-wrapper {
    position: relative;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
}

/* Image inside wrapper fills the container */
.single-adoption-listing__image-box .image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 20px;
}

.status-banner {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-weight: 700;
  font-size: 2rem;
  padding: 1.5rem 1rem;
  text-align: center;
  z-index: 20;
}

x
/* Key Info Tags below name */
.single-adoption-listing__key-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 3rem;
  justify-content: flex-start;
}

.single-adoption-listing__key-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  font-size: 1.6rem;
  color: var(--color-black);
}

.single-adoption-listing__key-tag i {
  font-size: 1.8rem;
}

/* Status / Age / Sex / Location */
.single-adoption-listing__key-tag.location {
  background-color: rgba(var(--rgb-green-primary),0.4);
  color: var(--color-grey-dark);
}

.single-adoption-listing__key-tag.sex.male {
  background-color: rgba(var(--rgb-blue-secondary),0.4);
  color: var(--color-grey-dark);
}

.single-adoption-listing__key-tag.sex.female {
  background-color: rgba(var(--rgb-pink-primary),0.4);
  color: var(--color-grey-dark);
}

.single-adoption-listing__key-tag.age {
  background-color: rgba(var(--rgb-orange-primary),0.4);
  color: var(--color-grey-dark);
}
.single-adoption-listing__key-tag.temperament {
  background-color: rgba(var(--rgb-green-secondary),0.4);
  color: var(--color-grey-dark);
}

@media screen and (max-width: 600px) {
  .single-adoption-listing__key-tags {
    justify-content: center;
    gap: 0.6rem;
  }
  .single-adoption-listing__key-tag {
    font-size: 1.4rem;
    padding: 0.5rem 0.8rem;
  }
  .single-adoption-listing__key-tag i {
    font-size: 1.6rem;
  }
}

/* Description Box */
.single-adoption-listing__description-box {
  margin-bottom: 4rem;
}

@media screen and (max-width: 1080px) {
  .single-adoption-listing__description-box {
    text-align: center;
  }
}

.single-adoption-listing__description-box--heading {
  margin: 2rem 0;
}

.single-adoption-listing__description-box--text {
  margin: 1rem 0;
}

/* CTA Buttons */
.single-adoption-listing__btn-box {
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: flex-start;
}

@media screen and (max-width: 1080px) {
  .single-adoption-listing__btn-box {
    align-items: center;
  }
}

.single-adoption-listing__btn-box .btn-green-white {
  display: block;
  width: max-content;
  margin-top: 0.5rem;
}

/* Attribute Boxes */
.single-adoption-listing__details-box {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top:2rem;
}

.single-adoption-listing__attribute-group-container {
  border: 2px solid var(--color-grey-light);
  border-radius: 12px;
  padding: 1rem 1.2rem;
  background-color: var(--color-white-off);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 1.5rem;
}

.single-adoption-listing__attribute-group-header {
  grid-column: 1 / -1;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--color-grey-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.single-adoption-listing__attribute {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-grey-light);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  font-size: 1.4rem;
}

.single-adoption-listing__attribute-label {
  font-weight: 700;
  font-size: 1.4rem;
  color: #555;
}

.single-adoption-listing__attribute-value {
  font-size: 1.6rem;
  margin-top: 0rem;
  color: #000;
}

@media screen and (max-width: 600px) {
  .single-adoption-listing__attribute-group-container {
    grid-template-columns: 1fr;
  }
  .single-adoption-listing__attribute-label {
    font-size: 1.2rem;
  }
  .single-adoption-listing__attribute-value {
    font-size: 1.4rem;
  }
}

/* Status Box Below Image */
.single-adoption-listing__attribute--status {
  border-radius: 12px;
  border: 2px solid var(--color-grey-dark);
  padding: 0.8rem 1rem;
  font-weight: 700;
  font-size: 1.4rem;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--color-white-off);
}

/* Status Colors */
.single-adoption-listing__attribute--status.available {
  border-color: var(--color-green-primary);
}
.single-adoption-listing__attribute--status.reserved {
  border-color: #fcb0b3;
}
.single-adoption-listing__attribute--status.adopted {
  border-color: var(--color-grey-light);
}

/* Back Button */
.single-adoption-listing__back-btn {
  margin-bottom: 3rem;
}

.single-adoption-listing__back-btn .btn-back {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 1.4rem;
  border-radius: 8px;
  background-color: var(--color-grey-light);
  color: var(--color-black);
  text-decoration: none;
}

.single-adoption-listing__back-btn .btn-back:hover {
  background-color: var(--color-grey-dark);
  color: #fff;
}




/* *****  Single Page Styles *****  */

.main .container {
  margin: 3rem auto;
}

.main-banner__sub-heading {
  color: var(--color-white-light);
}

/* ***** 404 Styles ***** */

.unknown__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4rem;
  padding-bottom: 4rem;
  gap: 1rem;
}

.unknown__container a {
  text-align: center;
}

.unknown__container a img {
  width: 50%;
  height: max-content;
}

.unknown__container btn-green-white {
  margin-top: 5rem;
}

/* ***** About Styles ***** */

.about__two-grid .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 2rem;
  margin-bottom: 2rem;
  gap: 6rem;
}

@media screen and (max-width: 1080px) {
  .about__two-grid .container {
    grid-template-columns: 1fr;
  }
}

.about__two-grid--text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about__two-grid--text h2 {
  margin-bottom: 1rem;
}

@media screen and (max-width: 1080px) {
  .about__two-grid--text {
    text-align: center;
  }
}

.about__two-grid--img {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.about__two-grid--img img {
  width: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 20px;
  overflow: hidden;
}

.about__two-grid--img p {
  font-size: 2rem;
  font-weight: 600;
}

.about__process {
  margin-top: 5rem;
  margin-bottom: 5rem;
}

.about__process .container {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

.about__process-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.about__process-main-heading {
  text-align: center;
}

.about__process-heading {
  margin-bottom: 1rem;
  text-wrap: nowrap;
}

.about__process-text {
  text-align: center;
  margin: 0;
}

.about__process-icon {
  font-size: 6rem;
}

.about__process-arrow {
  text-align: center;
  font-size: 5rem;
  color: var(--color-green-primary);
}

.about__team .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.about__team-main-heading {
  text-align: center;
}

.about__team-card {
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 40%;
}

@media screen and (max-width: 1080px) {
  .about__team-card {
    max-width: 100%;
  }
}

.about__team-image {
  border-radius: 20px;
  height: 300px;
  width: 300px;
  object-fit: cover;
  object-position: center;
}

.about__team-heading {
  margin-bottom: 0.5rem;
}

/* Donate Page */
.donations__main {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.container-donations {
  margin-top: 2rem;
  margin-bottom: 2rem;
  display: flex;
  flex-wrap: nowrap;
  max-width: 1080px;
  gap: 4rem;
  margin: 0 auto;
}

@media screen and (max-width: 1080px) {
  .container-donations {
    display: grid;
    grid-template-columns: 1fr;
    text-align: center;
    max-width: 720px;
  }
}

.donations__img {
  height: 40vh;
  border-radius: 10px;
}

.donations__btn-box {
  margin-top: 2rem;
  margin-bottom: 2rem;
  text-align: center;
}

.btn-donate {
  display: inline-block;
  margin: 0 auto;
}

/* Contact Page Styles */

.contact .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

@media screen and (max-width: 1080px) {
  .contact .container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.contact__social-link {
  color: var(--color-grey-dark);
  text-decoration: none;
  font-size: 3rem;
  transition: color 0.2s ease;
}

.contact__social-link:hover {
  color: var(--color-green-primary);
}

.contact__socials-box {
  text-align: center;
}

.contact__text-box {
  text-align: center;
}

/* **** Wordpress Custom Styles *** */

.current-menu-item a {
  color: var(--color-green-primary);
}

/* Desktop-only pagination fix */
@media screen and (min-width: 901px) {
  .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
  }
}
@media screen and (min-width: 901px) {
  .pagination a,
  .pagination span {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }
}
@media screen and (max-width: 1080px) {
  .about__image-box {
    height: auto;          /* remove fixed height */
    overflow: visible;     /* stop cropping */
  }

  .about__image {
    width: 100%;
    height: auto;          /* keep natural aspect ratio */
    object-fit: contain;   /* show whole image */
  }
}
/* Dog tags under image - inline style */
.adoptions__tags {
    text-align: center;        /* center badges under image */
    margin: 1rem 0;            /* spacing above excerpt */
}

.adoptions__tag {
    display: inline-block;     /* inline, but allows padding/margin */
    background-color: var(--color-green-secondary);
    color: var(--color-grey-dark);
    font-size: 1.4rem;
    font-weight: 500;
    padding: 0.3rem 0.8rem;
    border-radius: 12px;
    text-transform: capitalize;
    margin: 0 0.3rem 0.3rem 0.3rem; /* horizontal + small vertical spacing */
}

.adoptions__tag--secondary {
    background-color: var(--color-blue-primary);
    color: var(--color-white-light);
}
/* ----- Adoption Tag Colors ----- */

/* Sex tags with brand colors */
.adoptions__tag.male {
    background-color: rgba(var(--rgb-blue-primary),0.4); /* brand blue */
    color: var(--color-grey-dark);            /* readable text */
}

.adoptions__tag.female {
    background-color: rgba(var(--rgb-pink-primary),0.4); /* brand pink */
    color: var(--color-grey-dark);            /* readable text */
}

/* Temperament tag (green, brand color) */
.adoptions__tag--secondary {
    background-color: rgba(var(--rgb-green-secondary),0.4); /* brand green */
    color: var(--color-grey-dark);
}

.adoptions__tags .adoptions__tag--location {
    background-color: rgba(var(--rgb-green-primary),0.4);
    color: var(--color-grey-dark);
}


/* Make the card a flex container in column direction */
.adoptions__listing {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* pushes content to top, button to bottom */
  border: 1px solid var(--color-grey-light);
  padding: 2rem;
  border-radius: 20px;
  background-color: var(--color-white-light);
  transition: box-shadow 0.2s ease;
}

/* Dog card CTA button */
.adoptions__listing--cta-btn {
  display: block;             /* takes full width of content box */
  text-align: center;         /* centers text inside button */
  margin: 1.5rem auto 0 auto; /* top margin for spacing, auto left/right to center */
  background-color: rgba(134, 216, 236, 0.2); /* super light brand blue */
  color: var(--color-grey-dark);               /* dark grey text */
  padding: 0.8rem 1.6rem;
  border-radius: 20px;
  font-weight: 600;
  font-size: 1.6rem;
  text-transform: capitalize;
  transition: all 0.3s ease;
}

/* Hover effect */
.adoptions__listing--cta-btn:hover {
  background-color: rgba(134, 216, 236, 0.6); /* darker blue */
  color: var(--color-grey-dark);
  text-decoration: none;
}

/* ----- Dog card layout fixes ----- */

/* Make image + tags stack properly */
.adoptions__listing--image-box,
.adoptions__tags {
    display: block;        /* stack vertically */
    width: 100%;
}

/* Add spacing below image for tags */
.adoptions__tags {
    text-align: center;    /* center the tags */
    margin: 1rem 0;        /* space between image and tags */
}

/* Keep button at bottom without messing up spacing */
.adoptions__listing {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* let content flow naturally */
}

/* Push button to bottom */
.adoptions__listing--cta-btn {
    margin-top: auto;       /* anchors button to bottom */
    display: block;
    text-align: center;
}

/* ================================
   Featured Dogs Slider - Glide.js
   ================================ */
.featured-slider {
  background-color: var(--color-white-light);
  padding: 2rem 0;
}

.featured-slider__heading-box {
  display: flex;
  justify-content: center;
  margin-bottom: 0rem;
}

.featured-slider__heading {
  font-size: 3rem;
}

/* Each card */
.featured-slider__slide {
  background-color: var(--color-white-light);
  border-radius: 20px;
  box-shadow: 1px 1px 10px rgba(0,0,0,0.15);
  padding: 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  width: 100%;          /* fixed width for desktop */
  box-sizing: border-box;
}

/* Card image */
.featured-slider__image-box {
  width: 100%;
  height: 280px;
  overflow: hidden;
  border-radius: 15px;
  margin-bottom: 0.8rem;
}

.featured-slider__image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Text spacing */
.featured-slider__text-box h3 {
  margin: 0.4rem 0;
  font-size: 2rem;
}

.featured-slider__text-box p {
  margin: 0.2rem 0;
  font-size: 1.5rem;
}

/* ================================
   CONSTRAIN THE SLIDER
   ================================ */
.featured-glide {
  max-width: 1080px;      /* match your container */
  margin: 0 auto;         /* center slider */
  padding: 0 15px;        /* optional padding */
  box-sizing: border-box;
}

/* Force the slides to stay inside the constrained width */
.featured-glide .glide__track {
  min-height: 350px;
  overflow: hidden; 
  padding-top: 20px  !important; 
  padding-bottom: 20px !important;
   margin-left: -10;
  margin-right: -10;
}

.featured-glide .glide__slides {
  display: flex !important;
  justify-content: flex-start;
  flex-wrap: nowrap;
  height: auto;
}

.featured-glide .glide__slide {
  flex: 0 0 auto;          /* do not stretch */
  display: flex;
  overflow: visible;
  justify-content: center;
  align-items: flex-start;
  height: auto;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Arrows aligned with container */
.featured-slider .glide__arrows {
  max-width: 1200px;
  margin: 1rem auto 0 auto;
  display: flex;
  justify-content: center;
  padding: 0 10px;
  box-sizing: border-box;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .featured-slider__slide {
    width: 220px; /* Slightly smaller on tablets */
  }
}

@media (max-width: 768px) {
  
  .featured-slider__slide {
    width: 280px; 
    max-width: 100%; /* Prevents overflow on tiny screens */
  }
  
  /* Ensure the slide wrapper centers the card */
  .featured-glide .glide__slide {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
@media (max-width: 480px) {
  .featured-slider__slide {
    width: 100% !important; /* Let Glide handle it */
    max-width: none;
  }
}
/* ***** Glide Arrow Styling ***** */

.featured-glide .glide__arrows {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin-top: 1rem;
  margin-bottom: 2rem;
}

/* Base Button Style (Default State) */
.featured-glide .glide__arrow {
  background-color: transparent;
  border: 2px solid var(--color-green-primary);
  color: var(--color-green-primary);
  
  /* Circle Shape */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  
  /* Center Icon */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Text Settings */
  font-family: "Montserrat", sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  padding-bottom: 4px; 
  cursor: pointer;
  
  /* Smooth transition */
  transition: all 0.2s ease;
  box-shadow: 1px 1px 5px rgba(0,0,0,0.1);
  
  /* Removes blue highlight on mobile tap */
  -webkit-tap-highlight-color: transparent; 
}

/* 
   DESKTOP ONLY:
   This rule ensures the "Fill Green" effect only happens 
   if the user has a mouse. It prevents the sticky 
   green button on mobile.
*/
@media (hover: hover) {
  .featured-glide .glide__arrow:hover {
    background-color: var(--color-green-primary);
    color: var(--color-white-light);
    transform: translateY(-2px);
    box-shadow: 1px 4px 10px rgba(0,0,0,0.2);
  }
}

/* 
   ACTIVE STATE (Mobile & Desktop):
   This gives feedback when you actually CLICK or TAP the button,
   but goes away immediately after lifting your finger/mouse.
*/
.featured-glide .glide__arrow:active {
  background-color: var(--color-green-primary);
  color: var(--color-white-light);
  transform: translateY(1px); /* slight press down effect */
  box-shadow: none;
}

.featured-glide .glide__arrow:focus {
  outline: none;
}

/* Ensure the card has a smooth transition for the hover effect */
.featured-slider__slide {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  will-change: transform; /* Helps with performance */
}

/* DESKTOP ONLY HOVER EFFECTS */
@media (hover: hover) {
  .featured-slider__slide:hover {
    /* 1. Lift the card up slightly */
    transform: translateY(-10px);
    
    /* 2. Make the shadow deeper to look like it's floating higher */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    
    /* 3. Optional: Add a subtle brand-colored border */
    border: 1px solid var(--color-green-primary);
  }

  /* 4. Optional: Change the name color to brand green on hover */
  .featured-slider__slide:hover .featured-slider__name {
    color: var(--color-green-primary);
    transition: color 0.3s ease;
  }

  /* 5. Optional: Zoom the image slightly inside the box */
  .featured-slider__slide:hover .featured-slider__image-box img {
    transform: scale(1.1);
    transition: transform 0.5s ease;
  }
}
/* SUCCESS STORIES PAGE */

/* ---------------- Grid layout ---------------- */
.success-stories-page .adoptions__listings__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;               /* space between boxes */
    justify-items: center;
}

@media screen and (max-width: 1200px) {
    .success-stories-page .adoptions__listings__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .success-stories-page .adoptions__listings__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 480px) {
    .success-stories-page .adoptions__listings__grid {
        grid-template-columns: 1fr;
    }
}

/* ---------------- Image container ---------------- */
.success-stories-page .adoptions__listing--image-box {
    position: relative;
    width: 150px;      /* fixed square size */
    height: 150px;     /* fallback for browsers without aspect-ratio */
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
}

.success-stories-page .adoptions__listing--image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: transparent !important; /* remove any bg */
}

/* ---------------- Dog name label ---------------- */
/* Absolutely positioned container for bottom-left */
.success-stories-page .adoptions__listing--image-box .success-stories-name {
    position: absolute;
    left: 6px;         /* distance from left */
    bottom: 6px;       /* anchor at bottom */
    top: auto;         /* reset any top value from global CSS */
    display: inline-block; 
    background: transparent; 
}

/* Span holding the text and background */
.success-stories-page .adoptions__listing--image-box .success-stories-name span {
    display: inline-block;
    background: rgba(0, 0, 0, 0.5); 
    color: #fff;
    padding: 2px 8px;
    border-radius: 12px;          
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    max-width: 100%;
    font-size: 1.4rem;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---------------- Disable hover on container only for Success Stories page ---------------- */
.success-stories-page .adoptions__listing,
.success-stories-page .adoptions__listing:hover {
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    cursor: default !important;
    transition: none !important;
    box-shadow: none !important;
}

/* ================================================================
   BFS Dog Card Grid
   Used by [bfs_featured_dogs] and [bfs_latest_rescues] shortcodes.
   Note: :root in this file sets font-size:10px, so px units are used
   throughout to avoid rem inconsistencies with Kadence.
   ================================================================ */

/* ---- Dog grid: flexbox with centred last row ---- */
/* justify-content:center means an incomplete last row
   (e.g. 2 cards in a 3-col layout) is centred, not left-orphaned. */
.bfs-dog-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    margin: 32px auto;
    max-width: 1040px;
}

/* Default card width: 3 columns
   calc: (100% - 2 gaps) / 3  =  33.33% - 16px */
.bfs-dog-grid .bfs-dog-card {
    flex: 0 0 calc(33.33% - 16px);
    max-width: calc(33.33% - 16px);
}

/* 1 dog: single centred card */
.bfs-dog-grid--count-1 .bfs-dog-card {
    flex: 0 0 300px;
    max-width: 300px;
}

/* 2 dogs: 2 columns
   calc: (100% - 1 gap) / 2  =  50% - 12px */
.bfs-dog-grid--count-2 .bfs-dog-card {
    flex: 0 0 calc(50% - 12px);
    max-width: calc(50% - 12px);
}

/* 3 dogs: 3 columns (default applies, no override needed) */

/* 4 dogs: 4 columns
   calc: (100% - 3 gaps) / 4  =  25% - 18px */
.bfs-dog-grid--count-4 .bfs-dog-card {
    flex: 0 0 calc(25% - 18px);
    max-width: calc(25% - 18px);
}

/* 5 dogs: 3-col cards; justify-content centres the 2-card last row */
/* (default 3-col applies) */

/* 6 dogs: 3+3 (default 3-col applies) */

/* 7 dogs: 4-col cards; justify-content centres the 3-card last row */
.bfs-dog-grid--count-7 .bfs-dog-card {
    flex: 0 0 calc(25% - 18px);
    max-width: calc(25% - 18px);
}

/* 8 dogs: 4+4 */
.bfs-dog-grid--count-8 .bfs-dog-card {
    flex: 0 0 calc(25% - 18px);
    max-width: calc(25% - 18px);
}

/* ---- Responsive: count logic only on desktop ---- */
@media (max-width: 700px) {
    .bfs-dog-grid .bfs-dog-card {
        flex: 0 0 calc(50% - 12px);
        max-width: calc(50% - 12px);
    }
}

@media (max-width: 440px) {
    .bfs-dog-grid .bfs-dog-card {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Beat Kadence's .link-style-standard a [0,1,1] specificity */
a.bfs-dog-card,
a.bfs-dog-card:hover,
a.bfs-dog-card:visited,
a.bfs-dog-card:focus {
    text-decoration: none;
    color: inherit;
}

.bfs-dog-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 8px rgba(72, 74, 75, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bfs-dog-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(72, 74, 75, 0.2);
}

.bfs-dog-card__image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

/* Latest Rescues: square image to match Featured Dogs proportions */
.bfs-dog-grid--latest .bfs-dog-card__image {
    aspect-ratio: 1 / 1;
}

.bfs-dog-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bfs-dog-card__text {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bfs-dog-card__name {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    color: #333;
}

.bfs-dog-card__location,
.bfs-dog-card__breed {
    font-size: 13px;
    color: #888;
    margin: 0;
}

.bfs-dog-card__read-more {
    font-size: 12px;
    color: #8bd2bd;
    font-weight: 600;
    margin-top: 6px;
}

/* ================================================================
   Featured Dogs vs Latest Rescues: visual size hierarchy
   Featured = primary / dominant  →  wider grid, 4-col at 4+ dogs
   Latest   = secondary prompt    →  narrower grid, 3-col

   Featured adaptive rule (no singletons):
     1 dog → 1 centred | 2 → 2-col | 3 → 3-col | 4+ → 4-col
   ================================================================ */

/* FEATURED: wide grid so 4-col cards are visibly larger than Latest's 3-col
   At 1200px with 24px gap: (1200 - 72) / 4 ≈ 282px per card
   Latest at 720px with 16px gap: (720 - 32) / 3 ≈ 229px per card */
.bfs-dog-grid--featured {
    max-width: 1200px;
    gap: 24px;
}

/* Featured adaptive rules: 3-class specificity (0,3,0) beats base count-N (0,2,0) */

/* 1 dog: single centred card */
.bfs-dog-grid--featured.bfs-dog-grid--count-1 .bfs-dog-card {
    flex: 0 0 360px;
    max-width: 360px;
}

/* 2 dogs: 2-col */
.bfs-dog-grid--featured.bfs-dog-grid--count-2 .bfs-dog-card {
    flex: 0 0 calc(50% - 12px);
    max-width: calc(50% - 12px);
}

/* 3 dogs: 3-col */
.bfs-dog-grid--featured.bfs-dog-grid--count-3 .bfs-dog-card {
    flex: 0 0 calc(33.33% - 16px);
    max-width: calc(33.33% - 16px);
}

/* 4+ dogs: 4-col (justify-content:center handles short last rows) */
.bfs-dog-grid--featured.bfs-dog-grid--count-4 .bfs-dog-card,
.bfs-dog-grid--featured.bfs-dog-grid--count-5 .bfs-dog-card,
.bfs-dog-grid--featured.bfs-dog-grid--count-6 .bfs-dog-card,
.bfs-dog-grid--featured.bfs-dog-grid--count-7 .bfs-dog-card,
.bfs-dog-grid--featured.bfs-dog-grid--count-8 .bfs-dog-card {
    flex: 0 0 calc(25% - 18px);
    max-width: calc(25% - 18px);
}

/* Featured image: 4:3 landscape (default aspect-ratio:4/3 already set) */

/* Featured: generous card text */
.bfs-dog-grid--featured .bfs-dog-card__text {
    padding: 14px 16px;
    gap: 4px;
}
.bfs-dog-grid--featured .bfs-dog-card__name {
    font-size: 16px;
}
.bfs-dog-grid--featured .bfs-dog-card__location {
    font-size: 13px;
}

/* LATEST: compact 5-card strip: visually secondary to Featured
   At max-width 900px with 12px gap: (900 - 4×12) / 5 ≈ 170px per card */
.bfs-dog-grid--latest {
    max-width: 900px;
    gap: 12px;
}

/* 5 dogs → 5-col single row (standard case) */
.bfs-dog-grid--latest.bfs-dog-grid--count-5 .bfs-dog-card {
    flex: 0 0 calc(20% - 10px);
    max-width: calc(20% - 10px);
}

/* Image: 1:1 square (already set): naturally compact at ~170px width */

/* Latest: small, tight card text */
.bfs-dog-grid--latest .bfs-dog-card__text {
    padding: 8px 10px;
    gap: 2px;
}
.bfs-dog-grid--latest .bfs-dog-card__name {
    font-size: 12px;
}
.bfs-dog-grid--latest .bfs-dog-card__breed {
    font-size: 11px;
}
.bfs-dog-grid--latest .bfs-dog-card__read-more {
    font-size: 10px;
    margin-top: 4px;
}

/* ---- Responsive ---- */

/* Tablet (≤900px): Featured → 2-col; Latest stays 5-col (strip effect) */
@media (max-width: 900px) {
    .bfs-dog-grid--featured.bfs-dog-grid--count-1 .bfs-dog-card,
    .bfs-dog-grid--featured.bfs-dog-grid--count-2 .bfs-dog-card,
    .bfs-dog-grid--featured.bfs-dog-grid--count-3 .bfs-dog-card,
    .bfs-dog-grid--featured.bfs-dog-grid--count-4 .bfs-dog-card,
    .bfs-dog-grid--featured.bfs-dog-grid--count-5 .bfs-dog-card,
    .bfs-dog-grid--featured.bfs-dog-grid--count-6 .bfs-dog-card,
    .bfs-dog-grid--featured.bfs-dog-grid--count-7 .bfs-dog-card,
    .bfs-dog-grid--featured.bfs-dog-grid--count-8 .bfs-dog-card {
        flex: 0 0 calc(50% - 12px);
        max-width: calc(50% - 12px);
    }
}

/* Small tablet (≤680px): Latest → 4-col (cards ~155px, still compact) */
@media (max-width: 680px) {
    .bfs-dog-grid--latest.bfs-dog-grid--count-5 .bfs-dog-card {
        flex: 0 0 calc(25% - 9px);
        max-width: calc(25% - 9px);
    }
}

/* Large phone (≤480px): Latest → 2-col */
@media (max-width: 480px) {
    .bfs-dog-grid--latest .bfs-dog-card {
        flex: 0 0 calc(50% - 6px);
        max-width: calc(50% - 6px);
    }
    /* Featured → 1-col at this size */
    .bfs-dog-grid--featured.bfs-dog-grid--count-1 .bfs-dog-card,
    .bfs-dog-grid--featured.bfs-dog-grid--count-2 .bfs-dog-card,
    .bfs-dog-grid--featured.bfs-dog-grid--count-3 .bfs-dog-card,
    .bfs-dog-grid--featured.bfs-dog-grid--count-4 .bfs-dog-card,
    .bfs-dog-grid--featured.bfs-dog-grid--count-5 .bfs-dog-card,
    .bfs-dog-grid--featured.bfs-dog-grid--count-6 .bfs-dog-card,
    .bfs-dog-grid--featured.bfs-dog-grid--count-7 .bfs-dog-card,
    .bfs-dog-grid--featured.bfs-dog-grid--count-8 .bfs-dog-card {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Mobile (≤360px): Latest → 1-col */
@media (max-width: 360px) {
    .bfs-dog-grid--latest .bfs-dog-card {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ================================================================
   BFS Header overrides
   Force compact header regardless of Kadence theme-mod caching.
   Selectors confirmed from Kadence source:
     - logo:   #masthead .custom-logo  (also .site-branding a.brand img)
     - header: #masthead .site-main-header-inner-wrap

   Logo rules:
   - ONLY max-height is set per breakpoint: never explicit height
   - max-width: none overrides Kadence's logo_width: 100px theme mod
     (.site-branding a.brand img { max-width: 100px }) which combined
     with our max-height was the source of aspect-ratio distortion
   - width: auto ensures proportional scaling at every breakpoint
   - object-fit: contain is belt-and-braces in case any parent flex
     container tries to stretch the replaced element
   ================================================================ */

/* Base: desktop */
#masthead .custom-logo,
#masthead .site-branding a.brand img {
    max-height: 40px !important;
    max-width: none !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Header row: compact height */
#masthead .site-main-header-inner-wrap {
    min-height: 70px !important;
    height: auto !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* Tablet / hamburger breakpoint */
@media (max-width: 1024px) {
    #masthead .custom-logo,
    #masthead .site-branding a.brand img {
        max-height: 36px !important;
        max-width: none !important;
        width: auto !important;
        height: auto !important;
    }
    #masthead .site-main-header-inner-wrap {
        min-height: 60px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    #masthead .site-branding,
    #masthead .header-logo-container {
        display: flex;
        align-items: center;
    }
}

/* Mobile */
@media (max-width: 600px) {
    #masthead .custom-logo,
    #masthead .site-branding a.brand img {
        max-height: 28px !important;
        max-width: none !important;
        width: auto !important;
        height: auto !important;
    }
    #masthead .site-main-header-inner-wrap {
        min-height: 52px !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }
}

/* ================================================================
   Hero: min-height
   The Kadence rowlayout has no minHeight set in block attributes,
   so the live site renders only as tall as padding + content.
   The old .hero / .main-banner height rules DO NOT affect this
   block (different class names). This rule fixes it directly.
   ================================================================ */
.kb-row-layout-id29_ffb271-c1 {
    min-height: 52vh;
}
.kb-row-layout-id29_ffb271-c1 > .kt-row-column-wrap {
    min-height: inherit;
    align-content: center;
}
@media (max-width: 1024px) {
    .kb-row-layout-id29_ffb271-c1 {
        min-height: 46vh;
    }
}
@media (max-width: 767px) {
    .kb-row-layout-id29_ffb271-c1 {
        min-height: 42vh;
    }
}

/* ================================================================
   Responsive: smooth breakpoints at 360px → 1440px+
   Fixes:
   1. Hero heading: Kadence sets 60px at ≤1024px (larger than
      desktop), causing awkward word-wrap at 900–1100px.
   2. Dog grid: ensure side padding at every viewport width.
   3. Header logo alignment when hamburger nav is shown.
   ================================================================ */

/* 1: Hero heading: scale down smoothly from desktop to mobile */
@media (max-width: 1280px) {
    .wp-block-kadence-advancedheading.kt-adv-heading29_026a12-dd {
        font-size: clamp(32px, 3.5vw, 52px) !important;
        line-height: 1.15em !important;
    }
}
@media (max-width: 900px) {
    .wp-block-kadence-advancedheading.kt-adv-heading29_026a12-dd {
        font-size: clamp(26px, 4.5vw, 38px) !important;
    }
}
@media (max-width: 600px) {
    .wp-block-kadence-advancedheading.kt-adv-heading29_026a12-dd {
        font-size: clamp(22px, 5.5vw, 30px) !important;
    }
}

/* 2: Dog grid: horizontal padding so cards never touch edges */
.bfs-dog-grid {
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
}

/* 3: Header logo: consolidated into "BFS Header overrides" block above */

/* ================================================================
   How to Adopt: 4-step process strip
   ================================================================ */

.bfs-adopt-steps {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}

.bfs-adopt-steps__track {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    margin-bottom: 24px;
}

.bfs-adopt-step {
    flex: 1;
    padding: 0 12px;
}

.bfs-adopt-step__icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 10px;
    color: #8bd2bd;
}

.bfs-adopt-step__icon svg {
    width: 100%;
    height: 100%;
}

.bfs-adopt-step__title {
    font-size: 15px;
    font-weight: 700;
    color: #333;
    margin: 0 0 5px;
}

.bfs-adopt-step__desc {
    font-size: 13px;
    color: #888;
    margin: 0;
    line-height: 1.5;
}

/* Arrow connectors */
.bfs-adopt-step__arrow {
    display: flex;
    align-items: center;
    padding-top: 22px; /* vertically align with centre of icon */
    color: #ccc;
    font-size: 28px;
    font-weight: 300;
    flex-shrink: 0;
    width: 24px;
    justify-content: center;
}

.bfs-adopt-steps__cta {
    margin: 0;
    font-size: 14px;
}

.bfs-adopt-steps__cta a {
    color: #8bd2bd;
    text-decoration: none;
    font-weight: 600;
}

.bfs-adopt-steps__cta a:hover {
    text-decoration: none;
}

/* Tablet: tighten spacing, keep horizontal */
@media (max-width: 700px) {
    .bfs-adopt-step {
        padding: 0 6px;
    }
    .bfs-adopt-step__icon {
        width: 36px;
        height: 36px;
    }
    .bfs-adopt-step__title {
        font-size: 13px;
    }
    .bfs-adopt-step__desc {
        font-size: 11px;
    }
    .bfs-adopt-step__arrow {
        font-size: 22px;
        width: 16px;
        padding-top: 18px;
    }
}

/* Mobile: stack vertically, hide arrows */
@media (max-width: 480px) {
    .bfs-adopt-steps__track {
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }
    .bfs-adopt-step__arrow {
        display: none;
    }
    .bfs-adopt-step {
        width: 100%;
        max-width: 280px;
        padding: 0;
    }
    .bfs-adopt-step__title {
        font-size: 15px;
    }
    .bfs-adopt-step__desc {
        font-size: 13px;
    }
}
/* ============================================================
   ADOPTION PROCESS PAGE: 7-step vertical timeline
   ============================================================ */

/* No outer container box: steps are individual cards.
   Line runs behind all cards; only visible in the gaps between them.
   left = card padding-left(24) + half circle(26) - half line(1) = 49px */
.bfs-process-steps {
    max-width: 620px;
    margin: 0 auto;
    position: relative;
}

.bfs-process-steps::before {
    content: '';
    position: absolute;
    left: 49px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #5aab93;
    z-index: 0;
}

/* Each step is a white card sitting above the line */
.bfs-process-step {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 20px 24px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 1;
    margin-bottom: 16px;
}

.bfs-process-step:last-child {
    margin-bottom: 0;
}

.bfs-process-step__left {
    flex-shrink: 0;
    width: 52px;
    display: flex;
    justify-content: center;
}

.bfs-process-step__circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--global-palette1, #3a7c5c);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bfs-process-step__circle i {
    font-size: 24px;
}

.bfs-process-step__line {
    display: none;
}

.bfs-process-step__body {
    flex: 1;
}

.bfs-process-step__title {
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 5px;
    color: #2a2a2a;
    line-height: 1.3;
}

.bfs-process-step__desc {
    font-size: 15px;
    line-height: 1.65;
    color: #555;
    margin: 0;
}

@media (max-width: 640px) {
    /* Recalculate line: card padding-left(20) + half circle(22) - 1 = 41px */
    .bfs-process-steps::before {
        left: 41px;
    }
    .bfs-process-step {
        gap: 16px;
        padding: 16px 20px;
        margin-bottom: 12px;
    }
    .bfs-process-step__left {
        width: 44px;
    }
    .bfs-process-step__circle {
        width: 44px;
        height: 44px;
    }
    .bfs-process-step__circle i {
        font-size: 20px;
    }
    .bfs-process-step__title {
        font-size: 16px;
    }
    .bfs-process-step__desc {
        font-size: 14px;
    }
}

/* ============================================================
   NAV: ACTIVE ITEM COLOUR FIX
   Works on both transparent (dark) header and solid (light) header.
   
   Kadence's underline nav style draws the active indicator via
   a ::after pseudo-element or background. We override the active
   link colour so it reads clearly on the dark hero overlay, and
   ensure it also works on the white/light header.
   ============================================================ */

/* All nav links white on transparent/dark hero header */
.transparent-header .header-navigation .header-menu-container > ul > li.menu-item > a {
    color: #ffffff !important;
}
.transparent-header .header-navigation .header-menu-container > ul > li.menu-item > a:hover {
    color: rgba(255,255,255,0.75) !important;
    opacity: 1 !important;
}

/* Active item: solid header (after scroll / non-transparent pages) */
#masthead .primary-navigation .current-menu-item > a,
#masthead .primary-navigation .current-page-ancestor > a,
#masthead .primary-navigation .current-menu-ancestor > a {
    color: #8bd2bd !important;
}

/* Active item underline indicator on solid header */
#masthead .primary-navigation ul li.current-menu-item > a::after,
#masthead .primary-navigation ul li.current-page-ancestor > a::after,
#masthead .primary-navigation ul li.current-menu-ancestor > a::after {
    background-color: #8bd2bd !important;
    opacity: 1 !important;
}

/* Active item: transparent header (over hero image) */
.transparent-header #masthead .primary-navigation .current-menu-item > a,
.transparent-header #masthead .primary-navigation .current-page-ancestor > a,
.transparent-header #masthead .primary-navigation .current-menu-ancestor > a {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Active underline on transparent header: use white */
.transparent-header #masthead .primary-navigation ul li.current-menu-item > a::after,
.transparent-header #masthead .primary-navigation ul li.current-page-ancestor > a::after,
.transparent-header #masthead .primary-navigation ul li.current-menu-ancestor > a::after {
    background-color: #ffffff !important;
    opacity: 1 !important;
}

/* Dropdown sub-items: keep their own colour regardless */
#masthead .primary-navigation .sub-menu .current-menu-item > a,
#masthead .primary-navigation .sub-menu .current-page-ancestor > a {
    color: #8bd2bd !important;
}

/* ============================================================
   DOG LISTING PAGE: .bfs-dog-grid--listing
   3-col desktop / 2-col tablet / 1-col mobile
   Cards: overlay name tag, reserved badge, tag row, CTA
   ============================================================ */

.bfs-dog-grid--listing {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
    justify-content: flex-start;
}

.bfs-dog-card--listing {
    flex: 0 0 calc(33.33% - 16px);
    max-width: calc(33.33% - 16px);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 8px rgba(51,51,51,0.08);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    cursor: pointer;
}

.bfs-dog-card--listing:hover {
    box-shadow: 0 6px 20px rgba(51,51,51,0.14);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}

/* Image container: 1:1 square */
.bfs-dog-card--listing .bfs-dog-card__image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f2f0ef;
}

.bfs-dog-card--listing .bfs-dog-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bfs-dog-card__no-photo {
    position: absolute;
    inset: 0;
    background: #e8e4e0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #b0aba6;
}

.bfs-dog-card__no-photo i {
    font-size: 52px;
    line-height: 1;
    display: block;
}

.bfs-dog-card__no-photo span {
    font-size: 11px;
    letter-spacing: 0.03em;
    display: block;
}

/* Dog name: below image, above tags */
.bfs-dog-card--listing .bfs-dog-card__name {
    font-size: clamp(16px, 4vw, 20px);
    font-weight: 700;
    color: #333;
    padding: 12px 8px 8px;
    line-height: 1.2;
    text-align: center;
}

/* Reserved badge: bottom-right overlay */
.bfs-dog-card__reserved-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(var(--rgb-orange-primary), 0.95);
    color: var(--color-white-light);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Tag row */
.bfs-dog-card__tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    gap: 4px;
    padding: 10px 8px 14px;
}

.bfs-dog-card__tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 13px;
    font-weight: 400;
    padding: 4px 10px;
    border-radius: 20px;
    line-height: 1.3;
    white-space: nowrap;
}

.bfs-dog-card__tag svg {
    flex-shrink: 0;
}

/* Location tag: brand green */
.bfs-dog-card__tag--location {
    background: rgba(var(--rgb-green-primary), 0.4);
    color: var(--color-grey-dark);
}

/* Sex tags: brand blue / pink */
.bfs-dog-card__tag--sex-male {
    background: rgba(var(--rgb-blue-primary), 0.4);
    color: var(--color-grey-dark);
}

.bfs-dog-card__tag--sex-female {
    background: rgba(var(--rgb-pink-primary), 0.4);
    color: var(--color-grey-dark);
}

/* Size tag: brand secondary green */
.bfs-dog-card__tag--size {
    background: rgba(var(--rgb-green-secondary), 0.4);
    color: var(--color-grey-dark);
}



/* Reserved card: slightly muted */
.bfs-dog-card--reserved .bfs-dog-card__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.18);
    pointer-events: none;
}

/* Volunteer notice */
.bfs-listing-notice {
    margin: 0 0 28px;
    padding: 0 16px;
    font-size: 13px;
    color: #666;
}

/* No dogs message */
.bfs-no-dogs {
    text-align: center;
    padding: 40px;
    color: #888;
    font-size: 16px;
}

/* Pagination */
.bfs-dog-pagination {
    max-width: 1100px;
    margin: 40px auto 0;
    padding: 0 16px;
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.bfs-dog-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    background: #f2f0ef;
    text-decoration: none;
    transition: background 0.15s;
}

.bfs-dog-pagination .page-numbers.current,
.bfs-dog-pagination .page-numbers:hover {
    background: #8bd2bd;
    color: #333;
}

/* Responsive: tablet: 2 cols */
@media (max-width: 900px) {
    .bfs-dog-card--listing {
        flex: 0 0 calc(50% - 12px);
        max-width: calc(50% - 12px);
    }
}

/* Responsive: mobile: 1 col */
@media (max-width: 560px) {
    .bfs-dog-grid--listing {
        gap: 16px;
    }
    .bfs-dog-card--listing {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ============================================================
   DOG LISTING: FILTER BAR, SORT, MOBILE DRAWER
   ============================================================ */

/* Outer wrapper */
.bfs-listing-wrap {
    position: relative;
}

/* Controls row: toggle (mobile) on left, sort on right */
.bfs-controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

/* ── Sort ───────────────────────────────────────────────── */
.bfs-sort-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    margin-left: auto;
}

.bfs-sort-label {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

.bfs-sort-select {
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    padding: 7px 32px 7px 12px;
    font-size: 14px;
    color: #1a1a1a;
    cursor: pointer;
    transition: border-color 0.15s;
}

.bfs-sort-select:focus {
    outline: none;
    border-color: #8bd2bd;
    box-shadow: 0 0 0 3px rgba(139, 210, 189, 0.2);
}

/* ── Desktop filter form ────────────────────────────────── */
.bfs-filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 16px;
}

.bfs-filter-groups {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
}

.bfs-filter-group {
    background: #f8f9fa;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 14px;
    min-width: 0;
}

.bfs-filter-group-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #9ca3af;
    margin-bottom: 7px;
}

.bfs-filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bfs-filter-option {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}

.bfs-filter-option input[type="checkbox"],
.bfs-filter-option input[type="radio"] {
    accent-color: #8bd2bd;
    width: 14px;
    height: 14px;
    cursor: pointer;
    flex-shrink: 0;
}

/* Desktop: apply + clear buttons */
.bfs-filter-bar-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    align-self: flex-end;
    padding-bottom: 2px; /* align with group bottom border */
}

.bfs-filter-apply-btn {
    background: #8bd2bd;
    color: #fff;
    border: none;
    border-radius: 7px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
    text-decoration: none;
}
.bfs-filter-apply-btn:hover {
    background: #6fc4aa;
    color: #fff;
}
.bfs-filter-apply-btn:focus {
    outline: none;
}
.bfs-filter-apply-btn:focus-visible {
    outline: 2px solid #6ab8a4;
    outline-offset: 2px;
}
.bfs-filter-apply-btn:active {
    background: #5ab89c;
    color: #fff;
}

.bfs-filter-clear-link {
    font-size: 13px;
    color: #9ca3af;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.bfs-filter-clear-link:hover {
    color: #6b7280;
    text-decoration: underline;
}

.bfs-filter-clear-link--inactive {
    opacity: 0.35;
    pointer-events: none;
}

/* ── Mobile toggle (hidden on desktop) ─────────────────── */
.bfs-filter-toggle {
    display: none;
    align-items: center;
    gap: 7px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: border-color 0.15s;
}

.bfs-filter-toggle:hover {
    border-color: #8bd2bd;
}

.bfs-filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #8bd2bd;
    color: #fff;
    border-radius: 999px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* ── Mobile overlay ─────────────────────────────────────── */
.bfs-filter-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9998;
}

.bfs-filter-overlay.is-open {
    display: block;
}

/* ── Mobile drawer ──────────────────────────────────────── */
.bfs-filter-drawer {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.18);
    z-index: 9999;
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.bfs-filter-drawer.is-open {
    display: block;
}

.bfs-filter-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 0;
    margin-bottom: 4px;
}

.bfs-filter-drawer-title {
    font-size: 17px;
    font-weight: 700;
    color: #1a1a1a;
}

.bfs-filter-drawer-close {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 0 4px;
}

/* Drawer form: stack groups vertically */
.bfs-filter-drawer form,
#bfs-drawer-form {
    padding: 12px 20px 20px;
}

.bfs-filter-groups--drawer {
    flex-direction: column;
    gap: 0;
}

.bfs-filter-groups--drawer .bfs-filter-group {
    background: none;
    border: none;
    border-bottom: 1px solid #f0f0f0;
    border-radius: 0;
    padding: 14px 0;
}

.bfs-filter-groups--drawer .bfs-filter-group:last-child {
    border-bottom: none;
}

.bfs-filter-groups--drawer .bfs-filter-options {
    gap: 12px;
}

.bfs-filter-drawer-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
}

.bfs-filter-drawer-actions .bfs-filter-apply-btn {
    flex: 1;
    padding: 13px;
    font-size: 15px;
    text-align: center;
}

/* ── Results meta (count + clear link) ─────────────────── */
.bfs-dogs-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

/* Align meta to match dog grid in variant A */
.bfs-lw-a .bfs-dogs-meta {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 16px;
    box-sizing: border-box;
    flex-wrap: wrap;
    gap: 8px;
}

.bfs-dogs-count {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

.bfs-dogs-count strong {
    color: #1a1a1a;
}

.bfs-dogs-clear-link {
    font-size: 13px;
    color: #8bd2bd;
    text-decoration: none;
}
.bfs-dogs-clear-link:hover {
    text-decoration: underline;
}

/* ── Mobile breakpoint ──────────────────────────────────── */
@media (max-width: 768px) {
    .bfs-filter-form {
        display: none; /* hidden until drawer opens on mobile */
    }

    .bfs-filter-toggle {
        display: flex;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   Test variant shared tokens
   ════════════════════════════════════════════════════════════════════════════ */
.bfs-a-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #8bd2bd;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    margin-left: 4px;
}

/* ════════════════════════════════════════════════════════════════════════════
   Direction A: Collapsed panel
   ════════════════════════════════════════════════════════════════════════════ */
.bfs-lw-a {
    max-width: 100%;
}

/* Top bar: Filters button + Sort on one row */
.bfs-a-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.bfs-a-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #fff;
    border: 1.5px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    color: #374151;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
/* Hover: solid mint bg, white text: clearly readable */
.bfs-a-toggle:hover {
    border-color: #8bd2bd;
    background: #8bd2bd;
    color: #fff;
}
/* Strip focus ring for mouse/touch interactions */
.bfs-a-toggle:focus,
.bfs-a-toggle:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}
/* Keyboard-only focus indicator */
.bfs-a-toggle:focus-visible {
    outline: 2px solid #6ab8a4;
    outline-offset: 2px;
    box-shadow: none;
}
/* Panel-open state: just a coloured border, no background change */
.bfs-a-toggle[aria-expanded="true"] {
    border-color: #8bd2bd;
    background: #fff;
    color: #374151;
}
/* Panel open + hover: same as normal hover */
.bfs-a-toggle[aria-expanded="true"]:hover {
    background: #8bd2bd;
    color: #fff;
}

.bfs-a-sort {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* Collapsible panel */
.bfs-a-panel {
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    padding: 14px 32px;
    margin: 0 auto 20px;
    max-width: 1100px;
    box-sizing: border-box;
}

.bfs-a-filter-groups {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    justify-content: space-between;
}

.bfs-a-fg {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.bfs-a-fg-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin-bottom: 2px;
}

.bfs-a-fg-options {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 14px;
}

.bfs-a-opt {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
    padding: 4px 0;
}
.bfs-a-opt input {
    cursor: pointer;
    accent-color: #8bd2bd;
}

.bfs-a-panel-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
}

.bfs-filter-apply-btn--right {
    margin-left: auto;
}

@media (max-width: 640px) {
    .bfs-a-filter-groups {
        flex-direction: column;
        gap: 20px;
    }
}

/* ── Direction A: mobile drawer (≤640px) ──────────────────────────────────── */
@media (max-width: 640px) {
    /* Hide the inline panel on mobile: drawer takes over */
    .bfs-a-panel {
        display: none !important;
    }
}

/* Direction A overlay */
.bfs-a-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9998;
}
.bfs-a-overlay.is-open {
    display: block;
}

/* Direction A drawer */
.bfs-a-drawer {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 16px 16px 0 0;
    z-index: 9999;
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 env(safe-area-inset-bottom, 0);
}
.bfs-a-drawer.is-open {
    display: block;
}

.bfs-a-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid #f0f0f0;
}

.bfs-a-drawer-title {
    font-size: 17px;
    font-weight: 700;
    color: #1a1a1a;
}

.bfs-a-drawer-close {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 0 4px;
}

.bfs-a-drawer-form {
    padding: 16px 20px 20px;
}

/* Drawer filter groups: vertical stack */
.bfs-a-drawer-form .bfs-a-fg {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}
.bfs-a-drawer-form .bfs-a-fg:last-of-type {
    margin-bottom: 0;
}

.bfs-a-drawer-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

.bfs-a-drawer-actions .bfs-filter-apply-btn {
    width: 100%;
    padding: 13px;
    font-size: 15px;
}

.bfs-a-drawer-actions .bfs-filter-clear-link {
    text-align: center;
    font-size: 14px;
}

/* ════════════════════════════════════════════════════════════════════════════
   Direction B: Auto-apply dropdown bar
   ════════════════════════════════════════════════════════════════════════════ */
.bfs-lw-b {
    max-width: 100%;
}

.bfs-b-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 12px 16px;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
}

.bfs-b-select {
    flex: 1 1 auto;
    min-width: 120px;
    max-width: 180px;
    height: 38px;
    padding: 0 28px 0 10px;
    border: 1.5px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    color: #374151;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: border-color 0.15s;
}
.bfs-b-select:focus {
    outline: none;
    border-color: #8bd2bd;
    box-shadow: 0 0 0 3px rgba(139,210,189,0.2);
}
.bfs-b-select:hover {
    border-color: #9ca3af;
}

.bfs-b-divider {
    width: 1px;
    height: 24px;
    background: #e5e7eb;
    flex-shrink: 0;
}

.bfs-b-sort-select {
    border-color: #9ca3af;
    font-weight: 500;
}

.bfs-b-clear {
    font-size: 13px;
    color: #8bd2bd;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .bfs-b-select {
        max-width: 100%;
        flex: 1 1 calc(50% - 8px);
    }
    .bfs-b-divider {
        display: none;
    }
    .bfs-b-sort-select {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   Direction C: Left sidebar + grid
   ════════════════════════════════════════════════════════════════════════════ */
.bfs-lw-c {
    max-width: 100%;
}

/* Side-by-side layout */
.bfs-c-layout {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

/* ── Sidebar ── */
.bfs-c-sidebar {
    width: 220px;
    flex-shrink: 0;
    position: sticky;
    top: 80px;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    transition: width 0.2s ease;
}

/* Header: visible on desktop: title + collapse chevron */
.bfs-c-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #f0f0f0;
}

.bfs-c-sidebar-title {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
}

/* Collapse button: desktop chevron ‹ */
.bfs-c-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.bfs-c-collapse-btn:hover {
    color: #374151;
    background: #f3f4f6;
}

/* Close button: mobile only (× to close the slide-in) */
.bfs-c-sidebar-close {
    display: none;
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 0 2px;
}

/* Expand strip button: shown only in collapsed state */
.bfs-c-expand-btn {
    display: none;
    width: 100%;
    padding: 14px 0;
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    transition: color 0.15s, background 0.15s;
}
.bfs-c-expand-btn:hover {
    color: #374151;
    background: #f3f4f6;
}

/* Sidebar body wraps the form */
.bfs-c-sidebar-body {
    display: block;
}

.bfs-c-filter-groups {
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bfs-c-fg {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bfs-c-fg-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #6b7280;
    margin-bottom: 2px;
}

.bfs-c-opt {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
    line-height: 1.4;
}
.bfs-c-opt input {
    cursor: pointer;
    accent-color: #8bd2bd;
    flex-shrink: 0;
}

.bfs-c-sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border-top: 1px solid #f0f0f0;
}
.bfs-c-sidebar-footer .bfs-filter-apply-btn {
    width: 100%;
    text-align: center;
}
.bfs-c-sidebar-footer .bfs-filter-clear-link {
    text-align: center;
    display: block;
}

/* ── Desktop collapsed state ── */
.bfs-c-layout.sidebar-collapsed .bfs-c-sidebar {
    width: 40px;
}
.bfs-c-layout.sidebar-collapsed .bfs-c-sidebar-header {
    display: none;
}
.bfs-c-layout.sidebar-collapsed .bfs-c-sidebar-body {
    display: none;
}
.bfs-c-layout.sidebar-collapsed .bfs-c-expand-btn {
    display: flex;
}

/* ── Main content area ── */
.bfs-c-main {
    flex: 1;
    min-width: 0;
}

/* Mobile trigger hidden on desktop */
.bfs-c-mobile-trigger {
    display: none;
}

/* Sort + count row above grid */
.bfs-c-toprow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

/* ── Mobile: sidebar becomes a slide-in overlay ── */
@media (max-width: 768px) {
    .bfs-c-layout {
        display: block;
    }

    .bfs-c-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.4);
        z-index: 200;
    }
    .bfs-c-overlay.is-open {
        display: block;
    }

    .bfs-c-sidebar {
        position: fixed;
        top: 0;
        left: -290px;
        width: 290px;
        height: 100%;
        z-index: 201;
        border-radius: 0;
        border: none;
        box-shadow: 2px 0 16px rgba(0,0,0,0.15);
        overflow-y: auto;
        transition: left 0.25s ease;
    }
    .bfs-c-sidebar.is-open {
        left: 0;
    }

    /* On mobile, swap header buttons: show × close, hide desktop collapse */
    .bfs-c-collapse-btn { display: none; }
    .bfs-c-sidebar-close { display: block; }

    /* Mobile trigger: hidden by default, shown only on mobile */
    .bfs-c-mobile-trigger {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 16px;
        padding: 8px 14px;
        background: #fff;
        border: 1.5px solid #d1d5db;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        color: #374151;
        width: fit-content;
    }
    .bfs-c-mobile-trigger:hover {
        border-color: #8bd2bd;
        background: #f0faf7;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   Success Stories: counter section + gallery section
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Counter section ── */
.bfs-counter-section {
    background: #f2f0ef;
    padding: 64px 24px;
    text-align: center;
}

/* When the counter is inside a homepage group block, the group
   provides the background and layout: neutralise the inner section. */
.bfs-counter-homepage .bfs-counter-section {
    background: transparent;
    padding: 64px 0;
}

.bfs-counter-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Inline sentence: "We've helped [119] dogs find their forever sofas" */
.bfs-counter-statement {
    font-size: clamp(20px, 3vw, 28px);
    font-weight: 500;
    color: #484a4b;
    line-height: 1.4;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
}

/* The animated number: larger and bolder than surrounding text */
.bfs-counter {
    font-size: clamp(44px, 7vw, 72px);
    font-weight: 700;
    color: var(--color-green-primary);
    line-height: 0.9;
    display: inline-block;
    vertical-align: middle;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: -2px;
    margin: 0 4px;
}

/* ── Gallery section ── */
.bfs-gallery-section {
    background: #fff;
    padding: 64px 24px 72px;
}

.bfs-gallery-inner {
    max-width: 1100px;
    margin: 0 auto;
}

/* Gallery section heading */
.bfs-gallery-heading {
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 700;
    color: #333;
    text-align: left;
    margin: 0 0 40px;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.2;
}

/* Grid: 4 columns desktop (fits comfortably at 1100px with padding) */
.bfs-adopted-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

/* Tile */
.bfs-adopted-tile {
    display: flex;
    flex-direction: column;
}

/* Square image container */
.bfs-adopted-tile__img {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
    background: #e8e4e0;
}

.bfs-adopted-tile__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Reuse shared placeholder inside tile */
.bfs-adopted-tile__img .bfs-dog-card__no-photo {
    position: absolute;
    inset: 0;
    font-size: 11px;
}

.bfs-adopted-tile__img .bfs-dog-card__no-photo i {
    font-size: 36px;
}

/* Dog name */
.bfs-adopted-tile__name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    text-align: center;
    padding: 6px 4px 2px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Empty state */
.bfs-adopted-empty {
    text-align: center;
    color: #888;
    padding: 40px 0;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .bfs-adopted-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .bfs-counter-section { padding: 48px 16px; }
    .bfs-gallery-section  { padding: 48px 16px 56px; }
    .bfs-adopted-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .bfs-adopted-tile__name {
        font-size: 12px;
    }
}

/* ── Non-homepage heroes: fixed consistent height ──────────────────────────── *
 * Kadence sets height via padding + content, causing variation between pages.
 * This overrides to a fixed height with vertical centering so all heroes
 * are identical regardless of heading length or whether text is present.
 * 380px matches the dogs/adopt page reference (2-line H1 + subtitle + header offset).
 * ──────────────────────────────────────────────────────────────────────────── */
/* kt-row-valign-top sets align-content: start; we override it.
 * padding-top matches the transparent header height so centering is calculated
 * within the visible hero area below the nav bar, not the full 380px.
 * box-sizing: border-box ensures padding is counted inside the fixed height. */
body:not(.home) .entry-content > .alignfull.wp-block-kadence-rowlayout:first-child > .kt-row-column-wrap {
    box-sizing: border-box !important;
    height: 380px !important;
    min-height: unset !important;
    padding-top: 66px !important;
    padding-bottom: 0 !important;
    align-content: center !important;
    overflow: hidden;
}
@media (max-width: 1024px) {
    body:not(.home) .entry-content > .alignfull.wp-block-kadence-rowlayout:first-child > .kt-row-column-wrap {
        height: 320px !important;
        padding-top: 58px !important;
    }
}
@media (max-width: 767px) {
    body:not(.home) .entry-content > .alignfull.wp-block-kadence-rowlayout:first-child > .kt-row-column-wrap {
        height: 260px !important;
        padding-top: 54px !important;
    }
}

/* ── Meet the Team: trustee photo circles ──────────────────────────────────── */
.bfs-team-photo {
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 8px !important;
    margin-top: 0 !important;
}
.bfs-team-photo img {
    border-radius: 50% !important;
    width: 160px !important;
    height: 160px !important;
    object-fit: cover;
    display: block;
    margin: 0 auto;
}

/* ── Meet the Team: volunteer icon row ──────────────────────────────────────── */
.bfs-volunteer-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px 40px;
    margin: 28px 0 0;
}
.bfs-volunteer-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 72px;
}
.bfs-volunteer-icon-item i {
    font-size: 30px;
    color: var(--global-palette4, #484a4b);
    line-height: 1;
}
.bfs-volunteer-icon-item span {
    font-size: 13px;
    color: var(--global-palette4, #484a4b);
    text-align: center;
    line-height: 1.3;
}

/* ── Aftercare page: space between hero and form ──────────────────────────── */
.page-id-511 .fluentform {
    padding: 64px 24px 72px;
    max-width: 800px;
    margin: 0 auto;
}

@media (max-width: 360px) {
    .bfs-adopted-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Social Icons Row
   ========================================================= */

/* Block-level row — used via wp:html */
.bfs-social-icons-row {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin: 20px 0 0;
}
.bfs-social-icons-row--center {
    justify-content: center;
}

/* Inline row — used via [bfs_social_icons] shortcode */
.bfs-social-icons {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.bfs-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: var(--global-palette1, #8bd2bd);
    text-decoration: none;
    transition: transform 0.18s ease, color 0.18s ease;
    flex-shrink: 0;
}
.bfs-social-icon i {
    font-size: 36px;
    line-height: 1;
    display: block;
}
.bfs-social-icon:hover {
    color: var(--global-palette4, #484a4b);
    transform: scale(1.18);
    text-decoration: none;
}

/* =========================================================
   Contact channel pills  (Messenger / Instagram / email / social)
   ========================================================= */
.bfs-contact-channels {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 20px 0 0;
}
.bfs-contact-channels--center {
    justify-content: center;
}
.bfs-contact-channel {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
    color: var(--global-palette4, #484a4b);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.bfs-contact-channel i {
    font-size: 22px;
    color: var(--global-palette1, #8bd2bd);
    flex-shrink: 0;
}
.bfs-contact-channel:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.11);
    text-decoration: none;
    color: var(--global-palette4, #484a4b);
}

/* =========================================================
   Link contrast: darken links on grey (palette8) backgrounds
   Excludes pill buttons and social icon links which have
   their own colour handling.
   ========================================================= */
.has-theme-palette-8-background-color a:not(.bfs-contact-channel):not(.bfs-social-icon) {
    color: var(--global-palette4, #484a4b);
    text-decoration: none;
}
.has-theme-palette-8-background-color a:not(.bfs-contact-channel):not(.bfs-social-icon):hover {
    color: var(--global-palette1, #8bd2bd);
    text-decoration: underline;
}

/* =========================================================
   Global: override Kadence link-style-standard blanket underline.
   Underlines appear on hover only; buttons, pills, cards, and
   icons are excluded via their own rules.
   ========================================================= */
.link-style-standard a {
    text-decoration: none;
}
.link-style-standard a:hover {
    text-decoration: underline;
}
/* Cards and interactive blocks: no underline ever */
.link-style-standard a.bfs-dog-card,
.link-style-standard a.bfs-dog-card:hover,
.link-style-standard a.bfs-contact-channel,
.link-style-standard a.bfs-contact-channel:hover,
.link-style-standard a.bfs-social-icon,
.link-style-standard a.bfs-social-icon:hover {
    text-decoration: none;
}

/* =========================================================
   Dog detail page  (single-dog.php)
   ========================================================= */

/* ── Hero ────────────────────────────────────────────────── */
.bfs-dog-hero {
    position: relative;
    min-height: 220px;
    background: var(--global-palette8, #f2f0ef);
    display: flex;
    align-items: flex-end;
}
.bfs-dog-hero__inner {
    position: relative;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 32px 24px 40px;
}
/* Push content below transparent header when present */
.transparent-header .bfs-dog-hero__inner {
    padding-top: 86px;
}
.bfs-dog-hero__back {
    display: inline-block;
    color: var(--global-palette4, #484a4b);
    font-size: 14px;
    margin-bottom: 20px;
    text-decoration: none;
    transition: color 0.15s;
}
.bfs-dog-hero__back:hover {
    color: var(--global-palette4, #484a4b);
    text-decoration: none;
}
.bfs-dog-hero__name {
    color: var(--global-palette3, #333);
    font-size: clamp(30px, 5vw, 52px);
    font-weight: 800;
    margin: 0 0 16px;
    line-height: 1.1;
}
.bfs-dog-hero__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.bfs-dog-hero__tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 13px;
    background: transparent;
    border: 1px solid var(--global-palette4, #484a4b);
    border-radius: 20px;
    color: var(--global-palette4, #484a4b);
    font-size: 13px;
    font-weight: 500;
}

/* ── Page content ────────────────────────────────────────── */
.bfs-dog-page {
    background: #fff;
    padding: 48px 24px;
}
.bfs-dog-page__inner {
    max-width: 1100px;
    margin: 0 auto;
}

/* ── Columns: photo | details ────────────────────────────── */
.bfs-dog-page__columns {
    display: flex;
    gap: 48px;
    align-items: flex-start;
}
.bfs-dog-page__photo {
    flex: 0 0 42%;
    max-width: 480px;
}
.bfs-dog-page__photo-wrap {
    position: relative;
    aspect-ratio: 4/5;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.bfs-dog-page__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bfs-dog-page__status {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 16px;
    text-align: center;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fff;
}
.bfs-dog-page__status--available { background: var(--global-palette1, #8bd2bd); }
.bfs-dog-page__status--reserved  { background: #fc9e4f; }
.bfs-dog-page__status--adopted   { background: #6b6b6b; }

/* ── Details column ──────────────────────────────────────── */
.bfs-dog-page__details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.bfs-dog-section {
    padding: 18px 20px;
    background: var(--global-palette8, #f2f0ef);
    border-radius: 10px;
}
.bfs-dog-section__title {
    font-size: 11px;
    font-weight: 700;
    color: var(--global-palette1, #8bd2bd);
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.bfs-dog-section__subtitle {
    font-size: 11px;
    font-weight: 700;
    color: var(--global-palette1, #8bd2bd);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 14px 0 10px;
}
.bfs-dog-dl {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 7px 16px;
    margin: 0;
}
.bfs-dog-dl dt {
    font-size: 13px;
    font-weight: 600;
    color: var(--global-palette4, #484a4b);
    white-space: nowrap;
}
.bfs-dog-dl dd {
    font-size: 14px;
    color: var(--global-palette4, #484a4b);
    margin: 0;
}

/* ── About section ───────────────────────────────────────── */
.bfs-dog-about {
    margin-top: 48px;
    padding-top: 40px;
    border-top: 2px solid var(--global-palette8, #f2f0ef);
}
.bfs-dog-about__title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--global-palette3, #333);
}
.bfs-dog-about__content {
    font-size: 16px;
    line-height: 1.75;
    color: var(--global-palette4, #484a4b);
    max-width: 700px;
}

/* ── Inline apply block (in details column) ──────────────── */
.bfs-dog-apply {
    margin-top: 24px;
}
.bfs-dog-apply__btn {
    display: block;
    width: 100%;
    padding: 13px 20px;
    background: var(--global-palette1, #2e6e50);
    color: #fff;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: background 0.18s ease;
}
.bfs-dog-apply__btn:hover {
    background: #6dbfa8;
    color: #fff;
    text-decoration: none;
}
.bfs-dog-apply__note {
    font-size: 12px;
    color: var(--global-palette5, #888);
    margin: 10px 0 0;
    line-height: 1.5;
}
.bfs-dog-apply__note i { vertical-align: middle; font-size: 13px; }
.bfs-dog-status-note {
    font-size: 13px;
    color: var(--global-palette5, #888);
    margin: 24px 0 0;
    font-style: italic;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 820px) {
    .bfs-dog-page__columns {
        flex-direction: column;
        gap: 32px;
    }
    .bfs-dog-page__photo {
        max-width: 100%;
        flex: none;
        width: 100%;
    }
    .bfs-dog-hero {
        min-height: 180px;
    }
}
@media (max-width: 480px) {
    .bfs-dog-page { padding: 32px 16px; }
    .bfs-dog-hero__inner { padding: 24px 16px 32px; }
}