/*
Theme Name:   Auto Glass Mobile
Description:  Divi 5 child theme for Auto Glass Mobile.
Author:       Auto Glass Mobile
Template:     Divi
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  auto-glass-mobile
*/

/* ---------------------------------------------------------------------------
 * Custom styles go below this line.
 *
 * House rules for this file:
 *   - Every custom class is prefixed `agmp-`, no exceptions. Check for
 *     collisions before introducing a new one.
 *   - Custom CSS is a last resort. Reach for Divi 5 Composable Settings,
 *     presets and design variables first, and note why the builder-native
 *     path did not work whenever a rule lands here.
 *   - No hardcoded colors, fonts or spacing: reference a design variable so
 *     the site restyles from one place.
 *   - No absolute URLs. This install is staged at /staging/9186/ and gets
 *     pushed to production later.
 * ------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------------
 * agmp- Fluent Forms styling
 *
 * Why custom CSS here: Fluent Forms renders its own markup outside Divi's
 * module system, so no Divi module attr can reach these elements. Every value
 * below references a design token, so the form restyles with the palette.
 * ------------------------------------------------------------------------ */

.agmp-form-wrap .fluentform .ff-el-group { margin-bottom: var(--gvid-a504c605-ae9a-42b1-8910-0aa4803214af); }

.agmp-form-wrap .fluentform .ff-el-input--label label {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 500;
  font-size: var(--gvid-78b69969-3acc-48c2-b66d-3ce17b2ee433);
  letter-spacing: var(--gvid-099bc969-ce8d-4414-8aaf-c0ac906155eb);
  text-transform: uppercase;
  color: var(--gcid-body-color);
  margin-bottom: var(--gvid-59de7e02-b343-48e1-8e06-c579dfee1dfd);
  display: block;
}

