/* =========================================
   AXEL GLOBAL 2026
   TYPOGRAPHY
   ========================================= */


/* Aptos Display – Body / Regular 400 */
@font-face {
  font-family: 'Aptos Display';
  src: url('https://515485.fs1.hubspotusercontent-na1.net/hubfs/515485/AXEL%20Fonts%202026/Aptos-Display.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* Aptos SemiBold – Headings 600 */
@font-face {
  font-family: 'Aptos';
  src: url('https://515485.fs1.hubspotusercontent-na1.net/hubfs/515485/AXEL%20Fonts%202026/Aptos-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


/* =========================================
   GLOBAL FONT FAMILY
   ========================================= */

html,
body {
  font-family: 'Aptos Display', Arial, sans-serif !important;
  font-weight: 400;
}


/* Body text */
p,
li,
td,
th,
label,
input,
textarea,
select {
  font-family: 'Aptos Display', Arial, sans-serif !important;
  font-weight: 400;
}


/* Links inherit context by default */
a {
  font-family: inherit;
}


/* =========================================
   HEADINGS
   ========================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Aptos', Arial, sans-serif !important;
  font-weight: 600 !important;
}


/* =========================================
   BUTTONS + NAVIGATION
   Use Aptos Display but keep existing weight
   ========================================= */

button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  font-family: 'Aptos Display', Arial, sans-serif !important;
}
/* =========================================
   AXEL GLOBAL 2026
   COLORS
   ========================================= */

:root {
  --axel-primary: #002686;
  --axel-secondary: #0D46F2;
  --axel-wisteria: #7996EC;
  --axel-periwinkle: #CFDAFC;
  --axel-lime: #E4EA40;

  --axel-graphite: #2D2D2D;
  --axel-dim-grey: #6B6B6B;
  --axel-dust-grey: #D8D8D8;
  --axel-light-grey: #F2F2F2;

  --axel-white: #FFFFFF;
  --axel-black: #000000;
}


/* =========================================
   BASE COLORS
   ========================================= */

body {
  color: var(--axel-graphite);
  background: var(--axel-white);
}


/* Vanlig brödtext */
p,
li,
td,
th,
label {
  color: var(--axel-graphite);
}


/* Standardrubriker */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--axel-primary);
}


/* Standardlänkar */
a {
  color: var(--axel-secondary);
}

a:hover {
  color: var(--axel-primary);
}


/* =========================================
   COMMON OLD AXEL COMPONENTS
   ========================================= */

/* Vanliga blå knappar */
.general-btn {
  background: var(--axel-secondary) !important;
  color: var(--axel-white) !important;
}

.general-btn:hover {
  background: var(--axel-primary) !important;
}


/* Business Cases */
.business-cases-2026__cta {
  background: var(--axel-secondary) !important;
}

.business-cases-2026__cta:hover {
  background: var(--axel-primary) !important;
}


/* Hero CTA */
.axel-hero-2026__cta {
  background: var(--axel-secondary) !important;
}

.axel-hero-2026__cta:hover {
  background: var(--axel-primary) !important;
}


/* =========================================
   GREYS / DIVIDERS
   ========================================= */

hr {
  border-color: var(--axel-dust-grey);
}
/* =========================================
   AXEL GLOBAL 2026
   COLOR OVERRIDES
   ========================================= */


/* RUBRIKER – AXEL BLUE */

.wrapp-izq-take h1,
.wrapp-der-take h1,
.content-info h1,
.intro-title-subpage h1,
.title-subtitle h1,
.tech-content-wrapper h1,
.gray-banner-wrapper h1,
.challenges-banner-wrapper h1,
.w-d-item h1,
.land-wrapper-center h1,
.cont-div-content h2 {
  color: #002686 !important;
}


/* GENERELLA RUBRIKER */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #002686;
}


/* =========================================
   BUTTONS – PRIMARY AXEL BLUE
   ========================================= */

.general-btn,
.wrapp-izq-take .general-btn,
.wrapp-der-take .general-btn {
  background: #002686 !important;
  color: #FFFFFF !important;
}


/* Hover – Accent Blue */

.general-btn:hover,
.wrapp-izq-take .general-btn:hover,
.wrapp-der-take .general-btn:hover {
  background: #0D46F2 !important;
  color: #FFFFFF !important;
}


/* Om knapptexten ligger i en <a> */

.general-btn a,
.general-btn a:visited {
  color: #FFFFFF !important;
}


/* =========================================
   KEEP WHITE HEADINGS ON DARK AREAS
   ========================================= */

.axel-hero-2026 h1,
.axel-hero-2026 h2,
.axel-hero-2026 h3 {
  color: #FFFFFF !important;
}
/* =========================================
   BODY TEXT
   ========================================= */

p {
  font-family: 'Aptos Display', Arial, sans-serif !important;
  font-size: 18px !important;
  line-height: 26px !important;
  font-weight: 400 !important;
}
/* =========================================
   HOMEPAGE 2026 – BODY TEXT OVERRIDES
   ========================================= */

/* Stakeholders */
.stakeholders-home-2026 .stakeholders-desc p {
  font-family: 'Aptos Display', Arial, sans-serif !important;
  font-size: 18px !important;
  line-height: 26px !important;
  font-weight: 400 !important;
}

/* Challenges */
.challenges-home-2026 .challenges-module p {
  font-family: 'Aptos Display', Arial, sans-serif !important;
  font-size: 18px !important;
  line-height: 26px !important;
}

