/*
 * Global stylesheet for Carrik Edge Strategies (CES) website
 *
 * The design philosophy draws inspiration from modern hedge fund websites:
 *  - Elegant, minimal layouts with plenty of whitespace and clear
 *    hierarchy to guide visitors’ eyes.
 *  - A dark navy palette accented with warm gold echoes the CES logo
 *    and lends a sense of luxury and trust.
 *  - Sans‑serif fonts from Google Fonts provide a contemporary look
 *    while remaining highly legible.
 *  - Responsive typography and flexible containers ensure the site
 *    works across desktops and mobile devices.
 */

:root {
  /* Colour palette */
  --primary-color: #0b1e39;      /* deep navy background */
  --secondary-color: #10294b;    /* slightly lighter navy for section breaks */
  --accent-color: #c9a758;       /* warm gold for highlights and call‑to‑actions */
  --text-color: #f5f7fa;         /* almost white for primary text */
  --muted-text: #9aa4b2;         /* muted grey for secondary text */
  --card-bg: rgba(255, 255, 255, 0.04); /* translucent card backgrounds */

  /* Typography */
  --heading-font: 'Montserrat', sans-serif;
  --body-font: 'Poppins', sans-serif;
}

/* Reset & base styles */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  scroll-behavior: smooth;
  font-family: var(--body-font);
  color: var(--text-color);
  background-color: var(--primary-color);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font);
  margin: 0 0 0.5rem;
  line-height: 1.2;
}

p {
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted-text);
}

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

a:hover {
  color: #e5c67f;
}

/* Containers */
.container {
  width: 90%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  /* Reduce vertical padding so that sections don’t create large empty
     gaps on the live site. A more modest 3rem (roughly 48px) top and
     bottom padding still provides breathing room without leaving
     conspicuous blank space. */
  padding: 3rem 0;
}

/* Header and navigation */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(11, 30, 57, 0.85); /* semi‑transparent for overlay effect */
  backdrop-filter: blur(8px);
  z-index: 1000;
  transition: background-color 0.3s ease;
}

.nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 5%;
}

.logo {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.1rem;
  /* Ensure the logo text remains visible on the dark header */
  color: var(--text-color);
}


.nav-links {
  display: flex;
  gap: 1.5rem;
}

.nav-links a {
  font-size: 0.95rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  color: var(--muted-text);
  position: relative;
  padding: 0.5rem 0;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0;
  background-color: var(--accent-color);
  transition: width 0.3s ease;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--text-color);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

/* Mobile navigation toggle */
.menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.menu-toggle span {
  height: 2px;
  width: 25px;
  background-color: var(--text-color);
  margin-bottom: 5px;
  transition: all 0.3s ease;
}

@media (max-width: 768px) {
  .nav-links {
    position: fixed;
    top: 60px;
    right: -100%;
    flex-direction: column;
    width: 200px;
    background-color: rgba(11, 30, 57, 0.95);
    padding: 1rem;
    height: calc(100vh - 60px);
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1rem;
    transition: right 0.3s ease;
  }
  .nav-links.open {
    right: 0;
  }
  .menu-toggle {
    display: flex;
  }
}

/* Hero section */
.hero {
  height: 100vh;
  /* Use our high‑end corporate meeting photo as the hero background (hero3) */
  background: url('assets/hero3.png') center/cover no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-color);
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Further soften hero overlay to reveal more of the background image */
  background: linear-gradient(rgba(11, 30, 57, 0.3), rgba(11, 30, 57, 0.1));
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  padding: 0 1rem;
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

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

.btn-primary {
  background-color: var(--accent-color);
  color: var(--primary-color);
  padding: 0.75rem 2rem;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

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

.btn-secondary {
  background-color: transparent;
  border: 2px solid var(--accent-color);
  color: var(--accent-color);
  padding: 0.75rem 2rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-secondary:hover {
  background-color: var(--accent-color);
  color: var(--primary-color);
}

/* About section */
.about {
  background-color: var(--secondary-color);
}

.about-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3rem;
}

.about-grid img {
  flex: 1 1 50%;
  max-width: 500px;
  border-radius: 8px;
}

.about-grid .text {
  flex: 1 1 50%;
  min-width: 280px;
}

.about-grid .text h2 {
  font-size: 2.2rem;
  margin-bottom: 1rem;
}

.about-grid .text p {
  font-size: 1.05rem;
}

/* Features section: lighten background slightly to differentiate from primary */
.features {
  background-color: var(--secondary-color);
}

.features .features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.feature {
  background-color: var(--card-bg);
  padding: 2rem;
  border-radius: 8px;
  text-align: center;
  backdrop-filter: blur(4px);
  transition: transform 0.3s ease;
}

.feature:hover {
  transform: translateY(-5px);
}

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

/* News preview section inherits general layout but also uses secondary background */
.news-preview {
  background-color: var(--secondary-color);
}

.feature h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: var(--text-color);
}

