/* ==========================================================================
   argosygroup — Design System layer
   Navy + Signal Red. Loaded LAST (after theme / Elementor / ElementsKit).
   Single source of truth for colour, type, spacing, radius, elevation and
   component styling. Remove this file to revert the whole layer.
   ========================================================================== */

/* --------------------------------------------------------------- fonts --- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/inter-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('fonts/saira-var.woff2') format('woff2');
}

/* -------------------------------------------------------------- tokens --- */
:root {
  /* brand */
  --ag-navy-900: #0B1F3A;
  --ag-navy-800: #12294B;
  --ag-navy-700: #1B3A66;
  --ag-red-600:  #E42313;
  --ag-red-700:  #C10E05;
  /* neutrals */
  --ag-slate-900: #0F172A;
  --ag-slate-700: #334155;
  --ag-slate-500: #64748B;
  --ag-slate-200: #E2E8F0;
  --ag-slate-100: #F1F5F9;
  --ag-slate-50:  #F8FAFC;
  --ag-white:     #FFFFFF;
  /* states */
  --ag-success: #15803D;
  --ag-warning: #B45309;
  --ag-info:    #0369A1;
  /* shape + depth */
  --ag-radius: 8px;
  --ag-radius-lg: 12px;
  --ag-radius-media: 16px;
  --ag-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --ag-shadow-md: 0 8px 24px rgba(15, 23, 42, .08);
  --ag-shadow-lg: 0 16px 40px rgba(11, 31, 58, .12);
  /* layout */
  --ag-container: 1200px;
  --ag-section-y: 88px;
  /* type */
  --ag-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --ag-font-head: 'Saira', var(--ag-font-body);

  /* remap the theme's palette (overrides the leftover blue + the !important hacks) */
  --ast-global-color-0: var(--ag-navy-900) !important;
  --ast-global-color-1: var(--ag-navy-800) !important;
  --ast-global-color-2: var(--ag-slate-900) !important;
  --ast-global-color-3: var(--ag-slate-700) !important;
  --ast-global-color-4: var(--ag-white) !important;
  --ast-global-color-5: var(--ag-slate-50) !important;
  --ast-global-color-6: var(--ag-slate-900) !important;
  --ast-global-color-7: var(--ag-slate-200) !important;
  --ast-global-color-8: var(--ag-slate-900) !important;

  /* remap Elementor global colours (widgets using globals follow the brand) */
  --e-global-color-primary: var(--ag-navy-900);
  --e-global-color-secondary: var(--ag-red-600);
  --e-global-color-text: var(--ag-slate-700);
  --e-global-color-accent: var(--ag-navy-800);
  --e-global-color-astglobalcolor0: var(--ag-navy-900);
  --e-global-color-astglobalcolor1: var(--ag-navy-800);
  --e-global-color-astglobalcolor2: var(--ag-slate-900);
  --e-global-color-astglobalcolor3: var(--ag-slate-700);
  --e-global-color-astglobalcolor4: var(--ag-white);
  --e-global-color-astglobalcolor5: var(--ag-slate-50);
  --e-global-color-astglobalcolor6: var(--ag-slate-900);
  --e-global-color-astglobalcolor7: var(--ag-slate-200);
  --e-global-color-astglobalcolor8: var(--ag-slate-900);
}

/* ---------------------------------------------------------------- base --- */
body,
body.elementor-kit-7,
.ast-separate-container {
  font-family: var(--ag-font-body) !important;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ag-slate-700);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* text widgets adopt the type system — NEVER icon elements (i / [class*=icon])
   or the icon fonts break. */
.elementor-icon-list-text,
.elementor-image-box-title,
.elementor-image-box-description,
.elementor-icon-box-title,
.elementor-icon-box-description,
.elementor-counter-number,
.elementor-counter-title,
.elementor-testimonial-content,
.elementor-testimonial-name,
.elementor-testimonial-job,
.elementor-post__title a,
.elementor-post__meta-data,
.elementor-widget-elementskit-heading .elementskit-heading-title {
  font-family: var(--ag-font-body) !important;
}
.elementor-image-box-title,
.elementor-icon-box-title,
.elementor-testimonial-name,
.elementor-counter-number,
.elementskit-heading-title { font-family: var(--ag-font-head) !important; }

