/*
Theme Name: Beaver Builder Child Theme
Theme URI: https://www.wpbeaverbuilder.com
Version: 1.0
Description: An example child theme that can be used as a starting point for custom development.
Author: The Beaver Builder Team
Author URI: https://www.fastlinemedia.com
template: bb-theme
*/

/* Add your custom styles here...Remember to change the Version number above! */ 

/*
 * Southern Gold Sires – Core Stylesheet
 * -------------------------------------
 * Palette
 *  – White:            #FFFFFF
 *  – Mist Gray:        #F6F6F6
 *  – Steel Gray:       #DCDCDC
 *  – Charcoal:         #333333
 *  – Deep Purple:      #5A3D9C
 */

/* -------------------------------------------------
   1. CSS Variables
--------------------------------------------------*/
:root{
  --purple:#5A3D9C;
  --purple-rgba-35:rgba(90,61,156,.35);
  --white:#FFFFFF;
  --mist:#F6F6F6;
  --steel:#DCDCDC;
  --charcoal:#333333;
  --radius:6px;
  --anim-speed:.3s;
  --max-width:1280px;
  --font-display:'Oswald','Helvetica Neue',Arial,sans-serif;
  --font-body:'Inter',Roboto,sans-serif;
}

/* -------------------------------------------------
   2. Base Reset & Typography
--------------------------------------------------*/
html{box-sizing:border-box;scroll-behavior:smooth;font-size: 112.5%;}
  
*,*::before,*::after{box-sizing:inherit;}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--charcoal);
  font-size: 16px !important;
  line-height: 1.6 !important;
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}


h1,h2,h3,h4,h5,h6{
  margin:0 0 .5em;
  font-family:var(--font-display);
  
    letter-spacing:-.02em;
  color:var(--charcoal);
}

a{
  color:var(--purple);
  text-decoration:none;
  transition:color var(--anim-speed);
}
a:hover{color:#3e2a73;}



/* -------------------------------------------------
   3. Utility Containers & Buttons
--------------------------------------------------*/
.container{
  width:90%;
  max-width:var(--max-width);
  margin-inline:auto;
}

.btn{
  padding:.75em 1.5em;
  border:2px solid var(--purple);
  border-radius:var(--radius);
  font-family:var(--font-display);
  font-weight:600;
  text-transform:uppercase;
  font-size:.9rem;
  letter-spacing:.05em;
  display:inline-block;
  transition:all var(--anim-speed);
}

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

.btn-outline{
  background:transparent;
  color:var(--purple);
}
.btn-outline:hover{
  background:var(--purple);
  color:var(--white);
}
/* -------------------------------------------------
   4. Hero Section
--------------------------------------------------*/

/* Make the CTA banner static (unchanged) */
#cta-banner {
  background-attachment: scroll !important;
  background-position: center center !important;
  background-size: cover !important;
}

/* Hero wrapper */
.hero-section {
  position: relative;

  /* COVER EXACTLY THE FULL VIEWPORT */
  height: 100vh;               /* ← was 90vh */
  display: flex;
  align-items: center;
  color: var(--white);

  /* PINNED, COVERED BACKGROUND (no parallax) */
  background: url('https://southerngoldsires.com/wp-content/uploads/2025/07/trailer.jpg')
              center center / cover no-repeat fixed !important;

  /* kill any JS-driven shift var */
  --sgs-shift: 0 !important;
}

/* purple overlay */
.hero-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--purple-rgba-35);
  pointer-events: none;
  z-index: 0;
}

/* Swiper container fills the hero */
.hero-swiper {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}

/* Wrapper must also fill */
.hero-swiper .swiper-wrapper {
  height: 100%;
}

/* Each slide absolutely covers the full hero */
.hero-swiper .swiper-slide {
  position: relative; /* ← changed from absolute */
  inset: auto;        /* ← disables top/right/bottom/left forcing */
  display: flex;
  flex-direction: row; /* ← default for all slides */
  justify-content: center;
  align-items: center;
  padding: 0 2rem;
  min-height: 90vh;
  box-sizing: border-box;
}




/* Headline & tagline (unchanged) */
.hero-title {
  font-size: clamp(5.25rem, 6vw, 4rem);
  line-height: 1.1;
  margin-bottom: .5em;
  color: var(--white);
}
.hero-tagline {
  margin-bottom: 1.25em;
  font-size: 1.5rem;
  color: var(--white);
}

/* CTA buttons */
.hero-ctas a {
  margin-right: .75em;
}

