/**
 * HAPPITA — CONTACT PAGE
 * =============================================================================
 * Loaded only on the Contact page and scoped entirely to body.hp-contact, so
 * none of it can reach the homepage, the shop, or the global header and footer.
 *
 * The layout is driven by CSS Grid on the section's own Elementor container
 * rather than by Elementor's column widths. That matters for the brief's last
 * point: Elementor's percentage columns are what break when you drag a section
 * between viewports, because each breakpoint stores its own width. A grid
 * declared here stacks by media query instead, so the layout cannot be knocked
 * out of shape by editing — and the widgets inside stay fully editable.
 *
 * @package Happita
 */

/* =========================================================================
   TOKENS
   ========================================================================= */
body.hp-contact{
  --hp-maroon:#7A0028;
  --hp-maroon-dark:#5C001E;
  --hp-maroon-soft:rgba(94,0,0,.07);
  --hp-cream:#FBF7F2;
  --hp-card:#FFFFFF;
  --hp-ink:#221016;
  --hp-muted:#7A6A70;
  --hp-line:#EBE3DC;
  --hp-rad:18px;
  --hp-pill:999px;
  --hp-shadow:0 10px 30px rgba(34,16,22,.07);
  --hp-shadow-lg:0 20px 50px rgba(34,16,22,.12);
  --hp-ease:cubic-bezier(.22,.61,.36,1);
  --hp-body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --hp-display:"Anton",system-ui,sans-serif;
  --hp-serif:"Instrument Serif",Georgia,serif;
}

body.hp-contact{background:var(--hp-cream)}
body.hp-contact .hp-ct-hero,
body.hp-contact .hp-ct-main{background:var(--hp-cream)}

body.hp-contact .elementor-widget p{
  font-family:var(--hp-body);color:var(--hp-ink);margin:0;
}

/* =========================================================================
   1. HERO
   ========================================================================= */
body.hp-contact .hp-ct-hero-col > .elementor-widget-wrap{
  max-width:760px;
}
body.hp-contact .hp-ct-eyebrow .elementor-heading-title{
  display:inline-block;
  font-family:var(--hp-body);font-size:11.5px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--hp-maroon);
  background:var(--hp-maroon-soft);
  border-radius:var(--hp-pill);
  padding:8px 18px;margin:0 0 22px;
  line-height:1;
}
body.hp-contact .hp-ct-title .elementor-heading-title{
  font-family:var(--hp-display);
  font-size:clamp(42px,6vw,76px);font-weight:400;
  text-transform:uppercase;letter-spacing:.005em;line-height:.98;
  color:var(--hp-ink);margin:0 0 20px;
}
/* the italic serif accent, matching the homepage headlines */
body.hp-contact .hp-ct-title em{
  font-family:var(--hp-serif);font-style:italic;font-weight:400;
  text-transform:none;letter-spacing:0;
  color:var(--hp-maroon);
  font-size:.94em;
}
body.hp-contact .hp-ct-sub p{
  font-family:var(--hp-body);font-size:17px;line-height:1.7;
  color:var(--hp-muted);max-width:62ch;
}

/* =========================================================================
   2. DETAILS + FORM  —  the two-column grid
   -------------------------------------------------------------------------
   Grid, not Elementor column percentages. One declaration governs the split at
   every width, so there is no per-breakpoint column value to fall out of sync.
   ========================================================================= */
body.hp-contact .hp-ct-main > .elementor-container{
  display:grid !important;
  grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
  gap:32px;
  align-items:start;
}
body.hp-contact .hp-ct-main > .elementor-container > .elementor-column{
  width:100% !important;max-width:100% !important;
}
body.hp-contact .hp-ct-coltitle .elementor-heading-title{
  font-family:var(--hp-body);font-size:13px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--hp-maroon);margin:0 0 22px;line-height:1.2;
}

/* ---- left: contact cards ------------------------------------------------ */
body.hp-contact .hp-ct-info > .elementor-widget-wrap{
  background:var(--hp-card);
  border:1px solid var(--hp-line);
  border-radius:var(--hp-rad);
  box-shadow:var(--hp-shadow);
  padding:36px 32px !important;
  align-content:start;
}
body.hp-contact .hp-ct-card{
  padding:22px 0;
  border-bottom:1px solid var(--hp-line);
}
body.hp-contact .hp-ct-card:last-of-type{border-bottom:none;padding-bottom:0}
body.hp-contact .hp-ct-info .elementor-widget:nth-of-type(2) .hp-ct-card{padding-top:0}

