/*
 * ACI theme rebuild for dev pages.
 * Values copied from https://www.aciuk.co.uk/wp-content/themes/aci/style.css?v=2.11
 * Breakpoints match the live theme: 1200+ / 960-1199 / 660-959 / <660.
 */

:root {
  /* Colour */
  --aci-blue: #2195dc;        /* links, buttons, section headings */
  --aci-blue-bright: #0096dc; /* card headings, hover rings */
  --aci-blue-menu: #0094d8;   /* slide-down navigation panel */
  --aci-blue-dark: #085a8c;   /* button hover, "Check Balance" */
  --aci-navy: #000a27;        /* inner-page hero */
  --aci-navy-footer: #000829; /* footer */
  --aci-grey-bg: #f2f2f4;     /* alternate sections (.body-green) */
  --aci-sky: #cce9f6;         /* info panels, company menu */
  --aci-border: #cccccc;      /* form fields */
  --aci-border-focus: #a0a0a0;
  --aci-rule: #999999;        /* footer divider */
  --aci-error: #cc0000;
  --aci-white: #ffffff;
  --aci-black: #000000;

  /* Type */
  --aci-font-body: 'Space Grotesk', sans-serif;
  --aci-font-head: 'Nunito', sans-serif;

  /* Shape */
  --aci-radius: 5px;
  --aci-radius-header: 10px;
  --aci-shadow: 0 0 30px 0 rgb(0 0 0 / 20%);
  --aci-shadow-field: 0 0 10px #dddddd;
  --aci-ring: 0 0 0 4px rgba(0, 150, 220, 1);

  /* Layout */
  --aci-width: 1200px;
}

@media screen and (max-width: 1199px) { :root { --aci-width: 960px; } }
@media screen and (max-width: 959px)  { :root { --aci-width: 660px; } }
@media screen and (max-width: 659px)  { :root { --aci-width: 90%; } }

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  color: var(--aci-black);
  background-color: var(--aci-white);
  font-family: var(--aci-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 160%;
  text-rendering: optimizeLegibility;
}

@media screen and (max-width: 659px) {
  body { font-size: 15px; padding-bottom: 64px; } /* room for sticky buttons */
}

h1, h2, h3, h4, p { margin: 0; }
img { max-width: 100%; }

a:link, a:visited, a:active, a:hover { color: var(--aci-blue); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* The live theme removes focus outlines; we keep a visible one for keyboard users. */
:focus-visible { outline: 3px solid var(--aci-blue); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; } /* headings focused by script for screen readers */

/* ---------- Dev banner (mirrors the site's announcement bar) ---------- */

.dev-banner { background-color: var(--aci-blue); }
.dev-banner .inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 14px 16px 12px;
  color: var(--aci-white);
  text-align: center;
  line-height: 140%;
}

/* ---------- Header ---------- */

.header {
  width: var(--aci-width);
  position: fixed;
  z-index: 10;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--aci-white);
  border-radius: var(--aci-radius-header);
  box-shadow: var(--aci-shadow);
}
.has-dev-banner .header { top: 68px; }
.header.is-scrolled { top: 20px; }

.header .inner { position: relative; padding: 17px; }

.icon-btn {
  display: block;
  width: 25px;
  height: 25px;
  padding: 0;
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: right 50%;
  background-size: 25px;
  cursor: pointer;
}

.header .menu-launch {
  position: absolute; top: 34px; left: 35px;
  background-image: url('https://www.aciuk.co.uk/wp-content/themes/aci/images/menu.png');
}
.header .mid { width: 140px; margin: 0 auto; line-height: 0; }
.header .mid img { width: 100%; }

.header .right { position: absolute; top: 25px; right: 35px; width: 335px; }
.header .navigation-launch {
  position: absolute; top: 0; right: 0; height: 40px;
  background-image: url('https://www.aciuk.co.uk/wp-content/themes/aci/images/hamburger.png');
}

