/*
Theme Name: CAPS Sprinklers & Drainage
Theme URI: https://www.capssprinklersystemsllc.com/
Author: CAPS Sprinklers & Drainage
Description: Custom multi-page theme for CAPS Sprinklers & Drainage (Montgomery & Lake Conroe, TX). Home, About, Services, Gallery and Contact templates.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: caps
*/

/* Base design styles live in assets/css/main.css.
   Everything below is additions for the multi-page layout. */

/* ---------- Header: mobile menu + current page ---------- */
.header { position: relative; }
.header nav a[aria-current="page"] { color: var(--red); }
.menu-toggle { display: none; }

@media (width <= 900px) {
  .menu-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 6px;
    width: 48px; height: 48px; padding: 0 12px; background: none;
    border: 1px solid #aeb7c0; border-radius: 2px; cursor: pointer;
  }
  .menu-toggle span { display: block; height: 2px; background: var(--navy); }
  .header.is-open nav {
    display: flex; flex-direction: column; gap: 0; position: absolute; z-index: 20;
    top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid #dce1e6;
    padding: 8px 22px 20px; box-shadow: 0 18px 30px #071a3218;
  }
  .header.is-open nav a { padding: 16px 0; border-bottom: 1px solid #eceff2; font-size: 15px; }
  .header.is-open nav a:last-child { border-bottom: 0; }
}

/* ---------- Inner page hero ---------- */
.page-hero { background: var(--cream); padding: 90px 8vw 70px; }
.page-hero h1 { max-width: 980px; margin-bottom: 22px; font-size: clamp(46px, 5.6vw, 84px); }
.page-hero .intro { max-width: 680px; color: #4b5864; font-size: 19px; line-height: 1.65; margin-bottom: 0; }

/* ---------- Services page: detail rows ---------- */
.svc-detail { border-top: 1px solid #cbd2d8; }
.svc { display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; padding: 52px 0; border-bottom: 1px solid #cbd2d8; scroll-margin-top: 24px; }
.svc h2 { margin: 0; color: var(--navy); font-size: clamp(30px, 3.2vw, 46px); letter-spacing: -.04em; line-height: 1.05; }
.svc p { color: #46525e; font-size: 18px; line-height: 1.7; max-width: 640px; }
.svc p:last-of-type { margin-bottom: 0; }
.svc .text-link { display: inline-block; margin-top: 22px; color: var(--red); font-size: 13px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; border-bottom: 2px solid var(--lime); padding-bottom: 3px; }
.services-page .warranty { margin-top: 0; }

/* ---------- Gallery ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.gallery-grid figure { margin: 0; overflow: hidden; background: var(--cream); }
.gallery-grid img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gallery-content .wp-block-gallery { gap: 14px; }
.gallery-content img { max-width: 100%; height: auto; }
.gallery-content > * + * { margin-top: 24px; }

/* ---------- Contact ---------- */
.contact-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.form-missing { padding: 18px 20px; border-left: 4px solid var(--red); background: #fdeced; color: var(--navy); line-height: 1.55; }
.menu-toggle:focus-visible, .button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* ---------- Built-in request form (/contact/) ---------- */
.request-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.request-form .full { grid-column: 1 / -1; }
.request-form label { display: block; margin-bottom: 8px; color: var(--navy); font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.request-form input, .request-form select, .request-form textarea {
  width: 100%; min-height: 54px; padding: 14px 16px; background: #fff; color: var(--ink);
  border: 1px solid #aeb7c0; border-radius: 2px; font: inherit; font-size: 16px;
}
.request-form textarea { min-height: 150px; resize: vertical; }
.request-form input:focus, .request-form select:focus, .request-form textarea:focus { outline: 3px solid var(--blue); outline-offset: 2px; }
.request-form button { border: 0; cursor: pointer; font-family: inherit; }
.request-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { padding: 18px 20px; margin-bottom: 28px; border-left: 4px solid var(--lime); background: #eef9e8; color: var(--navy); font-size: 16px; line-height: 1.55; }
.form-note.error { border-left-color: var(--red); background: #fdeced; }

/* ---------- Formidable form, restyled to match the site ----------
   Works on any page that contains the Formidable shortcode, with no special template. Every rule starts with
   #frm_form_1_container (Formidable's own wrapper ID for form #1). An ID outranks Formidable's generated
   class-only selectors no matter which stylesheet loads last. */
#frm_form_1_container {
  --font: Arial, Helvetica, sans-serif;
  --font-size: 12px;
  --weight: 900;
  --label-color: var(--navy);
  --label-padding: 0 0 8px 0;
  --required-color: var(--red);
  --field-font-size: 16px;
  --field-height: 54px;
  --field-pad: 14px 16px;
  --field-margin: 20px;
  --field-weight: normal;
  --text-color: var(--ink);
  --bg-color: #fff;
  --bg-color-active: #fff;
  --border-color: #aeb7c0;
  --border-color-active: var(--blue);
  --border-radius: 2px;
  --text-color-disabled: #8a95a0;
  --border-color-error: var(--red);
  --text-color-error: var(--ink);
  --error-bg: #fdeced;
  --error-border: var(--red);
  --error-text: var(--navy);
  --success-bg-color: #eef9e8;
  --success-border-color: var(--lime);
  --success-text-color: var(--navy);
  --success-font-size: 16px;
  max-width: 100%;
}
#frm_form_1_container .frm_form_fields > fieldset { padding: 0; font-family: Arial, Helvetica, sans-serif; }
#frm_form_1_container .frm_fields_container { column-gap: 20px; }

/* Labels */
#frm_form_1_container .frm_primary_label {
  color: var(--navy); font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  padding: 0 0 8px; font-family: Arial, Helvetica, sans-serif;
}
#frm_form_1_container .frm_required { color: var(--red); }

/* Inputs, select, textarea */
#frm_form_1_container input[type=text],
#frm_form_1_container input[type=email],
#frm_form_1_container input[type=tel],
#frm_form_1_container input[type=number],
#frm_form_1_container select,
#frm_form_1_container textarea {
  width: 100%; min-height: 54px; padding: 14px 16px; background: #fff; color: var(--ink);
  border: 1px solid #aeb7c0; border-radius: 2px; box-shadow: none;
  font: 16px/1.3 Arial, Helvetica, sans-serif;
}
#frm_form_1_container textarea { min-height: 150px; resize: vertical; }

/* Focus: same blue ring as the rest of the site */
#frm_form_1_container .form-field input:not([type=file]):not([type=range]):not([readonly]):focus,
#frm_form_1_container select:focus,
#frm_form_1_container .form-field textarea:focus {
  background: #fff; border-color: #aeb7c0 !important; box-shadow: none !important;
  outline: 3px solid var(--blue); outline-offset: 2px;
}

/* Field errors */
#frm_form_1_container .frm_blank_field input,
#frm_form_1_container .frm_blank_field select,
#frm_form_1_container .frm_blank_field textarea,
#frm_form_1_container .frm_form_field :invalid { border-color: var(--red); background: #fff; color: var(--ink); }
#frm_form_1_container .frm_form_field .frm_error {
  margin-top: 8px; color: var(--red); font: 700 14px/1.4 Arial, Helvetica, sans-serif;
}

/* Success + form-level error messages (match the notes used elsewhere on the site) */
#frm_form_1_container .frm_message,
#frm_form_1_container .frm_error_style {
  margin: 0 0 28px; padding: 18px 20px; border: 0; border-radius: 0;
  border-left: 4px solid var(--lime); background: #eef9e8; color: var(--navy);
  font-size: 16px; line-height: 1.55;
}
#frm_form_1_container .frm_message p { color: var(--navy); margin: 0; }
#frm_form_1_container .frm_error_style { border-left-color: var(--red); background: #fdeced; }

/* Submit button = the site's red button */
#frm_form_1_container .frm_submit { margin: 0; }
#frm_form_1_container .frm_submit button.frm_button_submit,
#frm_form_1_container .frm_submit input[type=submit] {
  display: inline-flex; align-items: center; justify-content: center; gap: 24px;
  min-height: 58px; margin: 0; padding: 0 25px; border: 0; border-radius: 2px;
  background: var(--red); color: #fff; box-shadow: 0 12px 25px #e30b1326;
  font: 900 12px/1 Arial, Helvetica, sans-serif; letter-spacing: .09em; text-transform: uppercase;
  cursor: pointer; transition: transform .2s;
}
#frm_form_1_container .frm_submit button.frm_button_submit::after { content: "↗"; font-size: 14px; }
#frm_form_1_container .frm_submit button.frm_button_submit:hover,
#frm_form_1_container .frm_submit input[type=submit]:hover {
  background: var(--red); color: #fff; border: 0; transform: translateY(-2px);
}
#frm_form_1_container .frm_submit button.frm_button_submit:focus-visible,
#frm_form_1_container .frm_submit input[type=submit]:focus-visible {
  background: var(--red); color: #fff; outline: 3px solid var(--blue); outline-offset: 2px;
}
#frm_form_1_container .frm_loading_form .frm_button_submit { background: var(--red); }

