/* CC Lead Engine — Summerville Painters Pro
   Mobile-first responsive CSS. No frameworks, fast loading.
   Forked from sites/albany-house-painters/styles.css, given its own
   palette — marine/cobalt blue on warm sand, with a terracotta
   call-to-action accent. The blue nods to "haint blue," the pale
   blue-green traditionally painted on Lowcountry porch ceilings around
   Charleston/Summerville, SC; the terracotta CTA color echoes the warm
   orange paint visible in this site's own photos. Deliberately distinct
   from the rest of the family: chimney's charcoal/copper, albany's
   teal/cream/amber, junk-removal's forest-green, photo-booth's
   plum/magenta/gold, and bathroom-remodel's navy/orange/violet — its
   own identity within the group, 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).

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

   No working phone number exists yet for this site (CallOwl tracking
   number pending) — unlike sibling sites, phone number display is
   deliberately confined to the footer and the Contact Us page only, so
   .hero__phone/.body-phone-cta are used narrowly rather than on every
   page. See contact-us.html and footer markup. */

/* ============================================================
   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: #16283a;
  background: var(--color-bg-light, #f6f1e7);
}

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

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

a:hover {
  color: #234f78;
}

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

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

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

/* ============================================================
   CSS VARIABLES
   ------------------------------------------------------------
   Marine/cobalt blue brand color on warm sand, + terracotta accent
   for the call-to-action button. See file header comment for the
   reasoning behind this palette within the site family.
   ============================================================ */

:root {
  --color-primary: #16283a;
  --color-accent: #2f6fa3;
  --color-accent-dark: #234f78;
  --color-bg-light: #f6f1e7;
  --color-bg-dark: #0f1e2b;
  --color-text: #16283a;
  --color-text-light: #52697a;
  --color-text-white: #fff;
  --color-border: #ddd6c8;
  --color-success: #c1652f;
  --color-success-dark: #9c4f24;
  --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: #f2e6c8;
}

/* ============================================================
   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: #f2e6c8;
}

.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.5rem;
  font-weight: 800;
  color: var(--color-text-white);
  margin-bottom: 1.5rem;
  text-shadow: 0 1px 4px rgba(0,0,0,0.45);
}

/* ============================================================
   BODY PHONE CTA — Contact Us page only for this site (no working
   tracking number yet, so phone display stays out of every other page)
   ============================================================ */

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

/* ============================================================
   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(22, 40, 58, 0.05);
  transition: box-shadow 0.2s;
}

.card:hover {
  box-shadow: 0 4px 16px rgba(22, 40, 58, 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(22, 40, 58, 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(47, 111, 163, 0.18);
}

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

.form-success {
  display: none;
  text-align: center;
  padding: 2rem;
  background: #eaf1f7;
  border: 1px solid #c3d8e8;
  border-radius: 8px;
  color: #234f78;
}

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

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

/* ============================================================
   CTA BAR (fixed mobile bar — links to Contact Us; no phone shown,
   this site has no working tracking number yet)
   ============================================================ */

.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;
}

.footer__phone-note {
  color: rgba(255,255,255,0.55);
  font-size: 0.8125rem;
  margin-top: 0.25rem;
}

/* ============================================================
   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;
  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;
}

/* ============================================================
   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 — hero/nav buttons suffice */
  }

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

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

  .split__media,
  .split__content {
    flex: 1;
  }
}

/* ============================================================
   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;
  }
}