/* LPJH Contact — assets/css/contact.css
   Enqueue AFTER brand-tokens.css, homepage.css, location.css AND owner.css:
   reuses .hp bands, .loc-hero, .loc-prose and the .hs-form / .hs-field controls.
   Tokens only.

   The FAQ side nav offsets against --lpjh-hd-sticky-h from header.css.
   The second half of this file maps Gravity Forms output onto the design controls,
   scoped to .co-panel.
*/
/* ============================================================
   LPJH — Contact
   After homepage.css + location.css + hs.css. Reuses .hp bands, .loc-hero,
   .loc-prose, .hs-form / .hs-field and the Leaflet map styling.
   Prefix: .co-
   ============================================================ */

/* ---------- DIRECT DETAILS ---------- */
.co-direct{display:grid;grid-template-columns:1fr 1.35fr;gap:4rem;align-items:start}
.co-tel{display:inline-block;margin:0 0 2rem;font-family:var(--tr-font-display);font-size:3.2rem;font-weight:500;line-height:1;letter-spacing:-.02em;color:var(--tr-accent);text-decoration:none;transition:color .26s ease}
.co-tel:hover{color:var(--tr-accent-hover)}
.co-mails{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--tr-border)}
.co-mail{padding:1.5rem 2rem 0 0}
.co-mails>.co-mail:last-child{padding:1.5rem 0 0 2rem;border-left:1px solid var(--tr-border)}
.co-mail__l{display:block;margin-bottom:.55rem;font-family:var(--tr-font-body);font-size:.6rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--tr-accent)}
.co-mail__v{display:block;margin-bottom:.5rem;font-family:var(--tr-font-display);font-size:1.15rem;font-weight:500;letter-spacing:-.01em;color:var(--tr-heading);text-decoration:none;word-break:break-word;transition:color .26s ease}
.co-mail__v:hover{color:var(--tr-accent)}
.co-mail__n{margin:0;font-family:var(--tr-font-body);font-size:.8rem;line-height:1.6;color:var(--tr-text-muted)}
.co-meta{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:2.5rem;border-top:1px solid var(--tr-border)}
.co-meta__cell{padding:1.5rem 2rem 0 0}
.co-meta>.co-meta__cell:last-child{padding:1.5rem 0 0 2rem;border-left:1px solid var(--tr-border)}
.co-meta__l{display:block;margin-bottom:.75rem;font-family:var(--tr-font-body);font-size:.6rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--tr-stone-400)}
.co-meta__cell p{margin:0;font-family:var(--tr-font-body);font-size:.9rem;line-height:1.75;color:var(--tr-text)}
.co-hours{list-style:none;margin:0;padding:0}
.co-hours li{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.4rem 0;font-family:var(--tr-font-body);font-size:.88rem;color:var(--tr-text)}
.co-hours li span:last-child{color:var(--tr-text-muted);font-variant-numeric:tabular-nums}
.co-hours__note{margin:1rem 0 0;padding-top:.9rem;border-top:1px solid var(--tr-border);font-family:var(--tr-font-display);font-size:.98rem;font-style:italic;line-height:1.5;color:var(--tr-text-muted);text-wrap:pretty}

/* ---------- INTENT SWITCH ---------- */
.co-switch{display:flex;align-items:stretch;gap:0;margin-bottom:2.5rem;border-top:1px solid var(--tr-border);border-bottom:1px solid var(--tr-border);flex-wrap:wrap}
.co-switch__btn{flex:1 1 0;min-width:9rem;padding:1.1rem 1.25rem;background:none;border:0;border-left:1px solid var(--tr-border);cursor:pointer;text-align:left;font-family:var(--tr-font-display);font-size:1.2rem;font-weight:500;letter-spacing:-.01em;color:var(--tr-stone-400);transition:background-color .26s ease,color .26s ease}
.co-switch>.co-switch__btn:first-child{border-left:0}
.co-switch__btn:hover{color:var(--tr-accent)}
.co-switch__btn.is-active{background:var(--tr-linen);color:var(--tr-accent)}
.co-lead{max-width:40em;margin:0 0 2rem;font-family:var(--tr-font-display);font-size:1.25rem;font-weight:500;line-height:1.5;color:var(--tr-text);text-wrap:pretty}
.co-to{margin:0 0 2rem;font-family:var(--tr-font-body);font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tr-stone-400)}
.co-to b{font-weight:600;color:var(--tr-accent)}