/* Pagination inside the hero */
.swiper-pagination {
  position: absolute;
  bottom: 1.5rem;             /* adjust if your dots are higher/lower */
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

/* Dots styling */
.swiper-pagination-bullet {
  background: var(--white);
  opacity: .6;
}
.swiper-pagination-bullet-active {
  background: var(--purple);
  opacity: 1;
}

/* --------------------------------------------------
   Stretch the intro video to cover the entire hero
   without touching your slider or tint overlay
-------------------------------------------------- */
#intro-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  z-index: 0;
}

/* -------------------------------------------------
   5. Stats Ribbon
--------------------------------------------------*/
.stats-ribbon{
  background:var(--mist);
  padding:2.5em 0;
  text-align:center;
}
.stats-ribbon .container{
  display:flex;
  flex-wrap:wrap;
  gap:2em;
  justify-content:center;
}
.stat{
  font-family:var(--font-display);
}
.stat .num{
  display:block;
  font-size:2rem;
  font-weight:700;
  color:var(--purple);
}
.stat .label{
  font-size:.9rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--charcoal);
}

/*──────────────────────────────────────────────
  1. Header always on top
──────────────────────────────────────────────*/
.fl-page-header,
.fl-page-header-fixed{                /* Beaver sticky clone */
  position:relative;
  z-index:2000;                       /* higher than hero/rows */
}

/*──────────────────────────────────────────────
  2. Hero section – trailer + purple tint
──────────────────────────────────────────────*/
.hero-section{
  /* trailer photo defined once here */
  background:url('http://southerngoldsires.local/wp-content/uploads/2025/07/trailer.jpg')
             center / cover no-repeat;
  min-height:90vh;                    /* full viewport height */
  position:relative;                  /* stacking context     */
  color:#fff;
  /* JS will edit this custom prop for parallax */
  background-position:center calc(50% + var(--sgs-shift,0px));
}

.hero-section::after{                 /* purple overlay */
  content:"";
  position:absolute;
  inset:0;
  background:rgba(90,61,156,.35);
  pointer-events:none;                /* allow header clicks */
  z-index:0;
}

/* Disable parallax on very small screens */
@media (max-width:767px){
  .hero-section{background-position:center 50%!important; min-height:60vh;                    /* full viewport height */}
      
}

/*──────────────────────────────────────────────
  3. Swiper hero slider
──────────────────────────────────────────────*/
.hero-swiper{position:relative;height:100%;}

.hero-swiper .swiper-wrapper{height:100%;}

.hero-swiper .swiper-slide{
  /* Center headline/buttons */
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding-left:4vw;

  /* ★ Critical for effect:'fade' ★ */
  position:absolute;  /* share same plane             */
  inset:0;            /* full width/height of hero    */
  opacity:0;          /* non-active slides are hidden */
  z-index:1;          /* sits above overlay tint      */
}

/* Swiper reveals these slides when active */
.hero-swiper .swiper-slide-active,
.hero-swiper .swiper-slide-duplicate-active{opacity:1;}

/* Pagination dots (optional) */
.swiper-pagination-bullet{background:#fff;opacity:.6;}
.swiper-pagination-bullet-active{background:#5A3D9C;opacity:1;}

/* Hide every hero slide unless it is the ONE .swiper-slide-active */
.hero-swiper .swiper-slide:not(.swiper-slide-active){
  opacity:0 !important;
}


/* hero container already has position:relative */
#intro-video{
	/* make it fill the whole hero box */
	position:absolute;
	inset:0;              /* top:0; right:0; bottom:0; left:0; */
	width:100%;
	height:100%;

	/* crop instead of letter-boxing */
	object-fit:cover;
	object-position:center center;

	/* keeps mouse-events on the slider behind it */
	pointer-events:none;
	z-index:1;            /* slider sits above with z-index:2 */
}

/* slider should be on top of the video */
#hero-slider{ position:relative; z-index:2; }

/* video fades from 1 → 0 and is then hidden */
.fade-out{
	animation: fadeOut .6s forwards;
}
@keyframes fadeOut{
	to{ opacity:0; visibility:hidden; }
}

/* slider hidden under the video until we’re ready */
.intro-hidden {
  opacity: 0;
  pointer-events: none;
}

/* fade-in for the slider */
.fade-in {
  animation: fadeIn 0.6s forwards;
}
@keyframes fadeIn {
  to { opacity: 1; }
}

/* 1) Slide container *//* HERO SLIDE LAYOUT */
/* Hero Slide — Southern Gold Sires */
.hero-slide {
  position: relative;
  min-height: 90vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0 2rem;
  box-sizing: border-box;
  overflow: hidden;
}

.hero-slide--reverse {
  flex-direction: row-reverse !important;
}

.hero-slide__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  position: relative;
  z-index: 2;
  width: 50%;
  color: #fff;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
}