.agmp-form-wrap .fluentform .ff-el-form-control {
  width: 100%;
  font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
  font-size: var(--gvid-755428a0-6821-48b6-bff4-0110b48fa6ec);
  line-height: var(--gvid-f98bc408-3828-4def-a0ca-38b80fb78e92);
  color: var(--gcid-body-color);
  background: #fff;
  border: 1px solid var(--gcid-5c78e2bc-43c3-436e-ac21-d910bcffb9dc);
  border-radius: var(--gvid-c6991018-8c94-4e1d-b6e0-8fb9c8f78c30);
  padding: var(--gvid-be592cc4-1539-47d6-ac80-428f695e8a35) var(--gvid-15cd3f31-159a-41f2-8877-12968f66d2ee);
  box-shadow: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.agmp-form-wrap .fluentform .ff-el-form-control::placeholder { color: var(--gcid-5c78e2bc-43c3-436e-ac21-d910bcffb9dc); opacity: 1; }

.agmp-form-wrap .fluentform .ff-el-form-control:hover { border-color: var(--gcid-secondary-color); }

.agmp-form-wrap .fluentform .ff-el-form-control:focus,
.agmp-form-wrap .fluentform .ff-el-form-control:focus-visible {
  outline: none;
  border-color: var(--gcid-primary-color);
  box-shadow: 0 0 0 3px hsl(from var(--gcid-primary-color) calc(h + 0) calc(s + 0) calc(l + 0) / 0.18);
}

.agmp-form-wrap .fluentform textarea.ff-el-form-control { min-height: 140px; resize: vertical; }

.agmp-form-wrap .fluentform .ff-btn-submit {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 500;
  font-size: var(--gvid-086c1769-a18f-4921-8cae-301311e4673a);
  color: var(--gcid-da04d35f-7a52-447e-9fff-446c995aa9d6);
  background: var(--gcid-link-color);
  border: 1px solid var(--gcid-cc68aa51-03ce-46c4-beca-044ba519bd8a);
  border-radius: var(--gvid-c6991018-8c94-4e1d-b6e0-8fb9c8f78c30);
  padding: var(--gvid-15cd3f31-159a-41f2-8877-12968f66d2ee) var(--gvid-90449b56-79ad-45a0-8cc4-d19389494329);
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
}

.agmp-form-wrap .fluentform .ff-btn-submit:hover {
  background: hsl(from var(--gcid-link-color) calc(h + 0) calc(s + 0) calc(l - 6));
}

.agmp-form-wrap .fluentform .ff-btn-submit:focus-visible {
  outline: 3px solid var(--gcid-primary-color);
  outline-offset: 2px;
}

.agmp-form-wrap .fluentform .ff-el-is-error .ff-el-form-control { border-color: var(--gcid-link-color); }

.agmp-form-wrap .fluentform .error,
.agmp-form-wrap .fluentform .text-danger,
.agmp-form-wrap .fluentform .ff-el-is-error .error-text {
  font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
  font-size: var(--gvid-032681ef-611c-4011-97dd-b82af3061d73);
  color: var(--gcid-link-color);
  margin-top: var(--gvid-94a156d1-85af-4ce9-babc-0b04ce1425ed);
}

.agmp-form-wrap .fluentform .ff-message-success {
  font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
  font-size: var(--gvid-755428a0-6821-48b6-bff4-0110b48fa6ec);
  color: var(--gcid-da04d35f-7a52-447e-9fff-446c995aa9d6);
  background: var(--gcid-secondary-color);
  border: 1px solid var(--gcid-cc68aa51-03ce-46c4-beca-044ba519bd8a);
  border-radius: var(--gvid-c6991018-8c94-4e1d-b6e0-8fb9c8f78c30);
  padding: var(--gvid-15cd3f31-159a-41f2-8877-12968f66d2ee);
}

@media (prefers-reduced-motion: reduce) {
  .agmp-form-wrap .fluentform .ff-el-form-control,
  .agmp-form-wrap .fluentform .ff-btn-submit { transition: none; }
}

/* Map Fluent Forms' own custom properties onto the design tokens.
 * Fluent styles its submit button via `form.fluent_form_1 .ff-btn-submit:not(...)`
 * reading var(--fluentform-primary). Overriding the variables is the supported
 * extension point and avoids a specificity war or !important. */
.agmp-form-wrap .fluentform,
.agmp-form-wrap form.frm-fluent-form {
  --fluentform-primary: var(--gcid-link-color);
  --fluentform-secondary: var(--gcid-body-color);
  --fluentform-danger: var(--gcid-link-color);
  --fluentform-border-color: var(--gcid-5c78e2bc-43c3-436e-ac21-d910bcffb9dc);
  --fluentform-border-radius: var(--gvid-c6991018-8c94-4e1d-b6e0-8fb9c8f78c30);
}

/* Fluent hardcodes #fff on the submit label. Memory requires agmp-clear on dark,
 * never pure white, so match Fluent's own selector specificity (0,4,1) rather
 * than reaching for !important. */
.agmp-form-wrap form.frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style) {
  color: var(--gcid-da04d35f-7a52-447e-9fff-446c995aa9d6);
}

/* ---------------------------------------------------------------------------
 * agmp- FAQ accordion
 * Divi's accordion chrome (borders, toggle icon, open/closed states) is not
 * exposed as module attrs, so it is restyled here. Tokens only.
 * ------------------------------------------------------------------------ */

.agmp-faq .et_pb_accordion_item {
  border: 0;
  border-top: 1px solid var(--gcid-5c78e2bc-43c3-436e-ac21-d910bcffb9dc);
  background: transparent;
  padding: 0;
}
.agmp-faq .et_pb_accordion_item:last-child { border-bottom: 1px solid var(--gcid-5c78e2bc-43c3-436e-ac21-d910bcffb9dc); }

