@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

/*
  Theme Name: TrustPAVE
  Author: Whetham Solutions
  Author URI: https://whethamsolutions.com
  Description: Child theme for trustpave.com — Professional Association of Vehicle Evaluators Inc. Use of this theme outside of this company's website is strictly prohibited.
  Template: ion
  Text Domain: trustpave
  Version: 1.0.0
*/


/* ==========================================================================
   ROOT VARIABLES
   ========================================================================== */

:root {

  /* GENERAL */
  --spacing:          clamp(50px, 3.90625vw, 75px);
  --radius:           4px;
  --transition:       all 0.3s ease;
  --transition--slow: all 0.6s ease;
  --transition--fast: all 0.15s ease;


  /* TYPOGRAPHY */
  --font:    "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --heading: var(--font);

  --font-size:        clamp(16px, 1.09375vw, 18px);
  --font-size--small: calc(var(--font-size) * 0.85);
  --font-size--large: calc(var(--font-size) * 1.15);

  --font-size--h1: clamp(40px, 4.17vw,  64px);
  --font-size--h2: clamp(30px, 2.8vw,   42px);
  --font-size--h3: clamp(24px, 2.1vw,   32px);
  --font-size--h4: clamp(20px, 1.6vw,   26px);
  --font-size--h5: clamp(18px, 1.4vw,   22px);
  --font-size--h6: clamp(16px, 1.1vw,   18px);

  --line-height:          1.7;
  --line-height--small:   1.4;
  --line-height--large:   1.9;
  --line-height--heading: 1.15;


  /* CONTAINER SIZING */
  --container-above--1600: 1450px;
  --container-above--1368: 1308px;


  /* THEME COLORS */
  --red:     #f26559;
  --blue:    #2b6bb0;
  --green:   #64bc46;
  --purple:  #6d44b8;
  --yellow:  #e6b21e;
  --orange:  #e67e22;
  --grey:    #a3a3a3;

  --text:    #1c1c1c;
  --dark:    #1c1c1c;   /* pg-title banner uses this */
  --light:   #eaeaea;
  --white:   #ffffff;

  --primary:   #64bc46;
  --secondary: #f26559;
  --primary--dark: #4a9b33;
  --primary--light: #a4ff85;   /* bright green — used anywhere green text/accent sits on a dark background */

  /* Neutral tints for distinguishing sections */
  --bg-subtle:       #f5f5f5;   /* slightly off-white for the mgmt section */

  /* Header-specific dark — one shade darker than pg-title */
  --header-bg:       #0a0a0a;
  --header-text:     #eaeaea;
  --header-text-dim: #a3a3a3;


  /* BUTTONS */
  --button-padding--top:           clamp(14px, 1vw,    18px);
  --button-padding--bottom:        clamp(14px, 1vw,    18px);
  --button-padding--left:          clamp(24px, 1.82vw, 34px);
  --button-padding--right:         clamp(24px, 1.82vw, 34px);
  --button-radius:                 4px;
  --button-text--casing:           none;
  --button-text--size:             var(--font-size);
  --button-text--weight:           600;
  --button-text--font:             var(--font);
  --button-text--colour:           #ffffff;
  --button-text--letter-spacing:   0.01em;
  --button-border-width:           2px;
  --button-background--primary:    var(--primary);
  --button-background--secondary:  var(--secondary);
  --button-background--ghost:      transparent;
  --button-hover--background:      var(--dark);
  --button-hover--color:           #ffffff;
  --button-hover--background-dark: #ffffff;
  --button-hover--color-dark:      var(--dark);


  /* FORM FIELDS */
  --form-field--border:         var(--grey);
  --form-field--padding-top:    clamp(12px, 0.9vw,  16px);
  --form-field--padding-bottom: var(--form-field--padding-top);
  --form-field--padding-left:   clamp(16px, 1.15vw, 22px);
  --form-field--padding-right:  var(--form-field--padding-left);
  --form-field--radius:         4px;


  /* FAQS */
  --faq-spacing:          clamp(20px, 1.56vw, 30px);
  --faq-line--width:      1px;
  --faq-line--color:      var(--light);
  --faq-open-close-width: clamp(20px, 1.56vw, 30px);


  /* HEADER — 0 because sticky header takes its own space naturally. */
  --header-adjustment: 0px;

  --logo-height:         clamp(44px, 4vw, 60px);
  --logo-height-compact: clamp(34px, 2.5vw, 42px);
  --header-py:           clamp(12px, 1vw, 16px);
  --header-py-compact:   clamp(6px, 0.6vw, 10px);

}


/* ==========================================================================
   BASE
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

body {
  background: var(--white);
  color: var(--text);
  font-family: var(--font);
  font-feature-settings: "ss01", "cv01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--primary);
  color: #ffffff;
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 2px;
}

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

hr {
  border: 0;
  border-top: 1px solid var(--light);
  margin: clamp(30px, 2vw, 45px) 0;
}


/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  color: var(--dark);
  font-family: var(--heading);
  letter-spacing: -0.01em;
}

h1, .elementor-heading-title.elementor-size-default[class*="h1"] { font-weight: 700; }
h2, .elementor-heading-title { font-weight: 700; }
h3 { font-weight: 600; }
h4, h5, h6 { font-weight: 600; }

h1 { letter-spacing: -0.02em; }

p, li { line-height: var(--line-height); }

strong, b { font-weight: 600; color: var(--dark); }


/* ==========================================================================
   LINKS — globally green, underline on hover. Card anchors excluded.

   CRITICAL: wrapped in :where() to give the whole rule ZERO specificity.
   Without this, this rule's specificity (0,4,1 on hover) was silently
   overriding every component-specific link rule in the file — meaning nav
   links, card anchors, and management list members all got the underline
   on hover even though we had `text-decoration: none` declared on them.
   With :where() the default treatment still applies to any plain link,
   but any class-based rule wins without needing !important.
   ========================================================================== */