/* Icon Box: icon left, text right, on one baseline */
body.hp-contact .hp-ct-card .elementor-icon-box-wrapper{
  display:flex;align-items:flex-start;gap:18px;text-align:left;
}
body.hp-contact .hp-ct-card .elementor-icon-box-icon{
  flex:0 0 auto;margin:0 !important;
}
body.hp-contact .hp-ct-card .elementor-icon{
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--hp-maroon-soft);color:var(--hp-maroon);
  font-size:19px;
  transition:background-color .25s var(--hp-ease),color .25s var(--hp-ease);
}
body.hp-contact .hp-ct-card:hover .elementor-icon{
  background:var(--hp-maroon);color:#fff;
}
body.hp-contact .hp-ct-card .elementor-icon svg{width:19px;height:19px;fill:currentColor}
body.hp-contact .hp-ct-card .elementor-icon-box-content{min-width:0}
body.hp-contact .hp-ct-card .elementor-icon-box-title,
body.hp-contact .hp-ct-card .elementor-icon-box-title a{
  font-family:var(--hp-body) !important;font-size:12px !important;font-weight:800 !important;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--hp-muted) !important;margin:0 0 8px !important;line-height:1.2 !important;
}
body.hp-contact .hp-ct-card .elementor-icon-box-description{
  font-family:var(--hp-body);font-size:16px;font-weight:500;line-height:1.6;
  color:var(--hp-ink);margin:0;
}
body.hp-contact .hp-ct-card .elementor-icon-box-description a{
  color:var(--hp-maroon);text-decoration:none;
  border-bottom:1px solid rgba(94,0,0,.25);
  transition:border-color .2s,color .2s;
}
body.hp-contact .hp-ct-card .elementor-icon-box-description a:hover{
  color:var(--hp-maroon-dark);border-bottom-color:var(--hp-maroon-dark);
}

/* fallback markup, when the Icon Box widget is unavailable */
body.hp-contact .hp-ct-icon .elementor-icon{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:var(--hp-maroon-soft);color:var(--hp-maroon);font-size:19px;
}
body.hp-contact .hp-ct-label .elementor-heading-title{
  font-family:var(--hp-body);font-size:12px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--hp-muted);margin:10px 0 6px;
}
body.hp-contact .hp-ct-text p{font-size:16px;line-height:1.6}

/* ---- right: the form ---------------------------------------------------- */
body.hp-contact .hp-ct-formcol > .elementor-widget-wrap{
  background:var(--hp-card);
  border:1px solid var(--hp-line);
  border-radius:var(--hp-rad);
  box-shadow:var(--hp-shadow);
  padding:36px 32px !important;
  align-content:start;
}
body.hp-contact .hp-ct-form .elementor-form-fields-wrapper{
  display:flex;flex-wrap:wrap;
  margin:0 -8px;
}
body.hp-contact .hp-ct-form .elementor-field-group{
  padding:0 8px 18px;margin:0;
}
body.hp-contact .hp-ct-form .elementor-field-group > label{display:none}

body.hp-contact .hp-ct-form .elementor-field-group .elementor-field,
body.hp-contact .hp-ct-form input[type="text"],
body.hp-contact .hp-ct-form input[type="email"],
body.hp-contact .hp-ct-form textarea,
body.hp-contact .hp-ct-form-fallback input,
body.hp-contact .hp-ct-form-fallback textarea{
  width:100% !important;
  background:var(--hp-cream) !important;
  border:1.5px solid transparent !important;
  border-radius:12px !important;
  padding:15px 18px !important;
  font-family:var(--hp-body) !important;font-size:15px !important;
  color:var(--hp-ink) !important;
  line-height:1.5 !important;
  box-shadow:none !important;
  transition:border-color .2s var(--hp-ease),background-color .2s;
}
body.hp-contact .hp-ct-form .elementor-field:focus,
body.hp-contact .hp-ct-form input:focus,
body.hp-contact .hp-ct-form textarea:focus,
body.hp-contact .hp-ct-form-fallback input:focus,
body.hp-contact .hp-ct-form-fallback textarea:focus{
  border-color:var(--hp-maroon) !important;
  background:var(--hp-card) !important;
  outline:none !important;
}
body.hp-contact .hp-ct-form ::placeholder{color:var(--hp-muted);opacity:1}
body.hp-contact .hp-ct-form textarea{min-height:150px;resize:vertical}

/* SUBMIT — solid maroon pill, white bold text, smooth hover */
body.hp-contact .hp-ct-form .elementor-button,
body.hp-contact .hp-ct-form button[type="submit"],
body.hp-contact .hp-ct-form-fallback button{
  width:100% !important;
  display:inline-flex !important;align-items:center;justify-content:center;
  background:var(--hp-maroon) !important;
  background-color:var(--hp-maroon) !important;
  color:#fff !important;
  border:none !important;
  border-radius:var(--hp-pill) !important;
  font-family:var(--hp-body) !important;font-size:15.5px !important;font-weight:700 !important;
  letter-spacing:.01em;line-height:1.2 !important;
  padding:18px 34px !important;
  min-height:56px;                       /* comfortable touch target */
  cursor:pointer;
  box-shadow:none !important;
  transition:background-color .28s var(--hp-ease),
             transform .28s var(--hp-ease),
             box-shadow .28s var(--hp-ease);
}
body.hp-contact .hp-ct-form .elementor-button:hover,
body.hp-contact .hp-ct-form button[type="submit"]:hover,
body.hp-contact .hp-ct-form-fallback button:hover{
  background:var(--hp-maroon-dark) !important;
  background-color:var(--hp-maroon-dark) !important;
  color:#fff !important;
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(94,0,0,.26) !important;
}
body.hp-contact .hp-ct-form .elementor-button:active,
body.hp-contact .hp-ct-form-fallback button:active{transform:translateY(0)}