/* Owner redirect — a pointer, not a form */
.co-owner{padding:2.25rem 0;border-top:1px solid var(--tr-border);border-bottom:1px solid var(--tr-border)}
.co-owner__h{margin:0 0 1rem;font-family:var(--tr-font-display);font-size:1.9rem;font-weight:500;line-height:1.15;letter-spacing:-.015em;color:var(--tr-heading)}
.co-owner__p{margin:0 0 1.9rem;max-width:40em;font-family:var(--tr-font-body);font-size:.95rem;line-height:1.8;color:var(--tr-text-muted);text-wrap:pretty}
.co-owner__acts{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem}
.co-owner__note{margin:1.9rem 0 0;padding-top:1.1rem;border-top:1px solid var(--tr-border);font-family:var(--tr-font-body);font-size:.82rem;line-height:1.6;color:var(--tr-stone-400)}

/* ---------- MAP ---------- */
.co-map{display:grid;grid-template-columns:1fr 1.6fr;gap:0;border:1px solid var(--tr-border)}
.co-map__side{padding:2.25rem;border-right:1px solid var(--tr-border)}
.co-map__canvas{height:460px;background:var(--tr-linen)}
[data-basemap="osm"] .co-map__canvas .leaflet-tile-pane{filter:grayscale(1) contrast(.9) brightness(1.06)}
.co-map__canvas .leaflet-container{font-family:var(--tr-font-body);background:var(--tr-linen)}
.co-map__canvas .leaflet-control-attribution{font-size:9px;background:rgba(250,250,248,.86);color:var(--tr-stone-500)}
.co-map__canvas .leaflet-control-attribution a{color:var(--tr-stone-500)}
.co-map__canvas .leaflet-bar{border:1px solid var(--tr-border);border-radius:0;box-shadow:none}
.co-map__canvas .leaflet-bar a{border-radius:0;color:var(--tr-heading);border-bottom-color:var(--tr-border)}
.co-map__canvas .leaflet-bar a:hover{background:var(--tr-linen);color:var(--tr-accent)}
.co-map__dir{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.5rem;font-family:var(--tr-font-body);font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tr-accent);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:.2rem;transition:border-color .26s ease}
.co-map__dir:hover{border-bottom-color:var(--tr-accent)}

/* ---------- FAQ ---------- */
.co-faq{display:grid;grid-template-columns:14rem 1fr;gap:4rem;align-items:start}
.co-faq__nav{position:sticky;top:var(--lpjh-hd-sticky-h,3.7rem);align-self:start;padding-top:1rem}
.co-faq__nav p{margin:0 0 1rem;font-family:var(--tr-font-body);font-size:.6rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--tr-stone-400)}
.co-faq__nav ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--tr-border)}
.co-faq__nav a{display:block;padding:.75rem 0;border-bottom:1px solid var(--tr-border);font-family:var(--tr-font-display);font-size:1.1rem;font-weight:500;letter-spacing:-.01em;color:var(--tr-text-muted);text-decoration:none;transition:color .26s ease}
.co-faq__nav a:hover,.co-faq__nav a.is-active{color:var(--tr-accent)}
.co-faq__group{margin-bottom:3rem;scroll-margin-top:8rem}
.co-faq__group:last-child{margin-bottom:0}
.co-faq__gh{margin:0 0 1.5rem;font-family:var(--tr-font-display);font-size:2rem;font-weight:500;line-height:1.1;letter-spacing:-.015em;color:var(--tr-heading)}
.co-qa{border-top:1px solid var(--tr-border)}
.co-qa__item{border-bottom:1px solid var(--tr-border)}
.co-qa__q{display:flex;align-items:flex-start;justify-content:space-between;gap:2rem;width:100%;padding:1.35rem 0;background:none;border:0;cursor:pointer;text-align:left;font-family:var(--tr-font-display);font-size:1.35rem;font-weight:500;line-height:1.25;letter-spacing:-.01em;color:var(--tr-heading);transition:color .26s ease}
.co-qa__q:hover{color:var(--tr-accent)}
.co-qa__item.is-open .co-qa__q{color:var(--tr-accent)}
.co-qa__ic{position:relative;flex:0 0 auto;width:.9rem;height:.9rem;margin-top:.45rem}
.co-qa__ic::before,.co-qa__ic::after{content:"";position:absolute;inset:0;margin:auto;background:currentColor;transition:transform .3s cubic-bezier(.19,1,.22,1),opacity .3s ease}
.co-qa__ic::before{width:100%;height:1px}
.co-qa__ic::after{width:1px;height:100%}
.co-qa__item.is-open .co-qa__ic::after{transform:rotate(90deg);opacity:0}
.co-qa__a{overflow:hidden}
.co-qa.is-ready .co-qa__a{max-height:0;transition:max-height .45s cubic-bezier(.19,1,.22,1)}
.co-qa:not(.is-ready) .co-qa__ic{display:none}
.co-qa.is-ready .co-qa__item.is-open .co-qa__a{max-height:32rem}
.co-qa__a p{margin:0;padding:0 4rem 1.6rem 0;max-width:50em;font-family:var(--tr-font-body);font-size:.95rem;line-height:1.8;color:var(--tr-text-muted);text-wrap:pretty}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1100px){
  .co-direct{grid-template-columns:1fr;gap:2.5rem}
  .co-map{grid-template-columns:1fr}
  .co-map__side{border-right:0;border-bottom:1px solid var(--tr-border)}
  .co-faq{grid-template-columns:1fr;gap:2rem}
  .co-faq__nav{position:static;top:auto;padding-top:0}
  .co-faq__nav ul{display:flex;flex-wrap:wrap;gap:0 1.5rem;border-top:0}
  .co-faq__nav a{border-bottom:0;padding:.4rem 0}
  .co-qa__a p{padding-right:2rem}
}
@media (max-width:899px){
  .co-tel{font-size:2.3rem}
  .co-mails,.co-meta{grid-template-columns:1fr}
  .co-mails>.co-mail:last-child,.co-meta>.co-meta__cell:last-child{padding:1.5rem 0 0;border-left:0;border-top:1px solid var(--tr-border)}
  .co-mail,.co-meta__cell{padding-right:0}
  .co-switch{flex-direction:column}
  .co-switch__btn{border-left:0;border-top:1px solid var(--tr-border)}
  .co-switch>.co-switch__btn:first-child{border-top:0}
  .co-lead{font-size:1.1rem}
  .co-owner__h{font-size:1.5rem}
  .co-map__side{padding:1.75rem}
  .co-map__canvas{height:340px}
  .co-faq__gh{font-size:1.6rem}
  .co-qa__q{font-size:1.15rem;padding:1.15rem 0}
  .co-qa__a p{padding-right:0;font-size:.9rem}
}