/* Spam honeypot: keep it off-screen if Formidable's own rule isn't loaded */
#frm_form_1_container #frm_field_13_container,
#frm_form_1_container .frm_form_field:has(> input.frm_verify) { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.contact-info { background: var(--cream); padding: 40px; }
.contact-info h2 { margin: 0 0 24px; color: var(--navy); font-size: 28px; letter-spacing: -.03em; }
.contact-info dl { margin: 0; }
.contact-info dt { margin-top: 22px; color: var(--red); font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.contact-info dd { margin: 6px 0 0; color: var(--navy); font-size: 19px; line-height: 1.5; }
.contact-info dd a { border-bottom: 2px solid var(--lime); }
.contact-info small { display: block; margin-top: 28px; color: #5d6874; font-size: 14px; line-height: 1.6; }

/* ---------- Generic page / 404 ---------- */
.entry { max-width: 820px; font-size: 18px; line-height: 1.75; }
.entry h2, .entry h3 { color: var(--navy); letter-spacing: -.03em; }

@media (width <= 900px) {
  .page-hero { padding: 60px 24px 48px; }
  .svc { grid-template-columns: 1fr; gap: 18px; padding: 38px 0; }
  .contact-layout { grid-template-columns: 1fr; }
  .request-form { grid-template-columns: 1fr; }
  .contact-info { padding: 28px; }
  .page-hero h1 { font-size: 44px; }
}