/*!
 * Gendron Consultation inc. — visual revamp overlay
 * Loaded after styles.css (Start Bootstrap "Agency"). Re-skins the same
 * markup/structure with a modern navy + gold consulting look.
 */

:root {
  --ink: #0a1526;
  --navy: #0e2038;
  --navy-2: #163656;
  --navy-3: #1f4568;
  --gold: #c8983f;
  --gold-light: #e0b563;
  --gold-dark: #a17726;
  --text: #1c2733;
  --muted: #5c6b7c;
  --bg-alt: #f5f7fb;
  --border: #e4e9f1;
  --shadow-sm: 0 2px 10px rgba(10, 21, 38, 0.06);
  --shadow-md: 0 14px 34px rgba(10, 21, 38, 0.12);
  --shadow-lg: 0 24px 60px rgba(10, 21, 38, 0.18);
}

/* ---------- Base / typography ---------- */
/* scroll-behavior is set on both html and body: the base template sets
   body { overflow-x: hidden } with no overflow-y, which makes body (not
   html) the browser's actual scrolling box in most engines — so smooth
   scrolling has to be declared on whichever one ends up scrolling. */
html,
body {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
  background-color: #fff;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand,
.masthead-heading,
.section-heading,
#mainNav .navbar-nav .nav-item .nav-link,
.btn {
  font-family: "Poppins", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

p {
  color: var(--muted);
}

::selection {
  background: var(--gold);
  color: #fff;
}

/* ---------- Navbar ---------- */
#mainNav {
  background-color: transparent;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  transition: background-color 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
}

#mainNav .navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
}

#mainNav .navbar-brand .brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
  color: var(--ink);
  font-weight: 800;
  font-size: 0.95rem;
}

#mainNav .navbar-brand .brand-text small {
  display: block;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
}

#mainNav .navbar-toggler {
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
}

#mainNav .navbar-nav .nav-item .nav-link {
  position: relative;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  padding: 0.5rem 0.9rem;
}

#mainNav .navbar-nav .nav-item .nav-link.lang-link {
  color: var(--gold-light);
  border: 1px solid rgba(200, 152, 63, 0.5);
  border-radius: 100px;
  padding: 0.35rem 0.85rem;
  margin-left: 0.5rem;
}

#mainNav .navbar-nav .nav-item .nav-link.active,
#mainNav .navbar-nav .nav-item .nav-link:hover {
  color: var(--gold-light);
}

#mainNav {
  background-color: transparent;
}

/* Solid background once scrolled — applies at every width. Without this,
   mobile/tablet nav stayed permanently transparent (only the desktop
   min-width:992px query had it), leaving white nav text invisible over
   the white page body while scrolling on phones. */
#mainNav.navbar-shrink {
  background-color: rgba(10, 21, 38, 0.96);
  box-shadow: var(--shadow-sm);
}

/* The expanded mobile dropdown needs its own solid background regardless
   of scroll position — at the top of the page #mainNav is intentionally
   transparent (it sits over the dark hero), so an opened menu there was
   inheriting that transparency and showing through to whatever's behind
   it instead of being clearly readable. */
@media (max-width: 991.98px) {
  #mainNav .navbar-collapse {
    background-color: rgba(10, 21, 38, 0.96);
    margin-top: 0.75rem;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    box-shadow: var(--shadow-md);
  }
}

@media (min-width: 992px) {
  #mainNav.navbar-shrink {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    backdrop-filter: saturate(180%) blur(8px);
  }
}

/* ---------- Hero / masthead ---------- */
header.masthead {
  position: relative;
  color: #fff;
  background: radial-gradient(ellipse 90% 60% at 15% -10%, rgba(200, 152, 63, 0.25), transparent 55%),
    linear-gradient(160deg, var(--ink) 0%, var(--navy) 45%, var(--navy-3) 100%);
  padding-top: 12rem;
  padding-bottom: 7rem;
  overflow: hidden;
}

header.masthead::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 75%);
  pointer-events: none;
}

header.masthead::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 90px;
  background: #fff;
  clip-path: polygon(0 100%, 100% 100%, 100% 40%, 0 100%);
}

header.masthead .container {
  position: relative;
  z-index: 2;
}

header.masthead .masthead-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-light);
  background: rgba(200, 152, 63, 0.12);
  border: 1px solid rgba(200, 152, 63, 0.35);
  padding: 0.45rem 1rem;
  border-radius: 100px;
  margin-bottom: 1.75rem;
}

