/* CC Lead Engine — Danbury Photo Booth Co
   Mobile-first responsive CSS. No frameworks, fast loading.
   Forked from sites/woonsocket-junk-removal/styles.css, given its own
   palette (deep plum + magenta, with a warm gold call-to-action accent —
   evoking event/party rental branding) — same structural system (flat
   brand-color nav, duotone photo hero, plain underlined inline links,
   denser text, inconsistent heading sizes, big flat color panels, split
   section, accordion) as the chimney and junk-removal sites, so the
   family stays visually consistent while each site keeps its own
   identity.

   Accessibility rules (skip link, 44px tap targets, 16px form inputs to
   stop iOS zoom) preserved unchanged from the reference sites. */

/* ============================================================
   RESET & BASE
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: #241220;
  background: #ffffff;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: #a8236f;
  text-decoration: underline;
  transition: color 0.2s;
}

a:hover {
  color: #7c1a53;
}

ul, ol {
  padding-left: 1.5rem;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
}

.skip-link:focus {
  left: 0;
  top: 0;
  background: #a8236f;
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 200;
  text-decoration: none;
}

/* ============================================================
   CSS VARIABLES
   ------------------------------------------------------------
   Deep plum/magenta brand color + warm gold accent for the
   call-to-action button. Deliberately distinct from chimney's
   charcoal/copper and junk-removal's forest-green/orange — its own
   identity within the family.
   ============================================================ */

:root {
  --color-primary: #241220;
  --color-accent: #a8236f;
  --color-accent-dark: #7c1a53;
  --color-bg-light: #faf3f7;
  --color-bg-dark: #1c0f19;
  --color-text: #241220;
  --color-text-light: #6b5566;
  --color-text-white: #fff;
  --color-border: #e8d7e2;
  --color-success: #c99a2e;
  --color-success-dark: #a67d1f;
  --max-width: 1200px;
  --header-height: 70px;
}

/* ============================================================
   LAYOUT
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1rem;
}

.section {
  padding: 2rem 0;
}

.section--dark {
  background: var(--color-bg-dark);
  color: var(--color-text-white);
}

.section--light {
  background: var(--color-bg-light);
}

/* Flat brand-color panel — deliberately busy/dated, used once per page.
   Cards keep their normal white-card colors inside it (reset below);
   direct paragraphs/list text switch to white for contrast. */
.section--accent {
  background: var(--color-accent);
  color: var(--color-text-white);
  padding: 4rem 0;
}

.section--accent h2,
.section--accent > .container > p,
.section--accent li {
  color: var(--color-text-white);
}

.section--accent .card {
  color: var(--color-text);
}

.section--accent .card h3 {
  color: var(--color-primary);
}

.section--accent .card p {
  color: var(--color-text-light);
}

/* ============================================================
   HEADER & NAV
   ============================================================ */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-accent);
  color: var(--color-text-white);
}

.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
}

.header__logo {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-white);
  white-space: nowrap;
  text-decoration: none;
}

.nav {
  display: none;
}

.nav--open {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: var(--header-height);
  left: 0;
  right: 0;
  background: var(--color-accent);
  padding: 1rem;
}

.nav a {
  color: var(--color-text-white);
  padding: 0.75rem 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.nav a:hover {
  background: rgba(255,255,255,0.1);
  color: #f3cfe4;
}

/* ============================================================
   SERVICES DROPDOWN
   ------------------------------------------------------------
   .nav__item wraps the "Services" link + a separate caret button, so
   tapping/clicking "Services" itself still navigates to /services.html
   while the caret toggles the submenu. Submenu shows on hover, on
   keyboard focus (:focus-within — covers the link, caret, or any
   submenu link), or via the JS-toggled .nav__item--open class (for a
   reliable mobile tap, matching the existing inline-onclick hamburger
   pattern — bare :hover/:focus-within isn't reliable on touch alone).
   ============================================================ */

.nav__item {
  display: flex;
  align-items: center;
  position: relative;
}

.nav__caret {
  background: none;
  border: none;
  color: var(--color-text-white);
  cursor: pointer;
  font-size: 1rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem;
}

.nav__submenu {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0 0 0 1rem;
  background: rgba(0,0,0,0.12);
}

.nav__item:hover .nav__submenu,
.nav__item:focus-within .nav__submenu,
.nav__item--open .nav__submenu {
  display: block;
}

.nav__submenu a {
  color: var(--color-text-white);
  padding: 0.75rem 1rem;
  font-weight: 500;
  text-decoration: none;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.nav__submenu a:hover {
  background: rgba(255,255,255,0.1);
  color: #f3cfe4;
}

.menu-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  min-width: 44px;
  min-height: 44px;
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text-white);
  transition: transform 0.2s;
}

/* ============================================================
   HERO — duotone photo background
   ------------------------------------------------------------
   Each page sets --hero-img inline on .hero (style="--hero-img:url(...)").
   .hero__bg carries the desaturated photo; .hero__overlay multiplies the
   brand accent color over it for a duotone tint. Text sits in .container
   above both.
   ============================================================ */

