@layer reset, layout, content, components, utilities, config, print;

@import url('./_print.css') layer(print) print;
@import url('./_reset.css') layer(reset);
@import url('./_utilities.css') layer(utilities);
@import url('./_icons.css') layer(config);
@import url('./_variables.css') layer(config);

/**
 * Theme
 *
 */
@import url('./themes/_default.css') layer(config);

/**
 * Layout
 *
 */
@import url('./layout/_document.css') layer(layout);
@import url('./layout/_main.css') layer(layout);
@import url('./layout/_hero.css') layer(layout);
@import url('./layout/_header.css') layer(layout);
@import url('./layout/_footer.css') layer(layout);
@import url('./layout/_container.css') layer(layout);
@import url('./layout/_section.css') layer(layout);
@import url('./layout/_grid.css') layer(layout);

/**
 * Content
 *
 */
@import url('./content/_base.css') layer(content);
@import url('./content/_typography.css') layer(content);
@import url('./content/_buttons.css') layer(content);
@import url('./content/_code.css') layer(content);
@import url('./content/_quotes.css') layer(content);
@import url('./content/_lists.css') layer(content);
@import url('./content/_table.css') layer(content);
@import url('./content/_forms.css') layer(content);
@import url('./content/_fotos.css') layer(content);

/**
 * Components
 *
 */
@import url('./vendor/_glide.core.css') layer(components);
@import url('./vendor/_glide.theme.css') layer(components);

@import url('./components/_glide.css') layer(components);
@import url('./components/_navigation.css') layer(components);
@import url('./components/_accordion.css') layer(components);
@import url('./components/_alert.css') layer(components);
@import url('./components/_banner.css') layer(components);
@import url('./components/_breadcrumb.css') layer(components);
@import url('./components/_card.css') layer(components);
@import url('./components/_dates.css') layer(components);
@import url('./components/_curator.css') layer(components);
@import url('./components/_exhibits.css') layer(components);
@import url('./components/_theme-switcher.css') layer(components);

   .nav-link {
        opacity: 1 !important;
        visibility: visible !important;
        color: inherit !important;
        pointer-events: auto !important;
    }

    .nav-item {
        display: inline-block !important;
    }

    .nav-links {
        display: flex !important;
        gap: 0.5rem;
    }


/* ===== FINAL OVERRIDES (header + dates) ===== */
/* These go last to outrank _navigation.css mobile rules */

