/*
 * idconsultancy — frontend interactions stylesheet
 * Owned by "frontend". Reuses color tokens defined once by theme-dev in main.css
 * (--color-teal, --color-orange). Does not redefine :root — if those custom
 * properties aren't loaded yet for some reason, sensible fallbacks are supplied
 * inline via var(--token, fallback) rather than a second :root block.
 */

/* -------------------------------------------------------------------------
   1. Hero background video
   Autoplaying, muted, looped, non-interactive YouTube embed sitting behind
   the hero text. theme-dev's poster <img> is the permanent no-JS /
   reduced-motion fallback background; main.js layers the iframe underneath
   it and fades the poster to 0 opacity once the embed has loaded. Sizing
   uses the standard oversized-iframe + overflow:hidden "cover crop" trick
   so the 16:9 video always fills the container regardless of its aspect
   ratio, without ever going interactive (pointer-events: none, set inline
   by main.js as well as here for belt-and-suspenders).
   ----------------------------------------------------------------------- */

.hero__media {
  position: relative;
  overflow: hidden;
}

.hero__media--bg .hero__media-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 1;
  transition: opacity 0.8s ease;
}

.hero__media--bg.hero__media--video-ready .hero__media-poster {
  opacity: 0;
}

.hero__media-iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: 100vw;
  height: 56.25vw; /* 16 / 9 */
  min-height: 100%;
  min-width: 177.78vh; /* 16 / 9 */
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  /* main.js never builds the iframe when reduced motion is preferred, but
     guard here too in case the DOM already contains one (e.g. a preference
     change after load) — keep the poster fully opaque and permanent. */
  .hero__media--bg .hero__media-poster {
    opacity: 1 !important;
    transition: none;
  }
}

/* -------------------------------------------------------------------------
   3. Responsive nav toggle
   Mobile-first: below 768px the menu is an off-canvas/dropdown panel hidden
   by default; at 768px and up it becomes a normal always-visible horizontal
   menu and the toggle button is hidden.
   ----------------------------------------------------------------------- */

.site-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.site-nav__toggle-icon,
.site-nav__toggle-icon::before,
.site-nav__toggle-icon::after {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.site-nav__toggle-icon {
  position: relative;
}

.site-nav__toggle-icon::before,
.site-nav__toggle-icon::after {
  content: '';
  position: absolute;
  left: 0;
}

.site-nav__toggle-icon::before {
  top: -7px;
}

.site-nav__toggle-icon::after {
  top: 7px;
}

.site-nav__toggle[aria-expanded='true'] .site-nav__toggle-icon {
  background: transparent;
}

.site-nav__toggle[aria-expanded='true'] .site-nav__toggle-icon::before {
  transform: translateY(7px) rotate(45deg);
}

.site-nav__toggle[aria-expanded='true'] .site-nav__toggle-icon::after {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 767.98px) {
  .site-nav__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    background: var(--color-nav-bg, #fff);
    transition: max-height 0.3s ease, opacity 0.25s ease;
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 40;
  }

  .site-nav__menu--open {
    max-height: 80vh;
    opacity: 1;
    overflow-y: auto;
    padding: 0.5rem 0;
  }

  .site-nav__menu li {
    width: 100%;
  }

  .site-nav__menu a {
    display: block;
    padding: 0.85rem 1.25rem;
  }

  .site-nav {
    position: relative;
  }
}

@media (min-width: 768px) {
  .site-nav__toggle {
    display: none;
  }

  .site-nav__menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
    max-height: none;
    opacity: 1;
    overflow: visible;
    position: static;
    list-style: none;
    margin: 0;
    padding: 0;
  }
}

/* -------------------------------------------------------------------------
   4. Scroll-reveal
   ----------------------------------------------------------------------- */

.reveal,
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  will-change: opacity, transform;
}

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

@media (prefers-reduced-motion: reduce) {
  .reveal,
  [data-reveal] {
    transition: opacity 0.3s ease;
    transform: none;
  }
}

