/**
 * Studio Takaya — header / navigation.
 * Restyles Olivero's existing accessible nav markup; no new JS.
 */

.site-header {
  background-color: var(--color-header-bg);
  border-bottom: 1px solid var(--color-border);
}

.site-header .site-header__initial,
.site-header .site-header__inner {
  background: var(--color-header-bg);
}

.site-header__inner__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--nav-height);
}

/*
 * Olivero shifts the fixed/sticky header up by `--sp4` (72px) when
 * `.is-fixed` is active (web/core/themes/olivero/css/components/
 * site-header.css). That number isn't arbitrary: it's exactly
 * `--site-header-height-wide` (180px) minus `--header-height-wide-when
 * -fixed` (108px) -- i.e. it shifts the tall outer box up so its
 * (always 108px) content lands flush with the viewport top. Now that
 * the outer box itself is 108px (see base.css), that gap is zero, so
 * this shift instead cuts the now-correctly-sized bar in half. Matches
 * Olivero's own selector prefix to win specificity (same technique used
 * for the "Проекты" megapanel override further down in this file).
 */
@media (min-width: 75rem) {
  body:not(.is-always-mobile-nav) .site-header__fixable.is-fixed {
    inset-block-start: var(--drupal-displace-offset-top, 0px);
  }
}

/*
 * Olivero only reveals the sticky-header-toggle icon (opacity 0 -> 1,
 * pointer-events none -> auto) once `.is-fixed` is added by its scroll
 * listener. Its parent `.site-header__initial` always shows its own blue
 * background though, so before the first scroll that corner renders as
 * an empty colored box with no icon in it. Show the icon at all times.
 */
@media (min-width: 75rem) {
  .sticky-header-toggle {
    opacity: 1;
    pointer-events: auto;
  }
}

/*
 * Olivero's site branding (logo/site name) block ships with its own
 * decorative diagonal gradient card background (designed for white text
 * on a colored "badge", see core/themes/olivero/css/components/
 * header-site-branding.css) and a negative margin that breaks it out of
 * the .container to the left. Our header is meant to be one flat light
 * background per the ТЗ wireframe, not a colored logo card -- neutralize
 * both so the logo sits directly on .site-header's own background.
 */
.site-branding {
  margin: 0 auto;
  background-image: none;
  margin-inline-start: 0;
}

.site-branding__name,
.site-branding__name-link {
  font-weight: bold;
  color: var(--color-primary-dark);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 1.1rem;
}

/* Primary nav links */
.primary-nav__menu-link {
  color: var(--color-primary-dark);
  font-size: 0.85rem;
  text-decoration: none;
}

.primary-nav__menu-link--active-trail {
  border-bottom: none;
}

/* Language switcher block (core language_interface block), placed in secondary_menu region */
/*
 * Selector was `nav[aria-label]`, but Drupal's core language-switcher
 * markup uses `aria-labelledby`, not `aria-label` -- the rule never
 * matched and the badge/single-line layout never applied (list rendered
 * as Olivero's bare <ul class="links"><li> stack, one language per line).
 * Second regression: region wrapper class is `region--secondary-menu`
 * (BEM double dash), not `region-secondary-menu` -- still never matched.
 */
.region--secondary-menu .language-switcher-language-url {
  padding: 0.2rem 0.6rem;
  font-size: 0.8rem;
}