:where(a:not(.elementor-button):not(.button):not(.block-link)) {
  color: var(--primary--dark);
  transition: var(--transition--fast);
  text-decoration: none;
}

:where(a:not(.elementor-button):not(.button):not(.block-link)):hover,
:where(a:not(.elementor-button):not(.button):not(.block-link)):focus {
  color: var(--primary--dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}


/* ==========================================================================
   HEADER — Dark (#0a0a0a), sticky via CSS (no .fixed-header class needed)
   Shrink-on-scroll still requires .header-active-on-scroll on the inner
   container so Ion's ion.js can toggle .active at 100px scroll.
   ========================================================================== */



   
.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: var(--header-bg);
  transition: box-shadow 0.25s ease;
}




/* WP admin bar offset */
body.admin-bar .elementor-location-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .elementor-location-header { top: 46px; }
}

.elementor-location-header > .e-con.e-parent {
  background: var(--header-bg);
  padding: var(--header-py) 0 !important;
  transition: padding 0.25s ease;
}

/* Shrink state when ion.js toggles .active past 100px scroll */
.elementor-location-header:has(.header-active-on-scroll.active) {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

.elementor-location-header > .e-con.header-active-on-scroll.active,
.elementor-location-header > .e-con.e-parent.header-active-on-scroll.active {
  padding: var(--header-py-compact) 0 !important;
}

.elementor-location-header {
    position: fixed;
    background: none !important;
    left: 0;
    right: 0;
    margin: auto;
    transition: all 0.3s;
}

.elementor-location-header {
  overflow-x: hidden;
}


.elementor-location-header > .e-con.e-parent {
    background-color: transparent;
    transition: all 0.3s;
    padding-left: 30px !important;
    padding-right: 30px !important;
}

.elementor-location-header.active > .e-con.e-parent {
    background-color: #0a0a0a;
}

.navigation:after {
    position: absolute;
    bottom: 0;
    left: clamp(67px, 5.21vw, 100px);
    background: #64BC46;
    content: "";
    display: block;
    width: calc(100% - clamp(67px, 5.21vw, 100px));
    height: clamp(5px, 0.36vw, 7px);
}
/* ==========================================================================
   NAVIGATION — Desktop
   Light text on dark header. Hover + current state = green block.
   ========================================================================== */

.navigation ul {
  gap: clamp(4px, 0.4vw, 8px);
  align-items: center;
}

.navigation ul > li:first-child:has(a > img) {
  margin-right: auto;
  display: flex;
  align-items: center;
}

.navigation ul > li:first-child > a {
  padding: 0;
  background: transparent !important;
}

.navigation ul > li:first-child > a > img {
  display: block;
  height: var(--logo-height);
  width: auto;
  transition: height 0.25s ease;
}

.header-active-on-scroll.active .navigation ul > li:first-child > a > img {
  height: var(--logo-height-compact);
}

.navigation a {
  color: var(--primary--light);   /* bright green on dark header (#a4ff85) */
  font-family: var(--font);
  font-size: clamp(14px, 0.94vw, 16px);
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 8px 14px;
  border-radius: var(--radius);
  display: inline-block;
  line-height: 1.4;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

/* Explicit no-underline for all nav link states (base + hover + focus).
   With :where() demoting the global rule this is no longer technically
   required but it's a cheap safety net against future cascade surprises. */
.navigation a:hover,
.navigation a:focus,
.navigation a:active {
  text-decoration: none;
}

/* Green-block hover + current state.
   Background: bright green (#a4ff85). Text: near-black (#1c1c1c).
   This pairing gives ~15:1 contrast ratio — well above AAA. */
.navigation li:not(:first-child) > a:hover,
.navigation li:not(:first-child) > a:focus,
.navigation li.current-menu-item > a,
.navigation li.current_page_item > a,
.navigation li.current-menu-parent > a {
  color: var(--dark);
  background: var(--primary--light);
  text-decoration: none;
}

.navigation li.current-menu-item > a,
.navigation li.current_page_item > a { font-weight: 600; }


/* Submenu dropdowns */
.navigation li ul {
  background: var(--white);
  border: 1px solid var(--light);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 6px;
  min-width: 220px;
  margin-top: 6px;
  gap: 2px;
  transform-origin: top center;
  transform: scaleY(0);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.navigation li:hover > ul,
.navigation li:focus-within > ul {
  transform: scaleY(1);
  opacity: 1;
}

.navigation li ul li { display: block; width: 100%; }

.navigation li ul a {
  display: block;
  padding: 10px 14px;
  width: 100%;
  font-size: 14px;
  color: var(--dark);
  background: transparent;
  border-radius: var(--radius);
}

.navigation li ul a:hover,
.navigation li ul a:focus,
.navigation li ul li.current-menu-item > a {
  background: var(--primary--light);
  color: var(--dark);
  text-decoration: none;
}


/* ==========================================================================
   NAVIGATION — Mobile
   ========================================================================== */

.mobile-navigation { align-items: center; }

.mobile-navigation li.mobile-logo a { display: block; padding: 0; }

.mobile-navigation li.mobile-logo img {
  display: block;
  height: clamp(36px, 10vw, 50px);
  width: auto;
}

.mobile-navigation li.mobile-button a {
  background: var(--primary);
  color: var(--white);
  border-radius: var(--radius);
  padding: 8px 12px;
  gap: 2px;
  text-align: center;
  min-width: 60px;
  transition: background 0.2s ease;
}

.mobile-navigation li.mobile-button a:hover,
.mobile-navigation li.mobile-button a:focus {
  background: var(--header-text);
  color: var(--header-bg);
}

.mobile-navigation li.mobile-button a:hover svg path,
.mobile-navigation li.mobile-button a:focus svg path {
  fill: var(--header-bg) !important;
}

.mobile-navigation li.mobile-button a:hover span,
.mobile-navigation li.mobile-button a:focus span {
  color: var(--header-bg);
}

.mobile-navigation li.mobile-button strong { display: block; margin-bottom: 2px; }

.mobile-navigation li.mobile-button svg,
.mobile-navigation li.mobile-button svg path { fill: var(--white) !important; }

.mobile-navigation li.mobile-button span {
  color: var(--white);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}


/* ==========================================================================
   PG-TITLE — Dark banner with white H1
   ========================================================================== */

.bg-light {
  background-color: #f9f9f9 !important;
}

.pave-member-band--title,
.pg-title.e-con {
  background: var(--dark);
  padding: clamp(70px, 9.375vw, 180px) 0 clamp(60px, 5vw, 95px) !important;
  border: 0;
}

.pave-member-band--title, .pg-title h1 {
    text-align: center;
}

.pg-title .elementor-widget-heading::after {
    right: 0;
    margin: auto;
}

.pg-title .elementor-heading-title,
.pg-title h1 {
  color: var(--white);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
}

.pg-title .elementor-widget-heading {
  position: relative;
  padding-bottom: clamp(18px, 1.5vw, 28px);
}

.pg-title .elementor-widget-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(48px, 5vw, 72px);
  height: 3px;
  background: var(--primary);
  border-radius: 2px;
}


/* ==========================================================================
   PG-SECTION — Main body content
   ========================================================================== */

.pg-section.e-con {
  background: var(--white);
  padding: var(--spacing) 0;
}

.pg-section h2,
.pg-section .elementor-widget-heading[data-widget_type="heading.default"] h2 {
  margin-top: clamp(28px, 2.2vw, 44px);
  margin-bottom: clamp(8px, 0.8vw, 14px);
  color: var(--dark);
}

.pg-section .elementor-widget:first-child h2,
.pg-section > .e-con-inner > .elementor-element:first-child h2 {
  margin-top: 0;
}

.pg-section h3 {
  margin-top: clamp(24px, 1.8vw, 36px);
  margin-bottom: clamp(8px, 0.6vw, 12px);
}

.pg-section p { margin: 0 0 clamp(16px, 1.2vw, 22px); }
.pg-section p:last-child { margin-bottom: 0; }

.pg-section ul,
.pg-section ol {
  margin: 0 0 clamp(16px, 1.2vw, 22px);
  padding-left: 0;
  list-style: none;
}

.pg-section ul > li,
.pg-section ol > li {
  position: relative;
  padding-left: 1.5em;
  margin: 0 0 clamp(8px, 0.6vw, 12px);
}

.pg-section ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 6px;
  height: 6px;
  background: var(--primary);
  border-radius: 50%;
  transform: translateY(-50%);
}

.pg-section ol { counter-reset: li; }
.pg-section ol > li { counter-increment: li; }

.pg-section ol > li::before {
  content: counter(li) ".";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--primary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.pg-section ul ul,
.pg-section ul ol,
.pg-section ol ul,
.pg-section ol ol {
  margin: clamp(6px, 0.5vw, 10px) 0 clamp(6px, 0.5vw, 10px);
  padding-left: 0;
}

.pg-section ul ul > li::before {
  background: var(--grey);
  width: 5px;
  height: 5px;
}

.pg-section li:last-child { margin-bottom: 0; }

.pg-section blockquote {
  border-left: 3px solid var(--primary);
  padding-left: clamp(16px, 1.2vw, 22px);
  margin: clamp(18px, 1.5vw, 28px) 0;
  color: var(--text);
  font-style: italic;
}

.pg-section a:not(.block-link):not(.elementor-button):not(.button) {
  text-decoration: underline;
  text-decoration-color: rgba(100, 188, 70, 0.35);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: var(--transition--fast);
}

.pg-section a:not(.block-link):not(.elementor-button):not(.button):hover,
.pg-section a:not(.block-link):not(.elementor-button):not(.button):focus {
  text-decoration-color: var(--primary);
  color: var(--primary--dark);
}


/* ==========================================================================
   BLOCK LINK CARDS — Membership page
   ========================================================================== */

.e-con-inner:has(> .elementor-widget-block_link) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(20px, 2vw, 30px);
  align-items: stretch;
}

.e-con-inner:has(> .elementor-widget-block_link) > .elementor-widget-block_link {
  width: 100%;
  max-width: none;
  height: 100%;
}

.block-link,
.block-link-wrapper {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--light);
  border-radius: 8px;
  overflow: hidden;
  height: 100%;
  color: var(--dark);
  text-decoration: none;
  transition: box-shadow 0.25s ease;
}