.hero {
  position: relative;
  overflow: hidden;
  color: var(--color-text-white);
  padding: 4rem 0 3rem;
  text-align: center;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--hero-img) center / cover no-repeat;
  filter: grayscale(0.6) contrast(1.15);
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--color-accent);
  mix-blend-mode: multiply;
  opacity: 0.82;
}

.hero .container {
  position: relative;
  z-index: 2;
}

.hero h1 {
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 1rem;
  font-weight: 800;
  text-shadow: 0 1px 4px rgba(0,0,0,0.45);
}

.hero p {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.9);
  margin-bottom: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.hero__phone {
  display: inline-block;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--color-text-white);
  margin-bottom: 1.5rem;
  text-shadow: 0 1px 4px rgba(0,0,0,0.45);
}

.hero__phone:hover {
  color: #f3cfe4;
}

/* ============================================================
   BODY PHONE CTA — one per page, right after the intro copy
   ============================================================ */

.body-phone-cta {
  font-weight: 700;
  color: var(--color-primary);
}

.body-phone-cta a {
  color: var(--color-accent);
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 2rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: background 0.2s, transform 0.1s;
  min-height: 44px;
}

.btn:active {
  transform: scale(0.98);
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-text-white);
}

.btn--primary:hover {
  background: var(--color-accent-dark);
  color: var(--color-text-white);
}

.btn--outline {
  background: transparent;
  border: 2px solid var(--color-text-white);
  color: var(--color-text-white);
}

.btn--outline:hover {
  background: var(--color-text-white);
  color: var(--color-bg-dark);
}

.btn--call {
  background: var(--color-success);
  color: var(--color-text-white);
  font-size: 1.1rem;
  padding: 1rem 2rem;
}

.btn--call:hover {
  background: var(--color-success-dark);
  color: var(--color-text-white);
}

.hero-buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

/* ============================================================
   CARDS / SERVICES GRID
   ============================================================ */

.grid {
  display: grid;
  gap: 1rem;
}

.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }

.card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1.25rem;
  box-shadow: 0 1px 4px rgba(36, 18, 32, 0.05);
  transition: box-shadow 0.2s;
}

.card:hover {
  box-shadow: 0 4px 16px rgba(36, 18, 32, 0.1);
}

.card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
  color: var(--color-primary);
}

.card p {
  color: var(--color-text-light);
}

/* ============================================================
   WHY CHOOSE US / FEATURES
   ============================================================ */

.features {
  text-align: center;
}

.features h2 {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
}

.features > p {
  color: var(--color-text-light);
  margin-bottom: 1rem;
}

.feature-item {
  padding: 1.5rem;
}

.feature-item h3 {
  margin-top: 0.5rem;
}

/* ============================================================
   FREE QUOTE BADGE
   ------------------------------------------------------------
   Clip-art-style torn-ribbon badge, sat directly above the lead form
   (contact-us.html only — that's the actual form; other pages just link
   to it). Rotated slightly for the busy/dated "slapped-on sticker" look.
   ============================================================ */

.quote-badge {
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 220px;
  margin: 0 auto -1.25rem;
  transform: rotate(-6deg);
  filter: drop-shadow(0 4px 6px rgba(36, 18, 32, 0.35));
}

.quote-badge__body {
  flex: 1;
  background: var(--color-accent);
  border: 3px solid var(--color-accent-dark);
  clip-path: polygon(
    0% 15%, 8% 0%, 20% 12%, 33% 2%, 47% 14%, 60% 0%, 73% 13%, 87% 3%, 100% 15%,
    100% 85%, 88% 100%, 75% 88%, 62% 100%, 48% 87%, 35% 100%, 22% 89%, 9% 100%, 0% 85%
  );
  color: #fff;
  font-weight: 900;
  font-size: 1rem;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  padding: 0.6rem 0.5rem;
  letter-spacing: 0.03em;
}

.quote-badge__tail {
  width: 18px;
  align-self: center;
  height: 60%;
  background: var(--color-accent-dark);
}

.quote-badge__tail--left {
  clip-path: polygon(0 0, 100% 20%, 100% 80%, 0 100%, 40% 50%);
  margin-right: -2px;
}

.quote-badge__tail--right {
  clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 100%, 60% 50%);
  margin-left: -2px;
}

/* ============================================================
   CONTACT FORM
   ============================================================ */

.form-section {
  max-width: 600px;
  margin: 0 auto;
}

.form-section h2 {
  text-align: center;
  margin-bottom: 1.5rem;
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.375rem;
  font-weight: 600;
  color: var(--color-text);
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 16px; /* prevent iOS zoom on focus */
  font-family: inherit;
  min-height: 44px;
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(168, 35, 111, 0.15);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.form-success {
  display: none;
  text-align: center;
  padding: 2rem;
  background: #fbe9f2;
  border: 1px solid #edc7dd;
  border-radius: 8px;
  color: #7c1a53;
}

.form-success.visible {
  display: block;
}

.honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* ============================================================
   CTA BAR (click-to-call)
   ============================================================ */

.cta-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-accent);
  padding: 0.75rem;
  text-align: center;
  z-index: 99;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.15);
}

