/*
 * DIA CAPITAL — host chrome integration for the PRODUCTION Osty configuration (WordPress only; not part of the static build).
 * Scope: body.dia-landing (front page). No parent-theme edit, no replacement of the header, no logo manipulation.
 *
 * Production facts this file is written for (see docs/claude-reviews/DIA_CAPITAL_PRODUCTION_READONLY_AUDIT.md):
 *  - The front page keeps the "Home Slider" page (ID 64) as its queried object, and that page's ACF override sets menu_style =
 *    default → <body data-menu="default">: the header is ABSOLUTE and scrolls away with the page (no fixed bar, no ".action").
 *  - Real Bronze logo pair is configured; Osty already decides which one shows. Nothing is inverted, hidden or replaced here.
 *  - Smooth scroll (Lenis) and the custom cursor are ON and are left alone.
 *
 * What is left to fix is only what the landing itself needs:
 *  A. The header always sits over the dark hero island. In the Light page theme Osty colours the nav/controls dark, which is
 *     dark-on-dark there, so the DESKTOP nav and widget pill get the light colour (the mobile menu panel keeps Osty's colours).
 *  B. The hero copy needs the room the floating header takes (the static master reserved its own header strip).
 *  C. With the WordPress admin bar (logged-in editors) anchor targets must clear the bar; without it no offset is needed because
 *     the header scrolls away.
 */

/* A. Light theme, desktop (inline nav): light nav + controls over the dark hero. On tablet/phone Osty shows its own "Menu" pill,
   which brings its own background and text colours and is legible as is. */
@media (min-width: 1024px) {
  body.dia-landing:not([data-theme="dark"]) #ms-header :is(#primary-menu-default, .main-header--widgets) {
    --color-contrast-higher: #F5F5F5;
    --color-contrast-high: #F5F5F5;
  }
}

/* B. Hero: eyebrow never under the header (header ends at 100 px). Measured without this rule on the static-style hero:
   eyebrow top 99 px at 1280×720, 80 px at 768, 48 px at 390/360. Added only where it was short. */
@media (max-width: 767px) {
  body.dia-landing .dia-hero2__content { padding-block-start: calc(var(--space-7) + 72px); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  body.dia-landing .dia-hero2__content { padding-block-start: calc(var(--space-9) + 40px); }
}
@media (min-width: 1024px) and (max-height: 820px) {
  body.dia-landing .dia-hero2__content { padding-block-start: calc(var(--space-7) + 24px); }
}

/* C. Admin bar only. */
body.admin-bar.dia-landing .dia-apex section[id] { scroll-margin-top: 32px; }
@media (max-width: 782px) {
  body.admin-bar.dia-landing .dia-apex section[id] { scroll-margin-top: 46px; }
}

/* D. Very small phones (320 px): Osty's header (real 135 px Bronze logo + theme/search pill + "Menu" button) is 7 px wider than the
   screen, which made the whole document scroll sideways (scrollWidth 327 at 320 px, normal and 200 % text). Only the logo image is
   scaled down, only below 340 px; the logo asset and every other header element are untouched. */
@media (max-width: 339px) {
  body.dia-landing .main-header__logo img { width: 112px; max-width: 112px; height: auto; }
}

/* E. Footer (Elementor template 2314) vs Osty's round "back to top" button. Host-only; footer text, URLs and design untouched.
 *    Measured root causes, production footer on desktop:
 *    1. The two footer rows have a fixed `--width: 1320px`; below ~1368 px wide they are wider than the screen (clipped 20 px on
 *       each side: the first letters of "LET'S MAKE IT HAPPEN." and the end of the e-mail are cut at 1280 px).
 *    2. The contact column is a fixed 250 px but the e-mail is ~282 px wide, so it spills out of its column (right edge 28 px
 *       from the screen at 1440 px, 52 px past it at 1280 px).
 *    3. The right-aligned legal line ("Todos los derechos reservados.") ends exactly where the fixed 48 px button sits
 *       (right 32 px, bottom 32 px), so at the end of the page the button covers its last characters.
 *    Fix: rows never wider than the screen minus a 24 px gutter; the contact column grows to its content; the contact column and
 *    the legal line keep a 72 px safe zone at the right edge (button column + gap) — only between 1025 and 1599 px, the only widths
 *    where the right edge of the rows is within reach of the button. Selectors are the template's Elementor IDs (production and the
 *    local mirror use the same template 2314); if the footer is rebuilt in Elementor the fix simply stops applying. */
@media (min-width: 1025px) and (max-width: 1367px) {
  body.dia-landing .ms-footer .elementor-element-9040abd,
  body.dia-landing .ms-footer .elementor-element-abc4a76 { width: min(1320px, calc(100% - 48px)); }
}
@media (min-width: 1025px) and (max-width: 1599px) {
  body.dia-landing .ms-footer .elementor-element-68ec9eb { width: auto; flex: 0 0 auto; margin-inline-end: 72px; }
  body.dia-landing .ms-footer .elementor-element-4646d29 { margin-inline-end: 72px; }
}