.hero-slide__image {
  position: absolute;
  top: 0;
  right: 0;
  width: 55%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.hero-slide.hero-slide--reverse .hero-slide__image {
  display: flex !important;
  align-items: center !important;
  justify-content: center;
  position: relative !important;
  width: 50% !important;
  height: 100% !important;
  overflow: visible !important;
  pointer-events: auto !important;
  z-index: 1 !important;
}

.hero-slide__image img,
.hero-slide.hero-slide--reverse .hero-slide__image img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: auto;
  max-height: 650px;
  object-fit: cover;
  will-change: transform;
  animation: kenburns 10s ease-in-out infinite alternate;
}

@keyframes kenburns {
  from {
    transform: translate(-50%, -40%) scale(1);
  }
  to {
    transform: translate(-50%, -60%) scale(1.2);
  }
}




@keyframes kenburns-mobile {
  from {
    transform: translateX(-50%) translateY(0%) scale(1.05);
  }
  to {
    transform: translateX(-50%) translateY(-10%) scale(1.15);
  }
}

/* -------------------------------------------------
   7. Boar Slider
--------------------------------------------------*/
.boar-slider{padding:0em 0;}
.swiper-container{position:relative;}
.swiper-slide.sire-card{
  background:var(--white);
  border-radius:var(--radius);
  box-shadow:0 3px 9px rgba(0,0,0,.07);
  text-align:center;
}
.sire-card img{
  width:100%;
  height:auto;
  border-top-left-radius:var(--radius);
  border-top-right-radius:var(--radius);
}
.sire-name{padding:1em;color:var(--charcoal);font-size:1rem;}
.swiper-button-next,.swiper-button-prev{color:var(--purple);}

/* -------------------------------------------------
   8. Catalog Grid (generic)
--------------------------------------------------*/
.catalog-grid{padding:3em 0;}
.filter-bar{
  background:var(--steel);
  padding:1em;
  border-radius:var(--radius);
  margin-bottom:2em;
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  align-items:center;
}
.filter-bar select{
  padding:.5em;
  border-radius:var(--radius);
  border:1px solid var(--charcoal);
}
.filter-bar button{margin-left:auto;}

.sire-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:2em;
}
.sire-grid .card{
  background:var(--white);
  border:1px solid var(--steel);
  border-radius:var(--radius);
  box-shadow:0 3px 8px rgba(0,0,0,.05);
  transition:transform var(--anim-speed);
}
.sire-grid .card:hover{transform:translateY(-4px);}
.card img{
  width:100%;
  border-top-left-radius:var(--radius);
  border-top-right-radius:var(--radius);
}
.card .content{padding:1em;}
.card h3{font-size:1.15rem;margin:.5em 0;}

/* -------------------------------------------------
   9. Why Section (generic)
--------------------------------------------------*/
.why-section{padding:4em 0;text-align:center;}
.three-cols{
  display:flex;
  flex-wrap:wrap;
  gap:2em;
  justify-content:center;
}
.why-item{
  flex:1 1 220px;
  max-width:260px;
}
.why-item .icon {
  width: 80px;
  height: 80px;
  margin: 0 auto .75em;

  display: flex;
  justify-content: center;
  align-items: center;
}

/* target the <img> instead of <svg> */
.why-item .icon img {
  width: 3rem;    /* make it larger */
  height: 3rem;
  /* hack to turn a dark SVG white */
  filter: brightness(0) invert(1);
}


/* Southern Gold Purple Buttons */
.why-section .btn-primary {
  background-color: #5a3d9c;    /* SG purple */
  border-color:     #5a3d9c;
  color:            #fff;
  text-transform:   uppercase;
  font-weight:      600;
}

.why-section .btn-primary:hover,
.why-section .btn-primary:focus {
  background-color: #472c75;    /* darker on hover */
  border-color:     #472c75;
  color:            #fff;
}

/* Override for the WHY section */
#why.why-section {
  background-color: #000; /* Black background */
  color: #fff; /* White text */
}

/* Ensure headings and paragraph text inside are white */
#why.why-section h4,
#why.why-section p {
  color: #fff;
}

/* Ensure SVG icons, if using stroke/fill, are also white */
#why.why-section svg.icon {
  fill: #fff;
  stroke: none; /* or adjust as needed */
}


