/*
Theme Name: LIT Christmas Lights
Theme URI: https://litchristmaslights.com
Author: The Web Guys
Author URI: https://thewebguys.com
Description: Custom WordPress theme for LIT Christmas Lights — professional Christmas light installation in North Jersey. All 22 pages are created automatically on activation and are editable with Genesis Custom Blocks.
Version: 2.1.8
Requires at least: 6.2
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lit-christmas-lights
Tags: business, custom-blocks, one-column
*/

/*
 * The real stylesheet is assets/css/site.css (compiled, self-contained).
 * This file only carries the theme header WordPress requires, plus a couple
 * of WordPress-specific rules.
 */

.wp-block-image img {
  max-width: 100%;
  height: auto;
}

.alignwide,
.alignfull {
  max-width: 100%;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
 * Post / classic-editor content typography (.lit-prose)
 * Used by single.php and any page written in the editor rather than blocks.
 * -------------------------------------------------------------------------- */

.lit-prose > * + * {
  margin-top: 1.5rem;
}

.lit-prose p {
  font-size: 17px;
  line-height: 1.8;
  color: rgba(26, 26, 26, 0.75);
}

.lit-prose h2 {
  font-family: Fraunces, Georgia, serif;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.3;
  color: #1a1a1a;
  padding-top: 1rem;
}

.lit-prose h3 {
  font-family: Fraunces, Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  color: #1a1a1a;
  padding-top: 0.5rem;
}

.lit-prose ul,
.lit-prose ol {
  padding-left: 1.25rem;
  list-style: disc;
}

.lit-prose ol {
  list-style: decimal;
}

.lit-prose li {
  font-size: 17px;
  line-height: 1.75;
  color: rgba(26, 26, 26, 0.75);
  margin-top: 0.75rem;
}

.lit-prose li::marker {
  color: #196925;
}

.lit-prose a {
  font-weight: 500;
  color: #196925;
  text-decoration: underline;
  text-decoration-color: #e8c36a;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.lit-prose a:hover {
  color: #c30f16;
}

.lit-prose strong {
  font-weight: 600;
  color: #1a1a1a;
}

.lit-prose blockquote {
  border-left: 4px solid #c30f16;
  border-radius: 0 1rem 1rem 0;
  background: #ffffff;
  padding: 1.5rem 1.5rem 1.5rem 1.75rem;
  font-family: Fraunces, Georgia, serif;
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.6;
  color: rgba(26, 26, 26, 0.85);
}

.lit-prose blockquote p {
  font-size: inherit;
  font-style: inherit;
  color: inherit;
}

.lit-prose img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.lit-prose figure {
  margin: 0;
}

.lit-prose figcaption {
  margin-top: 0.75rem;
  text-align: center;
  font-size: 14px;
  color: rgba(26, 26, 26, 0.55);
}

/* Gravity Forms / GoHighLevel embeds sit inside .lit-embed — keep them tidy. */
.lit-embed {
  width: 100%;
}

.lit-embed input[type="text"],
.lit-embed input[type="email"],
.lit-embed input[type="tel"],
.lit-embed input[type="url"],
.lit-embed textarea,
.lit-embed select {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 16px;
  background: #ffffff;
}

.lit-embed input[type="submit"],
.lit-embed button[type="submit"] {
  border: 0;
  border-radius: 9999px;
  background: #c30f16;
  color: #ffffff;
  font-weight: 700;
  padding: 0.9rem 1.75rem;
  cursor: pointer;
}

.lit-embed input[type="submit"]:hover,
.lit-embed button[type="submit"]:hover {
  background: #a10c12;
}

/* Service-grid cards: same 1/2/3-column rhythm as the Tailwind grid, but a
   short final row (e.g. 5 cards across 3 columns) centres instead of
   left-aligning. */
.lit-card-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}

.lit-card-grid > * {
  width: 100%;
}

@media (min-width: 640px) {
  .lit-card-grid > * {
    width: calc(50% - 0.625rem);
  }
}

