/* ==========================================================================
   odoo-skin.css — thin re-skin layer for Open Source Atlas (/oss/)
   Purpose: make the directory read as part of atlascorporation.org (Odoo
   website 5, theme_odoo_experts) by (a) re-mapping the directory's own CSS
   custom properties onto the Odoo palette, and (b) neutralising collisions
   between Odoo's global frontend Bootstrap bundle and the directory's own
   `.container` / `.btn` / `.btn-primary` classes, which are only supposed
   to affect the injected <header id="top"> / <footer id="bottom">.
   Load order expected (see apply_skin.py):
     1. web.assets_frontend.min.css   (Odoo bundle — same-origin link)
     2. bootstrap.bundle.min.js       (JS, dropdowns/offcanvas only)
     3. styles.css                    (directory's own stylesheet, unchanged)
     4. odoo-skin.css                 (this file — always loads last)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Palette mapping — directory tokens -> Odoo theme_odoo_experts palette
   o-color-1 #1F6FEB (primary) · o-color-2 #D4A24C (gold/accent)
   o-color-3 #F4F6FA (light)   · o-color-4 #FFFFFF (white)
   o-color-5 #0B1220 (dark)    · nav/link  #1d4ed8
   -------------------------------------------------------------------------- */
:root {
  --color-primary: #1F6FEB;
  --color-primary-strong: #1d4ed8;
  --color-accent: #D4A24C;
  --color-accent-soft: rgba(212, 162, 76, 0.14);

  --color-bg: #0B1220;
  --color-bg-elevated: #101a2e;
  --color-bg-sunken: #080e1a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-primary: #1F6FEB;
    --color-primary-strong: #1d4ed8;
    --color-accent: #D4A24C;
    --color-accent-soft: rgba(212, 162, 76, 0.14);
    --color-bg: #0B1220;
    --color-bg-elevated: #101a2e;
    --color-bg-sunken: #080e1a;
  }
}

:root[data-theme="light"] {
  --color-primary: #1F6FEB;
  --color-primary-strong: #1d4ed8;
  --color-accent: #D4A24C;
  --color-bg: #F4F6FA;
  --color-bg-elevated: #FFFFFF;
}

/* Odoo brand-token custom properties, in case any injected header/footer
   inline style or future Odoo asset references them directly. */
:root {
  --o-color-1: #1F6FEB;
  --o-color-2: #D4A24C;
  --o-color-3: #F4F6FA;
  --o-color-4: #FFFFFF;
  --o-color-5: #0B1220;
}

/* --------------------------------------------------------------------------
   2) Odoo header/footer chrome — make sure it renders full-bleed and above
   the directory's own sticky elements, and inherits the Odoo font stack.
   -------------------------------------------------------------------------- */
header#top.o_header_standard {
  position: relative;
  z-index: 1050; /* above directory's sticky .site-header-era elements, if any survive a partial apply */
  width: 100%;
}
header#top.o_header_standard,
footer#bottom.o_footer {
  font-family: var(--font-sans, "DM Sans", ui-sans-serif, system-ui, sans-serif);
}
footer#bottom.o_footer {
  width: 100%;
}
/* Odoo's mobile offcanvas menu must sit above everything, incl. any dark overlay */
header#top .offcanvas { z-index: 1200; }

/* Safety net: Odoo's #top_menu ships with a transient "o_menu_loading" class
   (overflow:hidden) that Odoo's own JS runtime removes once the menu finishes
   client-side init. apply_skin.py strips this class from skin/header.html at
   the source, but this override guards against it reappearing in a future
   re-extraction from the live homepage — without it, every dropdown is
   permanently clipped to zero-height since we deliberately don't load Odoo's
   full JS runtime. */
header#top .o_menu_loading,
header#top #top_menu {
  overflow: visible !important;
}

/* --------------------------------------------------------------------------
   3) Conflict fixes — the directory's own styles.css defines global
   `.container`, `.btn`, `.btn-primary` rules (see styles.css). Odoo's
   frontend bundle ALSO defines these globally for header/footer layout.
   Loaded in the order above, styles.css already wins ties on specificity
   because it loads after the Odoo bundle — but its rules are unscoped, so
   they leak backwards into header/footer too. Re-assert Odoo's own header/
   footer look with extra specificity (id + class) to undo that leak, then
   restore the directory's intended look for its own content by scoping
   through <main id="main">, which wraps all directory page content between
   the injected header and footer.
   -------------------------------------------------------------------------- */