.region--secondary-menu .language-switcher-language-url .links {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.region--secondary-menu .language-switcher-language-url .links li {
  list-style: none;
}

.region--secondary-menu .language-switcher-language-url .links li + li {
  border-left: 1px solid var(--color-border);
  padding-left: 0.5rem;
}

@media (max-width: 767px) {
  .site-header__inner__container {
    min-height: var(--nav-height-mobile);
  }
}

/* Default (non-Projects) dropdown panels — О НАС, АРТ */
.primary-nav__menu--level-2 {
  background-color: var(--color-primary-light);
  border: 1px solid var(--color-border);
  border-top: 2.5px solid #4fc5d8;
}

.primary-nav__menu-link--level-2 {
  color: var(--color-text);
  font-size: 0.85rem;
}

/*
 * Проекты mega-panel — full viewport width per client reference
 * (docs/fotos/submenu.png annotation: "сделать как тута тока ширше...
 * меню будет во всю ширину"). Olivero's default .primary-nav__menu--level-2
 * is a narrow (15.625rem) absolutely-positioned dropdown anchored at
 * left: 50% of the <li>, set inside `body:not(.is-always-mobile-nav)`
 * at min-width:75rem -- that compound selector has higher specificity
 * than a bare class, so a bare `.takaya-projects-megapanel { width: ... }`
 * silently loses (confirmed live: the panel still rendered at 15.625rem
 * despite this rule existing). Matching Olivero's own selector prefix
 * both wins the specificity and correctly scopes the override to the
 * same desktop breakpoint Olivero itself uses for this layout.
 *
 * Gated on `.is-active-menu-parent` (Olivero's own expanded-state class):
 * the panel is `position: absolute` and stays in the DOM at all times
 * (collapsed via visibility:hidden, never display:none), so an
 * unconditional `width: 100vw` inflated the document's scrollWidth by
 * ~220px on every page load even while the panel was invisible --
 * the cause of a permanent right-side horizontal overflow site-wide.
 *
 * `position: fixed` (not Olivero's inherited `absolute`): the panel's
 * containing block is its parent <li> (Olivero sets that <li> to
 * `position: relative` to anchor the *narrow* dropdown), so
 * `left: 50%; transform: translateX(-50%)` resolved against the <li>'s
 * own ~80px width, not the viewport -- the panel ended up shifted ~600px
 * off-center and clipped past the right edge of the screen, even though
 * `width: 100vw` was measured correctly in computed styles (confirmed
 * live with getBoundingClientRect()). `position: fixed` makes the
 * viewport itself the containing block, so the same left/transform trick
 * actually centers it. `top` is hardcoded to the wide header's height
 * (replacing Olivero's `top: 100%`, which was relative to the <li> and
 * would otherwise position a fixed element at 100% of the *viewport*
 * height instead).
 */

@media (min-width: 75rem) {
  body:not(.is-always-mobile-nav) .takaya-projects-megapanel.is-active-menu-parent,
  body:not(.is-always-mobile-nav) .takaya-about-megapanel.is-active-menu-parent {
    position: fixed;
    /*
     * Plain --site-header-height-wide is only correct when logged out.
     * Drupal's admin toolbar pushes the whole page down and exposes its
     * own offset in --drupal-displace-offset-top -- without adding it
     * here the panel renders at the anonymous-user position, landing on
     * top of the toolbar's second row and the site nav underneath it
     * (confirmed live logged in as admin: panel start overlapped
     * Manage/Content/Structure/... and the logo/nav row entirely).
     */
    top: calc(var(--site-header-height-wide) + var(--drupal-displace-offset-top, 0px));
    left: 50%;
    width: 100vw;
    max-width: 100vw;
    transform: translateX(-50%);
    padding: 0;
    background-color: var(--color-primary-light);
    border-top: 2.5px solid #4fc5d8;
    box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
  }
}

/*
 * Empty "Social Bar" region permanently reserved `--content-left`
 * (5.625rem) on the left of `.main-content` for nothing -- no block is
 * placed there, and the wireframe has no such column. Reclaiming the
 * width directly on `.main-content`/`.social-bar` instead of zeroing
 * `--content-left` itself: that variable also sizes Olivero's sticky
 * -header-toggle button (the "X" that appears on scroll and expands the
 * pinned header) -- zeroing it made that button 0px wide and unclickable.
 */
@media (min-width: 75rem) {
  .main-content {
    width: 100%;
    margin-inline-end: 0;
  }

  .social-bar {
    width: 0;
  }
}

/*
 * Olivero's `.container` class (layout.css) sets max-width but never
 * centers itself -- it relies on whatever ancestor it sits in already
 * being no wider than that max-width. With .main-content now full-bleed
 * (the override just above), `.main-content__container` is flush against
 * the left edge on any viewport wider than --max-width instead of
 * centered, same root cause fixed for the footer (see footer.css).
 */
.main-content__container {
  margin-inline: auto;
}

/*
 * Olivero's own padding-block-start on this container (layout.css) is
 * var(--sp5), 90px -- pulls the breadcrumb (now always the first thing
 * in the container, see page.html.twig) down further from the header
 * than the wireframe wants. Same value on every page since this is the
 * container's own padding, not per-region.
 */
.main-content__container {
  padding-block-start: var(--sp2);
}


.takaya-projects-megapanel__inner {
  display: flex;
  max-width: var(--max-width, 90rem);
  margin-inline: auto;
  padding: 1.5rem var(--container-padding, 1rem);
}

.takaya-projects-megapanel__categories,
.takaya-projects-megapanel__preview {
  padding-inline-end: 2rem;
}

.takaya-projects-megapanel__categories {
  flex: 0 0 33%;
}

.takaya-projects-megapanel__preview {
  flex: 1;
}

.takaya-projects-megapanel__categories {
  border-inline-end: 1px solid var(--color-border);
}

.takaya-projects-megapanel__heading {
  display: block;
  font-weight: bold;
  color: var(--color-primary-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--color-border);
}

.takaya-projects-megapanel__heading--secondary {
  margin-top: 1.25rem;
}

.takaya-projects-megapanel__categories ul,
.takaya-projects-megapanel__preview ul {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
}

.takaya-projects-megapanel__categories li,
.takaya-projects-megapanel__preview li {
  margin-block: 0.6rem;
}

/* Cities (Eze, Beausoleil, Monte-Carlo...) in one wrapping row instead of stacked. */
.takaya-projects-megapanel__locations {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.takaya-projects-megapanel__locations li {
  margin-block: 0;
}

.takaya-projects-megapanel__categories a,
.takaya-projects-megapanel__preview a {
  color: var(--color-primary);
  text-decoration: none;
  font-size: 0.9rem;
}

.takaya-projects-megapanel__link--active {
  display: block;
  background-color: var(--color-white);
  border-radius: var(--border-radius-card);
  padding: 0.5rem 0.75rem;
  font-weight: bold;
}

.takaya-projects-megapanel__empty {
  color: var(--color-muted);
  font-style: italic;
  font-size: 0.9rem;
}

/* Last-projects preview cards (replaces a plain text list per wireframe). */
.takaya-projects-megapanel__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-top: 0.75rem;
}

.takaya-projects-megapanel__card-image {
  height: 90px;
  margin-bottom: 0.6rem;
}

.takaya-projects-megapanel__card img {
  width: 100%;
  height: 90px;
  margin-bottom: 0.6rem;
  border-radius: var(--border-radius-card);
  object-fit: cover;
}

.takaya-projects-megapanel__card-title {
  display: block;
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--color-primary-dark);
}