@media (min-width: 1024px) {
  .lit-card-grid > * {
    width: calc(33.3333% - 0.8334rem);
  }
}

/* Image band: 3-up rows that stay centered when the last row is short.
   Matches the old md:grid-cols-3 breakpoint (768px). */
.lit-band-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}

.lit-band-grid > * {
  width: 100%;
}

@media (min-width: 768px) {
  .lit-band-grid > * {
    width: calc(33.3333% - 0.8334rem);
  }
}

/* Primary desktop menu: 16px links with a red underline on hover.
   The underline is a pseudo-element so it hugs the text, not the pill padding. */
nav[aria-label="Primary"] > a,
nav[aria-label="Primary"] > div > button {
  position: relative;
  font-size: 16px;
  line-height: 1.4;
}

nav[aria-label="Primary"] > a::after,
nav[aria-label="Primary"] > div > button::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.35rem;
  height: 2px;
  border-radius: 2px;
  background-color: var(--color-brand-red, #c30f16);
  opacity: 0;
  transition: opacity 0.2s ease;
}

nav[aria-label="Primary"] > a:hover::after,
nav[aria-label="Primary"] > a:focus-visible::after,
nav[aria-label="Primary"] > div:hover > button::after,
nav[aria-label="Primary"] > div:focus-within > button::after {
  opacity: 1;
}

/* The Services button also holds a caret icon — keep the underline under the label only. */
nav[aria-label="Primary"] > div > button::after {
  right: 1.85rem;
}

/* FAQ video button + lightbox */
.lit-video-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.1rem;
  padding: 0.7rem 1.35rem 0.7rem 0.7rem;
  border: 0;
  border-radius: 999px;
  background-color: var(--color-brand-red, #c30f16);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.lit-video-btn:hover,
.lit-video-btn:focus-visible {
  background-color: var(--color-brand-red-dark, #9d0c12);
  transform: translateY(-1px);
}
.lit-video-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.2);
}
.lit-video-btn__icon svg {
  width: 0.9rem;
  height: 0.9rem;
  margin-left: 1px;
}

