/*
 * MP Drains — Mobile-First Stylesheet
 * Base styles target 320px+.
 * Breakpoints:
 *   sm  : min-width 480px  (large phones)
 *   md  : min-width 768px  (tablets)
 *   lg  : min-width 1024px (desktop)
 */

/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

:root {
  --mpd-navy:      #1B3C6B;
  --mpd-blue:      #2D7DD2;
  --mpd-dark-gray: #2C2C2C;
  --mpd-light-gray:#F4F6F9;
  --mpd-border:    #E8ECF1;
  --mpd-muted:     #b8cde8;
}

/* ── Focus ring ── */
:focus-visible { outline: 2px solid var(--mpd-blue); outline-offset: 3px; }

/* ─────────────────────────────────────────
   HERO — fluid height & spacing
───────────────────────────────────────── */
.wp-block-cover.alignfull {
  min-height: 480px !important;
  padding-top:    clamp(3rem, 8vw, 6rem) !important;
  padding-bottom: clamp(3rem, 8vw, 6rem) !important;
}

/* Buttons inside hero stack on mobile, row on sm+ */
.wp-block-cover .wp-block-buttons {
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.75rem !important;
}
.wp-block-cover .wp-block-button { width: 100%; max-width: 280px; }
.wp-block-cover .wp-block-button__link { display: block; text-align: center; }

@media (min-width: 480px) {
  .wp-block-cover.alignfull { min-height: 540px !important; }
  .wp-block-cover .wp-block-buttons { flex-direction: row !important; }
  .wp-block-cover .wp-block-button { width: auto; max-width: none; }
  .wp-block-cover .wp-block-button__link { display: inline-block; }
}

@media (min-width: 768px) { .wp-block-cover.alignfull { min-height: 580px !important; } }
@media (min-width: 1024px) { .wp-block-cover.alignfull { min-height: 620px !important; } }

/* ─────────────────────────────────────────
   SECTION SPACING — fluid via clamp
───────────────────────────────────────── */
/* All full-width groups use fluid padding */
.wp-block-group.alignfull {
  padding-left:  clamp(1.25rem, 4vw, 2rem) !important;
  padding-right: clamp(1.25rem, 4vw, 2rem) !important;
}

/* Vertical rhythm for content sections */
.wp-block-group.alignfull[style*="padding-top:5rem"],
.wp-block-group.alignfull[style*="padding-top: 5rem"] {
  padding-top:    clamp(3rem, 6vw, 5rem) !important;
  padding-bottom: clamp(3rem, 6vw, 5rem) !important;
}
.wp-block-group.alignfull[style*="padding-top:4rem"],
.wp-block-group.alignfull[style*="padding-top: 4rem"] {
  padding-top:    clamp(2.5rem, 5vw, 4rem) !important;
  padding-bottom: clamp(2.5rem, 5vw, 4rem) !important;
}

/* ─────────────────────────────────────────
   COLUMNS — stacking handled by WP core CSS
   (core stacks at 600px with !important)
   We add fluid column gaps.
───────────────────────────────────────── */
.wp-block-columns {
  gap: clamp(1rem, 3vw, 2rem) !important;
}

/* Service cards equal height on grid */
.wp-block-column .wp-block-heading,
.wp-block-column .wp-block-paragraph {
  word-break: break-word;
}

/* ─────────────────────────────────────────
   TYPOGRAPHY — fluid headings
───────────────────────────────────────── */
.wp-block-heading[style*="font-size:2.5rem"],
.wp-block-heading[style*="font-size: 2.5rem"] {
  font-size: clamp(1.6rem, 4vw, 2.5rem) !important;
}
.wp-block-heading[style*="font-size:2.2rem"],
.wp-block-heading[style*="font-size: 2.2rem"] {
  font-size: clamp(1.45rem, 3.5vw, 2.2rem) !important;
}
.wp-block-heading[style*="font-size:2rem"],
.wp-block-heading[style*="font-size: 2rem"] {
  font-size: clamp(1.35rem, 3vw, 2rem) !important;
}

/* ─────────────────────────────────────────
   BUTTONS (outside hero)
───────────────────────────────────────── */
/* Full-width on small mobile, auto on sm+ */
@media (max-width: 479px) {
  .wp-block-buttons:not(.wp-block-cover .wp-block-buttons) {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .wp-block-buttons:not(.wp-block-cover .wp-block-buttons) .wp-block-button {
    width: 100% !important;
  }
  .wp-block-buttons:not(.wp-block-cover .wp-block-buttons) .wp-block-button__link {
    display: block !important;
    text-align: center !important;
  }
}

/* ─────────────────────────────────────────
   HEADER
───────────────────────────────────────── */
/* Navigation hamburger color */
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
  fill: var(--mpd-navy);
}

/* Overlay menu background */
.wp-block-navigation__responsive-container.is-menu-open {
  background: var(--mpd-navy) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  color: #fff !important;
  font-size: 1.1rem !important;
  padding: 0.75rem 0 !important;
}

/* ─────────────────────────────────────────
   FOOTER LOGO — invert on dark background
───────────────────────────────────────── */
.footer-logo .wp-block-site-logo img {
  filter: brightness(0) invert(1);
}

/* ─────────────────────────────────────────
   CONTACT FORM 7 — mobile-first styling
───────────────────────────────────────── */
.wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.wpcf7-form p { margin: 0; }

.wpcf7-form label {
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--mpd-dark-gray);
  margin-bottom: 0.35rem;
}

.wpcf7-form .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="email"],
.wpcf7-form select,
.wpcf7-form textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--mpd-border);
  border-radius: 6px;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9rem;
  color: var(--mpd-dark-gray);
  background: #fafafa;
  transition: border-color 0.2s, background 0.2s;
  -webkit-appearance: none;
  appearance: none;
}

@media (min-width: 480px) {
  .wpcf7-form input[type="text"],
  .wpcf7-form input[type="tel"],
  .wpcf7-form input[type="email"],
  .wpcf7-form select,
  .wpcf7-form textarea {
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
  }
}

.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
  outline: none;
  border-color: var(--mpd-blue);
  background: #fff;
}

.wpcf7-form textarea {
  min-height: 110px;
  resize: vertical;
}

.wpcf7-form input[type="submit"],
.wpcf7-submit {
  width: 100%;
  padding: 0.9rem 1.5rem;
  background: var(--mpd-navy);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-family: 'Oswald', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  letter-spacing: 0.03em;
}

@media (min-width: 480px) {
  .wpcf7-form input[type="submit"],
  .wpcf7-submit { font-size: 1.05rem; padding: 1rem 1.5rem; }
}

.wpcf7-form input[type="submit"]:hover,
.wpcf7-submit:hover { background: var(--mpd-blue); }

/* CF7 validation messages */
.wpcf7-not-valid-tip { font-size: 0.8rem; color: #c00; margin-top: 0.25rem; display: block; }
.wpcf7-response-output {
  border-radius: 6px;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  margin-top: 1rem !important;
  border-width: 1px !important;
}

/* ─────────────────────────────────────────
   MATTHEW PLACEHOLDER IMAGE
───────────────────────────────────────── */
.matthew-photo img {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  display: block;
}

@media (min-width: 768px) {
  .matthew-photo img { max-width: 100%; }
}

/* ─────────────────────────────────────────
   404 PAGE
───────────────────────────────────────── */
.wp-block-group[style*="padding-top:6rem"] {
  padding-top:    clamp(4rem, 8vw, 6rem) !important;
  padding-bottom: clamp(4rem, 8vw, 6rem) !important;
}