.block-link:hover,
.block-link:focus {
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(28, 28, 28, 0.08);
}

.block-link img,
.block-link-wrapper img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 16 / 10;
  background: var(--light);
}

.block-link .block-link-text,
.block-link-wrapper .block-link-text {
  padding: clamp(24px, 1.8vw, 32px);
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 0.8vw, 14px);
  flex: 1;
}

.block-link-heading {
  display: block;
  font-family: var(--heading);
  font-size: clamp(22px, 1.7vw, 28px);
  font-weight: 700;
  color: var(--dark);
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-decoration: none;
}

.block-link-subtext {
  display: block;
  color: var(--text);
  font-size: var(--font-size);
  line-height: 1.6;
  text-decoration: none;
}

.block-link .button.primary {
  align-self: flex-start;
  margin-top: auto;
  padding: var(--button-padding--top) var(--button-padding--right) var(--button-padding--bottom) var(--button-padding--left);
  background: var(--primary);
  color: var(--white);
  font-weight: 600;
  font-size: var(--font-size);
  letter-spacing: 0.01em;
  border-radius: var(--button-radius);
  text-decoration: none;
}


/* ==========================================================================
   PG-CONTENT / FAQS — stubs
   ========================================================================== */

.pg-content .pg-content-image img {
  display: block;
  border-radius: var(--radius);
  width: 100%;
  height: auto;
}

