/*
Theme Name: PEI Construction
Theme URI: https://pei.construction
Author: Gary Hunt
Author URI: https://pei.construction
Description: Custom theme for Precision Exteriors Inc (PEI). Includes responsive header, services nav, CTA sections, and footer.
Version: 1.0.0
Text Domain: pei
*/

:root {
  --primary: #A3783C;
  --secondary: #171717;
  --grey: #6E777D;
  --accent: #E1E6E1;
  --success: #198754;
  --info: #A3783C;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #212529;
}

/* Typography */
body{
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--secondary);
  line-height: 1.6;
}

.bg-primary{
background:var(--primary)!important;
}
h1,h2,h3,h4{
  font-family: "Cormorant", Georgia, "Times New Roman", serif;
  letter-spacing: .2px;
  color: var(--secondary);
}

/* Header tweaks */
.header-divider{ border-left: 1px solid var(--grey); }
.contact-icon{ width:20px; height:20px; display:inline-block; }

/* Mobile drawer */
#side-drawer{
  position: fixed; top:0; right:-100%;
  width:80%; max-width:420px; height:100%;
  background: #fff; box-shadow:-2px 0 16px rgba(0,0,0,.2);
  transition:right .3s ease; z-index:1050;
}
#side-drawer.open{ right:0; }
#side-drawer header h2{ font-weight:700; color: var(--secondary); }
#side-drawer-button{ background:transparent; border:0; padding:.25rem .5rem; }
#side-drawer-button hr{ width:28px; height:2px; background: var(--secondary); border:0; margin:6px 0; border-radius:2px; }

/* CTA */
.btn.quote-btn{
  border-width:2px; font-weight:700;
  border-color: var(--primary); color:#fff; background: var(--primary);
}
.btn.quote-btn:hover{
  filter: brightness(0.9);
}