@layer layout {
  header nav.navbar,
  header .navbar{
    display:flex !important;
    align-items:center !important;
  }

  /* Force the language UL to be in-flow and visible on all sizes */
  header nav.navbar > ul.nav-links,
  header .navbar > ul.nav-links{
    position: static !important;
    inset: auto !important;
    transform: none !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: .75rem !important;
    margin-left: auto !important;   /* push to the right */
    white-space: nowrap !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  header .navbar > ul.nav-links > li.nav-item{ list-style:none }
  header .navbar > ul.nav-links > li.nav-item > a.nav-link{
    text-decoration:none; font-weight:700;
  }

  /* On very narrow screens, reduce font-size slightly so EN/RU always fits */
  @media (max-width: 420px){
    header .navbar > ul.nav-links > li.nav-item > a.nav-link{ font-size:12px }
  }
}

@layer components {
  /* Dates bar uses a three-column grid that never overflows */
  .dates .dates-wrapper{
    display:grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items:center;
    column-gap: clamp(12px, 3vw, 24px);
    inline-size: min(100% - var(--container-padding-inline, 24px)*2, var(--container-max-width, 1200px));
    margin-inline: auto;
    padding-inline: var(--container-padding-inline, 24px);
    box-sizing: border-box;
  }
  .dates .date-title{ grid-column: 1 }
  .dates .date-location{ grid-column: 2 }
  .dates .date-entry{ grid-column: 3; justify-self: end }
  .dates .date-entry__link{ white-space: nowrap; display: inline-block }

  /* Mobile: label | button on row 1, center on row 2 */
  @media (max-width: 900px){
    .dates .dates-wrapper{
      grid-template-columns: 1fr auto;
      grid-template-areas:
        "label cta"
        "meta  meta";
      row-gap: 10px;
    }
    .dates #dates-label{ grid-area: label }
    .dates .date-entry{ grid-area: cta; justify-self:end }
    .dates #dates-meta{ grid-area: meta }
  }
  @media (max-width: 600px){
    .dates .date-title{ padding: .7rem 1.1rem }
    .dates .date-entry__link{ padding: .35rem .6rem }
    .dates .date-location h2{ font-size: clamp(18px, 4.8vw, 22px); line-height:1.25; white-space: normal; }
  }
  @media (max-width: 360px){
    .dates .date-entry__link{ font-size: .875rem }
  }
}


/* =========================
   EN/RU — ALWAYS VISIBLE
   =========================
   Robust override placed LAST in cascade.
   No HTML changes. Works with current _navigation.css.
*/
@layer layout {
  header nav.navbar, header .navbar{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:.5rem !important;
    flex-wrap:nowrap !important;
  }
  header .navbar .logo{ flex:0 1 auto !important; }
  header .navbar > ul.nav-links{
    /* unhide & bring back in-flow */
    position:static !important;
    inset:auto !important;
    transform:none !important;
    display:flex !important;
    flex:0 1 auto !important;
    align-items:center !important;
    gap:.75rem !important;
    margin-left:auto !important;
    white-space:nowrap !important;
    opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
    /* kill off-canvas/mobile leftovers */
    width:auto !important; height:auto !important; max-height:none !important;
    clip:auto !important; clip-path:none !important; overflow:visible !important;
    left:auto !important; right:auto !important; top:auto !important; bottom:auto !important;
    z-index:auto !important; background:transparent !important;
  }
  header .navbar > ul.nav-links > li.nav-item{ list-style:none; }
  header .navbar > ul.nav-links > li.nav-item > a.nav-link{
    text-decoration:none; font-weight:700;
  }
  /* shrink on very narrow widths so EN/RU always fits */
  @media (max-width: 420px){
    header .navbar > ul.nav-links > li.nav-item > a.nav-link{ font-size:12px }
  }
  @media (max-width: 340px){
    header .navbar > ul.nav-links > li.nav-item > a.nav-link{ font-size:11px }
  }
}

/* Ensure text selection works everywhere */
* {
  user-select: auto !important;
  -webkit-user-select: auto !important;
  -moz-user-select: auto !important;
  -ms-user-select: auto !important;
}

/* Keep some elements non-selectable for UX */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.btn,
[role="button"] {
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}

/* Dates bar stays container-aware and stable; no functional change here */
@layer components {
  .dates .dates-wrapper{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    column-gap:clamp(12px,3vw,24px);
    inline-size:min(100% - var(--container-padding-inline,24px)*2, var(--container-max-width,1200px));
    margin-inline:auto;
    padding-inline:var(--container-padding-inline,24px);
    box-sizing:border-box;
  }
  .dates .date-entry{ justify-self:end }
  .dates .date-entry__link{ white-space:nowrap; display:inline-block }

  @media (max-width:900px){
    .dates .dates-wrapper{
      grid-template-columns:1fr auto;
      grid-template-areas:"label cta" "meta meta";
      row-gap:10px;
    }
    .dates #dates-label{ grid-area:label }
    .dates .date-entry{ grid-area:cta; justify-self:end }
    .dates #dates-meta{ grid-area:meta }
  }
  @media (max-width:600px){
    .dates .date-title{ padding:.7rem 1.1rem }
    .dates .date-entry__link{ padding:.35rem .6rem }
    .dates .date-location h2{ font-size:clamp(18px,4.8vw,22px); line-height:1.25; white-space:normal }
  }
  @media (max-width:360px){
    .dates .date-entry__link{ font-size:.875rem }
  }
}