.lit-video-modal[hidden] { display: none; }
.lit-video-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.lit-video-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(10, 12, 16, 0.82);
}
.lit-video-modal__dialog {
  position: relative;
  width: 100%;
  max-width: min(92vw, 480px);
  display: flex;
  justify-content: center;
}
.lit-video-modal__player {
  width: 100%;
  max-height: 82vh;
  border-radius: 1.25rem;
  background-color: #000;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
}
.lit-video-modal__close {
  position: absolute;
  top: -3rem;
  right: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.lit-video-modal__close:hover,
.lit-video-modal__close:focus-visible {
  background-color: var(--color-brand-red, #c30f16);
}

@media (max-width: 640px) {
  .lit-video-modal { padding: 0.75rem; }
  .lit-video-modal__dialog { max-width: 100%; }
  .lit-video-modal__player { max-height: 76vh; border-radius: 0.9rem; }
  .lit-video-modal__close { top: -2.9rem; }
}

body.lit-modal-open { overflow: hidden; }

/* ---------------------------------------------------------------------------
 * "More Than Christmas Lights" band (lit-more-holidays)
 * ------------------------------------------------------------------------- */

.lit-more-holidays {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(135deg, var(--color-brand-green-dark, #0f4a19) 0%, var(--color-night, #0a1410) 100%);
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
  color: #fff;
}

.lit-more-holidays::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 12% 18%, rgba(232, 195, 106, 0.18) 0, transparent 42%),
    radial-gradient(circle at 88% 82%, rgba(195, 15, 22, 0.22) 0, transparent 45%);
  pointer-events: none;
}

.lit-more-holidays__inner {
  position: relative;
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.lit-more-holidays__eyebrow {
  margin: 0 0 0.75rem;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-brand-gold, #e8c36a);
}

.lit-more-holidays__heading {
  margin: 0;
  font-family: var(--font-display, "Playfair Display", Georgia, serif);
  font-size: clamp(1.875rem, 1.3rem + 1.9vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
}

.lit-more-holidays__rule {
  display: block;
  width: 5rem;
  height: 4px;
  margin: 1rem auto 0;
  border-radius: 999px;
  background-image: linear-gradient(to right, var(--color-brand-red, #c30f16), var(--color-brand-gold, #e8c36a), #7bd18a);
}

.lit-more-holidays__body {
  margin: 1.5rem 0 0;
  font-size: 17px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.82);
}

.lit-more-holidays__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.lit-more-holidays__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 1.05rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.08);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fff;
  white-space: nowrap;
}

.lit-more-holidays__link {
  display: inline-flex;
  align-items: center;
  margin-top: 1.75rem;
  padding: 0.75rem 1.6rem;
  border-radius: 999px;
  background-color: var(--color-brand-red, #c30f16);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.lit-more-holidays__link:hover,
.lit-more-holidays__link:focus-visible {
  background-color: var(--color-brand-red-dark, #97080e);
  color: #fff;
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .lit-more-holidays {
    padding-top: 3.25rem;
    padding-bottom: 3.25rem;
  }
  .lit-more-holidays__body {
    font-size: 16px;
  }
  .lit-more-holidays__chip {
    font-size: 13px;
    padding: 0.4rem 0.9rem;
  }
}
/* Header fit between 1024px and 1400px.
   Tailwind's .container caps at the previous breakpoint (1024px at a 1229px
   viewport), which left the logo + nav + CTA wider than the container and
   pushed the "Request an Estimate" button off the right edge. In this range the
   header bar uses the full viewport width and the nav padding tightens. */
@media (min-width: 1024px) and (max-width: 1400px) {
  [data-lit-inner] {
    max-width: none;
    width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  nav[aria-label="Primary"] > a,
  nav[aria-label="Primary"] > div > button {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  nav[aria-label="Primary"] > a::after,
  nav[aria-label="Primary"] > div > button::after {
    left: 0.5rem;
    right: 0.5rem;
  }

  nav[aria-label="Primary"] > div > button::after {
    right: 1.6rem;
  }
}

/* Tighter still just above the mobile breakpoint: shrink the header logo and
   the CTA so everything still fits on one line at 1024–1199px. */
@media (min-width: 1024px) and (max-width: 1199px) {
  /* Only the un-scrolled (large) logo state — the scroll handler swaps this
     class out for the small one, which must stay free to shrink. */
  [data-lit-logo][class*="225px"] {
    height: 160px !important;
    width: 160px !important;
  }

  /* The fixed header gets shorter with the smaller logo, so its spacer has to
     match or a cream gap opens above the hero. */
  div[aria-hidden="true"]:has(+ header[data-lit-header]) {
    height: 209px;
  }

  nav[aria-label="Primary"] > a,
  nav[aria-label="Primary"] > div > button {
    font-size: 15px;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
  }

  nav[aria-label="Primary"] > a::after,
  nav[aria-label="Primary"] > div > button::after {
    left: 0.4rem;
    right: 0.4rem;
  }

  nav[aria-label="Primary"] > div > button::after {
    right: 1.4rem;
  }

  [data-lit-inner] .bg-brand-red {
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 13px;
  }
}

/* Sister company footer band (Three Guys Maintenance) */
.lit-sister{display:flex;flex-direction:column;align-items:flex-start;gap:18px;}
.lit-sister-text{flex:0 0 auto;min-width:0;}
.lit-sister-text p:last-child{max-width:56ch;}
@media (min-width:768px){
	.lit-sister{flex-direction:row;align-items:center;gap:26px;}
	.lit-sister-text{flex:1 1 240px;}
}

/* Accessibility page embed placeholder */
#lit-accessibility-embed{min-height:400px;width:100%;max-width:1280px;margin-left:auto;margin-right:auto;}