/*
Theme Name: ABL Wholesale 2025
Author: Joe Kuzma c/o Farris Marketing
Version: 1.0
*/

:root{
  --abl-blue:#0057ae;
  --abl-blue-dark:#003f86;
  --abl-green:#179245;
}

body{
  margin:0;
  /*font-family:Arial,sans-serif;*/
  font-family: "Open Sans", sans-serif;
  background:#fff;
  color:#222;
}

.top-header{
  background:linear-gradient(180deg,#0068c8,#0050a0);
  color:#fff;
  padding:22px 0;
}

.tagline{
  font-style:italic;
  font-size:1.3rem;
}

.brand-title{
  font-size:1.6rem;
  font-weight:700;
  text-transform:uppercase;
}

.logo-badge{
/*  width:120px;
  height:80px;
  background:var(--abl-green);
  border-radius:50%;
  font-size:2.5rem;
  font-weight:700;
  color:#fff;
  border:4px solid #fff;
  box-shadow:0 4px 12px rgba(0,0,0,.25);*/
    display:flex;
  align-items:center;
  justify-content:center;
}

.phone-block{
  font-size:1.1rem;
  font-weight:600;
}

.navbar{
  background:#fff;
  box-shadow:0 4px 18px rgba(0,0,0,.08);
}

.navbar-nav{
  gap:0;
}

.navbar-nav li{
  list-style:none;
  padding: 0 15px;
}

.navbar-nav a{
  display:block;
  padding:1rem 1.4rem;
  color:#333;
  font-weight:500;
  text-decoration:none;
}

.navbar-nav .current-menu-item a,
.navbar-nav a:hover{
  background:var(--abl-blue);
  color:#fff;
  border-radius:8px;
}
.navbar .container {
    justify-content: center;
}

.navbar-toggler {
    display: block;
    margin-left: auto;
    margin-right: auto;

    border: none;
    box-shadow: none;
    outline: none;

    background: transparent;

    padding: .55rem .8rem;
}

.navbar-toggler:hover,
.navbar-toggler:focus {
    background-color: #f3f7fc;
    border-color: var(--abl-green);

    box-shadow: none;
}

.navbar-toggler-icon {
    filter:
        invert(21%)
        sepia(93%)
        saturate(1903%)
        hue-rotate(198deg)
        brightness(94%)
        contrast(102%);
}

.navbar-collapse {
    text-align: center;
}

main{
  padding:30px 0 20px;
}

.hero-carousel,
.hero-slide,
.carousel-item{
  min-height:430px;
  border-radius:18px;
  overflow:hidden;
}

.hero-slide{
  position:relative;
  background-size:cover;
  background-position:center;
}

.hero-message{
  position:absolute;
  left:30px;
  top:50%;
  transform:translateY(-50%);
  max-width:360px;
  background:rgba(0,87,174,.92);
  padding:34px;
  color:#fff;
  border-radius:18px;
  font-size:2.4rem;
  line-height:1.15;
  font-style:italic;
  /*font-weight:700;*/
  font-family: "Lora", serif;
}

.carousel-control-prev,
.carousel-control-next{
  width:60px;
}

.carousel-indicators{
  margin-bottom:20px;
}

.carousel-indicators button{
  width:12px !important;
  height:12px !important;
  border-radius:50%;
}

.info-box,
.side-card,
.feature-card{
  border-radius:18px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}

.info-box{
  padding: 15px 28px;
  background:#f7f8fa;
  line-height:1.7;
}

.deal-card{
  background:var(--abl-blue);
  padding:14px;
  border-radius:18px;
  color:#fff;
}

.deal-title{
  font-size:1.8rem;
  font-style:italic;
  font-weight:700;
  margin-bottom:12px;
  text-align: center;
}

.deal-card img{
  width:100%;
  border-radius:10px;
}

.panel-title{
  padding:12px 18px;
  font-weight:700;
  color:#fff;
  text-align: center;
}

.green{
  background:var(--abl-green);
}

.blue{
  background:var(--abl-blue);
}

.panel-body{
  padding:20px;
  min-height:120px;
}

.panel-body a{
  text-decoration:none;
}

.row.features-row > div{
  display:flex;
}

.feature-card{
  display:flex;
  width:100%;
  height:100%;
  min-height:190px;
  border:1px solid #e4e7eb;
}

.feature-card img{
  width:38%;
  object-fit:cover;
}

.feature-content{
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  flex:1;
}

.feature-content h3{
  color:var(--abl-blue);
  font-size:1.4rem;
  font-weight:800;
  text-transform:uppercase;
  margin-bottom:14px;
  line-height:1.1;
}

.feature-content p{
  margin:0;
}

.feature-content a{
  text-decoration:none;
  font-style:italic;
  font-weight:700;
}

.site-footer{
  background:linear-gradient(180deg,#0050a0,#003f86);
  color:#fff;
  padding:38px 0 22px;
  margin-top:40px;
}

.footer-tagline{
  font-style:italic;
  font-size:1.2rem;
  line-height:1.25;
}

.footer-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  text-transform:uppercase;
  font-weight:700;
  font-size:1.25rem;
}

.footer-logo{
/*  width:92px;
  height:60px;
  border-radius:50%;
  background:var(--abl-green);
  color:#fff;
  border:3px solid #fff;*/
  display:flex;
  align-items:center;
  justify-content:center;
  /*font-size:2rem;
  box-shadow:0 4px 12px rgba(0,0,0,.25);*/
}

.footer-nav{
  margin-top:22px;
}

.footer-menu{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px 24px;
  padding:0;
  margin:0;
}

.footer-menu li{
  list-style:none;
}

.footer-menu a{
  color:#fff;
  text-decoration:none;
  font-size:.95rem;
  opacity:.9;
}

.footer-menu a:hover{
  opacity:1;
  text-decoration:underline;
}

.footer-phone{
  font-size:1.05rem;
  line-height:1.45;
  font-weight:600;
}

.footer-bottom{
  margin-top:28px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.25);
  text-align:center;
  font-size:.9rem;
  opacity:.85;
}

