/*
Theme Name: AR Systems
Theme URI: https://ar-systems.uk/
Description: Hello Elementor child theme for AR Systems Ltd. Carries the mockup's component styles for the Elementor build.
Author: Ashley Rowe
Template: hello-elementor
Version: 1.0.0
Text Domain: ar-systems
*/

/* Global colours mirror Elementor Site Settings; kept here so the child theme is self-describing. */
:root {
  --ar-navy: #003b6d; --ar-orange: #e8520b; --ar-red: #8a1401; --ar-yellow: #fabb00;
  --ar-dark: #002a4f; --ar-dark2: #001d38; --ar-light: #f2f5f9; --ar-border: #d6dde6; --ar-muted: #5c6875; --ar-text: #2f3640;
}
body { font-family: "Open Sans", Arial, sans-serif; color: var(--ar-text); }
a { color: var(--ar-orange); }
a:hover { color: var(--ar-red); }

/* Header */
.topbar .elementor-icon-list-items.elementor-inline-items { justify-content: flex-start; }
.topbar .elementor-icon-list-item { white-space: nowrap; }
.topbar .elementor-icon-list-item a, .topbar .elementor-icon-list-text { color: #cfd9e5 !important; }
.header .call-lbl p { margin: 0; color: var(--ar-muted); line-height: 1.1; }
.header .call-tel a { color: var(--ar-navy); text-decoration: none; }
.header .call-tel a:hover { color: var(--ar-orange); }
.header .call-tel { margin: 0; }
.header .call-tel p, .step-num p, .box-dark .bigtel p { margin: 0; font-weight: 700; line-height: 1.1; }
.step-num p { color: #fff; }
.navbar .hfe-nav-menu__layout-horizontal .hfe-nav-menu > li > a { border-bottom: 3px solid transparent; }
.navbar .hfe-nav-menu__layout-horizontal .hfe-nav-menu > li.current-menu-item > a,
.navbar .hfe-nav-menu__layout-horizontal .hfe-nav-menu > li.current-menu-ancestor > a { background: #00457f; border-bottom-color: var(--ar-orange); }
.navbar .sub-menu { border-top: 3px solid var(--ar-orange); }

/* Hero */
.hero .hero-line p { margin: 0; }
.hero .hero-or p { margin: 0; color: #dbe5f0; }
.hero .hero-or a { color: #fff; font-weight: 700; text-decoration: none; }
.hero .hero-or a:hover { text-decoration: underline; }
.hero .lead p { color: #dbe5f0; }

/* Boxes */
.box .box-title .elementor-heading-title { padding-bottom: 10px; border-bottom: 2px solid var(--ar-border); margin-bottom: 12px; }
.box.grp-fire { border-top: 4px solid var(--ar-red) !important; }
.box.grp-sec { border-top: 4px solid var(--ar-navy) !important; }
.box.grp-elec { border-top: 4px solid var(--ar-orange) !important; }
.box-dark .bigtel a { color: #fff; text-decoration: none; }
.box-dark .bigtel a:hover { color: var(--ar-yellow); }
.grp .elementor-heading-title, .grp-fire .elementor-heading-title, .grp-sec .elementor-heading-title, .grp-elec .elementor-heading-title { padding-left: 14px; border-left: 5px solid var(--ar-navy); }
.grp-fire .elementor-heading-title { border-left-color: var(--ar-red); }
.grp-elec .elementor-heading-title { border-left-color: var(--ar-orange); }
.svc-num p { color: var(--ar-muted); margin: 0; padding-top: 4px; }
.svcrow h3 a { color: var(--ar-navy); text-decoration: none; }
.svcrow h3 a:hover { color: var(--ar-orange); }

/* Grid lists (one Icon List widget, items laid out as tiles) */
.gridlist .elementor-icon-list-items { display: flex; flex-wrap: wrap; gap: 12px; }
.gridlist .elementor-icon-list-item { flex: 1 1 calc(33.333% - 8px); background: #fff; border: 1px solid var(--ar-border); padding: 14px 16px !important; margin: 0 !important; }
.gridlist.four .elementor-icon-list-item { flex-basis: calc(25% - 9px); }
.gridlist.two .elementor-icon-list-item { flex-basis: calc(50% - 6px); }
.gridlist .elementor-icon-list-text { color: var(--ar-navy) !important; font-weight: 600; }
.gridlist .elementor-icon-list-item a { color: var(--ar-navy); }
@media (max-width: 1024px) { .gridlist .elementor-icon-list-item, .gridlist.four .elementor-icon-list-item { flex-basis: calc(50% - 6px); } }
@media (max-width: 767px) { .gridlist .elementor-icon-list-item, .gridlist.four .elementor-icon-list-item, .gridlist.two .elementor-icon-list-item { flex-basis: 100%; } }

/* Plain lists / related line */
.elementor-widget-text-editor ul.twocol { columns: 2; column-gap: 32px; }
.elementor-widget-text-editor ul.twocol li { break-inside: avoid; }
@media (max-width: 767px) { .elementor-widget-text-editor ul.twocol { columns: 1; } .header .call-tel p { white-space: nowrap; font-size: clamp(15px, 4.6vw, 21px) !important; } }
.plainlist a, .elementor-widget-text-editor ul a { color: var(--ar-navy); font-weight: 600; text-decoration: none; }
.plainlist a:hover, .elementor-widget-text-editor ul a:hover { color: var(--ar-orange); text-decoration: underline; }
.related { border-top: 1px solid var(--ar-border); padding-top: 16px; margin-top: 12px; }
.sec-primary ul, .sec-primary li, .elementor-widget-text-editor ul.light li { color: #fff; }

/* Tables (Text Editor widgets keep the <table> markup) */
.plain-table table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 16px; }
.plain-table th, .plain-table td { border: 1px solid var(--ar-border); padding: 10px 14px; text-align: left; vertical-align: top; }
.plain-table th { background: var(--ar-light); font-weight: 700; color: var(--ar-navy); font-size: 17px; }
.facts th { width: 70%; font-weight: 600; }
.facts td { font-weight: 700; color: var(--ar-navy); }
@media (max-width: 767px) {
  .plain-table:not(.facts) tr:first-child { display: none; }
  .plain-table:not(.facts) tr, .plain-table:not(.facts) td { display: block; }
  .plain-table:not(.facts) tr { border: 1px solid var(--ar-border); margin-bottom: 12px; }
  .plain-table:not(.facts) td { border: 0; border-top: 1px solid var(--ar-border); }
  .plain-table:not(.facts) td:first-child { border-top: 0; background: var(--ar-light); font-weight: 700; color: var(--ar-navy); }
}

/* Footer */
.footer-title .elementor-heading-title { display: inline-block; padding-bottom: 8px; border-bottom: 2px solid rgba(255,255,255,.3); }
.footer-top a, .footer-bottom a { color: #e6edf4; text-decoration: none; }
.footer-top a:hover, .footer-bottom a:hover { color: var(--ar-yellow); }
.footer-top .elementor-icon-list-text { color: #c6d2df; }
.callbar { left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; height: auto !important; min-height: 0 !important; width: 100% !important; }
.callbar > .e-con { height: auto !important; }
.callbar .elementor-button { width: 100%; border-radius: 0; }
@media (max-width: 767px) { body { padding-bottom: 52px; } }

/* Forms (Contact Form 7) */
.wpcf7 label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.wpcf7 .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-checkbox):not(.wpcf7-radio) { width: 100%; font: inherit; font-size: 16px; padding: 11px 12px; border: 1px solid #c5ccd6; border-radius: 3px; background: #fff; }
.wpcf7 textarea { min-height: 130px; }
.wpcf7 .ar-row { display: flex; gap: 16px; }
.wpcf7 .ar-row > p { flex: 1; }
@media (max-width: 767px) { .wpcf7 .ar-row { flex-direction: column; gap: 0; } }
.wpcf7 fieldset { border: 1px solid var(--ar-border); padding: 18px 20px 4px; margin: 0 0 20px; }
.wpcf7 legend { font-weight: 700; font-size: 18px; color: var(--ar-navy); padding: 0 8px; }
.wpcf7 .wpcf7-list-item { display: block; margin: 0 0 6px; }
.wpcf7 .wpcf7-submit { font-family: "Open Sans", Arial, sans-serif; font-weight: 700; font-size: 17px; padding: 14px 28px; border: 2px solid var(--ar-orange); background: var(--ar-orange); color: #fff; border-radius: 3px; cursor: pointer; }
.wpcf7 .wpcf7-submit:hover { background: var(--ar-red); border-color: var(--ar-red); }

/* Review score */
.reviewscore { display: flex; align-items: center; gap: 18px; margin: 0; }
.reviewscore .n { font-size: 64px; font-weight: 700; color: var(--ar-navy); line-height: 1; }
.reviewscore .t { font-size: 16px; color: var(--ar-muted); border-left: 3px solid var(--ar-yellow); padding-left: 16px; }
@media (max-width: 480px) { .header .elementor-element img { max-width: 170px; } }
figure.wp-caption, .elementor-image figure { margin: 0; }

@media (max-width: 767px) { .contactstrip > .e-con { border-right: 0 !important; border-bottom: 1px solid var(--ar-border) !important; } .contactstrip > .e-con:last-child { border-bottom: 0 !important; } }

/* Header phone (icon list) */
.header .call-tel .elementor-icon-list-item a { color: var(--ar-navy); white-space: nowrap; }
.header .call-tel .elementor-icon-list-item a:hover { color: var(--ar-orange); }
.header .call-tel .elementor-icon-list-items { justify-content: flex-end; }

/* Contact tiles */
.contacttiles .tile { text-decoration: none; }
.contacttiles .tile::before { transition: background-color .2s; }
.contacttiles .tile:hover::before { background-color: rgba(0,43,80,.8) !important; }
.contacttiles .tilebox { box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.contacttiles .tile-lbl p { margin: 0; color: var(--ar-muted); font-size: 14px; }
.contacttiles .tile-val .elementor-heading-title { color: var(--ar-navy); }

/* SSAIB band */
.ssaibband .ssaib-title .elementor-heading-title { margin: 0; }
.ssaibband p { margin: 0; color: var(--ar-muted); }

/* Service boxes with icons (one Icon List widget laid out as tiles) */
.svctiles .elementor-icon-list-items { display: flex; flex-wrap: wrap; gap: 10px; }
.svctiles .elementor-icon-list-item { flex: 1 1 calc(50% - 5px); margin: 0 !important; padding: 0 !important; }
.svctiles .elementor-icon-list-item a { display: flex !important; align-items: center; width: 100%; padding: 14px 16px; border: 1px solid var(--ar-border); background: #fff; transition: border-color .15s, box-shadow .15s; }
.svctiles .elementor-icon-list-item a:hover { border-color: var(--ar-orange); box-shadow: 0 3px 10px rgba(0,43,80,.1); }
.svctiles .elementor-icon-list-icon { width: 26px; justify-content: center; }
.svctiles .elementor-icon-list-text { color: var(--ar-navy) !important; font-weight: 600; }
@media (max-width: 480px) { .svctiles .elementor-icon-list-item { flex-basis: 100%; } }
.grp.elementor-widget-heading .elementor-heading-title { padding-left: 12px; border-left: 4px solid var(--ar-navy); }
.grp-fire.elementor-widget-heading .elementor-heading-title { border-left-color: var(--ar-red); }
.grp-elec.elementor-widget-heading .elementor-heading-title { border-left-color: var(--ar-orange); }

.contacttiles .tile { padding-left: 24px !important; padding-right: 24px !important; }
.elementor-element.tiles-sec, .elementor-element.tiles-sec > .e-con-inner { padding: 0 !important; max-width: none !important; }
.svctiles .elementor-icon-list-item::before, .svctiles .elementor-icon-list-item::after { display: none !important; }

/* Service boxes: equal-height two-column tiles, readable icons */
.svctiles .elementor-icon-list-items { align-items: stretch; }
.svctiles .elementor-icon-list-item { flex: 0 0 calc(50% - 5px) !important; display: flex !important; }
.svctiles .elementor-icon-list-item a { min-height: 66px; }
.svctiles .elementor-icon-list-icon i { font-size: 20px !important; }
.svctiles .elementor-icon-list-icon svg { width: 20px !important; height: 20px !important; }
.svctiles .elementor-icon-list-icon { width: 30px !important; min-width: 30px; }
.svctiles .elementor-icon-list-text { font-size: 16px; line-height: 1.25; padding-left: 6px; }
.elementor-widget-heading.grp + .elementor-widget-icon-list.svctiles { margin-top: 2px; }
.elementor-widget-icon-list.svctiles + .elementor-widget-heading.grp { margin-top: 14px; }
@media (max-width: 480px) { .svctiles .elementor-icon-list-item { flex-basis: 100% !important; } }
.ssaibband .elementor-button { white-space: nowrap; }

/* ---------- Vertical rhythm (site-wide) ---------- */
.e-con > .elementor-widget-heading + .elementor-widget { margin-top: 18px; }
.e-con > .elementor-widget-heading h2.elementor-heading-title { line-height: 1.25; }
.e-con > .elementor-widget-heading + .elementor-widget-heading { margin-top: 10px; }
.e-con > .elementor-widget-heading:has(h3) + .elementor-widget:not(.elementor-widget-heading),
.e-con > .elementor-widget-heading:has(h4) + .elementor-widget:not(.elementor-widget-heading) { margin-top: 6px; }
.e-con > .elementor-widget:not(.elementor-widget-heading) + .elementor-widget-heading:has(h3) { margin-top: 24px; }
.e-con > .elementor-widget-text-editor + .elementor-widget-text-editor,
.e-con > .elementor-widget-text-editor + .elementor-widget-icon-list,
.e-con > .elementor-widget-icon-list + .elementor-widget-text-editor { margin-top: 14px; }
.e-con > .elementor-widget-text-editor + .e-con:not(.btn-row), .e-con > .elementor-widget-icon-list + .e-con:not(.btn-row) { margin-top: 24px; }
.e-con > .elementor-widget-text-editor + .e-con.btn-row,
.e-con > .elementor-widget-text-editor + .elementor-widget-button,
.e-con > .elementor-widget-icon-list + .e-con.btn-row,
.e-con > .elementor-widget-icon-list + .elementor-widget-button,
.e-con > .elementor-widget-accordion + .elementor-widget-button { margin-top: 28px; }
.e-con > .elementor-widget:not(.elementor-widget-heading) + .elementor-widget-heading,
.e-con > .e-con + .elementor-widget-heading { margin-top: 32px; }
.e-con > .elementor-widget-text-editor + .elementor-widget-shortcode,
.e-con > .elementor-widget-heading + .elementor-widget-shortcode { margin-top: 18px; }
.e-con > .elementor-widget + .elementor-widget-image,
.e-con > .elementor-widget-image + .elementor-widget { margin-top: 20px; }
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }
/* button rows sit flush with the text above, no container indent */
.e-con.btn-row { --padding-left: 0px; --padding-right: 0px; padding-left: 0 !important; padding-right: 0 !important; }
/* compact components keep their own tight spacing */
.tilebox > .elementor-widget + .elementor-widget, .tilebox > .elementor-widget-heading + .elementor-widget,
.step .e-con > .elementor-widget + .elementor-widget, .svcrow .e-con > .elementor-widget + .elementor-widget,
.ssaibband .e-con > .elementor-widget + .elementor-widget { margin-top: 4px; }
.hero .e-con > .elementor-widget-heading + .elementor-widget { margin-top: 14px; }
.pagehead .e-con > .elementor-widget-heading + .elementor-widget, .pagehead > .e-con-inner > .elementor-widget-heading + .elementor-widget { margin-top: 8px; }

/* ---------- Mobile pass ---------- */
/* Contact Form 7: clear space between one field and the next label */
.wpcf7 form p { margin: 0 0 18px; }
.wpcf7 form label { display: block; margin: 0; line-height: 1.3; }
.wpcf7 .wpcf7-form-control-wrap { display: block; margin-top: 6px; }
.wpcf7 fieldset p:last-child { margin-bottom: 14px; }
.wpcf7 .wpcf7-list-item { margin: 0 0 8px; }

@media (max-width: 767px) {
  /* SSAIB band, reviews block and footer bottom: fully centred */
  .ssaibband, .ssaibband .e-con { align-items: center !important; text-align: center; }
  .ssaibband .elementor-widget-heading, .ssaibband .elementor-widget-text-editor { text-align: center; }
  .ssaibband .elementor-heading-title { text-align: center; }
  .reviews-sec .e-con { align-items: center !important; text-align: center; }
  .reviews-sec .elementor-heading-title, .reviews-sec .elementor-widget-text-editor { text-align: center; }
  .reviews-sec .btn-row { justify-content: center !important; }
  .reviews-sec .reviewscore { justify-content: center; }
  .footer-bottom, .footer-bottom .e-con { align-items: center !important; }
  .footer-bottom .elementor-widget-text-editor, .footer-bottom .elementor-widget-text-editor p { text-align: center !important; }
  /* stacked buttons: full width so rows don't look ragged */
  .e-con.btn-row { flex-direction: column !important; align-items: stretch !important; }
  .e-con.btn-row > .elementor-widget-button, .e-con.btn-row .elementor-button-wrapper, .e-con.btn-row .elementor-button { width: 100%; }
  .e-con.btn-row .elementor-button { justify-content: center; }
  .e-con.btn-row .elementor-widget-text-editor { text-align: center; }
  /* photo title bands: a little less height, text keeps the page margin */
  .pagehead .elementor-heading-title { font-size: 28px !important; }
  /* section headings slightly smaller on phones */
  .e-con > .elementor-widget-heading h2.elementor-heading-title { font-size: 25px; }
}

/* FAQ jump links land below the sticky nav */
.elementor-widget-heading[id] { scroll-margin-top: 80px; }

/* Job photo row: three across, stacked on phones */
.e-con.jobrow { flex-wrap: nowrap !important; gap: 16px !important; }
.e-con.jobrow > .e-con { width: calc(33.333% - 11px) !important; flex: 0 0 calc(33.333% - 11px) !important; }
.e-con.jobrow img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
@media (max-width: 767px) { .e-con.jobrow { flex-direction: column !important; } .e-con.jobrow > .e-con { width: 100% !important; flex-basis: 100% !important; } }

/* Quote panel on service pages */
.quotebox .elementor-widget-text-editor a { color: var(--ar-yellow); }
.quotebox .elementor-widget-text-editor a:hover { color: #fff; }
.quotebox .wpcf7 label { color: #fff; }
.quotebox .wpcf7 .wpcf7-form-control:not(.wpcf7-submit) { border-color: #fff !important; }
.quotebox .wpcf7 .wpcf7-submit { border-color: var(--ar-orange); }
.quotebox .wpcf7 .wpcf7-submit:hover { background: #fff; color: var(--ar-navy); border-color: #fff; }
.quotebox .wpcf7-response-output { color: #fff; }
.quotebox .wpcf7-not-valid-tip { color: #ffd27a; }

/* callbar fit + header phone on small phones */
@media (max-width: 767px) {
  .callbar .elementor-button { padding: 14px 8px !important; font-size: 15px !important; white-space: nowrap; }
  .callbar .elementor-button-icon { margin-right: 6px; }
  .header .call-tel .elementor-icon-list-icon { display: none !important; }
  .header .call-tel .elementor-icon-list-text { padding-left: 0 !important; }
}
@media (max-width: 400px) { .header .call-tel .elementor-icon-list-text { font-size: 18px !important; } }