.pg-content .pg-content-text h2,
.pg-content .pg-content-text h3 { margin-top: 0; }

.pg-content .pg-content-button-group a { margin-top: clamp(14px, 1vw, 20px); }

.faqs .faq { padding: clamp(6px, 0.5vw, 10px) 0; }

.faqs .faq h3 {
  font-size: clamp(18px, 1.3vw, 22px);
  font-weight: 600;
  color: var(--dark);
  padding: clamp(8px, 0.6vw, 12px) 0;
  transition: color 0.2s ease;
}

.faqs .faq h3:hover { color: var(--primary); }
.faqs .faq.active h3 { color: var(--primary); }

.faqs .faq .faq-content {
  padding: 0 0 clamp(12px, 1vw, 18px) 0;
  color: var(--text);
  line-height: var(--line-height);
}


/* ==========================================================================
   ELEMENTOR FORMS
   ========================================================================== */

.elementor-form .elementor-field-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--dark);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

.elementor-form .elementor-field-label .elementor-mark-required,
.elementor-form .elementor-field-required .elementor-field-label::after {
  color: var(--secondary);
}

.elementor-form .elementor-field,
.elementor-form .elementor-field-textual,
.elementor-form select {
  background: var(--white) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.elementor-form .elementor-field:focus,
.elementor-form .elementor-field-textual:focus,
.elementor-form select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(100, 188, 70, 0.15);
  outline: none;
}

.elementor-form input[type="radio"],
.elementor-form input[type="checkbox"] {
  accent-color: var(--primary);
  width: 18px;
  height: 18px;
  margin-right: 8px;
  vertical-align: middle;
  cursor: pointer;
}

.elementor-form .elementor-field-subgroup label,
.elementor-form .elementor-field-type-radio label,
.elementor-form .elementor-field-type-checkbox label {
  display: inline-flex;
  align-items: center;
  margin-right: clamp(14px, 1vw, 20px);
  margin-bottom: 10px;
  cursor: pointer;
  font-weight: 400;
  color: var(--text);
}

.elementor-form fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

.elementor-form fieldset legend {
  font-size: 14px;
  font-weight: 500;
  color: var(--dark);
  margin-bottom: 6px;
  padding: 0;
}

.elementor-form .elementor-button {
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  text-transform: none !important;
}

.elementor-message.elementor-message-success {
  background: rgba(100, 188, 70, 0.1);
  color: var(--primary--dark);
  border: 1px solid var(--primary);
  padding: 14px 18px;
  border-radius: var(--radius);
}

.elementor-message.elementor-message-danger {
  background: rgba(242, 101, 89, 0.1);
  color: var(--secondary);
  border: 1px solid var(--secondary);
  padding: 14px 18px;
  border-radius: var(--radius);
}


/* ==========================================================================
   BUTTONS — hover polish
   ========================================================================== */

html .button,
html .elementor-button,
html .elementor-form .elementor-button {
  transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

html .button:hover,
html .elementor-button:hover,
html .elementor-form .elementor-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(28, 28, 28, 0.12);
}

html .button:active,
html .elementor-button:active {
  transform: translateY(0);
  box-shadow: none;
}


/* ==========================================================================
   FOOTER — Dark band
   ========================================================================== */

.elementor-location-footer > .e-con.e-parent {
  background: var(--dark);
  padding: clamp(30px, 2.5vw, 45px) 0 !important;
}

.elementor-location-footer p {
  color: var(--light);
  text-align: center;
  font-size: var(--font-size--small);
  margin: 0;
  letter-spacing: 0.01em;
  line-height: 1.7;
}

.elementor-location-footer a {
  color: var(--light);
  text-decoration: none;
  transition: color 0.2s ease;
}