/* Business Cases */
.business-cases-2026__inner p {
  font-family: 'Aptos Display', Arial, sans-serif !important;
  font-size: 18px !important;
  line-height: 26px !important;
  font-weight: 400 !important;
}

/* =========================================
   AXEL GLOBAL FOOTER 2026
   ========================================= */


/* =========================================
   MAIN FOOTER
   ========================================= */

.custom-footer-container {
  background: #002686 !important;
}


/* =========================================
   FOOTER HEADINGS
   ========================================= */

.custom-footer-links > ul > li > a {
  font-family: 'Aptos', Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 600 !important;

  color: #FFFFFF !important;

  text-decoration: none !important;
}


/* =========================================
   FOOTER LINKS / BODY TEXT
   ========================================= */

.custom-footer-links ul ul li a {
  font-family: 'Aptos Display', Arial, sans-serif !important;
  font-size: 12px !important;
  line-height: 18px !important;
  font-weight: 400 !important;

  color: #FFFFFF !important;

  text-decoration: none !important;
}


.custom-footer-links ul ul li a:hover {
  color: #CFDAFC !important;
}


/* =========================================
   FORM TEXT
   ========================================= */

.custom-footer-form,
.custom-footer-form p,
.custom-footer-form label,
.custom-footer-form span {
  font-family: 'Aptos Display', Arial, sans-serif !important;
  font-size: 12px !important;
  line-height: 18px !important;
  font-weight: 400 !important;

  color: #FFFFFF !important;
}


/* Form headings */

.custom-footer-form h1,
.custom-footer-form h2,
.custom-footer-form h3,
.custom-footer-form h4,
.custom-footer-form h5,
.custom-footer-form h6 {
  font-family: 'Aptos', Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 600 !important;

  color: #FFFFFF !important;
}


/* =========================================
   SUB FOOTER / DARKER BOTTOM BAR
   ========================================= */

.sub-footer {
  background: #001F6E !important;
}


/* Bottom footer text */

.sub-footer-wrapper p,
.sub-footer-wrapper a {
  font-family: 'Aptos Display', Arial, sans-serif !important;
  font-size: 12px !important;
  line-height: 18px !important;
  font-weight: 400 !important;

  color: #FFFFFF !important;
}


/* Bottom footer links */

.sub-footer-wrapper a {
  text-decoration: underline !important;
}


.sub-footer-wrapper a:hover {
  color: #CFDAFC !important;
}


/* =========================================
   GENERAL FOOTER CLEANUP
   ========================================= */

.custom-footer-container ul,
.custom-footer-container li {
  font-family: 'Aptos Display', Arial, sans-serif !important;
}


.custom-footer-container a {
  transition: color 0.2s ease !important;
}
/* =========================================
   AXEL FOOTER 2026 – MOBILE
   ========================================= */

@media (max-width: 767px) {

  /* Stapla innehållet i nedersta footern */
  .sub-footer-wrapper .sub-foo-cont {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    width: 100% !important;

    gap: 16px !important;
  }


  /* Privacy + cookie text full bredd */
  .sub-footer-wrapper .privacy,
  .sub-footer-wrapper .cookies {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: left !important;
  }


  /* Text */
  .sub-footer-wrapper p {
    width: 100% !important;

    margin: 0 !important;

    font-family: 'Aptos Display', Arial, sans-serif !important;
    font-size: 12px !important;
    line-height: 18px !important;
    font-weight: 400 !important;

    text-align: left !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
  }


  /* Länkar */
  .sub-footer-wrapper a {
    font-family: 'Aptos Display', Arial, sans-serif !important;
    font-size: 12px !important;
    line-height: 18px !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
  }


  /* Lite bättre luft i nedersta footern */
  .sub-footer-wrapper {
    padding: 22px 20px !important;
  }

/* =========================================
   AXEL HEADER 2026 – HOMEPAGE / SOURCE CODE
   ========================================= */

/* Desktop – huvudkategorier */
.axel-header-2026 .header-menu-list-item > a {
  color: #7996EC !important;
  font-size: 16px !important;
  font-weight: 400 !important;
}

/* Hover */
.axel-header-2026 .header-menu-list-item > a:hover {
  color: #0D46F2 !important;
}


/* Mobile */
@media (max-width: 767px) {

  .axel-header-2026 #navbarMenu > li > a {
    color: #7996EC !important;
    font-size: 18px !important;
    font-weight: 400 !important;
  }

  .axel-header-2026 #navbarMenu > li > a:hover {
    color: #0D46F2 !important;
  }

}
  /* =========================================
   AXEL 2026 – LEGACY BLUE COLOR FIX
   ========================================= */

/* Rubriker som fortfarande använder gamla #006bc5 */
.goal-cont h1,
.title-subtitle h1,
.intro-title-subpage h1,
.wrapp-izq-take h1,
.wrapp-der-take h1,
.content-info h1,
.tech-content-wrapper h1,
.challenges-banner-wrapper h1,
.lithium-cta-wrapper h1 {
  color: #002686 !important;
}


/* Generella gamla CTA-knappar */
.general-btn,
.general-btn a {
  background: #002686 !important;
  color: #FFFFFF !important;
}


/* CTA i nedersta bildsektionerna */
.cta-bottom a {
  background: #002686 !important;
  color: #FFFFFF !important;
}


/* Hover */
.general-btn:hover,
.general-btn a:hover,
.cta-bottom a:hover {
  background: #0D46F2 !important;
  color: #FFFFFF !important;
}


/* Gammal utility class för blå text */
.blue {
  color: #002686 !important;
}