header.masthead .masthead-subheading {
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-size: 1.1rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 0.75rem;
  letter-spacing: 0.02em;
}

header.masthead .masthead-heading {
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1.18;
  margin-bottom: 2rem;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

header.masthead .masthead-heading .accent {
  color: var(--gold-light);
}

@media (min-width: 768px) {
  header.masthead {
    padding-top: 15rem;
    padding-bottom: 9rem;
  }
  header.masthead .masthead-subheading {
    font-size: 1.3rem;
  }
  header.masthead .masthead-heading {
    font-size: 3.4rem;
    line-height: 1.15;
  }
}

/* ---------- Buttons ---------- */
.btn-primary {
  color: var(--ink);
  background-color: var(--gold);
  border-color: var(--gold);
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(200, 152, 63, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.btn-primary:hover,
.btn-check:focus + .btn-primary,
.btn-primary:focus {
  color: var(--ink);
  background-color: var(--gold-light);
  border-color: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(200, 152, 63, 0.45);
}

.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary,
.btn-primary:active,
.btn-primary.active {
  color: var(--ink);
  background-color: var(--gold-dark);
  border-color: var(--gold-dark);
  transform: translateY(0);
}

.btn-xl {
  padding: 1rem 2.25rem;
  font-size: 1rem;
  letter-spacing: 0.03em;
  border-radius: 8px;
}

.btn-social {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.85);
  transition: all 0.2s ease;
}

.btn-social:hover {
  background-color: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  transform: translateY(-3px);
}

/* ---------- Section headings ---------- */
.page-section {
  padding: 5.5rem 0;
}

@media (min-width: 768px) {
  section {
    padding: 6.5rem 0;
  }
}

.page-section .text-center .section-heading,
.page-section h2.section-heading {
  font-weight: 700;
  font-size: 2.1rem;
  color: var(--ink);
  position: relative;
  display: inline-block;
  padding-bottom: 1.1rem;
  margin-bottom: 0.75rem;
}

.page-section .text-center .section-heading::after,
.page-section h2.section-heading::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 56px;
  height: 3px;
  background: var(--gold);
  border-radius: 2px;
}

.page-section h3.section-subheading {
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--muted);
  margin-bottom: 3.5rem;
}

section#contact h3.section-subheading {
  color: rgba(255, 255, 255, 0.55);
}

/* ---------- Services ---------- */
#services {
  background: var(--bg-alt);
}

#services .row {
  row-gap: 2rem;
}

#services .col-md-4 {
  display: flex;
}

#services .col-md-4 > * {
  width: 100%;
}

#services .col-md-4 {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2.75rem 1.75rem 2.25rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  flex-direction: column;
  align-items: center;
}

#services .col-md-4:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
  border-color: rgba(200, 152, 63, 0.35);
}

/* Font Awesome's CSS build sizes stacked icons via em-relative font-size
   (from the fa-4x class), not a fixed box — so the circle/icon glyphs are
   driven by font-size here rather than width/height, or they render far
   larger than this container and spill into the content below. */
#services .fa-stack {
  font-size: 2.8125rem;
  margin-bottom: 0.5rem;
}

#services .fa-stack-2x.text-primary {
  color: var(--navy) !important;
}

#services .fa-stack-1x.fa-inverse {
  color: var(--gold-light) !important;
}

#services h4 {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ink);
}

#services p.text-muted {
  color: var(--muted) !important;
  font-size: 0.95rem;
}

/* ---------- Contact ---------- */
section#contact {
  background: linear-gradient(165deg, var(--ink) 0%, var(--navy) 60%, var(--navy-3) 100%);
  position: relative;
  overflow: hidden;
}

section#contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.6;
  pointer-events: none;
}

section#contact .container {
  position: relative;
  z-index: 1;
}

section#contact .section-heading {
  color: #fff;
}

section#contact .section-heading::after {
  background: var(--gold-light);
}

section#contact .btn-primary {
  box-shadow: 0 10px 30px rgba(200, 152, 63, 0.4);
}

/* ---------- Footer ---------- */
.footer {
  background-color: var(--ink);
  color: rgba(255, 255, 255, 0.6);
  padding: 2.5rem 0;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.footer .link-dark {
  color: rgba(255, 255, 255, 0.55) !important;
}

.footer .link-dark:hover {
  color: var(--gold-light) !important;
}

.footer .col-lg-4.text-lg-start {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
}

/* ---------- Scroll-reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}