/* tablet breakpoint */
@media (max-width: 991px){
.top-header{
    text-align:center;
  }
.footer-tagline,
  .footer-phone{
    text-align:center;
  }
}

/* mobile breakpoint */
@media(max-width:767px){
  .top-header{
    text-align:center;
  }

  .logo-badge{
    margin:18px auto;
  }

  .hero-carousel,
  .hero-slide,
  .carousel-item{
    min-height:360px;
  }

  .hero-message{
    top:auto;
    bottom:20px;
    left:18px;
    right:18px;
    transform:none;
    max-width:none;
    font-size:1.6rem;
    padding:24px;
  }

  .feature-card{
    flex-direction:column;
  }

  .feature-card img{
    width:100%;
    height:180px;
  }

  .footer-brand{
    flex-direction:column;
    gap:10px;
  }

  .footer-menu{
    gap:10px 18px;
  }

  .footer-tagline,
  .footer-phone{
    text-align:center;
  }
}

/* Inside Pages */
.page-main {
  padding: 40px 0 30px;
}

.page-content {
  max-width: 760px;
}

.page-content h1 {
  color: var(--abl-blue);
  font-size: 2.4rem;
  margin-bottom: 24px;
}

.page-content h2 {
  color: var(--abl-blue);
  font-size: 1.65rem;
  margin-top: 28px;
  margin-bottom: 14px;
}

.page-content h3 {
  color: #222;
  font-size: 1.2rem;
  margin-top: 22px;
}

.page-content p {
  line-height: 1.65;
  margin-bottom: 18px;
}

.page-content ul {
  margin-bottom: 24px;
}

.page-content li {
  margin-bottom: 4px;
}

.page-sidebar {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sidebar-promo {
  display: flex;
  align-items: center;
  min-height: 120px;
  padding: 10px;
  border-radius: 16px;
  background: linear-gradient(90deg, #ffffff, #eef7f1);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  text-decoration: none;
  overflow: hidden;
}

.sidebar-promo img {
  width: 118px;
  height: 96px;
  object-fit: cover;
  border-radius: 12px;
  margin-right: 16px;
  flex-shrink: 0;
}

.sidebar-promo h3 {
  color: var(--abl-blue);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
  margin: 0 0 6px;
}

.sidebar-promo p {
  color: #333;
  font-size: .82rem;
  line-height: 1.25;
  margin: 0;
}

.sidebar-promo span {
  color: var(--abl-blue);
  font-style: italic;
  font-weight: 700;
}

@media(max-width:767px) {
  .page-content h1 {
    font-size: 2rem;
  }

  .sidebar-promo {
    align-items: flex-start;
  }

  .sidebar-promo img {
    width: 100px;
    height: 88px;
  }
}
/* products page */
.product-feature-image{
    width:100px;
    height:100px;
    object-fit:cover;

    border-radius:16px;

    display:block;
}

.product-feature-title{
    font-size:22px;
    line-height:1;
    font-weight:400;
	color: var(--abl-blue);
}

.product-feature-title a{
    color:var(--abl-blue);
    text-decoration:none;
}

.product-feature-title a:hover{
    text-decoration:underline;
}

.product-feature-content p{
    line-height:1.6;
    color:#222;
}

@media(max-width:576px){

    .product-feature{
        flex-direction:column;
        gap:1rem !important;
    }

    .product-feature-image{
        width:100%;
        height:220px;
    }

}