.agmp-faq .et_pb_toggle_title {
  font-family: 'Archivo', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: var(--gvid-0ce33455-e5ff-46b7-949d-a0ec9ce80f82);
  line-height: var(--gvid-7f6df9c9-64a7-4fed-957f-0a9de8f086a8);
  color: var(--gcid-heading-color);
  padding: var(--gvid-a504c605-ae9a-42b1-8910-0aa4803214af) 0;
  padding-right: var(--gvid-3adb1be2-3eea-4c7f-8f58-e389c72fcce7);
  cursor: pointer;
  position: relative;
  transition: color .18s ease;
}
.agmp-faq .et_pb_toggle_title:hover { color: var(--gcid-link-color); }

/* Replace Divi's glyph toggle with a token-coloured plus/minus drawn in CSS. */
.agmp-faq .et_pb_toggle_title:before,
.agmp-faq .et_pb_toggle_title:after { display: none !important; }

.agmp-faq .et_pb_toggle_title { --agmp-mark: var(--gcid-5c78e2bc-43c3-436e-ac21-d910bcffb9dc); }
.agmp-faq .et_pb_accordion_item .et_pb_toggle_title:before {
  content: '';
  display: block !important;
  position: absolute;
  right: 4px;
  top: 50%;
  width: 18px;
  height: 2px;
  background: var(--agmp-mark);
  transform: translateY(-50%);
  transition: background-color .18s ease;
}
.agmp-faq .et_pb_accordion_item .et_pb_toggle_title:after {
  content: '';
  display: block !important;
  position: absolute;
  right: 12px;
  top: 50%;
  width: 2px;
  height: 18px;
  background: var(--agmp-mark);
  transform: translateY(-50%) scaleY(1);
  transform-origin: center;
  transition: transform .22s ease, background-color .18s ease;
}
.agmp-faq .et_pb_toggle_open .et_pb_toggle_title:after { transform: translateY(-50%) scaleY(0); }
.agmp-faq .et_pb_toggle_open .et_pb_toggle_title { --agmp-mark: var(--gcid-link-color); color: var(--gcid-link-color); }

.agmp-faq .et_pb_toggle_content {
  font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
  font-size: var(--gvid-755428a0-6821-48b6-bff4-0110b48fa6ec);
  line-height: var(--gvid-f98bc408-3828-4def-a0ca-38b80fb78e92);
  color: var(--gcid-body-color);
  max-width: 68ch;
  padding: 0 var(--gvid-3adb1be2-3eea-4c7f-8f58-e389c72fcce7) var(--gvid-a504c605-ae9a-42b1-8910-0aa4803214af) 0;
}

.agmp-faq .et_pb_toggle_title:focus-visible {
  outline: 3px solid var(--gcid-link-color);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .agmp-faq .et_pb_toggle_title,
  .agmp-faq .et_pb_accordion_item .et_pb_toggle_title:before,
  .agmp-faq .et_pb_accordion_item .et_pb_toggle_title:after { transition: none; }
}

/* ---------------------------------------------------------------------------
 * agmp- damage typology diagram (inline SVG in the services band)
 * Drawn rather than photographed because the three break types are exactly
 * what a visitor needs to compare against their own glass, and a photo cannot
 * show all three cleanly at this size. Tokens only.
 * ------------------------------------------------------------------------ */

.agmp-damage { margin: 0; }
.agmp-damage svg { width: 100%; height: auto; display: block; }

.agmp-damage .agmp-pane {
  fill: none;
  stroke: var(--gcid-5c78e2bc-43c3-436e-ac21-d910bcffb9dc);
  stroke-width: 1.5;
}
.agmp-damage .agmp-mark circle,
.agmp-damage .agmp-mark path {
  fill: none;
  stroke: var(--gcid-secondary-color);
  stroke-width: 2;
  stroke-linecap: round;
}
.agmp-damage .agmp-mark .agmp-core {
  fill: var(--gcid-link-color);
  stroke: none;
}
.agmp-damage .agmp-label text {
  fill: var(--gcid-5c78e2bc-43c3-436e-ac21-d910bcffb9dc);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--gvid-099bc969-ce8d-4414-8aaf-c0ac906155eb);
}
.agmp-damage figcaption {
  margin-top: var(--gvid-15cd3f31-159a-41f2-8877-12968f66d2ee);
  font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
  font-size: var(--gvid-032681ef-611c-4011-97dd-b82af3061d73);
  line-height: var(--gvid-f98bc408-3828-4def-a0ca-38b80fb78e92);
  color: var(--gcid-body-color);
  max-width: 46ch;
}