/* Base button style in the WHY section */
#why .btn-primary {
  background-color: #5A3D9C;
  color: #fff;
  border: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover effect */
#why .btn-primary:hover {
  background-color: #DCDCDC;  /* Steel */
  color: #5A3D9C;             /* Purple text */
}



/* -------------------------------------------------
   10. Testimonials & CTA
--------------------------------------------------*/
.testimonials-section{background:#000000;padding:4em 0;}


#testimonials.testimonials-section {
  width: 100%;
 /*  background-color: #000; black background */
    /*  color: #fff;         white text */
  padding: 4rem 1rem;     /* spacing around content */
  text-align: center;
}

#testimonials.testimonials-section h1,
#testimonials.testimonials-section p {
  margin: 0 auto 1rem;
     color: #fff; 
  max-width: 800px;       /* optional: limits text width */
}

/* Force Smash Balloon Facebook Feed to use dark theme colors */

.cff-item,
.cff-item.cff-box,
.cff-item.cff-post {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-radius: 1px !important;
    border: thin solid rgba(57,57,57,1.00)!important;
    text-align: left !important;
    font-size: 12px !important;
}

.cff-item a,
.cff-post-text a {
  color: #D2ACE6 !important;
}

.cff-meta-text,
.cff-date,
.cff-text-secondary {
  color: #BBBBBB !important;
}

.cta-banner{
  position:relative;
  padding:4em 0;
  color:var(--white);
  text-align:center;
}
.cta-banner::before{
  content:"";
  position:absolute;
  inset:0;
  background:url('/wp-content/uploads/2025/07/grass-parallax.jpg') center/cover no-repeat;
  z-index:-2;
}
.cta-banner::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--purple-rgba-35);
  z-index:-1;
}

/* -------------------------------------------------
   11. Footer
--------------------------------------------------*/
.site-footer{
  background:var(--charcoal);
  color:var(--white);
  padding:2.5em 0;
  font-size:.9rem;
}
.site-footer a{color:var(--white);}
.site-footer a:hover{color:var(--purple);}
.site-footer .footer-inner{
  display:flex;
  flex-wrap:wrap;
  gap:2em;
  justify-content:space-between;
  align-items:flex-start;
}

/* -------------------------------------------------
   12. Responsive Tweaks
--------------------------------------------------*/
@media (max-width:767px){
  .stat .num{font-size:1.5rem;}
  .hero-inner{max-width:none;text-align:center;}
  .hero-ctas a{margin:.5em .5em 0;}
  .three-cols{flex-direction:column;
      align-items: center;}
}

/* -------------------------------------------------
   13. BOAR OVERVIEW FILTER
--------------------------------------------------*/
/* Filter button bar */
.boar-filters{
  text-align:center;
  margin:2rem 0 1rem;
}
.boar-filters .filter-btn{
  background:#eee;
  border:0;
  padding:.5rem 1rem;
  margin:.25rem;
  cursor:pointer;
  transition:background var(--anim-speed), color var(--anim-speed);
}
.boar-filters .filter-btn.active,
.boar-filters .filter-btn:hover{
  background:#333;
  color:#fff;
}

/* Responsive 3-wide grid */
.boar-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:2rem;
  max-width:1200px;
  margin:0 auto;
}
/* ----------------------------------
   BOAR CARD  – smooth FLIP + fade
----------------------------------*/
.boar-card{
  position:relative;                         /* keeps abs-clones aligned */
  will-change:transform,opacity;
  transform-origin:50% 50%;
  transition:
    transform .45s cubic-bezier(.22,1,.36,1),
    opacity   .30s ease;
}
/* card fading away (overlays, no longer in grid) */
.boar-card.is-fading{
  opacity:0;
  pointer-events:none;
  z-index:0;
}

/* Uniform boar-card thumbnails */
.boar-thumb img{
  width:100%;           /* keep grid width behaviour */
  height:220px;         /* ← pick any fixed height (e.g. 220-240 px) */
  object-fit:cover;     /* crop evenly, keeps image filled */
  object-position:center;
  border-top-left-radius:var(--radius);
  border-top-right-radius:var(--radius);
}

/* optional: scale the height on small screens */
@media(max-width:767px){
  .boar-thumb img{ height:300px; }
}

/* -------------------------------------------
   Boar-card hover FX
-------------------------------------------*/
.boar-card{
  position:relative;                  /* anchor the overlay */
  overflow:hidden;                    /* keep zoom inside radius */
}

