/*
Theme Name: Álvarez Legal Flatsome Replica
Theme URI: https://alvarezlegalpr.com
Author: Firm Forward
Author URI: https://firmforward.com
Description: Full replica of the Álvarez Legal Inventiva site, built from the complete HTML backup. Uses Flatsome CSS/JS loaded from Inventiva CDN (temporary until DNS cutover).
Version: 4.0
Text Domain: alvarez-legal
*/

/* ===================================================
   DROPDOWN OVERRIDES
   =================================================== */
.nav-dropdown-default { border-top: none !important; }

/* ===================================================
   BRAND COLORS & CSS VARIABLES
   =================================================== */
:root {
  --wp--preset--color--primary: #871719;
  --wp--preset--color--secondary: #531319;
  --wp--preset--color--success: #7a9c59;
  --wp--preset--color--alert: #b20000;
  --color-primary: #871719;
  --color-secondary: #531319;
  --flatsome--header--sticky-height: 159px;
}

/* ===================================================
   GLOBAL OVERRIDES
   =================================================== */
body {
  margin: 0;
  padding: 0;
}

a:where(:not(.wp-element-button)) {
  text-decoration: none;
}

/* ── Sticky header ────────────────────────────────────────────────
   Use CSS position:sticky so the header sticks at the top while
   staying in normal flow — no body padding-top juggling needed.
   JS in alvarez.js adds .is-sticky for visual shrink effects.
───────────────────────────────────────────────────────────────── */
#header {
  position: sticky;
  top: 0;
  z-index: 9999;
  width: 100%;
}
/* Offset below the WP admin bar (WP adds margin-top:32px to html) */
.admin-bar #header { top: 32px; }
@media (max-width: 782px) {
  .admin-bar #header { top: 46px; }
}
/* Prevent JS from leaving stale inline padding-top on body */
body { padding-top: 0 !important; }

/* ── Logo center layout (desktop ≥850px) ───────────────────────
   Flatsome logo-center: left/right cols each take equal flex space
   so the absolutely-centered logo lands in the true middle.
───────────────────────────────────────────────────────────────── */
.header-inner.logo-center {
  position: relative;
  display: flex;
  align-items: center;
}
.header-inner.logo-center #logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  line-height: 0; /* remove extra inline spacing below img */
}
/* Constrain logo image height so it stays within the masthead row */
.header-inner.logo-center #logo img {
  max-height: 58px;
  width: auto;
  display: block;
}
/* Give the left and right flex cols equal weight so logo is truly centered */
.header-inner.logo-center .flex-col.flex-left,
.header-inner.logo-center .flex-col.flex-right {
  flex: 1;
}
/* Clip any logo overflow within the masthead */
#masthead {
  overflow: hidden !important;
}
/* Only show the maroon logo by default; hide the white (dark) version */
.header-logo-dark { display: none !important; }
/* On dark/sticky header, swap to white logo */
.header.dark .header-logo,
.header.is-sticky .header-logo { display: none !important; }
.header.dark .header-logo-dark,
.header.is-sticky .header-logo-dark { display: inline-block !important; }

/* ── Mobile header (≤849px) ────────────────────────────────────
   Undo absolute centering — mobile uses a simple flex row with
   hamburger left | logo center | empty right.
───────────────────────────────────────────────────────────────── */
@media (max-width: 849px) {
  .header-inner.logo-center #logo {
    position: static;
    transform: none;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  /* Cap logo image so it doesn't overflow on mobile */
  #logo img {
    max-width: 190px;
    height: auto;
    display: block;
  }
  /* Ensure the show-for-medium flex cols take equal space */
  .header-inner .flex-col.show-for-medium.flex-left,
  .header-inner .flex-col.show-for-medium.flex-right {
    flex: 0 0 auto;
    min-width: 44px;
  }
}

/* ── Section backgrounds: contain video / bg within each section ──
   Ensures .bg.fill wrappers are absolutely positioned and clipped,
   preventing ocean video from bleeding into adjacent sections.
───────────────────────────────────────────────────────────────── */
.section {
  position: relative;
}
.section > .bg.fill,
.section > .section-bg.fill,
.section .bg.section-bg.fill {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

/* WHY section: sit above ocean section in stacking order */
#section_760029559 {
  z-index: 1;
  isolation: isolate;
}
#section_760029559 .bg.section-bg {
  background-color: rgb(242, 242, 242) !important;
}

/* Ocean section: hard clip so video can't overflow into WHY section */
#section_1735229077 {
  overflow: hidden;
  z-index: 0;
}

/* ===================================================
   CUSTOM INVENTIVA CHILD THEME OVERRIDES
   (replicated from inventiva-cs child theme)
   =================================================== */
.header-top {
  background-color: #871719;
  color: #fff;
}
.header-top a { color: #fff; }
.header-top .nav-divided > li > a::before { background-color: rgba(255,255,255,0.3); }

#header { background-color: #fff; }

.header-bottom { background-color: #fff; border-top: 1px solid #eee; }

#wide-nav { background-color: #fff !important; border-top: 1px solid #eee; }
#wide-nav .nav a,
#wide-nav .nav-top-link { color: #1a1a1a !important; }
#wide-nav .nav a:hover,
#wide-nav .nav-top-link:hover { color: #871719 !important; }
#wide-nav .nav-dropdown li a { color: #333 !important; }

.nav-top-link { font-weight: 600; letter-spacing: 0.05em; }

.button.primary {
  background-color: #871719;
  border-color: #871719;
  color: #fff;
}
.button.primary:hover {
  background-color: #531319;
  border-color: #531319;
}
.button.primary.is-outline {
  background-color: transparent;
  color: #871719;
  border-color: #871719;
}
.button.primary.is-outline:hover {
  background-color: #871719;
  color: #fff;
}
.button.primary.is-underline {
  background: transparent;
  color: #871719;
  border: none;
  text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 { font-family: inherit; }

.alt-font {
  font-family: 'Times New Roman', Times, serif;
  letter-spacing: 0.1em;
}

/* Footer section */
.footer-wrapper { width: 100%; }

/* Back to top */
#top-link { z-index: 999; }

/* Language switcher */
.header-language-dropdown a { display: flex; align-items: center; gap: 6px; }

/* Flatsome section backgrounds load from Inventiva — ensure they display */
.bg.bg-loaded { background-size: cover; background-repeat: no-repeat; }