.elementor-location-footer a:hover,
.elementor-location-footer a:focus {
  color: var(--primary--light);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.elementor-location-footer span {
  color: var(--grey);
  margin: 0 4px;
}

.elementor-location-footer .ion_link_separator { display: inline; }
.elementor-location-footer .ion_link { color: var(--grey); }

.elementor-location-footer .ion_link:hover,
.elementor-location-footer .ion_link:focus { color: var(--primary--light); }


/* ==========================================================================
   HERO — Home page full-viewport hero (.pave-hero)
   Full-width dark section. User adds background image via Elementor.
   Defaults to dark background so copy remains readable even without image.
   ========================================================================== */

.pave-hero.e-con.e-parent {
  /* Use min-height so content can grow if needed */
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  background: var(--dark);
  color: var(--white);
  /* !important here because Elementor generates per-element CSS that sets
     justify-content / align-items from the container widget settings, and
     without the explicit override the outer container was defaulting to
     flex-start and pushing the hero content toward the top of the viewport.
     We have to win over Elementor's inline-specificity rule, which is why
     !important is warranted here despite normally being avoided. */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  position: relative;
  overflow: hidden;
}

.pave-hero-inner.e-con {
  max-width: 900px;
  width: 100%;
  padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 40px);
  text-align: center;
}