/* --- 3a. Directory content (inside <main>): keep the directory's design --- */
main#main .container {
  max-width: var(--max-width, 1180px);
  margin: 0 auto;
  padding: 0 var(--gutter, 16px);
  width: auto;
}
main#main .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--color-border-strong, rgba(255,255,255,0.14));
  background: var(--color-bg-elevated);
  color: var(--color-text, rgba(255,255,255,0.92));
  padding: 9px 16px;
  border-radius: var(--radius-md, 6px);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  box-shadow: none;
}
main#main .btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
main#main .btn-primary:hover {
  background: var(--color-primary-strong);
  border-color: var(--color-primary-strong);
}

/* Fallback scoping for markup that doesn't wrap content in <main> (e.g. if a
   future rebuild drops it): restore directory look for any .container/.btn
   that is not inside the Odoo header/footer landmarks. Modern evergreen
   browsers support complex selectors inside :not(). */
body .container:not(header#top .container):not(footer#bottom .container):not(main#main .container) {
  max-width: var(--max-width, 1180px);
  margin: 0 auto;
  padding: 0 var(--gutter, 16px);
  width: auto;
}

/* --- 3b. Odoo header/footer: re-assert real Odoo look over the leak --- */
header#top .container {
  max-width: none;
  padding-left: var(--bs-gutter-x, 0.75rem);
  padding-right: var(--bs-gutter-x, 0.75rem);
  width: 100%;
}
header#top .btn.btn-primary,
header#top .btn_cta {
  background-color: var(--o-color-1, #1F6FEB) !important;
  border-color: var(--o-color-1, #1F6FEB) !important;
  color: #fff !important;
  box-shadow: none;
  border-radius: 0.375rem;
  padding: 0.375rem 0.75rem;
  font-weight: 500;
  font-size: 1rem;
}
header#top .nav-link,
header#top .dropdown-item {
  color: #1d4ed8;
}
header#top .dropdown-item.active,
header#top .nav-link.active {
  font-weight: 700;
  color: var(--o-color-1, #1F6FEB);
}
header#top .navbar-brand.logo img { height: 40px; width: auto; }

footer#bottom { background-color: var(--o-color-5, #0B1220); }
footer#bottom a { text-decoration: none; }
footer#bottom a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   3c. The directory's OWN header (site-header) is kept in the DOM — not
   deleted — right below the new Odoo header, because it carries functional
   hooks app.js needs (#lang-toggle, #theme-toggle/#theme-icon, #menu-toggle
   for the mobile drawer, #secondary-nav for in-app hash routes). Only its
   corp-mirroring brand/nav bits are now redundant with the real Odoo header
   above, so hide (not remove) just those via CSS.
   -------------------------------------------------------------------------- */
.site-header .brand-corp,
.site-header .corp-nav,
header.site-header .brand-corp,
header.site-header .corp-nav {
  display: none !important;
}
.site-header .header-row,
header.site-header .header-row {
  justify-content: flex-end;
}
/* Odoo header sits directly above; drop the directory header's own top
   shadow/border so the two don't look like two separate bars stacked with
   a seam. */
.site-header, header.site-header {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* --------------------------------------------------------------------------
   4) Mobile safety — keep 375px viewport free of horizontal scroll once the
   Odoo header/footer (full Bootstrap grid) sits alongside the directory's
   own layout.
   -------------------------------------------------------------------------- */
html, body { max-width: 100%; overflow-x: hidden; }
header#top, footer#bottom { max-width: 100vw; }
header#top .navbar, footer#bottom .container { box-sizing: border-box; }

@media (max-width: 430px) {
  header#top .o_main_nav.container { padding-left: 12px; padding-right: 12px; }
  footer#bottom .row > [class^="col-"] { padding-left: 12px; padding-right: 12px; }
}

/* --------------------------------------------------------------------------
   5) Bootstrap JS (dropdowns/offcanvas) loaded standalone from jsDelivr
   without Odoo's JS runtime — make sure Odoo's own inline `data-bs-*`
   attributes work with vanilla bootstrap.bundle.min.js (no extra CSS
   needed here; this comment documents why the <script> tag is present in
   the injected markup instead of relying on Odoo's website.assets_frontend
   JS bundle, which pulls in the full Odoo runtime we were told to avoid).
   -------------------------------------------------------------------------- */