/* Footer */
footer.footer-border-top{ border-top:4px solid var(--primary); }
footer{ background: var(--secondary); color: #fff; }
footer a.contact-link{ color:#fff; }
footer table.table-dark td,
footer table.table-dark th{ color:#fff; }

/* Bottom phone pill */
.bottom-phone{
  /* rgba(163, 120, 60, .35) from #A3783C */
  box-shadow: 0 6px 22px rgba(163,120,60,.35);
  background: var(--primary);
  color: #fff;
}
.bottom-phone a{ gap:.5rem; font-weight:700; color:#fff; }

/* Utilities */
.img-fluid{ max-width:100%; height:auto; }
.picture-cover img{ object-fit:cover; width:100%; height:100%; }

/* Accessibility helpers */
a:focus-visible,
button:focus-visible{
  outline:3px solid var(--primary); outline-offset:2px;
}

/* WordPress core alignment */
.alignwide{ max-width:1100px; margin-left:auto; margin-right:auto; }
.alignfull{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
.wp-caption{ max-width:100%; }

@media (prefers-reduced-motion:reduce) {
    .nav-link {
        transition: none
    }
}

.nav-link:focus,.nav-link:hover {
    color: var(--bs-nav-link-hover-color)
}

.nav-link:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .25rem #0d6efd40
}

.nav-link.disabled,.nav-link:disabled {
    color: var(--bs-nav-link-disabled-color);
    pointer-events: none;
    cursor: default
}

.nav-tabs {
    --bs-nav-tabs-border-width: var(--bs-border-width);
    --bs-nav-tabs-border-color: var(--bs-border-color);
    --bs-nav-tabs-border-radius: var(--bs-border-radius);
    --bs-nav-tabs-link-hover-border-color: var(--bs-secondary-bg) var(--bs-secondary-bg) var(--bs-border-color);
    --bs-nav-tabs-link-active-color: var(--bs-emphasis-color);
    --bs-nav-tabs-link-active-bg: var(--bs-body-bg);
    --bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg);
    border-bottom: var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color)
}

.nav-tabs .nav-link {
    margin-bottom: calc(-1 * var(--bs-nav-tabs-border-width));
    border: var(--bs-nav-tabs-border-width) solid transparent;
    border-top-left-radius: var(--bs-nav-tabs-border-radius);
    border-top-right-radius: var(--bs-nav-tabs-border-radius)
}

.nav-tabs .nav-link:focus,.nav-tabs .nav-link:hover {
    isolation: isolate;
    border-color: var(--bs-nav-tabs-link-hover-border-color)
}

.nav-tabs .nav-item.show .nav-link,.nav-tabs .nav-link.active {
    color: var(--bs-nav-tabs-link-active-color);
    background-color: var(--bs-nav-tabs-link-active-bg);
    border-color: var(--bs-nav-tabs-link-active-border-color)
}

.nav-tabs .dropdown-menu {
    margin-top: calc(-1 * var(--bs-nav-tabs-border-width));
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.nav-pills {
    --bs-nav-pills-border-radius: var(--bs-border-radius);
    --bs-nav-pills-link-active-color: #fff;
    --bs-nav-pills-link-active-bg: #0d6efd
}

.nav-pills .nav-link {
    border-radius: var(--bs-nav-pills-border-radius)
}

.nav-pills .nav-link.active,.nav-pills .show>.nav-link {
    color: var(--bs-nav-pills-link-active-color);
    background-color: var(--bs-nav-pills-link-active-bg)
}

.nav-underline {
    --bs-nav-underline-gap: 1rem;
    --bs-nav-underline-border-width: .125rem;
    --bs-nav-underline-link-active-color: var(--bs-emphasis-color);
    gap: var(--bs-nav-underline-gap)
}

.nav-underline .nav-link {
    padding-right: 0;
    padding-left: 0;
    border-bottom: var(--bs-nav-underline-border-width) solid transparent
}

.nav-underline .nav-link:focus,.nav-underline .nav-link:hover {
    border-bottom-color: currentcolor
}

.nav-underline .nav-link.active,.nav-underline .show>.nav-link {
    font-weight: 700;
    color: var(--bs-nav-underline-link-active-color);
    border-bottom-color: currentcolor
}

.nav-fill .nav-item,.nav-fill>.nav-link {
    flex: 1 1 auto;
    text-align: center
}

.nav-justified .nav-item,.nav-justified>.nav-link {
    flex-basis: 0;
    flex-grow: 1;
    text-align: center
}

.nav-fill .nav-item .nav-link,.nav-justified .nav-item .nav-link {
    width: 100%
}

.tab-content>.tab-pane {
    display: none
}

.tab-content>.active {
    display: block
}

.navbar {
    --bs-navbar-padding-x: 0;
    --bs-navbar-padding-y: .5rem;
    --bs-navbar-color: rgba(var(--bs-emphasis-color-rgb), .65);
    --bs-navbar-hover-color: rgba(var(--bs-emphasis-color-rgb), .8);
    --bs-navbar-disabled-color: rgba(var(--bs-emphasis-color-rgb), .3);
    --bs-navbar-active-color: rgba(var(--bs-emphasis-color-rgb), 1);
    --bs-navbar-brand-padding-y: .3125rem;
    --bs-navbar-brand-margin-end: 1rem;
    --bs-navbar-brand-font-size: 1.25rem;
    --bs-navbar-brand-color: rgba(var(--bs-emphasis-color-rgb), 1);
    --bs-navbar-brand-hover-color: rgba(var(--bs-emphasis-color-rgb), 1);
    --bs-navbar-nav-link-padding-x: .5rem;
    --bs-navbar-toggler-padding-y: .25rem;
    --bs-navbar-toggler-padding-x: .75rem;
    --bs-navbar-toggler-font-size: 1.25rem;
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    --bs-navbar-toggler-border-color: rgba(var(--bs-emphasis-color-rgb), .15);
    --bs-navbar-toggler-border-radius: var(--bs-border-radius);
    --bs-navbar-toggler-focus-width: .25rem;
    --bs-navbar-toggler-transition: box-shadow .15s ease-in-out;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: var(--bs-navbar-padding-y) var(--bs-navbar-padding-x)
}

.navbar>.container,.navbar>.container-fluid,.navbar>.container-lg,.navbar>.container-md,.navbar>.container-sm,.navbar>.container-xl,.navbar>.container-xxl {
    display: flex;
    flex-wrap: inherit;
    align-items: center;
    justify-content: space-between
}

.navbar-brand {
    padding-top: var(--bs-navbar-brand-padding-y);
    padding-bottom: var(--bs-navbar-brand-padding-y);
    margin-right: var(--bs-navbar-brand-margin-end);
    font-size: var(--bs-navbar-brand-font-size);
    color: var(--bs-navbar-brand-color);
    text-decoration: none;
    white-space: nowrap
}

.navbar-brand:focus,.navbar-brand:hover {
    color: var(--bs-navbar-brand-hover-color)
}

.navbar-nav {
    --bs-nav-link-padding-x: 0;
    --bs-nav-link-padding-y: .5rem;
    --bs-nav-link-font-weight: ;
    --bs-nav-link-color: var(--bs-navbar-color);
    --bs-nav-link-hover-color: var(--bs-navbar-hover-color);
    --bs-nav-link-disabled-color: var(--bs-navbar-disabled-color);
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none
}

.navbar-nav .nav-link.active,.navbar-nav .nav-link.show {
    color: var(--bs-navbar-active-color)
}

.navbar-nav .dropdown-menu {
    position: static
}

.navbar-text {
    padding-top: .5rem;
    padding-bottom: .5rem;
    color: var(--bs-navbar-color)
}

.navbar-text a,.navbar-text a:focus,.navbar-text a:hover {
    color: var(--bs-navbar-active-color)
}

.navbar-collapse {
    flex-basis: 100%;
    flex-grow: 1;
    align-items: center
}

.navbar-toggler {
    padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
    font-size: var(--bs-navbar-toggler-font-size);
    line-height: 1;
    color: var(--bs-navbar-color);
    background-color: transparent;
    border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);
    border-radius: var(--bs-navbar-toggler-border-radius);
    transition: var(--bs-navbar-toggler-transition)
}

@media (prefers-reduced-motion:reduce) {
    .navbar-toggler {
        transition: none
    }
}

.navbar-toggler:hover {
    text-decoration: none
}

.navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: 0 0 0 var(--bs-navbar-toggler-focus-width)
}

.navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    background-image: var(--bs-navbar-toggler-icon-bg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%
}

.navbar-nav-scroll {
    max-height: var(--bs-scroll-height,75vh);
    overflow-y: auto
}

@media (min-width: 576px) {
    .navbar-expand-sm {
        flex-wrap:nowrap;
        justify-content: flex-start
    }

    .navbar-expand-sm .navbar-nav {
        flex-direction: row
    }

    .navbar-expand-sm .navbar-nav .dropdown-menu {
        position: absolute
    }

    .navbar-expand-sm .navbar-nav .nav-link {
        padding-right: var(--bs-navbar-nav-link-padding-x);
        padding-left: var(--bs-navbar-nav-link-padding-x)
    }

    .navbar-expand-sm .navbar-nav-scroll {
        overflow: visible
    }

    .navbar-expand-sm .navbar-collapse {
        display: flex!important;
        flex-basis: auto
    }

    .navbar-expand-sm .navbar-toggler {
        display: none
    }

    .navbar-expand-sm .offcanvas {
        position: static;
        z-index: auto;
        flex-grow: 1;
        width: auto!important;
        height: auto!important;
        visibility: visible!important;
        background-color: transparent!important;
        border: 0!important;
        transform: none!important;
        transition: none
    }

    .navbar-expand-sm .offcanvas .offcanvas-header {
        display: none
    }

    .navbar-expand-sm .offcanvas .offcanvas-body {
        display: flex;
        flex-grow: 0;
        padding: 0;
        overflow-y: visible
    }
}

@media (min-width: 768px) {
    .navbar-expand-md {
        flex-wrap:nowrap;
        justify-content: flex-start
    }

    .navbar-expand-md .navbar-nav {
        flex-direction: row
    }

    .navbar-expand-md .navbar-nav .dropdown-menu {
        position: absolute
    }

    .navbar-expand-md .navbar-nav .nav-link {
        padding-right: var(--bs-navbar-nav-link-padding-x);
        padding-left: var(--bs-navbar-nav-link-padding-x)
    }

    .navbar-expand-md .navbar-nav-scroll {
        overflow: visible
    }

    .navbar-expand-md .navbar-collapse {
        display: flex!important;
        flex-basis: auto
    }

    .navbar-expand-md .navbar-toggler {
        display: none
    }

    .navbar-expand-md .offcanvas {
        position: static;
        z-index: auto;
        flex-grow: 1;
        width: auto!important;
        height: auto!important;
        visibility: visible!important;
        background-color: transparent!important;
        border: 0!important;
        transform: none!important;
        transition: none
    }

    .navbar-expand-md .offcanvas .offcanvas-header {
        display: none
    }

    .navbar-expand-md .offcanvas .offcanvas-body {
        display: flex;
        flex-grow: 0;
        padding: 0;
        overflow-y: visible
    }
}

@media (min-width: 992px) {
    .navbar-expand-lg {
        flex-wrap:nowrap;
        justify-content: flex-start
    }

    .navbar-expand-lg .navbar-nav {
        flex-direction: row
    }

    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: absolute
    }

    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: var(--bs-navbar-nav-link-padding-x);
        padding-left: var(--bs-navbar-nav-link-padding-x)
    }

    .navbar-expand-lg .navbar-nav-scroll {
        overflow: visible
    }

    .navbar-expand-lg .navbar-collapse {
        display: flex!important;
        flex-basis: auto
    }

    .navbar-expand-lg .navbar-toggler {
        display: none
    }

    .navbar-expand-lg .offcanvas {
        position: static;
        z-index: auto;
        flex-grow: 1;
        width: auto!important;
        height: auto!important;
        visibility: visible!important;
        background-color: transparent!important;
        border: 0!important;
        transform: none!important;
        transition: none
    }

    .navbar-expand-lg .offcanvas .offcanvas-header {
        display: none
    }

    .navbar-expand-lg .offcanvas .offcanvas-body {
        display: flex;
        flex-grow: 0;
        padding: 0;
        overflow-y: visible
    }
}