.cta-bar a {
  color: var(--color-text-white);
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
}

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  background: var(--color-bg-dark);
  color: rgba(255,255,255,0.7);
  padding: 2rem 0;
  text-align: center;
  font-size: 0.875rem;
}

.footer a {
  color: rgba(255,255,255,0.9);
  text-decoration: none;
}

.footer__links {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

/* ============================================================
   SPLIT PHOTO/CONTENT SECTION
   ------------------------------------------------------------
   One per page: photo on one side, flat-color content panel on the
   other. Stacked on mobile; side-by-side from 768px+ (see responsive
   block below). .split--reverse flips which side the photo is on.
   ============================================================ */

.split {
  display: flex;
  flex-direction: column;
}

.split__media {
  min-height: 220px;
}

.split__media img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  max-height: 460px;
  object-fit: cover;
}

.split__content {
  background: var(--color-accent);
  color: var(--color-text-white);
  padding: 2.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.split__content h2,
.split__content p {
  color: var(--color-text-white);
}

/* ============================================================
   ACCORDION
   ------------------------------------------------------------
   Real <button> triggers (44px min-height), aria-expanded drives both
   the +/x icon rotation (CSS attribute selector) and, via the small
   delegated-listener script on each page that uses this, the [hidden]
   panel — never CSS-only :hover.
   ============================================================ */

.accordion__item {
  border-bottom: 1px solid var(--color-border);
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  padding: 1rem 0.25rem;
  background: none;
  border: none;
  text-align: left;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-text);
  cursor: pointer;
}

.accordion__icon {
  flex-shrink: 0;
  margin-left: 1rem;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-accent);
  transition: transform 0.2s;
}

.accordion__trigger[aria-expanded="true"] .accordion__icon {
  transform: rotate(45deg);
}

.accordion__panel {
  padding: 0 0.25rem 1.25rem;
  color: var(--color-text-light);
}

.accordion__panel[hidden] {
  display: none;
}

/* ============================================================
   PHOTO GRID GALLERY
   ------------------------------------------------------------
   Square, object-fit:cover thumbnails reused from the existing
   hero/split photo library — see images/CREDITS.txt.
   ============================================================ */

.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.photo-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
}

/* ============================================================
   FULL-BLEED IMAGE BAND
   ------------------------------------------------------------
   Shorter than .hero, left-aligned text, shares the duotone
   --hero-img treatment so it visually matches the page heroes.
   ============================================================ */

.band {
  position: relative;
  overflow: hidden;
  color: var(--color-text-white);
  padding: 3rem 0;
  text-align: left;
}

.band__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--hero-img) center / cover no-repeat;
  filter: grayscale(0.6) contrast(1.15);
}

.band__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--color-bg-dark);
  mix-blend-mode: multiply;
  opacity: 0.75;
}

.band .container {
  position: relative;
  z-index: 2;
  max-width: 620px;
}

.band h2,
.band p {
  color: var(--color-text-white);
}

.band p {
  margin: 1rem 0 1.5rem;
}

/* ============================================================
   CARD ICON — plain circular glyph, no icon font/library
   ============================================================ */

.card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-text-white);
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}

/* ============================================================
   FOOTER — 3-column layout
   ============================================================ */

.footer__grid {
  display: grid;
  gap: 2rem;
  text-align: left;
  margin-bottom: 1.5rem;
}

.footer__col h3 {
  color: var(--color-text-white);
  font-size: 1rem;
  margin-bottom: 0.75rem;
}

.footer__col p {
  color: rgba(255,255,255,0.7);
}

.footer__grid .footer__links {
  justify-content: flex-start;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0;
}

/* ============================================================
   RESPONSIVE — TABLET (768px+)
   ============================================================ */

@media (min-width: 768px) {
  .hero h1 {
    font-size: 2.75rem;
  }

  .hero-buttons {
    flex-direction: row;
    justify-content: center;
  }

  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }

  .nav {
    display: flex;
    align-items: center;
    gap: 0;
  }

  .nav__submenu {
    position: absolute;
    top: 100%;
    left: 0;
    margin: 0;
    min-width: 240px;
    background: var(--color-accent-dark);
    box-shadow: 0 6px 14px rgba(0,0,0,0.2);
    z-index: 150;
  }

  .menu-toggle {
    display: none;
  }

  .cta-bar {
    display: none;  /* Hide fixed CTA on desktop — button in hero is enough */
  }

  .split {
    flex-direction: row;
    min-height: 320px;
  }

  .split--reverse {
    flex-direction: row-reverse;
  }

  .split__media,
  .split__content {
    flex: 1;
  }

  .photo-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer__grid {
    grid-template-columns: repeat(3, 1fr);
    text-align: left;
  }
}

/* ============================================================
   RESPONSIVE — DESKTOP (1024px+)
   ============================================================ */

@media (min-width: 1024px) {
  .hero h1 {
    font-size: 3.25rem;
  }

  .hero {
    padding: 5rem 0 4rem;
  }

  .grid--3 { grid-template-columns: repeat(3, 1fr); }

  .section {
    padding: 2.5rem 0;
  }

  .photo-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .band {
    padding: 4.5rem 0;
  }
}