/* -------------------------------------------------------------------------
   5. Services list — row hover polish (page-services.php)
   theme-dev owns the structural/layout CSS for .service-detail in main.css
   (compact editorial list: small numerals, border-top divider, tight
   spacing). We only add interaction-state styling here, and deliberately
   avoid touching any layout property (position, display, grid, padding,
   margin) that main.css already controls on the bare class — every
   declaration below is either a new property main.css doesn't set
   (background-color, transform) or scoped under our own :hover/:focus-
   within state, so there's no equal-specificity/load-order tug-of-war like
   the hero__media bug. Selectors are guarded implicitly: these rules simply
   do nothing if .service-detail isn't present in the markup yet.
   ----------------------------------------------------------------------- */

.service-detail {
  transition: background-color var(--transition-base, 200ms ease),
    border-top-color var(--transition-base, 200ms ease);
}

.service-detail__number,
.service-detail__title {
  transition: color var(--transition-base, 200ms ease);
}

.service-detail__content {
  transition: transform var(--transition-base, 200ms ease);
}

/* Understated feedback on hover/focus: the divider line above the row
   brightens to the brand teal, a faint tint washes the row background, the
   numeral and title shift color, and the content nudges a few pixels to
   the right — the same restrained, "settling" feel as the hero parallax
   rather than anything snappy. */