/* 1) Image zoom */
.boar-thumb img{
  transition:transform .35s ease;
}
.boar-card:hover .boar-thumb img{
  transform:scale(1.04);              /* subtle 4 % zoom */
}




/* --- Boar card typography tweaks --- */
.boar-name{
  text-transform:uppercase;   /* ALL CAPS */
  font-weight:700;            /* keeps crisp in caps */
  margin:0.4rem 0 0.15rem;    /* tighter gap above + below */
}

.boar-pedigree{
  margin-top:0;               /* kill extra space if any */
  line-height:1.35;           /* (optional) tighter lines */
}

/* --- Breed-filter buttons ------------------------------------ */
.boar-filters .filter-btn{
  /* base (un-selected) look */
  background:#c9c9c9;          /* slightly darker grey */
  color:#000;                  /* black text */
  text-transform:uppercase;    /* ALL CAPS */
  font-weight:600;
  border:0;
  padding:.55rem 1.1rem;
  margin:.25rem;
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}

/* selected / “active” state */
.boar-filters .filter-btn.active{
  background:var(--purple);    /* brand purple (already in :root) */
  color:#fff;                  /* white text */
}

/* on hover: lighten grey buttons, leave purple ones alone */
.boar-filters .filter-btn:not(.active):hover{
  background:#e0e0e0;          /* tiny shade lighter */
}

/* purple hover text for non-selected buttons */
.boar-filters .filter-btn:not(.active):hover{
  color:var(--purple);   /* brand purple */
}
.boar-filters{
  margin:2rem 0 1.75rem;   /* was 1rem – now ~ .75rem more room */
}
 :root {
    --sg-black: #000;
    --sg-steel: #3f3f3f;
    --sg-purple: #29149b;
    --sg-grey: #dad9e6;
  }

  /* Header -----------------------------------------------------*/



  .sg-boar__header { text-align:center; margin:2.5rem auto 1.5rem; }
  .sg-boar__name {
    font-family: var(--heading-font,'Oswald',sans-serif);
    font-size: clamp(3rem,6vw,5rem);
    font-weight:900; color:var(--sg-black); line-height:1; text-transform:uppercase;
  }

  /* Image ------------------------------------------------------*/
  .sg-boar__image-frame { border:4px solid var(--sg-steel); padding:2px; margin:0 auto 2rem; }
  .sg-boar__image { display:block; width:100%; height:auto; }

  /* Meta -------------------------------------------------------*/
  .sg-boar__meta { display:flex; gap:2rem; justify-content:space-between; flex-wrap:wrap; margin-bottom:2.2rem; }
.sg-boar__pedigree {
	font-size: 1.55rem;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
	color: #222;
}

.sg-boar__ids {
	font-size: 0.85rem;
	color: #555;
	margin-bottom: .2rem;
}
.sg-boar__ear,
.sg-boar__reg {
    display: inline-block;
    margin-right: 0.65rem;
}

  /* Price table -----------------------------------------------*/
  .sg-boar__price-table table { border-collapse:collapse; }
  .sg-boar__price-table th, .sg-boar__price-table td { border:1px solid var(--sg-grey); padding:.5rem .75rem; font-size:1.2rem; }
  .sg-boar__price-table th { background:var(--sg-grey); text-transform:uppercase; font-weight:700; }
  .sg-boar__price-table td { text-align:right; font-weight:700; min-width:4.5rem; }

  /* Description / Content -------------------------------------*/
  .sg-boar__description h2 { margin-top:0; font-size:1.5rem; text-transform:uppercase; letter-spacing:1px; }
  .sg-boar__bred-by { text-align:right; margin-top:3rem; font-style:italic; }
  .sg-boar__content { width:100%; max-width:100%; margin-top:2rem; }

  /* Navigation -------------------------------------------------*/
/* Centered nav */
.sg-boar__nav.container{ display:flex; justify-content:center; gap:2rem; margin:4rem auto 2rem; }
.sg-boar__nav-link{ font-weight:700; text-transform:uppercase; font-size:.875rem; color:inherit; text-decoration:none; }

