/*
Theme Name:   Taelor Design Build
Theme URI:    https://taelordesignbuild.com/
Description:  Child theme of Astra for Taelor Design Build. Carries the studio's approved design system so Elementor pages render exactly as approved.
Author:       Taelor Design Build
Template:     astra
Version:      1.0.0
Text Domain:  taelor-child
*/

/* ---------------------------------------------------------------------------
   Elementor bridge

   Elementor prints a widget's custom CSS classes on the widget wrapper, not on
   the heading or paragraph it renders, and it ships its own defaults for those
   elements. Every widget that carries a design-system class is also marked
   `dsw`, and the rules below hand the wrapper's resolved typography down to the
   single element inside. Widgets without a design-system class are left alone,
   so the stylesheet's own element rules keep working for them.
   --------------------------------------------------------------------------- */
.dsw > .elementor-widget-container > h1,
.dsw > .elementor-widget-container > h2,
.dsw > .elementor-widget-container > h3,
.dsw > .elementor-widget-container > h4,
.dsw > .elementor-widget-container > h5,
.dsw > .elementor-widget-container > h6,
.dsw > .elementor-widget-container > p {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;
  margin: 0;
}

/* A text widget can hold more than one paragraph; keep the rhythm between them. */
.dsw > .elementor-widget-container > p + p {
  margin-top: 1em;
}

/* Astra reserves space around the content area that the design system already
   accounts for in its own sections. */
.ast-page-builder-template .site-content > .ast-container {
  max-width: none;
  padding: 0;
}

/* Elementor's own spacing between stacked widgets is off; the design system
   sets its own vertical rhythm. */
.elementor-widget:not(:last-child) {
  margin-block-end: 0;
}

/* ---------------------------------------------------------------------------
   Container layout

   Elementor drives container layout through custom properties, and it writes a
   value for every one of them into per-page generated CSS at a specificity no
   plain class selector can reach. On these pages the design system owns layout,
   so the properties are forced back to neutral and the stylesheet's `.section`,
   `.wrap`, `.row` and `.col-*` rules decide how each block behaves, exactly as
   they do in the approved build.

   The `!important` here is aimed at Elementor's generated values, not at the
   design system: the properties below only feed Elementor's own `.e-con` rules,
   which the stylesheet then overrides normally because it loads later.
   --------------------------------------------------------------------------- */
.elementor .e-con,
.elementor .e-con-inner {
  --display: block !important;
  --width: auto !important;
  --content-width: auto !important;
  --min-height: auto !important;
  --flex-direction: row !important;
  --flex-wrap: wrap !important;
  --justify-content: normal !important;
  --align-items: normal !important;
  --align-content: normal !important;
  --gap: 0px !important;
  --row-gap: 0px !important;
  --column-gap: 0px !important;
  --padding-block-start: 0px !important;
  --padding-block-end: 0px !important;
  --padding-inline-start: 0px !important;
  --padding-inline-end: 0px !important;
  --margin-block-start: 0px !important;
  --margin-block-end: 0px !important;
  --margin-inline-start: 0px !important;
  --margin-inline-end: 0px !important;
}

/* ---------------------------------------------------------------------------
   Columns

   Elementor writes the `flex` shorthand on `.e-con.e-flex`, which outranks the
   design system's single-class column rules. The same values are restated here
   with an `.elementor` ancestor so columns size exactly as they do in the
   approved build. The `.row.row--3up > *` and `.row.row--4up > *` rules already
   carry enough specificity of their own, responsive overrides included, so they
   are left untouched.
   --------------------------------------------------------------------------- */
.elementor .e-con.col-half    { flex: 1 1 380px; }
.elementor .e-con.col-third   { flex: 1 1 290px; }
.elementor .e-con.col-quarter { flex: 1 1 210px; }
.elementor .e-con.col-45      { flex: 1 1 420px; }
.elementor .e-con.col-55      { flex: 1 1 500px; }
.elementor .e-con.col-60      { flex: 1 1 520px; }
.elementor .e-con.col-40      { flex: 1 1 330px; }

/* Inside a card, the body absorbs the slack when the row stretches every card
   to the tallest one. Without this the picture frame grows instead and its navy
   background shows as a strip under the image. */
.elementor .e-con.service-card__body  { flex: 1 1 auto; }
.elementor .e-con.service-card__media { flex: 0 0 auto; }