/* form messages */
body.hp-contact .hp-ct-form .elementor-message{
  font-family:var(--hp-body);font-size:14.5px;margin-top:14px;
}
body.hp-contact .hp-ct-form .elementor-message-success{color:var(--hp-maroon)}

/* =========================================================================
   3. MAP
   ========================================================================= */
body.hp-contact .hp-ct-mapsec{background:var(--hp-cream);padding:0}
body.hp-contact .hp-ct-mapsec > .elementor-container{
  max-width:100% !important;padding-left:0;padding-right:0;
}
body.hp-contact .hp-ct-map{
  width:100%;
  overflow:hidden;
  border-top:1px solid var(--hp-line);
}
body.hp-contact .hp-ct-map iframe{
  display:block;width:100% !important;height:460px !important;border:0;
  /* a restrained treatment so the map reads as part of the page rather than a
     bright rectangle dropped into it; full colour on hover */
  filter:grayscale(.35) contrast(1.02);
  transition:filter .4s var(--hp-ease);
}
body.hp-contact .hp-ct-map:hover iframe{filter:none}
body.hp-contact .hp-ct-map .elementor-custom-embed{line-height:0}

/* =========================================================================
   RESPONSIVE
   -------------------------------------------------------------------------
   The two-column grid collapses to one at 900px. Because the split is a single
   grid declaration, there is no Elementor per-device column width that could
   disagree with it — the layout cannot break when the viewport changes.
   ========================================================================= */
@media(max-width:1024px){
  body.hp-contact .hp-ct-main > .elementor-container{gap:24px}
  body.hp-contact .hp-ct-info > .elementor-widget-wrap,
  body.hp-contact .hp-ct-formcol > .elementor-widget-wrap{padding:30px 26px !important}
  body.hp-contact .hp-ct-map iframe{height:400px !important}
}

@media(max-width:900px){
  /* stack */
  body.hp-contact .hp-ct-main > .elementor-container{
    grid-template-columns:minmax(0,1fr);
    gap:20px;
  }
}

@media(max-width:767px){
  body.hp-contact .hp-ct-hero{padding-top:56px !important;padding-bottom:44px !important}
  body.hp-contact .hp-ct-main{padding-bottom:56px !important}
  body.hp-contact .hp-ct-sub p{font-size:16px}
  body.hp-contact .hp-ct-info > .elementor-widget-wrap,
  body.hp-contact .hp-ct-formcol > .elementor-widget-wrap{padding:26px 20px !important}
  body.hp-contact .hp-ct-card{padding:18px 0}
  body.hp-contact .hp-ct-card .elementor-icon-box-wrapper{gap:14px}
  body.hp-contact .hp-ct-card .elementor-icon{width:46px;height:46px;font-size:17px}
  /* both form columns become full width so nothing is ever half a field wide */
  body.hp-contact .hp-ct-form .elementor-field-group{width:100% !important}
  body.hp-contact .hp-ct-map iframe{height:340px !important}
}

@media(max-width:480px){
  body.hp-contact .hp-ct-eyebrow .elementor-heading-title{font-size:11px;padding:7px 14px;margin-bottom:18px}
  body.hp-contact .hp-ct-sub p{font-size:15.5px}
  body.hp-contact .hp-ct-info > .elementor-widget-wrap,
  body.hp-contact .hp-ct-formcol > .elementor-widget-wrap{padding:22px 16px !important}
  body.hp-contact .hp-ct-form .elementor-field-group{padding-bottom:14px}
  body.hp-contact .hp-ct-form .elementor-field-group .elementor-field,
  body.hp-contact .hp-ct-form textarea{padding:14px 16px !important;font-size:16px !important} /* 16px stops iOS zooming on focus */
  body.hp-contact .hp-ct-form .elementor-button{min-height:54px;padding:16px 24px !important}
  body.hp-contact .hp-ct-map iframe{height:280px !important}
}

/* pointer-coarse devices get larger touch targets regardless of width */
@media(pointer:coarse){
  body.hp-contact .hp-ct-form .elementor-button,
  body.hp-contact .hp-ct-form-fallback button{min-height:56px}
  body.hp-contact .hp-ct-card .elementor-icon-box-description a{padding:2px 0;display:inline-block}
}