/* ==========================================================================
   METAFLIGHT HUD - CONTACT PAGE, prefix mf-c-
   Page 1844 (Breakdance). Hero is a two-column grid: title + intro + a
   support-desk callout on the left, the FormBuilder panel (element 134) on
   the right. No hardcoded email/phone anywhere - the form is the single
   channel, submitting to contact@metaflight.aero.
   Load order: mf-hud-tokens.css, mf-hud-chrome.css, then this file.

   REVISION 2026-08-20b: the form used to sit alone in its own narrow
   centered section below the hero and read as an afterthought. It now lives
   inside the hero itself, next to the title, at Bertin's request. The old
   section-122 wrapper (.mf-c-sec, .mf-c-form-wrap) is gone - deleted at the
   element level, not just unstyled - so those selectors are removed here
   too rather than left dead.

   SCOPE, per the header/footer lesson in mf-hud-legal.css: page rules only
   ever touch the page's OWN section classes (.mf-c-hero, .mf-c-logos-sec),
   never bare .bde-section - the header and footer are sections too.
   ========================================================================== */

body.breakdance.mf-contact{
  background:transparent;color:var(--mf-text);
  font-family:'Rajdhani',sans-serif;-webkit-font-smoothing:antialiased;
}

/* --------------------------------------------------------------------------
   PADDING CONTRACT: the section itself carries no padding, the container
   inside it does.
   -------------------------------------------------------------------------- */
body.breakdance.mf-contact .mf-c-hero{position:relative;z-index:2;padding:0;background:transparent}
body.breakdance.mf-contact .mf-c-hero > .section-container{
  align-items:stretch;max-width:1240px;margin:0 auto;width:100%;padding:9rem 2rem 5rem;
}

/* --------------------------------------------------------------------------
   HERO GRID - two columns, text+callout left, form panel right. Breakdance's
   own Grid design (items_per_row: 2 desktop / 1 at tablet_portrait) drives
   the column count; this file only styles what's inside each column.
   -------------------------------------------------------------------------- */
body.breakdance.mf-contact .mf-c-hero-grid{width:100%}
body.breakdance.mf-contact .mf-c-hero-col{
  display:flex;flex-direction:column;align-items:flex-start;
  justify-content:center;gap:1.3rem;
}
body.breakdance.mf-contact .mf-c-hero-form-col{
  display:flex;flex-direction:column;align-items:stretch;
  justify-content:flex-start;gap:1.2rem;width:100%;
}

body.breakdance.mf-contact .mf-c-hero-col h1{
  font-family:'Orbitron',sans-serif;font-weight:900;
  font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.06;
  letter-spacing:.03em;text-transform:uppercase;color:var(--mf-text);
  margin:0;
}
body.breakdance.mf-contact .mf-c-intro{
  font-family:'Rajdhani',sans-serif;font-size:1.05rem;line-height:1.65;
  color:var(--mf-muted);max-width:52ch;margin:0;
}

/* Support-desk redirect. The whole card is the link (WrapperLink), so no
   separate button element is needed - clicking anywhere opens /support/. */
body.breakdance.mf-contact .mf-c-callout{
  display:inline-flex;align-items:center;gap:.6rem;
  max-width:52ch;padding:.9rem 1.1rem;
  background-color:rgba(0,212,255,.06);
  box-shadow:inset 0 0 0 1px rgba(0,212,255,.35);
  text-decoration:none;
  transition:background-color .25s var(--mf-ease),box-shadow .25s var(--mf-ease);
}
body.breakdance.mf-contact .mf-c-callout:hover{
  background-color:rgba(0,212,255,.11);
  box-shadow:inset 0 0 0 1px var(--mf-cyan);
}
body.breakdance.mf-contact .mf-c-callout-text{
  font-family:'Rajdhani',sans-serif;font-size:.92rem;font-weight:600;
  color:var(--mf-cyan-lit);line-height:1.4;margin:0;
}