.feature p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--muted-text);
}

/* Pricing section */
.pricing {
  background-color: var(--secondary-color);
}

.pricing .plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.plan {
  background-color: var(--card-bg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2rem;
  border-radius: 8px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.plan:hover {
  transform: translateY(-5px);
}

.plan.featured {
  border: 2px solid var(--accent-color);
  transform: scale(1.05);
}

.plan h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.plan .price {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--accent-color);
}

.plan .duration {
  font-size: 0.9rem;
  color: var(--muted-text);
  margin-bottom: 1rem;
}

.plan ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  text-align: left;
  color: var(--muted-text);
}

.plan ul li {
  margin-bottom: 0.5rem;
  position: relative;
  padding-left: 1.2rem;
}

.plan ul li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--accent-color);
}

.plan button {
  display: inline-block;
  width: 100%;
  padding: 0.6rem 0;
  background-color: var(--accent-color);
  color: var(--primary-color);
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.plan button:hover {
  background-color: #e5c67f;
}

/* Reviews section */
.reviews {
  background-color: var(--primary-color);
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.review {
  background-color: var(--card-bg);
  padding: 1.5rem;
  border-radius: 8px;
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

/* Avatar inside review cards */
.review img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 0.5rem;
}

.review .stars {
  color: var(--accent-color);
  font-size: 1.1rem;
}

.review h4 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--text-color);
}

.review p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--muted-text);
  line-height: 1.5;
}

/* News and trades lists */
.posts-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.post-card {
  background-color: var(--card-bg);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.post-card:hover {
  transform: translateY(-5px);
}

.post-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.post-content {
  padding: 1rem;
}

.post-content h4 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: var(--text-color);
}

.post-content span {
  display: block;
  font-size: 0.8rem;
  color: var(--accent-color);
  margin-bottom: 0.5rem;
}

.post-content p {
  font-size: 0.9rem;
  color: var(--muted-text);
  margin-bottom: 1rem;
}

.post-content a {
  font-weight: 600;
  color: var(--accent-color);
  text-decoration: none;
}

.post-content a:hover {
  text-decoration: underline;
}

/* Tables (for trades) */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 2rem;
}

th, td {
  padding: 0.75rem;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

th {
  color: var(--accent-color);
  font-weight: 600;
}

tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.02);
}

/* Contact form */
.contact {
  background-color: var(--secondary-color);
}

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

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--text-color);
  resize: vertical;
}

.contact-form textarea {
  min-height: 120px;
}

.contact-form button {
  /* Center the submit button on contact forms */
  align-self: center;
  margin: 0 auto;
  padding: 0.75rem 2rem;
  background-color: var(--accent-color);
  color: var(--primary-color);
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

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

/* Floating call-to-action button fixed at bottom-right */
.floating-cta {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  background-color: var(--accent-color);
  color: var(--primary-color) !important;
  padding: 0.8rem 1.4rem;
  border-radius: 25px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: background-color 0.3s ease, transform 0.2s ease;
  white-space: nowrap;
  text-align: center;
  min-width: 140px;
}

.floating-cta:hover {
  background-color: #e5c67f;
  transform: translateY(-2px);
}

/* FAQ accordion styles */
.faq-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2rem;
}

details.faq-item {
  background-color: var(--card-bg);
  padding: 1.25rem 1rem;
  border-radius: 8px;
  backdrop-filter: blur(4px);
  color: var(--text-color);
}

details.faq-item summary {
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 1.5rem;
}

details.faq-item summary::marker {
  display: none;
}

details.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 0;
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}

details.faq-item[open] summary::after {
  transform: rotate(45deg);
}

details.faq-item p {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  color: var(--muted-text);
}

/* Footer */
footer {
  background-color: #08192f;
  color: var(--muted-text);
  padding: 2rem 0;
  text-align: center;
  font-size: 0.85rem;
}