/* ---------------------------------------------------------------------------
 * agmp- typographic wrapping
 * Per-word   fixes only hold at the width they were measured at — a word
 * rescued at 390px orphans again at 360px. `balance` evens out heading lines;
 * `pretty` stops a single word being left alone on a paragraph's last line, at
 * any width. Both degrade to normal wrapping where unsupported, so the  
 * pairs already in the copy remain as a floor.
 * ------------------------------------------------------------------------ */

.et-l--body h1,
.et-l--body h2,
.et-l--body h3,
.et-l--header h1, .et-l--header h2,
.et-l--footer h2, .et-l--footer h3 {
  text-wrap: balance;
}

.et-l--body .et_pb_text_inner p,
.et-l--body .et_pb_toggle_content p,
.et-l--footer .et_pb_text_inner p,
.agmp-damage figcaption {
  text-wrap: pretty;
}

/* ---------------------------------------------------------------------------
 * agmp- proof bar (band 2)
 * A bar, not a section: the rating carries the weight, the two supporting
 * items sit behind a hairline rule drawn on the columns via Divi border attrs.
 * Everything here is layout plus the colour of the inline SVG marks.
 * ------------------------------------------------------------------------ */

.agmp-rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gvid-be592cc4-1539-47d6-ac80-428f695e8a35);
}

.agmp-rating__score {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
  font-size: var(--gvid-6c6809b2-0ec5-4793-9bcd-0f5527fd0080);
  line-height: var(--gvid-bb3ed05c-4fe8-447f-8615-b5056f38055b);
  letter-spacing: var(--gvid-2f1520ba-e2a8-4fb6-8138-b972d6a0aa3f);
  color: var(--gcid-da04d35f-7a52-447e-9fff-446c995aa9d6);
}

.agmp-rating__stars {
  flex: 0 0 auto;
  width: 108px;
  height: 20px;
  color: var(--gcid-cc68aa51-03ce-46c4-beca-044ba519bd8a);
}

.agmp-proofbar__icon {
  display: block;
  width: 48px;
  height: 30px;
  color: var(--gcid-cc68aa51-03ce-46c4-beca-044ba519bd8a);
}

/* Spacing in the bar is owned by the row and the modules' own margins. */
.agmp-proofbar .et_pb_code,
.agmp-proofbar .et_pb_text {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * agmp- damage typology (band 3 feature block)
 * The signature element. Border, radius and padding are set natively on the
 * column so they stay editable; this file owns the diagram grid, the drawing
 * itself, and the label/verdict pair.
 * ------------------------------------------------------------------------ */

.agmp-typology-card {
  box-shadow: 0 1px 2px rgba(11, 27, 43, 0.04), 0 8px 24px -12px rgba(11, 27, 43, 0.14);
}

.agmp-typology {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gvid-3adb1be2-3eea-4c7f-8f58-e389c72fcce7);
}

.agmp-typology__item {
  margin: 0;
}

.agmp-typology__svg {
  display: block;
  width: 100%;
  height: auto;
}

/* The pane outline is the windshield itself, not decoration, so it has to
 * clear the 3:1 non-text contrast floor. 0.5 measured 2.04:1; 0.75 clears it
 * while still sitting behind the damage marks, which run at 5.09:1. */
.agmp-typology__pane {
  fill: none;
  stroke: var(--gcid-5c78e2bc-43c3-436e-ac21-d910bcffb9dc);
  stroke-width: 1.5;
  opacity: 0.75;
}

.agmp-typology__ring,
.agmp-typology__legs path,
.agmp-typology__crack {
  fill: none;
  stroke: var(--gcid-5c78e2bc-43c3-436e-ac21-d910bcffb9dc);
  stroke-width: 2;
  stroke-linecap: round;
}