/* ---------- PANELS (progressive enhancement) ----------
   Panels ship with [hidden] on all but the first. Until lpjh-contact.js marks the
   switch ready, [hidden] is overridden so every panel is readable in document
   order — a script failure must never leave the section blank. */
.co-switch:not(.is-ready)~.co-panel[hidden]{display:block!important}
.co-switch:not(.is-ready)~.co-panel{margin-bottom:2.5rem}
.co-switch:not(.is-ready) .co-switch__btn{cursor:default}

/* ---------- GRAVITY FORMS MAPPING ----------
   Scoped to .co-panel so no other form on the site is affected. The Join Our
   Portfolio package carries the same mapping scoped to .jp-app; if both pages ship,
   consider lifting this into a shared partial rather than maintaining two copies. */
.co-panel .gform_wrapper{margin:0}
.co-panel .gform_wrapper .gform_fields{display:flex;flex-wrap:wrap;gap:1.5rem 1.25rem;width:100%;margin:0;padding:0;list-style:none;grid-template-columns:none!important}
.co-panel .gform_wrapper .gfield{display:flex;flex-direction:column;gap:.45rem;flex:1 1 100%;min-width:0;margin:0;padding:0;grid-column:auto!important}
.co-panel .gform_wrapper .gfield.co-w50{flex:1 1 calc(50% - .625rem)}
.co-panel .gform_wrapper .gfield_label{font-family:var(--tr-font-body);font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tr-stone-400);margin:0}
.co-panel .gform_wrapper .gfield_required{color:var(--tr-accent)}
.co-panel .gform_wrapper input[type=text],.co-panel .gform_wrapper input[type=email],.co-panel .gform_wrapper input[type=tel],.co-panel .gform_wrapper select,.co-panel .gform_wrapper textarea{width:100%;padding:.8rem 0;background:none;border:0;border-bottom:1px solid var(--tr-border);border-radius:0;font-family:var(--tr-font-body);font-size:.95rem;color:var(--tr-heading);box-shadow:none;transition:border-color .26s ease}
.co-panel .gform_wrapper textarea{resize:vertical;min-height:4.5rem;line-height:1.6}
.co-panel .gform_wrapper select{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--tr-stone-400) 50%),linear-gradient(135deg,var(--tr-stone-400) 50%,transparent 50%);background-position:calc(100% - 9px) 1.35rem,calc(100% - 5px) 1.35rem;background-size:4px 4px,4px 4px;background-repeat:no-repeat;padding-right:1.5rem}
.co-panel .gform_wrapper input:focus,.co-panel .gform_wrapper select:focus,.co-panel .gform_wrapper textarea:focus{outline:none;border-bottom-color:var(--tr-accent);box-shadow:none}
.co-panel .gform_wrapper .gfield_description{margin:.35rem 0 0;padding:0;font-family:var(--tr-font-body);font-size:.74rem;line-height:1.55;color:var(--tr-stone-400)}
.co-panel .gform_wrapper .gform_footer{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;width:100%;margin:1rem 0 0;padding:0;border:0}
.co-panel .gform_wrapper .gform_button{display:inline-flex;align-items:center;justify-content:center;height:3rem;padding:0 1.75rem;background:var(--tr-accent);border:1px solid var(--tr-accent);border-radius:0;color:var(--tr-on-accent);font-family:var(--tr-font-body);font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background-color .26s ease,border-color .26s ease}
.co-panel .gform_wrapper .gform_button:hover{background:var(--tr-accent-hover);border-color:var(--tr-accent-hover)}
.co-panel .gform_wrapper .gfield_error input,.co-panel .gform_wrapper .gfield_error select,.co-panel .gform_wrapper .gfield_error textarea{border-bottom-color:var(--tr-error)}
.co-panel .gform_wrapper .validation_message{margin:.35rem 0 0;padding:0;background:none;border:0;font-family:var(--tr-font-body);font-size:.74rem;line-height:1.55;color:var(--tr-error)}
.co-panel .gform_wrapper .gform_validation_errors{margin:0 0 1.5rem;padding:1rem 1.25rem;background:var(--tr-linen);border:0;border-top:1px solid var(--tr-error);border-radius:0;box-shadow:none}
.co-panel .gform_wrapper .gform_validation_errors h2{margin:0;font-family:var(--tr-font-display);font-size:1.1rem;font-weight:500;color:var(--tr-heading)}
.co-panel .gform_confirmation_wrapper{padding:2.5rem 0;border-top:1px solid var(--tr-border);border-bottom:1px solid var(--tr-border)}
.co-panel .gform_confirmation_message{font-family:var(--tr-font-body);font-size:.95rem;line-height:1.8;color:var(--tr-text-muted);max-width:38em}
.co-panel .gform_confirmation_message strong{display:block;margin-bottom:.7rem;font-family:var(--tr-font-display);font-size:2rem;font-weight:500;letter-spacing:-.015em;color:var(--tr-heading)}