/* --------------------------------------------------------------------------
   PANEL - standard HUD glass: neutral scrim (never navy), veil gradient,
   blur, hairline frame, 16px chamfer.
   -------------------------------------------------------------------------- */
body.breakdance.mf-contact .mf-c-panel{
  position:relative;width:100%;box-sizing:border-box;
  padding:2.4rem 2.2rem;
  background-color:var(--mf-scrim);
  background-image:linear-gradient(180deg,var(--mf-veil-top),var(--mf-veil-bot));
  backdrop-filter:var(--mf-blur);-webkit-backdrop-filter:var(--mf-blur);
  box-shadow:inset 0 0 0 1px var(--mf-hair);
  clip-path:polygon(var(--mf-ch) 0,100% 0,100% calc(100% - var(--mf-ch)),calc(100% - var(--mf-ch)) 100%,0 100%,0 var(--mf-ch));
}
body.breakdance.mf-contact .mf-c-form-title{
  font-family:'Orbitron',sans-serif;font-weight:700;font-size:1.1rem;
  letter-spacing:.04em;text-transform:uppercase;color:var(--mf-text);
  margin:0 0 1.8rem;
}
body.breakdance.mf-contact .mf-c-note{
  font-family:var(--mf-mono);font-size:.66rem;line-height:1.7;
  letter-spacing:.02em;color:var(--mf-muted);
  text-align:center;max-width:52ch;margin:0 auto;
}

/* --------------------------------------------------------------------------
   FORM - Breakdance FormBuilder markup is fixed regardless of the design.*
   controls (confirmed from the plugin's own twig templates), so it is styled
   entirely from stable BEM classes: .breakdance-form, .breakdance-form-field,
   __label, __required, __input, and the submit button. Field-to-field
   spacing is left to the element's own design.form.spacing.between_fields
   (set to 20px on element 134) rather than duplicated here.
   -------------------------------------------------------------------------- */
body.breakdance.mf-contact .mf-c-form .breakdance-form{
  display:flex;flex-direction:column;width:100%;
}
body.breakdance.mf-contact .mf-c-form .breakdance-form-field{
  display:flex;flex-direction:column;align-items:stretch;width:100%;
}
/* honeypot (2026-11-06): our field rule above restores width:100% and flex on
   every field, which defeats the plugin width:0. Take it fully off-canvas. */
body.breakdance.mf-contact .mf-c-form .breakdance-form .breakdance-form-field--hpinput{
  position:absolute;left:-10000px;top:auto;width:1px;height:1px;
  overflow:hidden;opacity:0;pointer-events:none;
}
body.breakdance.mf-contact .mf-c-form .breakdance-form-field__label{
  font-family:var(--mf-mono);font-size:.6rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mf-muted);
  margin:0 0 .5rem;
}
body.breakdance.mf-contact .mf-c-form .breakdance-form-field__required{
  color:var(--mf-cyan);margin-left:.2rem;
}

/* inputs, select, textarea share one chamfered field style */
body.breakdance.mf-contact .mf-c-form .breakdance-form-field__input{
  width:100%;box-sizing:border-box;
  font-family:'Rajdhani',sans-serif;font-size:.95rem;font-weight:600;color:var(--mf-text);
  padding:.85rem 1rem;
  background-color:rgba(255,255,255,.05);
  border:none;border-radius:0;
  box-shadow:inset 0 0 0 1px var(--mf-hair);
  clip-path:polygon(var(--mf-ch-sm) 0,100% 0,100% calc(100% - var(--mf-ch-sm)),calc(100% - var(--mf-ch-sm)) 100%,0 100%,0 var(--mf-ch-sm));
  transition:box-shadow .25s var(--mf-ease),background-color .25s var(--mf-ease);
}
body.breakdance.mf-contact .mf-c-form .breakdance-form-field__input::placeholder{color:var(--mf-muted);opacity:.65}
body.breakdance.mf-contact .mf-c-form .breakdance-form-field__input:focus{
  outline:none;background-color:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px var(--mf-cyan),0 0 0 3px rgba(0,212,255,.16);
}
body.breakdance.mf-contact .mf-c-form textarea.breakdance-form-field__input{
  min-height:130px;resize:vertical;
}