/* Style the text block and add logo behind */
.fl-page-footer-widgets .textwidget {
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  margin: 0 auto;
  max-width: 600px;

  /* Add background logo */
  background-image: url('/wp-content/uploads/2025/07/southerngoldlogogray.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain; /* prevent clipping */
  min-height: 75px; /* ensure full logo shows */
  padding-top: 20px;
  padding-bottom: 10px;
}

/* Optional: make background a faint watermark look */
.fl-page-footer-widgets .textwidget {
  opacity: 0.98;
}
.fl-page-footer-widgets .textwidget::before {
  content: "";
  background-image: url('/wp-content/uploads/2025/07/southerngoldlogogray.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  opacity: 0.08;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0;
}
.fl-page-footer-widgets .textwidget p {
  position: relative;
  z-index: 1;
}

/* Reduce overall footer spacing */
.fl-page-footer-widgets {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.fl-page-footer-widgets-row {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Style all footer links with Southern Gold purple */
.fl-page-footer-widgets a {
  color: #57297a;
  text-decoraticon: none;
}

.fl-page-footer-widgets a:hover,
.fl-page-footer-widgets a:focus {
  color: #57297a;
  text-decoration: underline; /* optional */
}

/* ===== Top-bar breeding-date badge ===== */
.fl-page-bar .calculator {
	/* Layout */
	display: inline-block;       /* keeps it on the same line as other items */
	margin-right: 0.75rem;        /* gentle breathing room */
	padding: 0.35em 0.8em;

	/* Typography */
	font-size: .8rem;          /* a touch smaller than nav links */
	font-weight: 600;            /* semi-bold for clarity */
	line-height: 1.1;

	/* Look & feel – tweak to match brand palette */
	color: #fff;                 /* text */
	    /* background: #2f0058;     warm “boar” brown */
	border-radius: 9999px;       /* pill-shape badge */
	letter-spacing: .03em;
	white-space: nowrap;         /* prevents line-wrap on narrow screens */
}

/* Optional subtle shadow on desktop only */
@media (min-width: 768px) {
	.fl-page-bar .calculator {
		box-shadow: 0 0 4px rgba(0,0,0,.15);
	}
}

/* Hide until reveal */
.intro-hidden { opacity:0; pointer-events:none; }

/* Fade utilities */
.fade-out { animation: fadeOut 0.6s forwards; }
.fade-in  { animation: fadeIn  0.6s forwards; }

@keyframes fadeOut { to { opacity:0; } }
@keyframes fadeIn  { to { opacity:1; } }

/* Modal Heading Styles */
.modal-body h5 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.modal-body ul li {
  margin-bottom: 0.75rem;
}
/* Raise modal above sticky nav */
.modal {
  z-index: 11000 !important;
}

.modal-backdrop {
  z-index: 10900 !important;
}

/* Optional: Lower header/nav z-index to below modal if it's unusually high */
.fl-page-header,
.fl-page-nav,
.site-header {
  z-index: 1000 !important;
}

/* ————————————————
   Modal: bump up text sizes
   ———————————————— */
#collectionModal .modal-body {
  /* base body copy */
  font-size: 1.05rem;        /* ~16.8px instead of ~16px */
  line-height: 1.6;
}

/* Section headings */
#collectionModal .modal-body h5 {
  font-size: 1.25rem;        /* ~20px */
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

/* Sub-headings (Breed Specific Prices) */
#collectionModal .modal-body h6 {
  font-size: 1.125rem;       /* ~18px */
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}

/* List items */
#collectionModal .modal-body ul li {
  font-size: 1rem;           /* ~16px */
  margin-bottom: 0.75rem;
}

/* Phone-number line or small text */
#collectionModal .modal-body p:first-of-type {
  font-size: 1rem;
  margin-bottom: 1.5rem;
}

/* Center the top nav menu horizontally */
.fl-page-nav-wrap {
  display: flex;
  justify-content: center;
}

.fl-page-nav-collapse {
  width: 100%;
}

.fl-page-nav-menu {
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

/* Main menu links */
.fl-theme-menu .navbar-nav > li > a {
  font-size: 16px;   /* Adjust as needed */
  font-weight: 600;
}

/* Sub-menu links */
.fl-theme-menu .navbar-nav li ul.sub-menu li a {
  font-size: 14px;   /* Slightly smaller than main links */
  font-weight: 500;
}

/* Optional: Adjust submenu spacing */
.fl-theme-menu .navbar-nav li ul.sub-menu li {
  padding: 6px 12px;
}

/* ────────────────────────────────────────────────
   BOAR CAROUSEL – Southern Gold Sires
   • Full-width layout
   • Uniform image height without cropping
   • External navigation arrows (purple)
   • Mobile responsive
   • Cleaner padding and layout
──────────────────────────────────────────────── */

/* 1. Full-width wrapper section */
.boar-carousel.full-width {
  width: 100%;
  padding: 2rem 0;
  background-color: #f6f6f6;
}

/* 2. Inner carousel wrapper centered on page */
.boar-carousel .carousel-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative; /* Required for absolute-positioned arrows */
}