.sticky-buttons { position: absolute; top: 0; right: 60px; width: 290px; }
.sticky-buttons .sticky-inner { display: flex; justify-content: space-between; }
.sticky-buttons a:link, .sticky-buttons a:visited, .sticky-buttons a:active, .sticky-buttons a:hover {
  width: 48%;
  border-radius: var(--aci-radius);
  background-color: var(--aci-blue);
  color: var(--aci-white);
  font-family: var(--aci-font-head);
  font-weight: 600;
  font-size: 1.1em;
  line-height: 160%;
  padding: 9px 0 7px;
  text-align: center;
  text-decoration: none;
}
.sticky-buttons a.green { background-color: var(--aci-blue-dark); }

@media screen and (max-width: 1199px) {
  .header .inner { padding: 16px; }
  .header .right { width: 305px; }
  .sticky-buttons { right: 55px; }
}

/* Tablet and mobile: full-width bar, buttons pinned to the bottom of the screen */
@media screen and (max-width: 959px) {
  .header, .has-dev-banner .header {
    width: 100%; top: 0; left: 0; transform: none; border-radius: 0;
  }
  .header .inner { width: var(--aci-width); margin: 0 auto; padding: 12px; }
  .header .menu-launch { top: 30px; left: 0; }
  .header .right { top: 22px; right: 0; width: 25px; }
  .sticky-buttons {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: 100%;
    padding: 10px 0; background-color: var(--aci-white); box-shadow: var(--aci-shadow); z-index: 20;
  }
  .sticky-buttons .sticky-inner { width: var(--aci-width); margin: 0 auto; }
  .sticky-buttons a:link, .sticky-buttons a:visited { padding: 10px 0 6px; }
}
@media screen and (max-width: 659px) {
  .header { position: relative; }
  .sticky-buttons a:link, .sticky-buttons a:visited { padding: 8px 0 6px; }
}

/* ---------- Slide-down panels (main nav + group companies) ---------- */

.panel {
  width: var(--aci-width);
  position: fixed;
  left: 50%;
  top: 20px;
  transform: translate(-50%, calc(-100% - 40px));
  transition: transform 0.4s ease;
  border-radius: var(--aci-radius);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  visibility: hidden;
}
.panel.is-open { transform: translate(-50%, 0); visibility: visible; }
.panel .exit {
  position: absolute; right: 40px; top: 40px; background-size: 100% 100%;
}

.navigation-outer { z-index: 15; background-color: var(--aci-blue-menu); }
.navigation-outer .exit { background-image: url('https://www.aciuk.co.uk/wp-content/themes/aci/images/menu-close.png'); }
.navigation-inner { width: 90%; margin: 0 auto; }
.navigation-inner ul { list-style: none; padding: 0; margin: 100px 0; max-width: 600px; }
.navigation-inner a:link, .navigation-inner a:visited, .navigation-inner a:active, .navigation-inner a:hover {
  display: block;
  font-family: var(--aci-font-head);
  font-weight: 600;
  font-size: 2.4em;
  line-height: 120%;
  margin: 0 0 30px;
  text-decoration: none;
  color: var(--aci-white);
}
.navigation-inner a:hover, .navigation-inner a[aria-current] { color: var(--aci-navy); }