.agmp-typology__crack {
  stroke-width: 2.5;
}

.agmp-typology__core {
  fill: var(--gcid-link-color);
  stroke: none;
}

.agmp-typology__item figcaption {
  margin-top: var(--gvid-15cd3f31-159a-41f2-8877-12968f66d2ee);
}

.agmp-typology__label,
.agmp-typology__verdict {
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 500;
  letter-spacing: var(--gvid-099bc969-ce8d-4414-8aaf-c0ac906155eb);
  text-transform: uppercase;
  line-height: var(--gvid-cbfc9e43-f3cb-4719-84b0-343230f00bb9);
}

.agmp-typology__label {
  font-size: var(--gvid-032681ef-611c-4011-97dd-b82af3061d73);
  color: var(--gcid-heading-color);
}

.agmp-typology__verdict {
  margin-top: var(--gvid-94a156d1-85af-4ce9-babc-0b04ce1425ed);
  font-size: var(--gvid-78b69969-3acc-48c2-b66d-3ce17b2ee433);
  color: var(--gcid-5c78e2bc-43c3-436e-ac21-d910bcffb9dc);
}

@media (max-width: 767px) {
  .agmp-typology {
    grid-template-columns: 1fr;
    gap: var(--gvid-90449b56-79ad-45a0-8cc4-d19389494329);
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Mobile header bar (Theme Builder layout 220)

   Below the tablet breakpoint the logo and the call button stacked, which
   read as two loose elements rather than a header. This lays them out on
   one row: logo left, button right, both vertically centred.

   Why CSS and not module settings: Divi's "layout" decoration group emits
   no CSS at all through the Novamira abilities — display/flex-direction/
   align-items/justify-content are all silently dropped, the same defect
   class as the "position" group. Verified by inspecting every generated
   rule for the five header modules: sizing and spacing emit, display never
   does. The sizing (column width, image max-height) and spacing (padding)
   below ARE set on the modules; only the flex container needs to live here.

   Scoped to .et-l--header and to classes set on the modules themselves,
   not to Divi's generated et_pb_*_tb_header names, so a layout edit in the
   builder cannot silently break it.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

	.et-l--header .agmp-headerbar {
		display: flex !important;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		column-gap: 12px;
	}

	/* Divi gives .et_pb_row a clearfix ::before/::after. In a flex container
	   those become flex items, so space-between distributes across three or
	   four items and the button never reaches the right edge. */
	.et-l--header .agmp-headerbar::before,
	.et-l--header .agmp-headerbar::after {
		display: none !important;
	}

	.et-l--header .agmp-headerbar > .et_pb_column {
		width: auto !important;
		max-width: none !important;
		margin-bottom: 0 !important;
		padding: 0 !important;
	}

	/* Logo may shrink; the button never does. */
	.et-l--header .agmp-headerbar__logo { flex: 0 1 auto; min-width: 0; }
	.et-l--header .agmp-headerbar__cta  { flex: 0 0 auto; }

	.et-l--header .agmp-headerbar .et_pb_image,
	.et-l--header .agmp-headerbar .et_pb_image .et_pb_image_wrap {
		margin: 0 !important;
		display: block;
		line-height: 0;
	}
	.et-l--header .agmp-headerbar .et_pb_image img {
		display: block;
		height: 44px;
		width: auto;
		max-width: 100%;
	}

	/* Sizes to its content, but never below a 48px tap target. */
	.et-l--header .agmp-headerbar .et_pb_button {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: auto !important;
		min-height: 48px;
		margin: 0 !important;
		white-space: nowrap;
	}
	.et-l--header .agmp-headerbar .et_pb_button_module_wrapper { margin: 0 !important; }
}

/* The shortened "Call" label at phone is set natively on the module
   (button.innerContent.phone.value.text), not here. Only the logo height
   steps down at the narrowest widths. */
@media (max-width: 379px) {
	.et-l--header .agmp-headerbar .et_pb_image img { height: 40px; }
}