/* Hero typography */
.pave-hero h1 {
  color: var(--white);
  margin: 15px 0 clamp(18px, 1.8vw, 28px);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.pave-hero .pave-hero-intro {
  color: var(--light);
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.65;
  margin: 0 auto clamp(10px, 1vw, 16px);
  max-width: 720px;
}

.pave-hero .pave-hero-tagline {
  color: var(--primary--light);
  font-size: clamp(14px, 0.9vw, 15px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 clamp(28px, 3vw, 44px);
}

.pave-hero .pave-hero-tagline strong {   color: var(--primary--light); font-weight: 600; }

/* Hero CTA row */
.pave-hero-ctas.e-con {
  justify-content: center;
  align-items: center;
  padding: 0;
}

/* Hero button base styling */
.pave-hero .elementor-widget-button .elementor-button {
  font-family: var(--font);
  font-weight: 600;
  font-size: clamp(14px, 1vw, 16px);
  letter-spacing: 0.02em;
  padding: 14px 28px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease,
              transform 200ms ease, box-shadow 200ms ease;
  text-decoration: none;
}

/* Primary CTA — filled green. Hover goes slightly darker, text stays white. */
.pave-hero .elementor-widget-button.pave-btn-primary .elementor-button,
.pave-hero .pave-btn-primary .elementor-button {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}

html .button.ghost, html .elementor-element.elementor-button-success .elementor-button {
    border-color: #FFF;
    color: #FFF;
}

.pave-hero .elementor-widget-button.pave-btn-primary .elementor-button:hover,
.pave-hero .elementor-widget-button.pave-btn-primary .elementor-button:focus,
.pave-hero .pave-btn-primary .elementor-button:hover,
.pave-hero .pave-btn-primary .elementor-button:focus {
  background: var(--primary--dark);
  border-color: var(--primary--dark);
  color: var(--white);
  box-shadow: 0 6px 18px rgba(100, 188, 70, 0.28);
}

/* Secondary CTA — outlined white. Hover inverts to white bg + dark text. */
.pave-hero .elementor-widget-button.pave-btn-outline .elementor-button,
.pave-hero .pave-btn-outline .elementor-button {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
}

.pave-hero .elementor-widget-button.pave-btn-outline .elementor-button:hover,
.pave-hero .elementor-widget-button.pave-btn-outline .elementor-button:focus,
.pave-hero .pave-btn-outline .elementor-button:hover,
.pave-hero .pave-btn-outline .elementor-button:focus {
  background: var(--white);
  color: var(--dark);
  box-shadow: 0 6px 18px rgba(255, 255, 255, 0.14);
}


/* ==========================================================================
   CPT SHORTCODES — Management list, Appraiser directory, Management cards
   ========================================================================== */

/* ---- [pave_management] — Management page Board/Officers listing ---- */

.pave-management { margin-top: 1em; }

.pave-management-section + .pave-management-section {
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* Note: the old .pave-management-list / .pave-member-name / .pave-member-role
   CSS that lived here has been removed. The [pave_management] shortcode now
   renders the same card markup as [pave_management_cards] on the home page,
   so all styling funnels into .pave-management-card / .pave-management-cards
   below. */


/* ---- [pave_appraiser_list] — Contact page full directory ---- */

.pg-section .pave-appraiser-list {
  list-style: none;
  padding-left: 0;
  margin: 1.5em 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 1.6vw, 24px);
}

.pg-section .pave-appraiser-list > li { padding-left: 0; }
.pg-section .pave-appraiser-list > li::before { display: none; }

/* Card itself: no hover effect — only the photo link and the name link are
   clickable, so the card shouldn't behave as if the whole surface is. */
.pave-appraiser {
  display: flex;
  gap: clamp(20px, 2vw, 28px);        /* more breathing room between photo and text */
  align-items: flex-start;            /* photo top-aligns with the name */
  padding: 20px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  height: 100%;                        /* fill the grid row for even card heights */
  box-sizing: border-box;
}

.pave-appraiser-photo {
  flex: 0 0 100px;
}

/* Photo link: only element on the card with a clickable affordance besides
   the name. Give it a subtle hover feedback so users know it's tappable. */
.pave-appraiser-photo a {
  display: block;
  line-height: 0;
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow 200ms ease;
}

.pave-appraiser-photo a:hover,
.pave-appraiser-photo a:focus {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.pave-appraiser-photo a:hover img,
.pave-appraiser-photo a:focus img {
  transform: scale(1.04);
}

.pave-appraiser-photo img,
.pave-appraiser-photo-img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  object-position: center 20%;   /* bias toward top — show face, not torso */
  display: block;
  transition: transform 300ms ease;
}

.pave-appraiser:hover .pave-appraiser-photo img {
  /* Orphaned selector intentionally left to match old hover behavior BUT
     scoped under .pave-appraiser-photo a:hover above — this block is a no-op
     kept as a safety rule if a legacy markup without the inner anchor ever
     renders. It has no effect when the anchor wrapper is present. */
}

.pave-appraiser-content { flex: 1 1 auto; min-width: 0; }

/* Heading: needs higher specificity than the global .pg-section h3 rule
   (which otherwise adds a top margin that pushes the name below the photo). */
.pg-section .pave-appraiser-list .pave-appraiser-heading {
  margin: 0 0 6px;
  font-size: 1.15em;
  line-height: 1.3;
}

.pave-appraiser-name {
  color: var(--dark);
  text-decoration: none;
  font-weight: 600;
}

.pave-appraiser-name:hover,
.pave-appraiser-name:focus {
  color: var(--primary--dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pave-appraiser-business {
  display: inline-block;
  color: var(--grey);
  font-weight: 400;
  font-size: 0.9em;
}

.pave-appraiser-business::before {
  content: "—";
  margin: 0 4px 0 2px;
  color: var(--grey);
}

/* Contact sub-list inside each appraiser card */
.pg-section .pave-appraiser-contact {
  list-style: none;
  padding-left: 0;
  margin: 8px 0 0;
  font-size: 0.95em;
}

.pg-section .pave-appraiser-contact > li {
  padding-left: 0;
  padding-bottom: 2px;
  color: var(--dark);
}

.pg-section .pave-appraiser-contact > li::before { display: none; }


/* ---- [pave_management_cards] — Home page cards grid ---- */

/* Parent pg-section background: subtle tint to distinguish from white pg-sections.
   .pg-section.e-con already extends edge-to-edge (background is on the outer
   full-width container), so this naturally becomes full-bleed. */
.pave-mgmt-wrap.pg-section.e-con {
  background: var(--bg-subtle);
}

.pave-management-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(16px, 1.8vw, 26px);
  margin-top: clamp(1rem, 1.5vw, 1.5rem);
}

/* Modifier: always 3 columns on desktop (used on the Management page for
   the Board of Directors and Officers sections). Stacks to single column
   on narrow viewports. */
.pave-management-cards.pave-management-cards--3up {
  grid-template-columns: repeat(3, 1fr);
  max-width: 900px;
}

.pave-management-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(20px, 2.2vw, 30px) clamp(14px, 1.4vw, 20px);
  background: var(--white);
  border-radius: 10px;
  /* Layered shadow: close tight + outer soft "glow" */
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 6px 16px rgba(0, 0, 0, 0.08);
  text-decoration: none;
  color: var(--dark);
  transition: box-shadow 220ms ease, transform 220ms ease;
}

/* NUCLEAR underline kill: some rule we can't easily trace keeps re-applying
   text-decoration: underline to text inside the card on hover (and possibly
   at rest on certain devices/browsers). Using !important + a descendant
   catch-all is the most reliable guarantee. */
.pave-management-card,
.pave-management-card *,
.pave-management-card:hover,
.pave-management-card:hover *,
.pave-management-card:focus,
.pave-management-card:focus * {
  text-decoration: none !important;
}

.pave-management-card:hover,
.pave-management-card:focus {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.06),
    0 12px 28px rgba(0, 0, 0, 0.14);
  transform: translateY(-3px);
}

.pave-management-card-photo {
  width: clamp(140px, 12vw, 180px);
  height: clamp(140px, 12vw, 180px);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 16px;
  background: var(--light);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.pave-management-card-photo img,
.pave-management-card-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  /* The old site's featured images were shot from relatively far away with
     subjects in the frame alongside a car, so WP's square center-crop shows
     a tiny face at the top and a lot of torso/car below. CSS can't change
     the pixels, but we can zoom into the top portion of the thumbnail.
     scale(1.35) + origin 'center top' zooms ~35% into the top area, making
     the face meaningfully larger in most cases. */
  transform: scale(1.35);
  transform-origin: center top;
}

/* Name: must beat .pg-section h3 { margin-top: clamp(24px, ...) }, which
   otherwise pushes the name way below the photo. */
.pg-section .pave-management-card-name {
  margin: 0 0 6px;
  font-size: clamp(1em, 1.1vw, 1.1em);
  font-weight: 600;
  color: var(--dark);
  line-height: 1.25;
}

.pave-management-card:hover .pave-management-card-name,
.pave-management-card:focus .pave-management-card-name {
  color: var(--primary--dark);
}

/* Role: must beat .pg-section p { margin: 0 0 clamp(16px, ...) } */
.pg-section .pave-management-card-role {
  margin: 0;
  font-size: 0.88em;
  color: var(--grey);
  line-height: 1.4;
}


/* ==========================================================================
   SINGLE MEMBER PROFILE — /appraisers/{slug}/
   The plugin loads this template via template_include. It uses its own
   wrapper classes (.pave-member-band, .pave-member-container) rather than
   Elementor's .e-con / .e-con-inner because those only get their layout
   CSS from Elementor's per-page generated stylesheets, which don't exist
   for a raw-PHP template — so we style our own from scratch.
   ========================================================================== */

.pave-member-single {
  display: block;
  width: 100%;
}

/* Full-bleed band — each section's outer wrapper. Background color extends
   edge-to-edge of the viewport. */
.pave-member-band {
  width: 100%;
  box-sizing: border-box;
}

.pave-member-band--title {
  background: var(--dark);
  color: var(--white);
  padding: clamp(60px, 5vw, 95px) 0;
}

.pave-member-band--body {
  background: var(--white);
  padding: var(--spacing) 0;
}

/* Inner wrapper — constrains content width and centers horizontally. This
   is what was missing before: our Elementor .e-con-inner never got its
   max-width styling because Elementor only generates it for Elementor-
   edited pages. Now we control it directly. */
.pave-member-container {
  max-width: var(--container-above--1368, 1308px);
  margin: 0 auto;
  width: 100%;
  padding: 0 clamp(20px, 3vw, 40px);
  box-sizing: border-box;
}

/* Title band: name + subtitle */
.pave-member-name {
  color: var(--white);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
  font-size: var(--font-size--h1);
}

.pave-member-subtitle {
  color: var(--header-text);
  font-size: clamp(18.666666666666668px, 1.4583333333333333vw, 28px) !important;
  margin: clamp(8px, 1vw, 14px) 0 0;
  font-weight: 400;
  opacity: 0.85;
}

.postid-1065 .pave-member-contact li:nth-child(2):after ,
.pg-section .pave-appraiser-list > li.pave-appraiser-1065 .pave-appraiser-contact li:nth-child(2):after {
    content: " (Call Only)";
}

/* Profile: two-column on desktop (photo left, info right) */
.pave-member-profile {
  display: flex;
  gap: clamp(20px, 3vw, 40px);
  align-items: flex-start;
  margin-bottom: clamp(24px, 3vw, 40px);
}

.pave-member-profile-photo {
  flex: 0 0 clamp(240px, 30vw, 340px);
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  line-height: 0;
  background: var(--light);
}

.pave-member-profile-img {
  width: 100%;
  height: auto;
  display: block;
}

.pave-member-profile-info {
  flex: 1 1 auto;
  min-width: 0;
}

.pave-member-profile-info .pave-member-title-role {
  color: var(--dark);
  font-size: 1.1em;
  margin: 0 0 clamp(10px, 1vw, 14px);
}

.pave-member-mgmt-role {
  color: var(--primary--dark);
  font-size: 0.95em;
  font-weight: 600;
  margin: 0 0 clamp(16px, 1.5vw, 20px);
  padding: 8px 14px;
  background: var(--bg-subtle);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
  display: inline-block;
}

/* Contact list — needs to override any global list styling */
.pave-member-contact {
  list-style: none;
  padding-left: 0;
  margin: 0;
  font-size: 1em;
}

.pave-member-contact > li {
  padding: 0;
  margin-bottom: 10px;
  position: relative;
}

.pave-member-contact > li::before { display: none; }

.pave-contact-label {
  font-weight: 600;
  color: var(--dark);
  display: inline-block;
  min-width: 80px;
  margin-right: 4px;
}

/* Bio section */
.pave-member-bio {
  margin-top: clamp(24px, 3vw, 36px);
  padding-top: clamp(20px, 2vw, 28px);
  border-top: 1px solid var(--light);
  font-size: 1em;
  line-height: var(--line-height);
}

.pave-member-bio > *:first-child { margin-top: 0; }

.pave-member-bio p {
  margin: 0 0 clamp(16px, 1.2vw, 22px);
}

.pave-member-bio ul,
.pave-member-bio ol {
  margin: 0 0 clamp(16px, 1.2vw, 22px);
  padding-left: 0;
  list-style: none;
}

.pave-member-bio ul > li,
.pave-member-bio ol > li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 6px;
}

