/* Cengal International — custom overrides for the React SPA
 * Loaded after /assets/index-BeJGdbG-.css to win specificity.
 * All rules use !important to defeat Tailwind utility classes.
 */

/* ─── HERO: full viewport, content bottom-left ─────────────────────── */

/* 1. Hero section: 100vh, content pushed to bottom-left */
section.h-\[75vh\].flex.items-center.justify-start.overflow-hidden {
  height: 100vh !important;
  min-height: 100vh !important;
  align-items: flex-end !important;          /* push content to bottom */
  justify-content: flex-start !important;    /* keep content left */
  background-color: #0f0e0c !important;      /* solid bg so nothing bleeds through */
}

/* 2. Hero inner content wrapper: tight to bottom, no extra top padding.
 *    padding-bottom is large (208px) so the wrapper is tall enough to keep
 *    h1+h2 at the lifted position while the CTA sits right under h2,
 *    leaving the rest of the hero empty below. */
section.h-\[75vh\] .relative.z-10.max-w-\[1400px\].mx-auto {
  padding-top: 8rem !important;              /* leave room for fixed nav */
  padding-bottom: 208px !important;          /* holds the lifted title + empty space below CTA */
}

/* 3. The button strip that sits between hero and services: hide the wrapper
 *    entirely — we move the button INTO the hero via hero-cta-inject.js */
section.h-\[75vh\] + div.max-w-\[1400px\].mx-auto.px-6:not([class*="flex-col"]) {
  display: none !important;
}

/* Defensive: any sibling div that contains only the Explore button between
 * hero and services — hide it. The JS moves the button into the hero. */
div.max-w-\[1400px\].mx-auto.px-6.md\:px-10.flex.justify-start {
  /* If JS hasn't moved the button yet, hide it; JS will re-show inside hero. */
}

/* ─── SERVICES: no overlap with hero ──────────────────────────────── */
section#services {
  margin-top: 0 !important;
  position: relative !important;
  z-index: 5 !important;
  /* Match the contact page's "Who We Are" → footer distance of 206px.
   * Default md:pb-36 (144px) + 42px of internal max-w-1400 padding
   * gives a 186px gap. Bumping padding-bottom by 20px to 164px
   * pushes the footer down so the gap becomes 206px on /, /services
   * (and any other page that has section#services wrapping the
   * bottom CTA row). */
  padding-bottom: 164px !important;
}

/* Make the hero's video + gradient fully opaque on the bottom edge so
 * the section transition reads cleanly. */