footer .footer-links {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

footer a {
  color: var(--muted-text);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.8rem;
}

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

/* Utility classes */
.section-title {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 1rem;
  color: var(--text-color);
}

.section-subtitle {
  font-size: 1rem;
  text-align: center;
  margin-bottom: 2rem;
  color: var(--muted-text);
}

/* Responsive typography */
@media (max-width: 991px) {
  .hero h1 {
    font-size: 2.5rem;
  }
  .hero p {
    font-size: 1.1rem;
  }
  .plan.featured {
    transform: none;
  }
}

/*
 * AOS override:
 * Netlify Drop or other environments may block external scripts like
 * the AOS (Animate On Scroll) library. When AOS is unavailable,
 * elements with `data-aos` attributes default to opacity: 0 and may
 * remain off screen. These override rules ensure such elements are
 * fully visible and static by default, preventing large blank spaces.
 */
[data-aos] {
  opacity: 1 !important;
  transform: none !important;
}

/* Hidden utility class used to hide elements until user interaction */
.hidden {
  display: none !important;
}

/* Button for revealing additional content (reviews, news) */
.btn-more {
  display: inline-block;
  padding: 0.7rem 1.5rem;
  border: 2px solid var(--accent-color);
  background-color: transparent;
  color: var(--accent-color);
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 2rem auto 0;
}

.btn-more:hover {
  background-color: var(--accent-color);
  color: #0b1e39;
}

/*
 * Additional custom styles for updated CES site
 * - Hero tagline: a small, uppercase line above the main hero heading
 * - Disclaimer section: neutral tone and clear separation from other content
 */
.hero-tagline {
  display: block;
  font-size: 1.1rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  color: var(--accent-color);
}

.disclaimer {
  background-color: #f9fafb;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  padding: 2rem 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #555;
}
.disclaimer p {
  margin: 0;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Broker logos strip
   This section creates a dark band containing partner/broker logos. The logos
   continuously scroll from right to left to convey motion. A small
   disclaimer sits below the logos. */
/* Broker logos strip styling
   Use a light background (matching the disclaimer band) to
   provide contrast for dark-coloured logos. The section stays
   overflow hidden to enable marquee-style scrolling. */
/*
 * Broker strip: lighten the band to match the global disclaimer bar.  The
 * section uses a white background with subtle top and bottom borders to
 * delineate it from adjacent sections.  Increasing the animation duration
 * further slows down the marquee for a more relaxed scroll.
 */
.broker-strip {
  background-color: #ffffff;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  /* Reduce vertical padding to remove excess whitespace and create a more
     compact white band. */
  padding: 1.5rem 0;
  overflow: hidden;
}

/* Override the default container padding inside the broker strip. Without
   resetting this, the generic `.container` rule applies 3rem of vertical
   padding, creating an excessively tall white band. By specifying much
   smaller top and bottom padding here, we tighten the spacing between
   the scrolling logos and the surrounding sections. */
.broker-strip .container {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.broker-strip .logo-track {
  display: flex;
  align-items: center;
  width: max-content;
  /* Slow down the scrolling animation further so logos move at a
     comfortable pace.  A duration of 80s provides a gentle scroll
     without making the movement imperceptible. */
  animation: scroll-left 80s linear infinite;
}

/*
 * Within the broker strip each logo is wrapped in a `.logo-container`.  A
 * consistent width and vertical orientation keeps all logos and labels
 * aligned, while the image itself is constrained to a fixed height.
 */
.broker-strip .logo-container {
  /* Increase container width slightly to accommodate longer wordmarks such as
     Interactive Brokers. A 160px width balances readability and layout. */
  width: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 1.25rem;
}

.broker-strip .logo-container img {
  max-height: 40px;
  /* Allow the image to scale down proportionally within the container. When a
     logo is wider than the container, setting a max-width of 100% ensures
     it shrinks to fit instead of overflowing. */
  max-width: 100%;
  margin-bottom: 0.4rem;
  opacity: 0.95;
}

.broker-strip .logo-container span {
  display: block;
  font-size: 0.75rem;
  color: var(--muted-text);
  text-align: center;
  line-height: 1;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.broker-strip .disclaimer {
  /* Override the global `.disclaimer` style for this special
     broker strip disclaimer. Without an explicit background
     definition the component inherited a light background
     and borders from the generic `.disclaimer` rules, which
     created a pale bar that clashed with the dark strip. To
     ensure the disclaimer sits seamlessly on the dark blue
     band, reset the background and borders to transparent.
     Adjust the font sizing and spacing so the text remains
     legible but unobtrusive beneath the scrolling logos. */
  background-color: transparent;
  border: none;
  color: var(--muted-text);
  font-size: 0.7rem;
  /* Tighten the spacing above and below the disclaimer so the white band
     does not appear overly tall. */
  margin-top: 0.5rem;
  margin-bottom: 0;
  text-align: center;
  line-height: 1.4;
}