/* The website's own styles: what the WordPress theme kept in inline <style> blocks. */

/* ---- homepage header (header-home.php) ---- */
.feature-screen::after {
            display:none;
        }

        .phone-number {
  -webkit-text-fill-color: inherit;
  text-decoration: none;
}

/* Prevent iOS/Safari auto-linking */
a[href^="tel"] {
  color: inherit;
  text-decoration: none;
}

@media (max-width: 576px) {
    .hero-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .hero-buttons .btn {
        width: 100%;
    }
}

.red {
        background: #d63a3b;
        color:#FFFFFF;
}

.red:hover {
    background: #740001;
}

/* ---- audio.php ---- */
.audio-player {
  border-top: 4px solid #c41e3a;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.audio-player .snowflakes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.audio-player .snowflake {
  position: absolute;
  opacity: 0.25;
  animation: fall linear infinite, rotate linear infinite, sway ease-in-out infinite;
}

/* Red shades */
.snowflake.red-1 { color: #c41e3a; }
.snowflake.red-2 { color: #a51c30; }
.snowflake.red-3 { color: #e63946; }

/* Green shades */
.snowflake.green-1 { color: #1a472a; }
.snowflake.green-2 { color: #2d5a3f; }
.snowflake.green-3 { color: #3a7d44; }

/* Gold shades */
.snowflake.gold-1 { color: #d4a843; }
.snowflake.gold-2 { color: #b8860b; }
.snowflake.gold-3 { color: #ffd700; }

/* Silver shades */
.snowflake.silver-1 { color: #c0c0c0; }
.snowflake.silver-2 { color: #a8a8a8; }
.snowflake.silver-3 { color: #d3d3d3; }

.snowflake:nth-child(1) { left: 5%; font-size: 0.8rem; animation-duration: 8s, 4s, 3s; animation-delay: 0s; }
.snowflake:nth-child(2) { left: 15%; font-size: 1.2rem; animation-duration: 10s, 5s, 4s; animation-delay: 1s; }
.snowflake:nth-child(3) { left: 25%; font-size: 0.9rem; animation-duration: 7s, 3s, 3.5s; animation-delay: 2s; }
.snowflake:nth-child(4) { left: 35%; font-size: 1.1rem; animation-duration: 9s, 6s, 4.5s; animation-delay: 0.5s; }
.snowflake:nth-child(5) { left: 45%; font-size: 0.7rem; animation-duration: 11s, 4s, 3s; animation-delay: 3s; }
.snowflake:nth-child(6) { left: 55%; font-size: 1.3rem; animation-duration: 8s, 5s, 4s; animation-delay: 1.5s; }
.snowflake:nth-child(7) { left: 65%; font-size: 0.8rem; animation-duration: 10s, 3s, 3.5s; animation-delay: 2.5s; }
.snowflake:nth-child(8) { left: 75%; font-size: 1.0rem; animation-duration: 7s, 6s, 4.5s; animation-delay: 0s; }
.snowflake:nth-child(9) { left: 85%; font-size: 1.2rem; animation-duration: 9s, 4s, 3s; animation-delay: 4s; }
.snowflake:nth-child(10) { left: 95%; font-size: 0.9rem; animation-duration: 11s, 5s, 4s; animation-delay: 1s; }

@keyframes fall {
  0% { top: -10%; }
  100% { top: 110%; }
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes sway {
  0%, 100% { margin-left: 0; }
  25% { margin-left: 8px; }
  75% { margin-left: -8px; }
}

.audio-player audio {
  border-radius: 30px;
  position: relative;
  z-index: 1;
}

.audio-player audio::-webkit-media-controls-panel {
  background-color: #f8f9fa;
}

.audio-player .santa-icon,
.audio-player h4,
.audio-player p,
.audio-player audio {
  position: relative;
  z-index: 1;
}

.santa-icon {
  width: 80px;
  height: 80px;
  background: #fee;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

/* ---- number.php ---- */
.santa-phone-cta {
     /*background: linear-gradient(to bottom, #001e3b, #042aae);*/
     background: #111827;
}

/* ---- pricing.php ---- */
.pricing .badge {
  padding: 0.5em 1em;
  font-size: 0.75rem;
}
.pricing ul li {
    padding-left:0px;
    display:block;
}
.pricing ul li::before {
    display:none;
}

/* ---- legal pages (header-white.php) ---- */
.red { background: #d63a3b; color: #FFFFFF; }
.red:hover { background: #740001; }

/* ---- footer (_foot.php) ---- */
/* The green call-to-action bar runs edge to edge; its Santa picture stays
   centred at the width of the page's content. */
.get-started::before {
    left: 50%;
    width: min(100%, 1320px);
    transform: translateX(-50%);
    background-position: center top;
}
/* Footer links stay white, and turn the site's green on hover (not Bootstrap's blue). */
footer ul li a,
footer ul li a:visited { color: #fff; }
footer ul li a:hover,
footer ul li a:focus-visible { color: #1fa361; }
/* Two links now, so only one divider between them. */
footer ul li:nth-child(2):last-child { border-right: 0; }

/* ---- the SantaHQ family of sites, in the footer (partials/brands.php) ---- */
.brands { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 16px 40px; margin: 0 auto 28px; }
.brands__title { flex: 0 0 100%; margin: 0 0 -4px; font-size: 13px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: #1fa361; }
.brands a { display: inline-flex; border-radius: 6px; opacity: .85; transition: opacity .2s ease; }
.brands a::after { display: none; }
.brands a:hover, .brands a:focus-visible { opacity: 1; }
.brands a:focus-visible { outline: 3px solid #1fa361; outline-offset: 4px; }
.brands img { display: block; width: auto; height: 40px; }
@media (max-width: 575px) { .brands { gap: 14px 24px; } .brands img { height: 32px; } }

/* ---- header logo (_nav.php): the same size and place as on the app's pages ---- */
.site-logo { width: 220px; max-width: 100%; height: auto; }
.site-logo-wrap { flex-shrink: 0; align-self: flex-start; } /* the menu gives way, not the logo; top-aligned as in the app */
@media (max-width: 991px) { .site-logo { width: 180px; } }
@media (max-width: 575px) { .site-logo { width: 200px; } }