@media (min-width: 1200px) {
    .navbar-expand-xl {
        flex-wrap:nowrap;
        justify-content: flex-start
    }

    .navbar-expand-xl .navbar-nav {
        flex-direction: row
    }

    .navbar-expand-xl .navbar-nav .dropdown-menu {
        position: absolute
    }

    .navbar-expand-xl .navbar-nav .nav-link {
        padding-right: var(--bs-navbar-nav-link-padding-x);
        padding-left: var(--bs-navbar-nav-link-padding-x)
    }

    .navbar-expand-xl .navbar-nav-scroll {
        overflow: visible
    }

    .navbar-expand-xl .navbar-collapse {
        display: flex!important;
        flex-basis: auto
    }

    .navbar-expand-xl .navbar-toggler {
        display: none
    }

    .navbar-expand-xl .offcanvas {
        position: static;
        z-index: auto;
        flex-grow: 1;
        width: auto!important;
        height: auto!important;
        visibility: visible!important;
        background-color: transparent!important;
        border: 0!important;
        transform: none!important;
        transition: none
    }

    .navbar-expand-xl .offcanvas .offcanvas-header {
        display: none
    }

    .navbar-expand-xl .offcanvas .offcanvas-body {
        display: flex;
        flex-grow: 0;
        padding: 0;
        overflow-y: visible
    }
}