.service-detail:hover,
.service-detail:focus-within {
  background-color: var(--color-teal-tint, #e6f4f5);
  border-top-color: var(--color-teal, #3aabb5);
}

.service-detail:hover .service-detail__number,
.service-detail:focus-within .service-detail__number {
  color: var(--color-orange, #d4612a);
}

.service-detail:hover .service-detail__title,
.service-detail:focus-within .service-detail__title {
  color: var(--color-teal, #3aabb5);
}

.service-detail:hover .service-detail__content,
.service-detail:focus-within .service-detail__content {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .service-detail,
  .service-detail__number,
  .service-detail__title,
  .service-detail__content {
    transition: none;
  }

  .service-detail:hover .service-detail__content,
  .service-detail:focus-within .service-detail__content {
    transform: none;
  }
}

/* -------------------------------------------------------------------------
   6. Homepage "view all services" link hover polish (front-page.php)
   main.css already owns the base look and the color shift on hover/focus
   (.services-preview__view-all-link:hover { color: var(--color-orange); }).
   We don't touch color here to avoid re-litigating that same property at
   equal specificity; we only add a transform, a property main.css doesn't
   set on this class, so both rules simply layer together.
   ----------------------------------------------------------------------- */

.services-preview__view-all-link {
  transition: color var(--transition-base, 200ms ease),
    transform var(--transition-base, 200ms ease);
}

.services-preview__view-all-link:hover,
.services-preview__view-all-link:focus-visible {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .services-preview__view-all-link {
    transition: color var(--transition-base, 200ms ease);
  }

  .services-preview__view-all-link:hover,
  .services-preview__view-all-link:focus-visible {
    transform: none;
  }
}

/* -------------------------------------------------------------------------
   7. Services tile hub — hover/focus treatment (page-services.php)
   theme-dev is restructuring page-services.php from an inline numbered list
   into a grid of large clickable tiles (class `.service-tile`, each a real
   `<a>` wrapping its content, per docs/TEAM.md Round 5 part 3) in parallel —
   this markup may not exist in the DOM yet when this file loads, so every
   selector below is guarded implicitly: these rules simply do nothing if
   `.service-tile` isn't present, and no JS queries anything that would
   throw if absent.
   Inspired by the animated tile grid at
   https://www.heidrick.com/en/industries/consumer-markets — a slight scale,
   a soft darkening overlay, and a title color shift, all on a smooth
   "settling" transition rather than anything snappy/bouncy, matching the
   restraint of the .service-detail row hover above and the old hero
   parallax. CSS-only: no mouse-position tilt/parallax — a scale + overlay
   hover state doesn't need JS, and matching this project's existing
   restraint means not reaching for a flashier effect than the source
   material actually has.
   We don't know theme-dev's exact inner-element class names yet (only the
   outer `.service-tile` anchor class is specified in TEAM.md), so title/
   image treatments are written defensively against the BEM names this
   codebase already uses elsewhere (`.service-tile__title`,
   `.service-tile__media`/`.service-tile__image`) *and* against bare
   `img`/heading tags scoped under `.service-tile`, so the effect still
   engages even if theme-dev's actual naming differs slightly — any
   selector that doesn't match anything is simply inert.
   ----------------------------------------------------------------------- */

.service-tile {
  position: relative;
  display: block;
  overflow: hidden;
  transform: scale(1);
  background-color: rgba(0, 0, 0, 0);
  transition: transform 350ms ease, box-shadow 350ms ease,
    border-color var(--transition-base, 200ms ease),
    background-color var(--transition-base, 200ms ease);
}

/* Soft darkening/tint wash on hover. Deliberately a `background-color` on
   `.service-tile` itself rather than an absolutely-positioned overlay
   pseudo-element: a positioned ::after with default z-index would paint
   *above* the tile's non-positioned in-flow content per normal CSS
   stacking order (positioned descendants paint after normal-flow
   descendants), which would wash out the title/description text sitting
   on top of it. A background-color is always painted in the box's
   background layer, strictly behind every child/pseudo-content
   regardless of positioning, so it can never obscure theme-dev's text —
   safe however their tile's internals are structured. Falls back to the
   same teal tint already used for the .service-detail row hover above,
   so a tile with no background image (flat "transparent+bordered" card,
   per the current service-card treatment) still gets clear feedback; a
   tile with an opaque photo background will only show this as a subtle
   edge/underlay, with the image's own filter below doing the visible work. */
.service-tile img,
.service-tile__media img,
.service-tile__image {
  transition: transform 400ms ease, filter 400ms ease;
}

.service-tile__title,
.service-tile h2,
.service-tile h3 {
  transition: color 0.3s ease;
}

.service-tile__description {
  transition: color 0.3s ease;
}

.service-tile:hover,
.service-tile:focus-within,
.service-tile:focus-visible {
  transform: scale(1.02);
  border-color: var(--color-teal, #3aabb5);
  background-color: var(--color-teal-tint, #e6f4f5);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* Round 8: on the teal-tint hover background, the tiles' resting white/
   near-white text (readable over the dark photo) becomes illegible —
   switch to dark, readable tones on hover/focus, transitioning smoothly
   both in and out per docs/TEAM.md. */
.service-tile:hover .service-tile__description,
.service-tile:focus-within .service-tile__description,
.service-tile:focus-visible .service-tile__description {
  color: #4a4a4a;
}

.service-tile:hover img,
.service-tile:focus-within img,
.service-tile:focus-visible img,
.service-tile:hover .service-tile__media img,
.service-tile:focus-within .service-tile__media img,
.service-tile:focus-visible .service-tile__media img,
.service-tile:hover .service-tile__image,
.service-tile:focus-within .service-tile__image,
.service-tile:focus-visible .service-tile__image {
  transform: scale(1.06);
  filter: brightness(0.92);
}

.service-tile:hover .service-tile__title,
.service-tile:focus-within .service-tile__title,
.service-tile:focus-visible .service-tile__title,
.service-tile:hover h2,
.service-tile:focus-within h2,
.service-tile:focus-visible h2,
.service-tile:hover h3,
.service-tile:focus-within h3,
.service-tile:focus-visible h3 {
  color: #1a1a1a;
}

@media (prefers-reduced-motion: reduce) {
  /* Drop only the transform (scale) — the piece that reads as "motion" —
     and keep color/background/border/filter transitions, which are plain
     state changes rather than movement and are the same pattern used for
     .reveal and .service-detail above. Hover/focus still gets a clear,
     static-friendly cue: teal tint + border + darker/title-colored text,
     just without the scale-up. */
  .service-tile {
    transition: border-color var(--transition-base, 200ms ease),
      background-color var(--transition-base, 200ms ease);
  }

  .service-tile:hover,
  .service-tile:focus-within,
  .service-tile:focus-visible {
    transform: none;
    box-shadow: none;
  }

  .service-tile:hover img,
  .service-tile:focus-within img,
  .service-tile:focus-visible img,
  .service-tile:hover .service-tile__media img,
  .service-tile:focus-within .service-tile__media img,
  .service-tile:focus-visible .service-tile__media img,
  .service-tile:hover .service-tile__image,
  .service-tile:focus-within .service-tile__image,
  .service-tile:focus-visible .service-tile__image {
    transform: none;
  }
}