/*
Theme Name: Kingsmen
Theme URI: https://kingsmenagency.com
Description: Kingsmen Agency — child theme of Hello Elementor. Carries the UI/UX team's design system verbatim so Elementor-built pages render pixel-identical to the approved reference template.
Author: Kingsmen
Template: hello-elementor
Version: 1.0.0
Text Domain: kingsmen
*/

/* ---------------------------------------------------------------------------
   The design system itself lives in css/design-system.css — the UI/UX team's
   style.css, copied verbatim so the reference stays the single source of truth.
   Re-copy that file on any design update rather than editing it here.

   This file holds only the bridge between Elementor's markup and that system.
   --------------------------------------------------------------------------- */

/* Hello Elementor / Elementor reset the page container; the design system
   expects full-bleed sections that manage their own gutters. */
.hello-elementor .site-main,
.elementor-section-wrap,
main.site-main {
  max-width: none;
  padding: 0;
  margin: 0;
}

/* Elementor wraps every container in extra divs. Neutralise their default
   padding so .container from the design system controls gutters alone. */
.elementor-section > .elementor-container,
.e-con > .e-con-inner {
  max-width: none;
  padding: 0;
}

/* Elementor's default widget bottom-margin fights the design system rhythm. */
.elementor-widget:not(:last-child) {
  margin-block-end: 0;
}

/* Hello Elementor styles .site-header / .site-footer for its own chrome:
   display:flex, its own block padding, and a content-width max-width. The
   design system declares neither display nor max-width on these, so the parent
   theme silently won and squeezed the fixed header to 1140px via
   .site-header:not(.dynamic-header){max-width:1140px} — specificity (0,2,0),
   which a bare .site-header cannot beat at any load order, so the :not() is
   mirrored here deliberately. */
.site-header,
.site-header:not(.dynamic-header) {
  display: block;
  max-width: none;
  width: auto;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.site-footer,
.site-footer:not(.dynamic-footer) {
  max-width: none;
  width: auto;
}

/* Hello Elementor narrows .site-main to a reading column on every page NOT
   built with Elementor: max-width 500/600/800/1140px by breakpoint, and 10px
   side padding on phones. The single project and article templates are such
   pages, and the design system expects full-bleed sections. Same selector
   (specificity 0,2,1), loaded later, so this wins at every breakpoint. */
body:not([class*=elementor-page-]) .site-main {
  max-width: none;
  padding-inline: 0;
}

/* Browsers default form controls to line-height:normal, which is what the
   reference renders with. Scoped to real <button>s: most .btn elements are
   links, which inherit the body's 1.6 — resetting those cost 5px per button. Hello Elementor sets an explicit line-height on
   button, making every button-based component 4px taller than the design. */
.division-tab,
.filter-bar .pill,
.nav-toggle,
button.btn,
.field input,
.field select,
.field textarea {
  line-height: normal;
}

/* Contact Form 7 wraps each control in an inline span; the design expects the
   control to be the block-level child of .field. */
.wpcf7-form-control-wrap {
  display: block;
}

/* Something in the Elementor/Hello stack collapses label line-height to 1.
   The reference labels inherit the body's 1.6, which is 7px per field. */
.field label {
  line-height: inherit;
}

/* CF7's validation tips and response banner are not in the reference layout;
   let them size themselves instead of reserving space in the grid. */
.wpcf7 .wpcf7-response-output {
  margin: 24px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--line);
  font-size: .85rem;
}

/* The header/footer builder outputs its own wrapper; the design system's
   .site-header is fixed-position and must not be nested in a padded box. */
.ehf-header #masthead,
.ehf-footer #colophon {
  padding: 0;
  margin: 0;
  background: transparent;
}