@media (min-width: 1400px) {
    .navbar-expand-xxl {
        flex-wrap:nowrap;
        justify-content: flex-start
    }

    .navbar-expand-xxl .navbar-nav {
        flex-direction: row
    }

    .navbar-expand-xxl .navbar-nav .dropdown-menu {
        position: absolute
    }

    .navbar-expand-xxl .navbar-nav .nav-link {
        padding-right: var(--bs-navbar-nav-link-padding-x);
        padding-left: var(--bs-navbar-nav-link-padding-x)
    }

    .navbar-expand-xxl .navbar-nav-scroll {
        overflow: visible
    }

    .navbar-expand-xxl .navbar-collapse {
        display: flex!important;
        flex-basis: auto
    }

    .navbar-expand-xxl .navbar-toggler {
        display: none
    }

    .navbar-expand-xxl .offcanvas {
        position: static;
        z-index: auto;
        flex-grow: 1;
        width: auto!important;
        height: auto!important;
        visibility: visible!important;
        background-color: transparent!important;
        border: 0!important;
        transform: none!important;
        transition: none
    }

    .navbar-expand-xxl .offcanvas .offcanvas-header {
        display: none
    }

    .navbar-expand-xxl .offcanvas .offcanvas-body {
        display: flex;
        flex-grow: 0;
        padding: 0;
        overflow-y: visible
    }
}

