/* === TheSalesArc Custom Stylesheet with Fluid Typography === */

.full-column-link {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: block;
  text-decoration: none;
}
.click-column {
  position: relative;
  cursor: pointer;
  transition: box-shadow 0.3s ease;
}

.click-column:hover {
  box-shadow: var(--wp--preset--shadow--natural);
}

/* 1. Global Variables and Defaults */
:root {
  --primary-color: #003366; /* Deep Navy */
  --accent-color: #FFC300; /* Golden Yellow */
  --neutral-bg: #F5F5F5; /* Light Gray */
  --text-color: #333333; /* Charcoal */
  --cta-text-color: #000000;
  --font-primary: 'Inter', sans-serif;
  --font-heading: 'Raleway', sans-serif;
}

body {
  font-family: var(--font-primary);
  font-size: clamp(0.95rem, 1vw + 0.8rem, 1rem); /* 15px-16px */
  line-height: 1.6;
  letter-spacing: 0.25px;
  color: var(--text-color);
  background-color: #fff;
  margin: 0;
  padding: 0;
}

/* 2. Headings with Fluid Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 1rem 0;
}

h1 {
  font-size: clamp(2rem, 6vw + 1rem, 3rem); /* 32px-48px */
  letter-spacing: -0.5px;
}

h2 {
  font-size: clamp(1.75rem, 4vw + 0.5rem, 2.5rem); /* 28px-40px */
}

h3 {
  font-size: clamp(1.5rem, 3vw + 0.25rem, 2rem); /* 24px-32px */
}

h4 {
  font-size: clamp(1.25rem, 2vw + 0.2rem, 1.5rem); /* 20px-24px */
}

h5 {
  font-size: clamp(1.1rem, 1.5vw + 0.15rem, 1.25rem); /* 17px-20px */
}

h6 {
  font-size: clamp(0.95rem, 1vw + 0.1rem, 1rem); /* 15px-16px */
}