.comenu-outer { z-index: 999; background-color: var(--aci-sky); }
.comenu-outer .exit { background-image: url('https://www.aciuk.co.uk/wp-content/themes/aci/images/menu-close-blk.png'); }
.comenu-inner { width: 80%; margin: 0 auto; padding: 80px 0 40px; }
.comenu-inner .intro { max-width: 600px; margin: 0 0 60px; font-size: 3.4em; line-height: 100%; }
.comenu-inner .intro .highlight { color: var(--aci-blue); }
.comenu-inner .intro .sml { display: block; font-size: 0.6em; margin: 60px 0 0; }
.comenu-inner .buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10%; }
.co-tile { display: flex; gap: 20px; margin: 0 0 40px; }
.co-tile .circ {
  flex: none; width: 100px; height: 100px; border-radius: 100px;
  background: #000 url('https://www.aciuk.co.uk/wp-content/themes/aci/images/icon-perch-nb.png') 50% 50% / 70px no-repeat;
}
.co-tile.perch .circ   { background-color: #1fac78; }
.co-tile.tmlegal .circ { background-color: #772a8f; }
.co-tile.verify .circ  { background-color: #141725; }
.co-tile h3 { margin: 10px 0 0; font-weight: 400; font-size: 1.6em; line-height: 120%; }
.co-tile a:link, .co-tile a:visited { display: block; font-weight: 700; color: var(--aci-black); }

@media screen and (max-width: 659px) {
  .panel { top: 0; left: 0; width: 100%; transform: translateY(calc(-100% - 40px)); max-height: 100vh; }
  .panel.is-open { transform: translateY(0); }
  .panel .exit { right: 20px; top: 30px; }
  .navigation-inner a:link, .navigation-inner a:visited { font-size: 1.8em; margin: 0 0 20px; }
  .navigation-inner ul { margin: 80px 0 60px; }
  .comenu-inner { width: 90%; }
  .comenu-inner .intro { font-size: 2em; margin: 0 0 40px; }
  .comenu-inner .buttons { grid-template-columns: 1fr; }
}

.overlay-bg {
  position: fixed; inset: 0; z-index: 12;
  background: rgba(0, 0, 0, 0.75);
  opacity: 0; visibility: hidden; transition: opacity 0.3s;
}
.overlay-bg.is-open { opacity: 1; visibility: visible; }

/* ---------- Inner-page hero ---------- */

.general .hero-header {
  background-color: var(--aci-navy);
  background-position: top right;
  background-size: cover;
  background-repeat: no-repeat;
}
.general .hero-header .inner {
  width: var(--aci-width);
  margin: 0 auto;
  padding: 200px 0 100px;
  color: var(--aci-white);
}
.general .hero-header h1 {
  font-family: var(--aci-font-head);
  font-weight: 600;
  font-size: 3.5em;
  line-height: 100%;
  margin: 0 0 20px;
}
.hero-header .intro { max-width: 450px; }

.bread-nested { margin: 0 0 50px; font-size: 0.8em; color: var(--aci-white); }
.bread-nested a:link, .bread-nested a:visited { color: var(--aci-white); }

@media screen and (max-width: 959px) {
  .general .hero-header .inner { padding: 160px 0 60px; }
  .general .hero-header h1 { font-size: 2.6em; }
}
@media screen and (max-width: 659px) {
  .general .hero-header .inner { padding: 40px 0; }
  .general .hero-header h1 { font-size: 2.2em; }
  .bread-nested { margin: 0 0 30px; }
}

/* ---------- Content sections ---------- */

.body { width: 100%; background-color: var(--aci-white); }
.body-green { background-color: var(--aci-grey-bg); }
.body .inner { width: var(--aci-width); margin: 0 auto; padding: 50px 0; }
.body .inner-last { padding: 100px 0; }
.body .narr { max-width: 660px; }
.body .narr-center { margin: 0 auto; }
.body h3 {
  font-family: var(--aci-font-head);
  font-weight: 600;
  font-size: 1.6em;
  line-height: 120%;
  color: var(--aci-blue);
  margin: 0 0 20px;
}
.body p + p { margin-top: 1em; }

@media screen and (max-width: 659px) {
  .body .inner-last { padding: 50px 0; }
}

/* White card: same treatment as .paymentCarousel .item / .checker on the live site */
.card {
  background-color: var(--aci-white);
  border-radius: var(--aci-radius);
  box-shadow: var(--aci-shadow);
  padding: 40px;
}
.card h3 { color: var(--aci-blue-bright); }
@media screen and (max-width: 659px) { .card { padding: 25px 20px; } }

/* Pale blue panel: same treatment as .comment on the live site */
.notice {
  background-color: var(--aci-sky);
  border-radius: var(--aci-radius);
  padding: 20px;
  margin: 0 0 30px;
}

/* ---------- Buttons ---------- */

.tyButton, .heroButton {
  display: inline-block;
  border-radius: var(--aci-radius);
  font-family: var(--aci-font-body);
  font-size: 1em;
  line-height: 160%;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: 0.3s;
}
a.tyButton:link, a.tyButton:visited, button.tyButton {
  background-color: transparent;
  color: var(--aci-blue);
  border: 2px solid var(--aci-blue);
  padding: 13px 20px 11px;
}
a.tyButton:hover, button.tyButton:hover { background-color: var(--aci-blue); color: var(--aci-white); }

a.heroButton:link, a.heroButton:visited, button.heroButton {
  background-color: var(--aci-blue);
  color: var(--aci-white);
  border: 0;
  padding: 17px 20px 15px;
  letter-spacing: 1px;
}
a.heroButton:hover, button.heroButton:hover { background-color: var(--aci-blue-dark); color: var(--aci-white); }

button.tyButton:disabled, button.heroButton:disabled { background-color: var(--aci-border); border-color: var(--aci-border); color: var(--aci-white); cursor: wait; }

/* ---------- Forms (mirrors .aci-form1) ---------- */

.aci-form1 { margin-bottom: 20px; }
.aci-form1 label { display: block; margin: 0 0 20px; }
.aci-form1 .label-text { display: block; font-weight: 700; margin: 0 0 4px; }
.aci-form1 .ff-req { color: #ff0000; }
.aci-form1 .ff-info { display: block; margin: 0 0 8px; font-size: 14px; }

.aci-form1 select {
  font-family: var(--aci-font-head);
  font-weight: 600;
  font-size: 16px;
  line-height: 140%;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 8px 40px 8px 8px;
  color: var(--aci-black);
  background-color: var(--aci-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232195dc' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  border: 2px solid var(--aci-border);
  border-radius: var(--aci-radius);
  box-shadow: var(--aci-shadow-field);
  cursor: pointer;
}
.aci-form1 select:focus { border-color: var(--aci-border-focus); }
.aci-form1 select.form-error { border-color: var(--aci-error); }
.aci-form1 .form-error-msg {
  display: block; margin: 6px 0 0; color: var(--aci-error); font-weight: 700; font-size: 0.8em;
}
.aci-form1 .form-actions { display: flex; justify-content: flex-end; }

@media screen and (max-width: 659px) {
  .aci-form1 .ff-info { font-size: 12px; }
  .aci-form1 .form-actions .tyButton { width: 100%; }
}

/* ---------- Footer ---------- */

.footer { width: 100%; background-color: var(--aci-navy-footer); }
.footer .inner {
  width: var(--aci-width);
  margin: 0 auto;
  padding: 100px 0 200px;
  color: var(--aci-white);
  font-size: 0.9em;
}
.footer .top {
  display: grid;
  grid-template-columns: repeat(3, 20%) 1fr;
  column-gap: 2%;
  margin: 0 0 40px;
}
.footer .col4 { text-align: right; }
.footer .col1 img { width: 180px; }
.footer .top a:link, .footer .top a:visited, .footer .top a:active, .footer .top a:hover {
  color: var(--aci-white); text-decoration: none; display: block; margin: 0 0 10px;
}
.footer .middle { margin: 40px 0; padding: 40px 0 0; text-align: center; border-top: 2px solid var(--aci-rule); }
.footer .middle a { display: inline-block; }
.footer .middle img { height: 65px; margin: 0 20px; }
.footer .bottom a:link, .footer .bottom a:visited { color: var(--aci-blue); }

@media screen and (max-width: 959px) {
  .footer .inner { padding: 75px 0 150px; }
  .footer .top { grid-template-columns: 1fr 1fr; column-gap: 0; row-gap: 10px; margin: 0 0 30px; }
  .footer .col4 { text-align: left; }
  .footer .middle { margin: 30px 0; padding: 30px 0 0; }
  .footer .middle img { margin: 10px; }
}
@media screen and (max-width: 659px) {
  .footer .inner { padding: 40px 0 80px; }
  .footer .top { grid-template-columns: 1fr; text-align: center; }
  .footer .col4 { text-align: center; }
  .footer .middle img { margin: 20px; }
}

/* ---------- Utilities ---------- */

[hidden] { display: none !important; }