/*
Theme Name: Twenty Twenty-Five Child
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Description: Child theme of Twenty Twenty-Five for A3 Design. Add custom styles and overrides here without modifying the parent theme.
Author: A3 Design
Author URI: https://wordpress.org
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive-child
*/

/* Add your custom styles below this line. */
:root {
  --a3-color-dark: #14151a;
  --a3-color-dark-secondary: #1c1e26;
  --a3-color-orange: #ff6b1a;
  --a3-color-orange-light: #ffb088;
  --a3-color-text-light: #ffffff;
  --a3-color-text-muted: #b8bac2;
  --a3-color-body: #17181a;
  --a3-color-body-muted: #5b5f66;
  --a3-color-border: #e7e7e9;

  --a3-font-base:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial,
    sans-serif;

  --a3-container-max: 1280px;
  --a3-radius-md: 12px;
  --a3-radius-pill: 999px;
}
/* ==========================================================================
   FOOTER
   ========================================================================== */

.a3-site-footer {
  background-color: #fafafa;
  border-top: 1px solid var(--a3-color-border);
  padding: 64px 24px 0;
}

.a3-site-footer__columns {
  max-width: var(--a3-container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(var(--a3-footer-cols, 5), 1fr);
  gap: 32px;
  padding-bottom: 48px;
}

.a3-site-footer__column-heading {
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: #18181B;
  margin: 0 0 20px;
}

.a3-site-footer__column-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.a3-site-footer__column-links a,
.a3-site-footer__column-links span {
  font-weight: 400;
  font-size: 16px;
  line-height: 23px;
  letter-spacing: -0.16px;
  color: #3F3F46;
  transition: color 0.15s ease;
}

.a3-site-footer__column-links a:hover {
  color: var(--a3-color-orange);
}

/* Certification strip - full width, between the columns and the bottom bar.
 *
 * Heights are capped rather than set: the seven marks are 43 to 81px tall in
 * their source files (AWS is the outlier at 70x81), and matching them all to
 * one height would blow the wide, short Salesforce cloud up out of proportion.
 * 56px is what six of the seven already are, so the cap only brings AWS down
 * and nothing is ever upscaled - which is also what the live site does.
 *
 * `list-style: none` restated for the same reason the legal bar restates it. */
.a3-site-footer__certs {
  max-width: var(--a3-container-max);
  margin: 0 auto;
  border-top: 1px solid var(--a3-color-border);
  padding: 32px 0;
}

.a3-site-footer__certs-list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px 48px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.a3-site-footer__cert img {
  max-height: 56px;
  width: auto;
  display: block;
}

.a3-site-footer__cert a {
  display: block;
  transition: opacity 0.15s ease;
}

.a3-site-footer__cert a:hover {
  opacity: 0.7;
}

@media (max-width: 767px) {
  .a3-site-footer__certs {
    padding: 24px 0;
  }
  .a3-site-footer__certs-list {
    gap: 20px 28px;
  }
  .a3-site-footer__cert img {
    max-height: 42px;
  }
}

.a3-site-footer__bottom {
  max-width: var(--a3-container-max);
  margin: 0 auto;
  border-top: 1px solid var(--a3-color-border);
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.a3-site-footer__brand{
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  display: flex;
  align-items: center;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  color: #18181B;
}

/* The logo variant. Height matched to the header's 40px (style.css:~215) so the
 * mark reads at the same size top and bottom of the page - the file is
 * 519x162 and carries a "TECHNOLOGY SORTED OUT" tagline under the wordmark,
 * which is why the header settled on 40 rather than something smaller.
 *
 * The uppercase/letter-spacing above are inherited by this selector and do
 * nothing to an <img>, but the anchor still needs its underline removed. */
.a3-site-footer__brand--logo {
  text-decoration: none;
}

.a3-site-footer__brand--logo img {
  height: 40px;
  width: auto;
  display: block;
}

@media (max-width: 599px) {
  .a3-site-footer__brand--logo img {
    height: 34px;
  }
}

.a3-site-footer__bottom-right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* Keep the bottom bar out of the floating CTA's lane.
 *
 * `.a3-fcta` is position:fixed at right:32px with a min-width of 130px
 * (floating-cta.css), so it owns the last 162px of every viewport - and the
 * footer's bottom bar is the one row that is always underneath it. Until now
 * the IN/GH country selector sat in that lane and absorbed the collision; with
 * it gone the social icons slid right and the last two stopped being
 * clickable - `elementFromPoint` returned BUTTON.a3-fcta, not the link.
 *
 * Reserved rather than repositioned: moving the CTA would change it on every
 * page, and this is the only row it can reach.
 *
 * Below 768 the bar stacks and the icons run from the left edge, well clear of
 * the CTA's own 16px offset - measured, no reservation needed. */
@media (min-width: 768px) {
  .a3-site-footer__bottom {
    padding-right: 178px;
  }
}

.a3-site-footer__copyright {
  font-size: 13px;
  color: var(--a3-color-body-muted);
}

/* Legal bar - Privacy Policy / Terms / Sitemap, next to the copyright.
 *
 * `list-style: none` is restated rather than inherited: global.css:86 already
 * resets it, but this is chrome that must not depend on another file's reset
 * staying put - the same reason the footer's column lists carry their own. */
.a3-site-footer__legal {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.a3-site-footer__legal a {
  font-size: 13px;
  color: var(--a3-color-body-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.a3-site-footer__legal a:hover {
  color: var(--a3-color-orange);
}

/* Hairline separators, drawn between items rather than after each one, so the
 * row never ends on a dangling rule when it wraps. */
.a3-site-footer__legal li + li {
  position: relative;
  padding-left: 16px;
}

.a3-site-footer__legal li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: var(--a3-color-border);
}

.a3-site-footer__social {
  display: flex;
  align-items: center;
  gap: 10px;
}

.a3-site-footer__social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--a3-color-border);
  color: var(--a3-color-body-muted);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

/* The glyph, where a brand mark was resolved. 15px inside a 32px circle keeps
   the same optical weight the two-letter labels had, and `currentColor` means
   the hover state below recolours the mark without a second rule. */
.a3-site-footer__social-icon svg {
  width: 15px;
  height: 15px;
  display: block;
}

.a3-site-footer__social-icon:hover {
  background-color: var(--a3-color-orange);
  border-color: var(--a3-color-orange);
  color: #ffffff;
}

/* Tablet - 6 columns is tight, drop to 3 */
@media (max-width: 991px) {
  .a3-site-footer__columns {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 40px;
  }
}

/* Phones - the five columns become accordions.
 *
 * Open, they are ~2,700px of footer on a 390px screen, which puts the bottom
 * bar and its legal links below all of it. One column per row and collapsed by
 * default puts the whole footer in one screen.
 *
 * `.is-collapsible` is added by footer-accordion.js, so with JS off nothing
 * here fires and every column stays open and readable. */
@media (max-width: 767px) {
  .a3-site-footer__columns {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .a3-site-footer__column.is-collapsible {
    border-bottom: 1px solid var(--a3-color-border);
  }

  .a3-site-footer__column.is-collapsible .a3-site-footer__column-heading {
    margin: 0;
  }

  /* global.css styles every <button> as a site CTA - a background, a border,
   * min-height 56px, centred content and `border-radius: 0 !important`. All of
   * it has to come off for a heading row. */
  .a3-site-footer__column-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 0;
    padding: 16px 0;
    border: 0;
    background: none;
    border-radius: 0 !important;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
  }

  .a3-site-footer__caret {
    flex: 0 0 auto;
    margin-left: 12px;
    color: #71717a;
    transition: transform 0.28s cubic-bezier(0.22, 0.85, 0.28, 1);
  }

  .a3-site-footer__column-toggle[aria-expanded="true"] .a3-site-footer__caret {
    transform: rotate(180deg);
    color: var(--a3-color-orange);
  }

  /* One grid child - the <ul>. Putting 0fr on the list itself would collapse
   * only its first row and leave the rest standing, which is exactly the bug
   * MEGA-MENU.md records against mobile-nav.css. */
  .a3-site-footer__column.is-collapsible .a3-site-footer__column-body {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 0.3s cubic-bezier(0.22, 0.85, 0.28, 1);
  }

  .a3-site-footer__column.is-collapsible .a3-site-footer__column-body > * {
    min-height: 0;
  }

  .a3-site-footer__column.is-open .a3-site-footer__column-body {
    grid-template-rows: 1fr;
  }

  /* The gap under an open list is padding on the <ul>, and it has to come OFF
   * when the column is closed. `min-height: 0` lets the list's CONTENT collapse
   * into the 0fr track but does nothing to its padding, so the track floors at
   * 16px - which showed as the first link of every column peeking out from
   * under its own heading. Measured: body 16px closed, 0 after this rule. */
  .a3-site-footer__column.is-open .a3-site-footer__column-links {
    padding-bottom: 16px;
  }
}

/* Mobile - stack everything */
@media (max-width: 599px) {
  .a3-site-footer {
    padding: 48px 20px 0;
  }
  .a3-site-footer__columns {
    gap: 0;
  }
  .a3-site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  .a3-site-footer__bottom-right {
    width: 100%;
    justify-content: space-between;
  }
}
/* ==========================================================================
   HEADER
   ========================================================================== */

/* Outer wrapper stays dark, matching the hero directly below it, so the two
   sections blend into one continuous dark backdrop with the white nav
   floating inside as a card. */
.a3-site-header {
  /* background-color: var(--a3-color-dark); */
    padding: 10px 24px;
    position: sticky;
    top: 0;
    left: 0px;
    z-index: 111;
    background: #fff;
}

.a3-site-header__inner {
  max-width: var(--a3-container-max);
  margin: 0 auto;
  background-color: #ffffff;
  border-radius: 16px;
  /* box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); */
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Logo - upload a single combined image (icon + wordmark) via
   Customizer > Site Identity > Logo. Constrain its height here.
   40px, not the 32 the old single-line PlanB mark used: the A3Logics mark
   stacks a wordmark over a "TECHNOLOGY SORTED OUT" tagline, and the tagline
   is only 18.5% of the file's height. At 32px it rendered under 6px tall and
   read as a smudge. 40px puts it at 7.4px and the wordmark at 31px, close to
   the proportion a3logics.com uses on its own header. */
.a3-site-header__logo img,
.a3-site-header__logo .custom-logo {
  height: 40px;
  width: auto;
  display: block;
}

.a3-site-header__site-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--a3-color-body);
  text-decoration: none;
}

/* Primary nav */
.a3-site-header__menu {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.a3-site-header__menu > li {
  position: relative;
}

.a3-site-header__menu > li > a {
  font-size: 14px;
  font-weight: 500;
  color: #3F3F46;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s ease;
}

.a3-site-header__menu > li > a:hover {
  color: var(--a3-color-orange);
}

/* Dropdown chevron - only on items that have children (WordPress adds this class automatically) */
.a3-site-header__menu > li.menu-item-has-children > a::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-top: -4px;
  transition: transform 0.15s ease;
}

.a3-site-header__menu > li.menu-item-has-children:hover > a::after {
  transform: rotate(225deg);
  margin-top: 2px;
}

/* Dropdown panel */
.a3-site-header__menu .sub-menu {
  position: absolute;
  top: calc(100% + 16px);
  left: 0;
  min-width: 220px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  list-style: none;
  margin: 0;
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease,
    visibility 0.15s;
  z-index: 20;
}

.a3-site-header__menu > li.menu-item-has-children:hover .sub-menu,
.a3-site-header__menu > li.menu-item-has-children:focus-within .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.a3-site-header__menu .sub-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--a3-color-body);
  text-decoration: none;
}