/* 3. Slide structure */
.boar-slide {
  text-align: center;
  padding: 1rem 0;
}

.boar-slide img {
  height: 300px;
  width: 100%;
  object-fit: contain;      /* Prevents horizontal cropping */
  object-position: center;
  border-radius: 8px;
  background-color: #fff;   /* Ensures clean box around pig images */
}

/* 4. Text styling */
.boar-name {
  font-size: 1.2rem;
  margin: 0.5rem 0 0.2rem;
  text-transform: uppercase;
}

/* Boar name link default and hover states */
.boar-name a {
  color: #333;                /* normal text color */
  text-decoration: none;
  transition: color 0.2s ease;
}

.boar-name a:hover {
  color: #5A3D9C;             /* Southern Gold purple on hover */
}


.boar-pedigree {
  font-size: 1rem;
  color: #666;
}

/* 5. Swiper arrows – always visible on desktop */
.boar-carousel .swiper-button-prev,
.boar-carousel .swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  color: #5A3D9C;
  font-size: 28px;
  width: 40px;
  height: 40px;
  cursor: pointer;
}

/* Left/right placement */
.boar-carousel .swiper-button-prev {
  left: -20px;
}

.boar-carousel .swiper-button-next {
  right: -20px;
}

/* 6. Responsive tweaks for mobile */
@media (max-width: 768px) {
  .boar-carousel .swiper-button-prev {
    left: 10px;
  }

  .boar-carousel .swiper-button-next {
    right: 10px;
  }
}

/*--------------------------------------------------------------
  Boar detail font-size tweaks (only on single-boar.php)
--------------------------------------------------------------*/

/* target the single boar template via body class */


/* Pedigree, Ear Notch & Registration line specifically */
body.single-boar .sg-boar__pedigree
{
  font-size: 1.5rem;      /* slightly smaller still */
}


body.single-boar .sg-boar__ids {
  font-size: 0.9rem;      /* slightly smaller still */
}


/* Price table text */
body.single-boar .sg-boar__price-table th,
body.single-boar .sg-boar__price-table td {
  font-size: 0.8rem;       /* make prices more compact */
  padding: 0.25em 0.5em;    /* reduce cell padding */
}

.retired-grid{
  display:grid;
  gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); /* 2 cols ≤767 */
}
@media(min-width:992px){          /* desktop ≥992px → force 4 cols */
  .retired-grid{
    grid-template-columns:repeat(4,1fr);
  }
}

/* Re-use the same card visuals */
.retired-grid .boar-card{
  background:#fff;
  border:1px solid var(--steel);
  border-radius:var(--radius);
  overflow:hidden;
  text-align:center;
  box-shadow:0 3px 8px rgba(0,0,0,.05);
  transition:transform .25s ease;
}
.retired-grid .boar-card:hover{ transform:translateY(-4px); }


/* -------------------------------------------------
   Retired-grid image + typography adjustments
--------------------------------------------------*/

/* 1) Photos – show full image, no cropping */
.retired-grid .boar-thumb img{
  width:100%;
  height:auto;            /* natural height */
  object-fit:contain;     /* letter-box if aspect differs */
  background:#fafafa;     /* subtle backdrop where needed */
}

/* 2) Smaller type across the card */
.retired-grid .boar-name{
  margin:.4rem 0 .15rem;
  font-size:1rem;         /* was ~1.25rem */
  text-transform:uppercase;
  font-weight:600;
}

.retired-grid .boar-pedigree,
.retired-grid .boar-ear,
.retired-grid .boar-reg{
  margin:.1rem 0;
  font-size:.82rem;       /* tighten all sub-lines */
  line-height:1.3;
}

/* Finer typography: make Ear-notch & Reg# smallest */
.retired-grid .boar-pedigree{
  font-size:.82rem;       /* keep as main sub-line */
}

.retired-grid .boar-ear,
.retired-grid .boar-reg{
  font-size:.72rem;       /* one step smaller */
  opacity:.85;            /* optional: lighter tone */
}


.cert-btn{
  display:inline-block;
      pointer-events: auto;
  z-index: 100;
  position: relative;
  margin:.35rem auto 0;
  padding:.25em .6em;
  font-size:.62rem;            /* really small */
  font-weight:600;
  text-transform:uppercase;
  background:#c9c9c9;
  color:#000;
  border-radius:4px;
  letter-spacing:.03em;
  transition:background .2s ease;
}
.cert-btn:hover{
  background:var(--purple);
  color:#fff;
}
.retired-boar-filters .filter-btn {
  font-size: 0.75rem;
  padding: 0.3em 0.6em;
  line-height: 1.2;
  border-radius: 3px;
  margin: 0 4px 6px;
}