/* 3. Links */
a {
  color: var(--primary-color);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* 4. Captions */
.caption, figcaption {
  font-size: clamp(0.8rem, 0.5vw + 0.5rem, 0.85rem); /* 12px-13.6px */
  font-style: italic;
  color: #666;
  letter-spacing: 0.5px;
}

/* 5. Buttons and CTAs */
button, .cta-button {
  font-family: var(--font-primary);
  font-size: clamp(0.9rem, 1vw + 0.5rem, 1rem); /* 14.4px-16px */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  background-color: var(--accent-color);
  color: var(--cta-text-color);
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Inspired by 3ds.com */
  transition: background-color 0.3s ease, transform 0.3s ease;
}

button:hover, .cta-button:hover {
  background-color: #FFB100;
  transform: scale(1.05);
}

/* 6. Section Spacing Inspired by 3ds.com */
.section {
  padding: clamp(2rem, 5vw, 4rem); /* 32px-64px */
  background-color: var(--neutral-bg);
  width: 90%;
  margin: 0 auto;
}

.hero-section {
  background: #fff;
  text-align: center;
  padding-top: clamp(2rem, 5vw, 4rem);
}

.testimonial-section {
  background-color: #fff;
  padding: clamp(2rem, 4vw, 3rem);
  box-shadow: rgba(66, 73, 96, 0.4) 0px 0px 15px 0px; /* Subtle shadow */
}

/* 7. Responsive Layouts */
/* Tablet (768px and below) */
@media (max-width: 768px) {
  .section {
    padding: 2rem; /* 32px */
  }
  h1 { font-size: clamp(1.75rem, 4vw + 0.5rem, 2.5rem); }
  h2 { font-size: clamp(1.5rem, 3vw + 0.25rem, 2rem); }
  h3 { font-size: clamp(1.25rem, 2.5vw + 0.2rem, 1.5rem); }
  .cta-button { font-size: clamp(0.85rem, 1vw + 0.5rem, 1rem); padding: 10px 20px; }
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
  .section {
    padding: 1.5rem; /* 24px */
  }
  h1 { font-size: clamp(1.5rem, 5vw + 0.5rem, 2rem); }
  h2 { font-size: clamp(1.25rem, 4vw + 0.25rem, 1.75rem); }
  h3 { font-size: clamp(1.1rem, 3vw + 0.2rem, 1.5rem); }
  body { font-size: clamp(0.9rem, 2vw + 0.5rem, 1rem); }
  .cta-button { font-size: clamp(0.8rem, 1vw + 0.4rem, 0.95rem); padding: 8px 16px; }
}

/* 8. Advanced (Optional) */
.hero-image {
  width: 100%;
  max-width: 400px;
  height: auto;
  margin: 0 auto;
  display: block;
}

/* CUSTOM RAHUL */
/* Paragraphs */
/* Block themes */
.single-post .wp-block-post-content p,
.single-post .wp-block-post-content ul,
.single-post .wp-block-post-content ol,
.single-post .wp-block-post-content h2,
.single-post .wp-block-post-content h3,
.single-post .wp-block-post-content h4,
.single-post .wp-block-post-content h5,
.single-post .wp-block-post-content h6,
.single-post .wp-block-post-content blockquote,
.single-post .wp-block-post-content img {
  /* keep your desired spacing */
}

.single-post .wp-block-post-content p { margin-top:1.25rem; margin-bottom:1.25rem; line-height:1.7; }
.single-post .wp-block-post-content ul,
.single-post .wp-block-post-content ol { margin-top:1.25rem; margin-bottom:1.25rem; padding-left:1.5rem; }
.single-post .wp-block-post-content h2,
.single-post .wp-block-post-content h3,
.single-post .wp-block-post-content h4,
.single-post .wp-block-post-content h5,
.single-post .wp-block-post-content h6 { margin-top:2rem; margin-bottom:1rem; }
.single-post .wp-block-post-content blockquote {
  margin: 2rem 0;
  color: #555;
  font-style: italic;

  /* --- NEW STYLES --- */
  background-color: var(--neutral-bg); /* Use your light gray background variable */
  border-left: 5px solid var(--primary-color); /* Make the border slightly thicker */
  padding: 1.5rem; /* Add padding on all sides for breathing room */
  border-radius: 8px; /* Match the corner radius of your buttons */
}

.single-post .wp-block-post-content img { display:block; margin:2rem auto; max-width:100%; height:auto; }

/* Classic themes fallback (safe to keep) */
.single-post .entry-content p,
.single-post .entry-content ul,
.single-post .entry-content ol,
.single-post .entry-content h2,
.single-post .entry-content h3,
.single-post .entry-content h4,
.single-post .entry-content h5,
.single-post .entry-content h6,
.single-post .entry-content blockquote,
.single-post .entry-content img { /* same spacing as above */ }


/* Drop the hero group's stacking level so it can't cover the nav */
.wp-block-group.nfd-divider-arrow,
.wp-block-group.nfd-bg-effect-grid-perspective {
  z-index: auto !important;   /* was 13 */
}

/* (Optional) also make sure the header & submenu are on top */
.site-header,
.wp-block-navigation,
.wp-block-navigation__submenu-container {
  position: relative;
  z-index: 10000;             /* stays above any page content */
}

/* --- FINAL & RELIABLE: Custom Styled Ordered Lists --- */

/* 1. Reset the list container */
.single-post .wp-block-post-content ol {
  list-style: none;
  counter-reset: custom-list-counter;
  padding-left: 0;
}

/* 2. Create a positioning "anchor" and space for the number */
.single-post .wp-block-post-content ol > li {
  position: relative; /* This is the crucial anchor point */
  padding-left: 3rem; /* Creates a gap on the left for our number to sit in */
  margin-bottom: 1.5rem; /* Space between list items */
}

/* 3. Take the number out of the normal flow and position it in the gap */
.single-post .wp-block-post-content ol > li::before {
  content: counter(custom-list-counter) ".";
  counter-increment: custom-list-counter;

  /* --- Positioning --- */
  position: absolute; /* Takes the number out of the text flow */
  left: 0; /* Place it at the far left of the list item */
  top: 0;  /* Place it at the top */

  /* --- Styling --- */
  color: var(--primary-color);
  font-weight: 700;
  font-family: var(--font-heading);
  font-size: 1.5em;
  line-height: 1;

  /* --- Alignment Helper --- */
  /* This ensures numbers 1-9 align perfectly with 10, 11, etc. */
  width: 2rem;
  text-align: right;
}

/* 4. (Optional but Recommended) Reset margin on the first element inside the LI */
/* This ensures the text aligns vertically with the top of the number */
.single-post .wp-block-post-content ol > li > *:first-child {
  margin-top: 0;
}