.a3-site-header__menu .sub-menu a:hover {
  background-color: #f4f4f6;
  color: var(--a3-color-orange);
}

/* Header actions (right side): plain links + a button.
   Assumes the LAST item in this menu is the CTA (e.g. "Contact Sales") -
   keep it last when setting up the menu in Appearance > Menus. */
.a3-site-header__actions-menu {
  display: flex;
  align-items: center;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.a3-site-header__actions-menu a {
  text-decoration: none;
  transition: color 0.15s ease;
  white-space: nowrap;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #1A1A1A;
}

.a3-site-header__actions-menu li:not(:last-child) a:hover {
  color: var(--a3-color-orange);
}

.a3-site-header__actions-menu li:last-child a {
  /* background-color: var(--a3-color-orange); */
  background-color: #e85e0f;
  color: #ffffff;
  padding: 10px 22px;
  /* border-radius: var(--a3-radius-pill); */
  font-weight: 600;
}

.a3-site-header__actions-menu li:last-child a:hover {
  background-color: #e85e0f;
  color: #ffffff;
}

/* Mobile hamburger - hidden on desktop */
.a3-site-header__mobile-toggle {
  display: none;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
}

.a3-site-header__hamburger,
.a3-site-header__hamburger::before,
.a3-site-header__hamburger::after {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--a3-color-body);
  position: relative;
  transition: transform 0.15s ease;
}