.pave-member-bio ul > li::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--primary);
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 0.6em;
}

/* Back link */
.pave-member-back-link {
  margin-top: clamp(30px, 4vw, 50px);
  padding-top: clamp(20px, 2vw, 28px);
  border-top: 1px solid var(--light);
  text-align: center;
}

.pave-member-back-link a {
  color: var(--primary--dark);
  text-decoration: none;
  font-weight: 500;
  transition: color 150ms ease;
}

.pave-member-back-link a:hover,
.pave-member-back-link a:focus {
  color: var(--primary);
  text-decoration: underline;
}


/* ==========================================================================
   UTILITY
   ========================================================================== */

.mail-copied {
  background: var(--dark);
  color: var(--white);
  font-weight: 500;
  border-radius: var(--radius);
}

.side-navigation .menu { background: var(--white); }
.side-navigation .menu a { color: var(--dark); font-weight: 500; }
.side-navigation .menu a:hover,
.side-navigation .menu li.current-menu-item > a { color: var(--primary); }
.side-navigation #closeSideMenuX svg path { fill: var(--dark); }



.captcha-note {
    margin: 0;
    text-align: left;
    height: 100%;
    display: flex;
    align-items: center;
}

textarea {
    margin-bottom: 27px;
}






/* ==========================================================================
   RESPONSIVE — Tablet (≤ 991px)
   ========================================================================== */

@media (max-width: 991px) {

.pave-hero.e-con.e-parent {
    min-height: 1px !important;
    padding: clamp(66.66666666666667px, 5.208333333333333vw, 100px) 30px clamp(33.333333333333336px, 2.6041666666666665vw, 50px) !important;
}



  .block-link,
  .block-link-wrapper { border-radius: 6px; }

.pave-management-cards {
    display: flex;
    flex-wrap: wrap;
}

.pave-management-cards a.pave-management-card {
    flex: 0 0 31%;
}


}