/* keep the two display faces on the elements that carry titles */
h1, h2, h3, h4, h5, h6,
.entry-title,
.elementor-heading-title,
.elementor-widget-heading .elementor-heading-title,
.elementor-image-box-title,
.elementor-icon-box-title,
.elementskit-heading-title {
  font-family: var(--ag-font-head) !important;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h1, .elementor-widget-heading h1.elementor-heading-title { font-size: clamp(2rem, 1.35rem + 2.4vw, 3.35rem); }
h2, .elementor-widget-heading h2.elementor-heading-title { font-size: clamp(1.65rem, 1.25rem + 1.5vw, 2.5rem); }
h3, .elementor-widget-heading h3.elementor-heading-title { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.6rem); }
h4 { font-size: 1.2rem; }
h5 { font-size: 1.05rem; }
h6 { font-size: .95rem; text-transform: uppercase; letter-spacing: .08em; }

/* body copy inside rich text stays readable on both light and dark sections */
.elementor-widget-text-editor p,
.elementor-widget-text-editor li { line-height: 1.7; }

a { transition: color .15s ease; }
.elementor-widget-text-editor a:hover,
.entry-content a:hover { color: var(--ag-red-600); }

::selection { background: rgba(228, 35, 19, .15); }

/* ------------------------------------------------------------- buttons --- */
.elementor-button,
.elementor-button.elementor-size-sm,
.elementor-button.elementor-size-md,
.elementor-button.elementor-size-lg,
.elementor-button.elementor-size-xl,
.elementor-button-link,
.ekit-btn,
.elementskit-btn,
.ast-button,
.wp-block-button__link,
input[type="submit"],
.wpcf7-submit {
  font-family: var(--ag-font-body) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  letter-spacing: .01em;
  padding: 13px 24px !important;
  border-radius: var(--ag-radius) !important;
  border: 1px solid transparent !important;
  background-color: var(--ag-red-600) !important;
  color: var(--ag-white) !important;
  text-transform: none;
  transition: background-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
  box-shadow: none;
}
.elementor-button:hover,
.elementor-button-link:hover,
.ekit-btn:hover,
.elementskit-btn:hover,
.ast-button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover,
.wpcf7-submit:hover {
  background-color: var(--ag-red-700) !important;
  color: var(--ag-white) !important;
  transform: translateY(-1px);
  box-shadow: var(--ag-shadow-md);
}
/* secondary / outline buttons: navy */
.ast-outline-button,
.elementor-button[data-ag="ghost"] {
  background-color: transparent !important;
  color: var(--ag-navy-900) !important;
  border-color: var(--ag-navy-900) !important;
}
.ast-outline-button:hover,
.elementor-button[data-ag="ghost"]:hover {
  background-color: var(--ag-navy-900) !important;
  color: var(--ag-white) !important;
}

/* --------------------------------------------------------------- forms --- */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea,
.elementor-field,
.elementor-field-group .elementor-field,
input[type="text"]:not([class*="elementor"]),
input[type="email"],
input[type="tel"],
textarea,
select {
  font-family: var(--ag-font-body) !important;
  font-size: 15px !important;
  color: var(--ag-slate-900) !important;
  background-color: var(--ag-white) !important;
  border: 1px solid var(--ag-slate-200) !important;
  border-radius: var(--ag-radius) !important;
  padding: 12px 14px !important;
  min-height: 46px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus,
.elementor-field:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--ag-navy-900) !important;
  box-shadow: 0 0 0 3px rgba(11, 31, 58, .12) !important;
  outline: none !important;
}
.wpcf7 label,
.elementor-field-label { font-weight: 600; color: var(--ag-slate-900); font-size: 14px; }

/* --------------------------------------------------------------- cards --- */
.elementor-widget-image-box .elementor-image-box-wrapper,
.elementor-widget-icon-box .elementor-icon-box-wrapper,
.elementor-widget-elementskit-info-box .ekit-wid-con .elementskit-infobox,
.ekit-wid-con .elementskit-post-card,
.elementor-posts .elementor-post {
  border-radius: var(--ag-radius-lg) !important;
  transition: transform .2s ease, box-shadow .2s ease;
}
.elementor-posts .elementor-post {
  background: var(--ag-white);
  border: 1px solid var(--ag-slate-200);
  overflow: hidden;
  box-shadow: var(--ag-shadow-sm);
}
.elementor-posts .elementor-post:hover {
  transform: translateY(-4px);
  box-shadow: var(--ag-shadow-md);
}
.elementor-posts .elementor-post__thumbnail img,
.elementor-widget-image img,
.elementor-widget-image-box img { border-radius: var(--ag-radius-media); }

/* --------------------------------------------------------- nav / header ---
   The header template is fully transparent and sits over the (dark) hero.
   Paint it with the brand navy so the menu is readable on ANY background,
   and keep it glued on scroll (position: sticky) so it never disappears.
   Remove the two rules below to go back to a transparent header. */

