/*
 * AxisPoint Advisory Limited Corporate Website Styles
 *
 * This stylesheet defines the colour palette, typography and
 * layout primitives used throughout the AxisPoint website. A
 * handful of utility classes provide simple ways to align and
 * animate content without repeating the same declarations in
 * every rule. Media queries ensure the site remains fully
 * responsive across a variety of devices from mobile phones to
 * large desktop displays. Sections of the page are spaced
 * consistently using CSS variables so the vertical rhythm of
 * content feels calm and deliberate.
 */

/* Colour palette */
:root {
  --primary-color: #0a2746;         /* dark navy used for backgrounds */
  --secondary-color: #113e7a;       /* slightly lighter navy for sections */
  --accent-color: #f5b423;          /* warm golden accent colour */
  --light-color: #f7f9fc;           /* near‑white for text backgrounds */
  --text-color: #0a2746;            /* default text colour */
  --muted-text-color: #4f6781;      /* secondary text colour */
  --border-radius: 0.5rem;          /* unified border radius */
  --section-padding: 4rem;          /* vertical padding for sections */
}

/* Global resets */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: var(--text-color);
  background: var(--light-color);
  line-height: 1.6;
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover,
a:focus {
  color: #e0991f;
  text-decoration: underline;
}

img {
  max-width: 100%;
  display: block;
}

/* Navigation */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--primary-color);
  color: #fff;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
}

.navbar .logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.navbar .logo img {
  height: 36px;
  width: auto;
  /* Brighten the dark portions of the logo so it stands out against the
     navy navigation bar. Applying a subtle brightness filter prevents
     the “AXIS” text in the mark from blending into the bar. */
  filter: brightness(1.6);
}

.navbar nav ul {
  list-style: none;
  display: flex;
  gap: 2rem;
}

.navbar nav ul li a {
  font-size: 0.95rem;
  color: #fff;
  letter-spacing: 0.5px;
}

.navbar nav ul li a.active,
.navbar nav ul li a:hover {
  color: var(--accent-color);
}

/* Hamburger for mobile */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}

.hamburger span {
  width: 25px;
  height: 3px;
  background: #fff;
  border-radius: 3px;
  transition: all 0.3s ease;
}

/* Mobile menu */
@media (max-width: 768px) {
  .navbar nav ul {
    position: absolute;
    top: 100%;
    right: 0;
    width: 200px;
    flex-direction: column;
    background: var(--primary-color);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: all 0.3s ease;
  }
  .navbar nav ul.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .hamburger {
    display: flex;
  }
}

/* Sections */
section {
  padding: var(--section-padding) 2rem;
  position: relative;
  overflow: hidden;
}

section.dark {
  background: var(--secondary-color);
  color: #fff;
}

section.light {
  background: var(--light-color);
}

section .section-title {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  font-weight: 600;
  position: relative;
  color: var(--primary-color);
}

section.dark .section-title {
  color: #fff;
}

/* Hero section */
.hero {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-size: cover;
  background-position: center;
  color: #fff;
  position: relative;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Lighten the hero overlay so text remains legible on darker
     photographic backgrounds. A slightly lower alpha improves
     contrast without washing out the underlying image. */
  /* Darken the hero backgrounds slightly to improve contrast and allow
     different hero images to share the same overlay. */
  background: rgba(0, 0, 0, 0.35);
}

.hero .content {
  position: relative;
  max-width: 800px;
  z-index: 1;
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  color: #f2f7ff;
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: var(--accent-color);
  color: var(--primary-color);
  border-radius: 30px;
  font-weight: 600;
  transition: background 0.3s ease, transform 0.3s ease;
}

.btn:hover {
  background: #e0991f;
  transform: translateY(-2px);
}

/* Cards */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.card {
  background: #fff;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  padding: 2rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.card-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--accent-color);
}

.card h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  color: var(--primary-color);
}

.card p {
  font-size: 0.95rem;
  color: var(--muted-text-color);
}

/* Accordion for services page */
.accordion {
  max-width: 800px;
  margin: 2rem auto;
}

.accordion-item {
  border-bottom: 1px solid #e0e5ec;
}

.accordion-header {
  cursor: pointer;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--secondary-color);
  color: #fff;
  border-radius: var(--border-radius);
  margin-bottom: 0.5rem;
}

.accordion-header h4 {
  font-size: 1.1rem;
  margin: 0;
}