@media (max-width: 991px) and (min-width: 768px) {

  li#menu-item-2017 {
    display: none;
}
.navigation a {
    padding: 7px;
}

}


/* ==========================================================================
   RESPONSIVE — Mobile (≤ 767px)
   ========================================================================== */

@media (max-width: 767px) {

  .elementor-location-header > .e-con.e-parent {
    padding: clamp(8px, 2vw, 12px) 0 !important;
  }

  .pg-title.e-con {
    padding: clamp(40px, 7vw, 60px) 0 !important;
  }

  .pg-section ul > li,
  .pg-section ol > li { padding-left: 1.3em; }

  .block-link .block-link-text,
  .block-link-wrapper .block-link-text { padding: 20px; }

  .elementor-location-footer p { font-size: 12px; }
  .elementor-location-footer span { display: inline-block; margin: 0 2px; }

    .elementor-location-footer a {
      display: block;
    }
  .elementor-location-footer span {
    display: block;
    height: 0;
    width: 0;
    opacity: 0;
  }

  .pg-section li br,   .pg-section li br:after,   .pg-section li br::after {
    content: " ";
  }

  /* --- CPT shortcodes on mobile --- */

  /* Hero: stack CTAs full-width, tighten vertical rhythm */
  .pave-hero-ctas.e-con {
    flex-direction: column;
    width: 100%;
  }
  .pave-hero-ctas.e-con .elementor-widget-button {
    width: 100%;
  }
  .pave-hero-ctas.e-con .elementor-widget-button .elementor-button {
    width: 100%;
    display: block;
    text-align: center;
  }
  .pave-hero .pave-hero-tagline {
    font-size: 12px;
    letter-spacing: 0.1em;
  }

  /* Appraiser list: collapse 2-column grid to 1 column on mobile */
  .pg-section .pave-appraiser-list {
    grid-template-columns: 1fr;
  }

  /* Appraiser cards stack photo above content on mobile */
  .pave-appraiser {
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    align-items: stretch;
  }
  .pave-appraiser-photo { flex: 0 0 auto; }
  .pave-appraiser-photo img,
  .pave-appraiser-photo-img {
    width: 80px;
    height: 80px;
  }

  /* Appraiser heading: stack business name below name instead of inline */
  .pave-appraiser-business { display: block; margin-top: 2px; }
  .pave-appraiser-business::before { content: none; }

  /* Management cards: smaller photos on mobile, and 3-up stacks to 1-col */
  .pave-management-card-photo {
    width: 120px;
    height: 120px;
  }

  .pave-management-cards.pave-management-cards--3up {
    grid-template-columns: 1fr;
    max-width: none;
  }

  /* Single-member profile: stack photo above info */
  .pave-member-profile {
    flex-direction: column;
  }
  .pave-member-profile-photo {
    flex: 0 0 auto;
    max-width: 280px;
    margin: 0 auto;
    width: 100%;
  }
  /* Contact labels stack on their own line for better readability */
  .pave-contact-label {
    display: block;
    margin-bottom: 2px;
    min-width: 0;
  }

  nav.mobile-navigation {
      padding: 0 30px;
  }

  .mobile-navigation li.mobile-button a {
      background: none !important;
      padding: 0;
      width: auto;
      min-width: 1px;
      margin-left: 7px;
      position: relative;
      top: 3px;
  }

  .mobile-navigation li.mobile-button strong {
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .elementor-location-header > .e-con.e-parent {
      border-bottom: 0px solid var(--button-background--primary);
  }

  .elementor-location-header.active > .e-con.e-parent {
      border-bottom: 6px solid var(--button-background--primary);
  }

  nav.navigation {
    background: var(--button-background--primary) !important;
    margin: 10px 0 -12px;
}

nav.navigation li:first-child {
    display: none !important;
}

nav.navigation li a {
    display: block;
    border-radius: 0 !important;
    padding: 10px !important;
    color: #fff;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.navigation:after {
    display: none;
}


.pave-management-cards a.pave-management-card {
    flex: 0 0 47%;
}

.elementor-location-footer > .e-con.e-parent {
  padding-left: 30px !important;
  padding-right: 30px !important;
}

.pave-member-band--title, .pg-title.e-con {
    padding-top: 100px !important;
    padding-bottom: 30px !important;
}

.pave-hero h1 {
    font-size: 24px;
    margin: 0 0 10px;
}

.pave-hero p {
    font-size: 13px !important;
}

.pave-hero .pave-hero-tagline {
    font-size: 11px !important;
}

.pave-hero h1 {
    font-size: 24px;
    margin: 0 0 10px;
}

.pave-hero p {
    font-size: 13px !important;
}

.pave-hero .pave-hero-tagline {
    font-size: 11px !important;
}

.pave-hero-ctas .e-con-inner {
    flex-direction: row !important;
    gap: 0 !important;
}

.pave-hero-ctas.e-con .elementor-widget-button {
    width: auto;
}

.pave-hero-ctas.e-con .elementor-widget-button .elementor-button {
    width: auto !important;
    margin: 0 7px;
}

.button-mhide {
  display: none;
}

.pave-hero-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

}


/* ==========================================================================
   RESPONSIVE — Very narrow (≤ 420px)
   ========================================================================== */

@media (max-width: 420px) {



}




.pave-member-contact > li > ul li {
    margin: 0;
    font-size: 14px;
}

.pave-member-contact > li > ul {
    padding: 0;
    list-style: none;
    margin: 0 0 25px;
}