.ekit-template-content-header,
.ekit-template-content-markup.ekit-template-content-header,
.ekit-template-content-header > .elementor,
.ekit-template-content-header .elementor-8 .e-con {
  background-color: var(--ag-navy-900) !important;
}
/* fallback: some Astra sites render their own header instead of the Elementor one */
.ast-hfb-header .site-header,
#ast-desktop-header,
#ast-mobile-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background-color: var(--ag-navy-900) !important;
}
.ast-hfb-header .main-header-menu .menu-link,
#ast-desktop-header .menu-link { color: #FFFFFF !important; }

.ekit-template-content-header {
  position: sticky;
  top: 0;
  z-index: 999;
}
.ekit-template-content-header .elementskit-navbar-nav > li > a {
  color: #FFFFFF !important;
}
.ekit-template-content-header .elementor-widget-elementskit-header-search .ekit-search-button,
.ekit-template-content-header .ekit-wid-con > ul > li > a { color: #FFFFFF !important; }
.ekit-template-content-header .elementskit-navbar-nav > li > a:hover {
  color: var(--ag-red-600) !important;
}
.ekit-template-content-header .elementor-icon-list-text,
.ekit-template-content-header .elementor-icon-list-icon i {
  color: rgba(255, 255, 255, .88) !important;
}
.ekit-template-content-header button.elementskit-menu-hamburger .elementskit-menu-hamburger-icon {
  background-color: #FFFFFF !important;
}

/* IMPORTANT: the header sits on a dark background and its links are white
   (defined in the header template). We must NOT force a text colour here or
   the menu becomes invisible. Only the dropdown panel (a light surface) is
   restyled below. */

.elementskit-submenu-panel,
.elementskit-dropdown,
.elementskit-navbar-nav .elementskit-submenu-panel {
  border: 1px solid var(--ag-slate-200) !important;
  border-radius: var(--ag-radius-lg) !important;
  box-shadow: var(--ag-shadow-md) !important;
  overflow: hidden;
  padding: 6px !important;
}
.elementskit-submenu-panel > li > a,
.elementskit-dropdown > li > a {
  font-family: var(--ag-font-body) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  color: var(--ag-slate-700) !important;
  border-radius: 6px !important;
  padding: 9px 12px !important;
}

/* off-canvas drawer (mobile) — solid navy so white links stay readable */
@media (max-width: 1024px) {
  .ekit-template-content-header .elementskit-menu-container {
    background-color: var(--ag-navy-900) !important;
  }
  .ekit-template-content-header .elementskit-navbar-nav .elementskit-submenu-panel,
  .ekit-template-content-header .elementskit-dropdown {
    background-color: var(--ag-navy-800) !important;
  }
}

/* header top strip (address / phone) — size only, never colour */
.elementor-icon-list-text { font-size: 14px; }

/* -------------------------------------------------------- social icons --- */
.ekit_social_media { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.ekit_social_media li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ag-navy-900);
  color: var(--ag-white) !important;
  transition: background-color .18s ease, transform .18s ease;
}
.ekit_social_media li a:hover { background: var(--ag-red-600); transform: translateY(-2px); }
.ekit_social_media li a i { font-size: 15px; }

/* ------------------------------------------------------------ sections --- */
.elementor-section.elementor-section-boxed > .elementor-container,
.elementor-container { max-width: var(--ag-container); }

/* consistent section-heading rhythm: eyebrow + title */
.elementor-widget-heading .elementor-heading-title > span { display: inline; }

/* footer link lists — size only; colours stay as the footer template defines */
.elementor-widget-elementskit-page-list .ekit_page_list_content a,
footer .elementor-widget-text-editor a { transition: color .15s ease; }
.elementor-widget-elementskit-page-list .ekit_page_list_content a:hover,
footer .elementor-widget-text-editor a:hover { color: var(--ag-red-600); }

/* -------------------------------------------------------- accessibilty --- */
:focus-visible { outline: 3px solid rgba(11, 31, 58, .35); outline-offset: 2px; }
.screen-reader-text:focus { background: var(--ag-navy-900); color: #fff; }

/* ----------------------------------------------------------- responsive --- */
@media (max-width: 1024px) { :root { --ag-section-y: 64px; } }
@media (max-width: 767px) {
  :root { --ag-section-y: 52px; }
  h1, .elementor-widget-heading h1.elementor-heading-title { font-size: 1.95rem; }
  h2, .elementor-widget-heading h2.elementor-heading-title { font-size: 1.55rem; }
  .elementor-button { width: auto; }
}