/* select: native chrome replaced with a plain chevron, dark option list */
body.breakdance.mf-contact .mf-c-form select.breakdance-form-field__input{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:2.6rem;cursor:pointer;
  background-repeat:no-repeat;background-position:right 1rem center;background-size:14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239DB2C9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
body.breakdance.mf-contact .mf-c-form select.breakdance-form-field__input option{
  background-color:#0B1524;color:var(--mf-text);
}

/* submit */
body.breakdance.mf-contact .mf-c-form .breakdance-form-footer{margin-top:.4rem}
body.breakdance.mf-contact .mf-c-form .breakdance-form-button.breakdance-form-button__submit{
  display:inline-flex;align-items:center;justify-content:center;width:100%;
  font-family:var(--mf-mono);font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;line-height:1;
  padding:.95rem 1.4rem;
  background:var(--mf-cyan);color:#04121C;
  border:none;border-radius:0;cursor:pointer;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  transition:background .3s var(--mf-ease),box-shadow .3s var(--mf-ease);
}
body.breakdance.mf-contact .mf-c-form .breakdance-form-button.breakdance-form-button__submit:hover{
  background:var(--mf-cyan-lit);box-shadow:0 0 30px rgba(0,212,255,.42);
}
body.breakdance.mf-contact .mf-c-form .breakdance-form-button.breakdance-form-button__submit:focus-visible{
  outline:2px solid var(--mf-cyan);outline-offset:3px;
}
body.breakdance.mf-contact .mf-c-form .breakdance-form-button.breakdance-form-button__submit[disabled]{
  opacity:.55;cursor:not-allowed;
}

/* submission result banner - confirmed classes from the plugin's own
   macros/form.twig: default/success is .breakdance-form-message, the error
   state adds the --error modifier on the same element. */
body.breakdance.mf-contact .mf-c-form .breakdance-form-message{
  margin-top:1.2rem;padding:.9rem 1.1rem;
  font-family:'Rajdhani',sans-serif;font-size:.9rem;font-weight:600;line-height:1.5;
  color:#04121C;background-color:var(--mf-cyan-lit);
  box-shadow:inset 0 0 0 1px rgba(0,212,255,.5);
  clip-path:polygon(var(--mf-ch-sm) 0,100% 0,100% calc(100% - var(--mf-ch-sm)),calc(100% - var(--mf-ch-sm)) 100%,0 100%,0 var(--mf-ch-sm));
}
body.breakdance.mf-contact .mf-c-form .breakdance-form-message--error{
  color:var(--mf-text);background-color:rgba(255,92,108,.16);
  box-shadow:inset 0 0 0 1px rgba(255,92,108,.55);
}

/* --------------------------------------------------------------------------
   PARTNER LOGO STRIP - transparent, hairline top/bottom, letting the
   starfield show through instead of the old flat #21222a demo box.
   -------------------------------------------------------------------------- */
body.breakdance.mf-contact .mf-c-logos-sec{
  position:relative;z-index:2;
  background-color:var(--mf-scrim)!important;
  background-image:linear-gradient(180deg,var(--mf-veil-top),var(--mf-veil-bot))!important;
  backdrop-filter:var(--mf-blur);-webkit-backdrop-filter:var(--mf-blur);
  box-shadow:inset 0 1px 0 var(--mf-hair),inset 0 -1px 0 var(--mf-hair);
}

/* ===== MOBILE, KEEP LAST IN THIS FILE ===== */
@media (max-width:1023px){
body.breakdance.mf-contact .mf-c-hero > .section-container{padding:7rem 1.25rem 3rem}
body.breakdance.mf-contact .mf-c-hero-col{align-items:stretch;text-align:left}
body.breakdance.mf-contact .mf-c-panel{padding:1.8rem 1.4rem}
body.breakdance.mf-contact .mf-c-intro,
body.breakdance.mf-contact .mf-c-callout{max-width:none}
}