.accordion-header span {
  transition: transform 0.3s ease;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  background: #fff;
  padding: 0 1rem;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.accordion-content p {
  padding: 1rem 0;
  color: var(--text-color);
}

.accordion-item.active .accordion-content {
  max-height: 300px;
}

.accordion-item.active .accordion-header span {
  transform: rotate(90deg);
}

/* Chart container */
/* Chart container
   Use flexible sizing so multiple chart panels can sit side by side
   within a flex or grid parent. Each container stretches to fill
   available space while respecting a minimum width. Removing the
   auto margin allows charts to align next to each other instead of
   centring on their own lines. */
.chart-container {
  /* Use slightly smaller default flex-basis and maximum width so that
     three charts or cards can sit neatly on a single row without
     excessive whitespace. */
  flex: 1 1 300px;
  /* Increase max-width to accommodate larger 450px canvases used
     in the Insights sections. Without this, charts wider than
     400px would overflow their container. */
  max-width: 480px;
  padding: 1.5rem;
  margin: 0;
  background: #fff;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

/* Contact form */
.contact-form {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-form input,
.contact-form textarea {
  padding: 0.75rem 1rem;
  border: 1px solid #d5dce5;
  border-radius: var(--border-radius);
  font-size: 1rem;
  outline: none;
  transition: border-color 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--accent-color);
}

/* Map wrapper for contact page
   The marker is absolutely positioned on top of the map image to
   indicate the approximate location of our office. The wrapper is
   wrapped in a link on the contact page so visitors can click
   through to Google Maps for directions. */
.map-wrapper {
  position: relative;
  display: block;
}
.map-wrapper img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--border-radius);
}
.map-wrapper .map-marker {
  position: absolute;
  /* Position the marker roughly at the centre of the map image.  
     Using percentages keeps the marker responsive to different map
     sizes.  The transform ensures the marker's bottom point sits
     exactly on the specified coordinates. */
  /* Centrally align the marker within the map.  Using translate(-50%,
     -50%) ensures the icon remains in the exact centre of the image,
     regardless of its size. */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Increase the font size so the marker is clearly visible on both
     desktop and mobile.  A larger icon draws the eye without
     overwhelming the minimalist design. */
  font-size: 2.5rem;
  color: var(--accent-color);
  pointer-events: none;
  z-index: 2;
  /* Add a dark text shadow so the golden marker stands out against
     the pale map. This subtle drop shadow ensures the marker
     remains visible without clashing with the overall palette. */
  text-shadow: 0 0 4px rgba(0,0,0,0.6);
}

/* Simple circular map pin used on the contact page. Instead of relying on
   an external icon set, this element draws a small golden circle with a
   white border and drop shadow. It is absolutely positioned at the
   centre of the map so visitors clearly see the approximate location
   of our office. */
.map-wrapper .map-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  background: var(--accent-color);
  border: 2px solid #ffffff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
  z-index: 2;
  pointer-events: none;
}

/* Leadership gallery styling
   Use a vertical stack of images on smaller screens; switch to a two
   column layout on larger displays. Each photograph is given a
   subtle shadow to lift it from the page. */
.leadership-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}
.leadership-gallery {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* Limit the width of the gallery so that multiple portraits don't
     encroach on the adjacent text column.  This prevents overlap
     when the gallery stacks vertically. */
  max-width: 350px;
}
.leadership-gallery img {
  border-radius: var(--border-radius);
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
  /* Constrain the height of each portrait to avoid overly tall
     photographs dominating the layout. Using object-fit covers the
     frame while keeping the subject centred. */
  max-height: 300px;
  width: 100%;
  object-fit: cover;
  object-position: top;
}
@media (min-width: 768px) {
  .leadership-wrapper {
    grid-template-columns: 1fr 1fr;
  }
  /* Keep the leadership portraits stacked on larger screens.  
     Maintaining a vertical orientation preserves the integrity of
     individual portraits and avoids squashing them into a narrow
     column. */
  .leadership-gallery {
    flex-direction: column;
  }
}

.contact-form button {
  align-self: flex-start;
  background: var(--accent-color);
  color: var(--primary-color);
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 30px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.3s ease;
}

.contact-form button:hover {
  background: #e0991f;
}

/* Footer */
footer {
  background: var(--primary-color);
  color: #fff;
  padding: 3rem 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  font-size: 0.9rem;
}

footer h4 {
  margin-bottom: 1rem;
  font-size: 1.1rem;
  color: var(--accent-color);
}

footer ul {
  list-style: none;
}

footer ul li {
  margin-bottom: 0.5rem;
}

footer ul li a {
  color: #fff;
}

footer ul li a:hover {
  color: var(--accent-color);
}

/* Map container */
#map {
  width: 100%;
  height: 300px;
  border-radius: var(--border-radius);
  overflow: hidden;
  margin-top: 1rem;
}

/* Scroll reveal animations */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .hero h1 {
    font-size: 2rem;
  }
  .hero p {
    font-size: 1rem;
  }
  footer {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .navbar .container {
    padding: 1rem;
  }
}