.takaya-projects-megapanel__card-meta {
  display: block;
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-top: 0.2rem;
}

@media (max-width: 1279px) {
  .takaya-projects-megapanel__inner {
    flex-direction: column;
  }

  .takaya-projects-megapanel__categories {
    border-inline-end: none;
    padding-inline-end: 0;
  }

  .takaya-projects-megapanel__cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/*
 * О нас mega-panel — links column + team avatars, same full-bleed treatment
 * as .takaya-projects-megapanel (see the shared selector above).
 */
.takaya-about-megapanel__inner {
  display: flex;
  align-items: center;
  gap: 3rem;
  max-width: var(--max-width, 90rem);
  margin-inline: auto;
  padding: 1.5rem var(--container-padding, 1rem);
}

.takaya-about-megapanel__links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.takaya-about-megapanel__links a {
  color: var(--color-primary);
  text-decoration: none;
  font-size: 0.9rem;
}

.takaya-about-megapanel__team {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-inline-start: 3rem;
  border-inline-start: 1px solid var(--color-border);
}

.takaya-about-megapanel__avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.takaya-about-megapanel__avatar-image {
  width: 64px;
  height: 64px;
  border-radius: 50%;
}

.takaya-about-megapanel__avatar img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}

.takaya-about-megapanel__avatar-name {
  font-size: 0.8rem;
  color: var(--color-text);
}

.takaya-about-megapanel__all-team {
  color: var(--color-primary);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: bold;
  white-space: nowrap;
}

@media (max-width: 1279px) {
  .takaya-about-megapanel__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }

  .takaya-about-megapanel__team {
    padding-inline-start: 0;
    border-inline-start: none;
    flex-wrap: wrap;
  }
}