.a3-site-header__hamburger::before,
.a3-site-header__hamburger::after {
  content: "";
  position: absolute;
  left: 0;
}

.a3-site-header__hamburger::before {
  top: -7px;
}
.a3-site-header__hamburger::after {
  top: 7px;
}

.a3-site-header__mobile-menu {
  display: none;
}
/* Tablet / mobile - collapse to hamburger */
@media (max-width: 991px) {
  .a3-site-header__nav,
  .a3-site-header__actions {
    display: none;
  }
  .a3-site-header__mobile-toggle {
    display: block;
  }
  .a3-site-header {
    padding: 12px 16px 0;
  }
  .a3-site-header__inner {
    padding: 12px 16px;
    border-radius: 12px;
  }

  .a3-site-header__mobile-menu {
    max-width: var(--a3-container-max);
    margin: 8px auto 0;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 8px;
  }
  .a3-site-header__mobile-menu:not(.is-open) {
    display: none;
  }
  .a3-site-header__mobile-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .a3-site-header__mobile-menu-list a {
    display: block;
    padding: 12px 14px;
    font-size: 15px;
    color: var(--a3-color-body);
    text-decoration: none;
    border-radius: 8px;
  }
  .a3-site-header__mobile-menu-list a:hover {
    background-color: #f4f4f6;
    color: var(--a3-color-orange);
  }
  .a3-site-header__mobile-menu-list .sub-menu {
    list-style: none;
    padding-left: 16px;
    margin: 0;
  }
}