.boar-search {
  margin: 2rem auto 1.25rem; /* Adds more top margin */
  text-align: center;
}

#boar-name-search {
  padding: 0.5em 0.75em;
  width: 100%;
  max-width: 320px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-weight: 500; /* Makes input text a bit bolder */
  font-family: inherit;
}

#boar-name-search::placeholder {
  color: #555;           /* Darker placeholder for contrast */
  font-weight: 600;      /* Makes placeholder look stronger */
  opacity: 1;            /* Ensures it's visible in all browsers */
}

.sgs-page-title-bar {
  background-color: #000;
  padding: 1.25rem 2rem;
  margin-bottom: 2rem;
  text-align: center;
}

.sgs-page-title-bar h1.sgs-page-title {
  margin: 0;
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
}


/* child-theme style.css or Beaver “Global CSS” */
.boar-card > a.fl-post-link.stretched-link{
  z-index: 5 !important;      /* push overlay down the stack   */
}

.boar-card .cert-btn{
  position:relative;          /* create its own stack context */
  z-index: 999 !important;    /* higher than the overlay       */
}

.boar-card > a.fl-post-link.stretched-link{
  pointer-events:none !important;   /* clicks pass through */
}


/* Force smaller main menu links */
.fl-page-nav .fl-theme-menu .navbar-nav > li > a {
  font-size: 16px !important;
  font-weight: 600 !important;
}

/* Force smaller sub-menu links */
.fl-page-nav .fl-theme-menu .navbar-nav li ul.sub-menu li a {
  font-size: 14px !important;
  font-weight: 500 !important;
}
/* Force MAIN menu link size */
.fl-page-header .fl-page-nav .fl-theme-menu .navbar-nav > li > a {
  font-size: 16px !important;
  font-weight: 600 !important;
}

/* Force SUB-MENU link size */
.fl-page-header .fl-page-nav .fl-theme-menu .navbar-nav li ul.sub-menu li a {
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* ───────── SG Purple Hero CTAs ───────── */
/* ─── SG Purple Hero Buttons ─── */
.hero-section .btn-primary {
  background-color: var(--purple) !important;
  border-color:   var(--purple) !important;
  color:          var(--white)  !important;
}

/* hover/focus state */
.hero-section .btn-primary:hover,
.hero-section .btn-primary:focus {
  background-color: #472d7a !important;
  border-color:     #472d7a !important;
  color:            var(--white) !important;
}


.cookie-banner {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem; /* change to left: 1.5rem for left-side slide-in */
  max-width: 300px;
  background: #fff;
  color: var(--charcoal, #333);
  border: 1px solid var(--purple, #5A3D9C);
  padding: 1em;
  border-radius: 10px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
  font-size: 0.9rem;
  z-index: 9999;
  display: none;
  animation: slideIn 0.6s ease forwards;
}
.cookie-banner p {
  margin: 0 0 0.75em;
}
.cookie-banner a {
  color: var(--purple, #5A3D9C);
  text-decoration: underline;
}
.cookie-actions {
  text-align: right;
}
.cookie-actions button {
  font-size: 0.85rem;
  padding: 0.4em 0.75em;
  border: none;
  margin-left: 0.5em;
  border-radius: 5px;
  cursor: pointer;
}
.cookie-actions button.outline {
  background: transparent;
  border: 1px solid var(--purple, #5A3D9C);
  color: var(--purple, #5A3D9C);
}
.cookie-actions button:not(.outline) {
  background: var(--purple, #5A3D9C);
  color: #fff;
}

/* Slide in animation */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0%);
  }
}


.mobile-hero-wrapper,
.mobile-hero-static {
  display: none;
}

@media (max-width: 767px) {
  /* Hide default hero section and video on mobile */
  #hero,
  .hero-section,
  .hero-swiper,
  .video-hero,
  .hero-section::after {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  /* Show static hero section on mobile */
  .mobile-hero-static-section {
    display: block !important;
    max-height: 972px !important;
    width: 100% !important;
    background: #1c0b36; /* deep purple bg */
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-align: center !important;
  }

  .mobile-hero-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: auto !important;
    max-height: 972px !important;
    width: 100% !important;
    background-color: #1c0b36;
  }

  .mobile-hero-static {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 972px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
  }
}