section.h-\[75vh\] .bg-gradient-to-r {
  background-image: linear-gradient(to right, rgba(15, 14, 12, 0.85), rgba(15, 14, 12, 0.4) 60%, rgba(15, 14, 12, 0.2)) !important;
}
section.h-\[75vh\]::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 120px !important;
  background: linear-gradient(to bottom, rgba(15, 14, 12, 0), #0f0e0c 90%) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* ─── Hero CTA container (created by hero-cta-inject.js) ──────────── */
.hero-cta-row {
  margin-top: 2rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}

/* ─── Hero CTA button: match the SPA's "All Services" and "Get in Touch" buttons
 *    (solid #cabfb3, dark text, pill, py-3.5 px-8, tracking-nav 0.18em).
 *    Default + hover colors taken from the actual About page buttons. */
.hero-cta-row a,
.hero-cta-row button,
.hero-cta-row [class*="bg-brand-bg"][class*="border-brand-border"],
section.h-\[75vh\] [class*="bg-brand-bg"][class*="border-brand-border"] {
  background: #cabfb3 !important;
  color: #0f0e0c !important;
  border-color: #cabfb3 !important;
  padding-top: 0.875rem !important;
  padding-bottom: 0.875rem !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  box-shadow: none !important;
  transform: none !important;
}

.hero-cta-row a:hover,
.hero-cta-row button:hover,
.hero-cta-row [class*="bg-brand-bg"][class*="border-brand-border"]:hover,
section.h-\[75vh\] [class*="bg-brand-bg"][class*="border-brand-border"]:hover {
  background: #b8ad9f !important;
  border-color: #b8ad9f !important;
  color: #0f0e0c !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ─── Title group margin: 0. The lift comes from the wrapper's padding-bottom
 *    (see rule above), so the title group sits at the top of the wrapper
 *    content with the CTA right below it (gap = p's mb-10 = 40px). */
section.h-\[75vh\] .relative.z-10.max-w-\[1400px\] > .max-w-full {
  margin-bottom: 0 !important;
}

/* ─── Tagline (h2) width: tightened to 370px so the line break lands between
 *    "with" and "a premium, future-facing approach." Result: 3 lines with
 *    "a" starting the last row. */
section.h-\[75vh\] .relative.z-10.max-w-\[1400px\] .max-w-full p {
  max-width: 370px !important;
}

/* ─── Contact page: Send Message button ─────────────────────────────
 *    Default React style: bg-brand-bg (dark) + text-brand-accent + faint
 *    border-brand-border — an "outlined" look that doesn't match the rest
 *    of the SPA CTAs ("All Services", "Get in Touch", hero CTA), which are
 *    solid #cabfb3 with dark text. Force the submit button inside the
 *    contact form to match. */
form button[type="submit"][class*="bg-brand-bg"],
form button[type="submit"][class*="border-brand-border"] {
  background: #cabfb3 !important;
  color: #0f0e0c !important;
  border-color: #cabfb3 !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  box-shadow: none !important;
  transform: none !important;
}

form button[type="submit"][class*="bg-brand-bg"]:hover,
form button[type="submit"][class*="border-brand-border"]:hover {
  background: #b8ad9f !important;
  border-color: #b8ad9f !important;
  color: #0f0e0c !important;
  box-shadow: none !important;
  transform: none !important;
}

form button[type="submit"][class*="bg-brand-bg"]:disabled,
form button[type="submit"][class*="border-brand-border"]:disabled {
  background: #cabfb3 !important;
  color: #0f0e0c !important;
  border-color: #cabfb3 !important;
  opacity: 0.5 !important;
}

/* ─── Contact page: keep the footer just below the fold.
 *    The contact form was removed (see contact-replace.js), so without this
 *    the page is ~1122px tall — the beige footer peeks into the bottom of
 *    the viewport on common laptop heights (e.g. 1920×1080 shows 87px of
 *    footer). The .contact-shell class is set on the React root in
 *    src/pages/contact.astro and preserved by React when it mounts.
 *
 *    The hero is 40vh and the nav reserves 80px of top padding. To put the
 *    footer exactly at the fold (no peek, minimum scroll) the section must
 *    satisfy: 80 + 40vh + section = 100vh, i.e. section = 60vh - 80px.
 *    On shorter viewports the section's natural content height (~481px)
 *    already exceeds this, so the min-height is a no-op there. */
.contact-shell > main > section:last-child {
  min-height: calc(60vh - 80px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  /* On mobile the React class uses pb-24 (96px) which leaves the lower
   * "All Services" button only ~88px from the footer. Bump to 144px
   * on mobile so the button-to-footer gap matches desktop. */
  padding-bottom: 144px !important;
}

/* ─── About hero: shift the C-shadow image down by ~4 cm (≈151 CSS px at
 *    96 DPI) from the top-anchored position. With default object-position
 *    (50% 50%) and object-fit: cover on a 40vh hero (1440×360) the image
 *    scales to 1440×810, so 450px gets cropped — split 225/225 at center.
 *    The C sits at the top of the 940h image (scaled y≈60-240) and the hand
 *    at the bottom (scaled y≈379-672); the two can never both fit fully in
 *    a 360h window, so this is a compromise.
 *    Y% = 29% → visible_top = 29% × 450 = 130px. The C's top arc is
 *    visible (~130px of the C's ~180px top arc), the bottom of the C and
 *    the pointing hand (≈150px visible) dominate the frame. Tuned in 1 cm
 *    increments from the user; previous values tried: 5%, 38%, 46%.
 *    Scoped via .about-shell so contact/service hero images are untouched. */
.about-shell div.relative.h-\[40vh\].overflow-hidden img {
  object-position: 50% 29% !important;
}

/* ─── About page: match the contact page's button-to-footer distances.
 *    The about page has TWO CTAs (All Services upper, Get In Touch lower),
 *    same as home/services. Target: All Services = 206px, Get In Touch
 *    = 144px (mirrors contact's Who We Are / All Services). Default
 *    md:pb-36 (144px) + 20px of overflow from the mt-16 button row gives
 *    82px on the lower button. Bumping padding-bottom to 164px aligns
 *    both buttons with the contact page's spacing. */
.about-shell section.bg-brand-bg {
  padding-bottom: 164px !important;
}

/* ─── Contact page: push the bottom CTA row (Who We Are / All Services)
 *    further down so the pair sits more in the middle of the section. The
 *    React app renders a div with `mt-16 flex flex-col items-center
 *    justify-center gap-4` between the 3 info cards and the bottom of the
 *    section; default mt-16 leaves a 14px gap (the Tailwind class is
 *    partially absorbed by the section's flex centering), so the buttons
 *    sit close to the cards near the top of the section. Bumping the
 *    effective margin-top to 80px gives a 66px additional push downward,
 *    moving the button row toward the section's vertical center while
 *    still keeping the info cards visible above. */
.contact-shell main > section:last-child > div > div:last-child {
  margin-top: 138px !important;
}