.navbar-expand {
    flex-wrap: nowrap;
    justify-content: flex-start
}

.navbar-expand .navbar-nav {
    flex-direction: row
}

.navbar-expand .navbar-nav .dropdown-menu {
    position: absolute
}

.navbar-expand .navbar-nav .nav-link {
    padding-right: var(--bs-navbar-nav-link-padding-x);
    padding-left: var(--bs-navbar-nav-link-padding-x)
}

.navbar-expand .navbar-nav-scroll {
    overflow: visible
}

.navbar-expand .navbar-collapse {
    display: flex!important;
    flex-basis: auto
}

.navbar-expand .navbar-toggler {
    display: none
}

.navbar-expand .offcanvas {
    position: static;
    z-index: auto;
    flex-grow: 1;
    width: auto!important;
    height: auto!important;
    visibility: visible!important;
    background-color: transparent!important;
    border: 0!important;
    transform: none!important;
    transition: none
}

.navbar-expand .offcanvas .offcanvas-header {
    display: none
}

.navbar-expand .offcanvas .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible
}

.navbar-dark,.navbar[data-bs-theme=dark] {
    --bs-navbar-color: rgba(255, 255, 255, .55);
    --bs-navbar-hover-color: rgba(255, 255, 255, .75);
    --bs-navbar-disabled-color: rgba(255, 255, 255, .25);
    --bs-navbar-active-color: #fff;
    --bs-navbar-brand-color: #fff;
    --bs-navbar-brand-hover-color: #fff;
    --bs-navbar-toggler-border-color: rgba(255, 255, 255, .1);
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}

[data-bs-theme=dark] .navbar-toggler-icon {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}

/* ===============================
   Contact Form 7 – PEI theme styles
   Target: the form container with class .cf7-tailwind
   =============================== */