/* Sections, wrappers and rows are block-level in the approved build and must
   not pick up a flex basis from Elementor. */
.elementor .e-con.section,
.elementor .e-con.hero,
.elementor .e-con.wrap,
.elementor .e-con.row {
  flex: 0 1 auto;
}

/* ---------------------------------------------------------------------------
   WPForms

   The quote form is built in WPForms, which renders its own markup and ships a
   blue of its own. Rather than out-specify its rules, the design system is fed
   through the custom properties WPForms already reads, so the form inherits the
   studio's card, fields and gold button by construction. The few rules below
   cover what those properties do not reach: the uppercase label treatment, the
   gold focus ring and the select chevron.
   --------------------------------------------------------------------------- */
.wpforms-container {
  /* Card */
  --wpforms-container-padding: clamp(28px, 3.4vw, 48px);
  --wpforms-container-border-style: solid;
  --wpforms-container-border-width: 1px;
  --wpforms-container-border-color: var(--line-dark);
  --wpforms-container-border-radius: 0;
  --wpforms-background-color: var(--white);

  /* Fields */
  --wpforms-field-border-radius: 0;
  --wpforms-field-border-style: solid;
  --wpforms-field-border-size: 1px;
  --wpforms-field-background-color: var(--offwhite);
  --wpforms-field-border-color: var(--line-dark);
  --wpforms-field-text-color: var(--charcoal);
  --wpforms-field-menu-color: var(--white);
  --wpforms-field-size-font-size: 0.95rem;
  --wpforms-field-size-input-height: 52px;
  --wpforms-field-size-padding-h: 16px;
  --wpforms-field-size-input-spacing: 20px;

  /* Labels */
  --wpforms-label-color: var(--navy);
  --wpforms-label-error-color: var(--bordeaux);
  --wpforms-label-size-font-size: 0.7rem;
  --wpforms-label-size-line-height: 1.4;

  /* Submit */
  --wpforms-button-border-radius: 0;
  --wpforms-button-border-style: solid;
  --wpforms-button-border-size: 1px;
  --wpforms-button-background-color: var(--gold);
  --wpforms-button-border-color: var(--gold);
  --wpforms-button-text-color: var(--charcoal);
  --wpforms-button-size-font-size: 0.74rem;
  --wpforms-button-size-height: 56px;
  --wpforms-button-size-padding-h: 34px;

  max-width: none;
  margin: 0;
}

/* The design system sets labels in spaced uppercase; no variable covers that. */
.wpforms-container .wpforms-field-label {
  font-family: var(--ff-body);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 9px;
}

.wpforms-container .wpforms-required-label {
  color: var(--bordeaux);
  border: 0;
}

/* The same hand-drawn chevron the approved build used, so no icon font loads. */
.wpforms-container select {
  background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%),
    linear-gradient(135deg, var(--navy) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 44px;
  -webkit-appearance: none;
  appearance: none;
}

.wpforms-container textarea {
  resize: vertical;
  min-height: 150px;
  line-height: 1.7;
}

.wpforms-container input:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(194, 164, 109, 0.16);
}

.wpforms-container input::placeholder,
.wpforms-container textarea::placeholder {
  color: rgba(58, 58, 58, 0.42);
}

/* The submit button spans the card, as it does in the approved design. */
.wpforms-container .wpforms-submit-container button,
.wpforms-container .wpforms-submit-container input[type="submit"] {
  width: 100%;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.wpforms-container .wpforms-submit-container button:hover,
.wpforms-container .wpforms-submit-container input[type="submit"]:hover {
  background: var(--gold-deep);
  border-color: var(--gold-deep);
}

/* WPForms paints the success message its own green; the studio confirms in warm
   off-white with a gold rule, like every other affirmative surface on the site. */
.wpforms-confirmation-container-full,
.wpforms-confirmation-container-full.wpforms-confirmation-scroll,
div.wpforms-container .wpforms-confirmation-container-full {
  background: var(--offwhite-warm) !important;
  border: 1px solid var(--gold) !important;
  border-radius: 0;
  color: var(--charcoal);
  padding: clamp(22px, 2.6vw, 32px);
}

.wpforms-confirmation-container-full p {
  color: var(--charcoal);
  margin: 0;
}