@media (max-width:899px){
  .co-panel .gform_wrapper .gfield.co-w50{flex:1 1 100%}
}

/* ---------- STICKY-FAQ ENABLER ----------
   Cassio wraps the page in .page-wrapper > .page-wrapper__content, both
   overflow:hidden — each a non-scrolling scroll container that kills the FAQ side
   nav's position:sticky. overflow:clip clips identically but is NOT a scroll
   container, so sticky resolves against the viewport. Scoped to body.lpjh-contact
   (the page runs native scroll — see header.php). Same fix as Join / JH Insights. */
body.lpjh-contact .page-wrapper,
body.lpjh-contact .page-wrapper__content{overflow:clip}

/* ---------- NATIVE ENQUIRY FORM ----------
   Gravity Forms is not installed; enquiry.php renders a native form on .hs-form /
   .hs-field (from owner.css). These add the send row, the field description and the
   thank-you, mirroring the .co-panel Gravity Forms mapping above. */
.co-form{margin:0}
.co-fielddesc{margin:.35rem 0 0;font-family:var(--tr-font-body);font-size:.74rem;line-height:1.55;color:var(--tr-stone-400)}
.co-form__actions{flex:1 1 100%;display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;margin-top:1rem}
.co-sent{padding:2.5rem 0;border-top:1px solid var(--tr-border);border-bottom:1px solid var(--tr-border)}
.co-sent__h{margin:0 0 .7rem;font-family:var(--tr-font-display);font-size:2rem;font-weight:500;letter-spacing:-.015em;line-height:1.15;color:var(--tr-heading)}
.co-sent__p{margin:0;max-width:38em;font-family:var(--tr-font-body);font-size:.95rem;line-height:1.8;color:var(--tr-text-muted)}
.co-sent__p a{color:var(--tr-accent)}