.cf7-tailwind{
  /* layout */
  display:grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem 1.25rem;

  /* card look */
  background: var(--light);
  color: var(--secondary);
  border: 1px solid var(--accent);
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* each field wrapper */
.cf7-tailwind .relative{ grid-column: span 12; }

/* go 2-up on >=768px */
@media (min-width: 768px){
  .cf7-tailwind .relative{ grid-column: span 6; }
  /* make message + submit full width as the last two blocks */
  .cf7-tailwind .relative:nth-last-of-type(2),
  .cf7-tailwind .relative:last-of-type{ grid-column: 1 / -1; }
}

/* labels */
.cf7-tailwind label{
  display:block;
  margin-bottom: .375rem;
  font-weight: 600;
  font-size: .95rem;
  color: var(--secondary);
}
.cf7-tailwind label .font-normal{ font-weight: 400; color: var(--grey); }

/* base controls */
.cf7-tailwind input[type="text"],
.cf7-tailwind input[type="email"],
.cf7-tailwind input[type="tel"],
.cf7-tailwind input[type="number"],
.cf7-tailwind select,
.cf7-tailwind textarea{
  appearance: none;
  width: 100%;
  background: #fff;
  color: var(--secondary);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: .625rem .75rem;
  line-height: 1.4;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

/* heights */
.cf7-tailwind input[type="text"],
.cf7-tailwind input[type="email"],
.cf7-tailwind input[type="tel"],
.cf7-tailwind input[type="number"],
.cf7-tailwind select{ height: 42px; }
.cf7-tailwind textarea{ min-height: 140px; resize: vertical; }

/* placeholders */
.cf7-tailwind ::placeholder{ color: color-mix(in srgb, var(--grey) 70%, white); opacity: 1; }
/* Fallback for browsers without color-mix */
@supports not (color: color-mix(in srgb, black, white)){
  .cf7-tailwind ::placeholder{ color: #9aa2a7; }
}

/* focus styles (accessible) */
.cf7-tailwind input:focus,
.cf7-tailwind select:focus,
.cf7-tailwind textarea:focus{
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(163, 120, 60, .25); /* primary ring */
}

/* hover */
.cf7-tailwind input:hover,
.cf7-tailwind select:hover,
.cf7-tailwind textarea:hover{
  border-color: color-mix(in srgb, var(--primary) 40%, var(--accent));
}
@supports not (color: color-mix(in srgb, black, white)){
  .cf7-tailwind input:hover,
  .cf7-tailwind select:hover,
  .cf7-tailwind textarea:hover{ border-color: #cdbfa9; }
}

/* select arrow */
.cf7-tailwind select{
  background-image:
    linear-gradient(45deg, transparent 50%, var(--grey) 50%),
    linear-gradient(135deg, var(--grey) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px),
    calc(100% - 2.25rem) 50%;
  background-size: 6px 6px, 6px 6px, 1px 60%;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

/* error state from CF7 */
.cf7-tailwind .wpcf7-not-valid{
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, .15);
}
.cf7-tailwind .wpcf7-not-valid-tip{
  display:block;
  margin-top:.35rem;
  font-size: .85rem;
  color: var(--danger);
}

/* Submit button */
.cf7-tailwind .wpcf7-submit{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .6rem 1.25rem;
  font-weight: 700;
  border-radius: 999px;
  border: 2px solid var(--primary);
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  transition: transform .12s ease, background-color .12s ease, border-color .12s ease;
}
.cf7-tailwind .wpcf7-submit:hover{
  transform: translateY(-1px);
  background: #8E6A35; /* slightly darker than --primary */
  border-color: #8E6A35;
}
.cf7-tailwind .wpcf7-submit:active{ transform: translateY(0); }
.cf7-tailwind .wpcf7-submit:disabled{
  opacity: .6;
  cursor: not-allowed;
}

/* spinner next to the button */
.cf7-tailwind .wpcf7-spinner{
  margin-left:.5rem;
  width: 18px; height: 18px;
  border: 2px solid var(--accent);
  border-left-color: var(--primary);
}

/* CF7 response message */
.wpcf7-form .wpcf7-response-output{
  margin-top: 1rem !important;
  border-radius: 10px;
  padding: .75rem 1rem;
  border-width: 2px;
  font-weight: 600;
}

/* Style by status (CF7 sets data-status on form and/or classes on the response element) */
.wpcf7-form[data-status="sent"] .wpcf7-response-output,
.wpcf7 .wpcf7-mail-sent-ok{
  color: #0a3622;
  background: #d1e7dd;
  border-color: var(--success);
}
.wpcf7-form[data-status="invalid"] .wpcf7-response-output,
.wpcf7 .wpcf7-validation-errors{
  color:#664d03;
  background:#fff3cd;
  border-color: var(--warning);
}
.wpcf7-form[data-status="failed"] .wpcf7-response-output,
.wpcf7 .wpcf7-mail-sent-ng{
  color:#58151c;
  background:#f8d7da;
  border-color: var(--danger);
}

/* hide CF7 hidden fieldset */
.hidden-fields-container{ display:none; }

/* optional: tighten default <p> spacing inside fields */
.cf7-tailwind p{ margin: 0; }

/* Make the "Get a Quote" button style reusable (if needed elsewhere) */
.btn-primary-pei{
  border:2px solid var(--primary);
  background: var(--primary);
  color:#fff;
  border-radius:999px;
  font-weight:700;
  padding:.6rem 1.25rem;
}
.btn-primary-pei:hover{
  background:#8E6A35; border-color:#8E6A35;
}
/* --- Fix misalignment in CF7 form --- */

/* 1) Kill extra <br> that CF7 (and your markup) insert around labels */
.cf7-tailwind label br,
.cf7-tailwind .relative > p > br{
  display:none !important;
}

/* 2) Make each field wrapper consistent */
.cf7-tailwind .relative{ grid-column: span 12; }
.cf7-tailwind .relative > p{
  display:grid;
  gap:.375rem;          /* space between label and control */
  margin:0;
}

/* 3) Two columns on md+ */
@media (min-width: 768px){
  .cf7-tailwind .relative{ grid-column: span 6; }

  /* Force the textarea row and the submit row to full width */
  .cf7-tailwind .relative:has(textarea),
  .cf7-tailwind .relative:has(.wpcf7-submit){
    grid-column: 1 / -1;
  }
}

/* 4) Optional: password-manager icon can push fields—hide it */
.cf7-tailwind [data-lastpass-icon-root]{
  display:none !important;
}