/* =======================================================================
   Layout & Navigation Styles
   ======================================================================= */

:root{
  --headerSlideDur:.45s;
  --headerShadow:0 4px 16px rgba(0,0,0,.25);
}

.top-bar{
  position:relative;
  display:flex;
  height:84px;
  background: var(--surface);
  border-bottom:1px solid var(--border);

  transition:
    background-color var(--headerSlideDur) ease,
    box-shadow var(--headerSlideDur) ease;
}

/* keyframe that drops the bar into view */
@keyframes dropIn{
  from{transform:translateY(-100%);}
  to  {transform:translateY(0);}
}

/* ─── Default bar content ─── */
.logo-column{
  flex:0 0 30%;
  display:flex;align-items:center;justify-content:flex-start;
  padding-left:16px;
}
.logo-column img{height:30px;width:auto;}

.action-column{
  flex:1 1 70%;
  display:flex;align-items:center;gap:1rem;padding:0 24px;
}

.action-column button,
.drawer-nav button{
  background:none;border:none;outline:none;
  font-size:1.05rem;text-transform:uppercase;
  padding:0;cursor:pointer;border-radius:0;
  color: var(--text);
  transition:color var(--headerSlideDur) ease;
}
.action-column button:hover,
.drawer-nav button:hover{text-decoration:underline;}

@media (min-width:769px){.action-column{gap:1.5rem;}}

/* ─── Sticky state ─── */
.top-bar.sticky{
  position:fixed;top:0;left:0;right:0;
  transform:translateY(-100%);
  background: var(--text);            /* contrast bar */
  border-bottom:none;
  box-shadow:var(--headerShadow);
  z-index:999;
}

/* When slide-in class is added, run the keyframe */
.top-bar.slide-in{
  animation:dropIn var(--headerSlideDur) ease forwards;
}

.top-bar.sticky .action-column button,
.top-bar.sticky .menu-toggle{color: var(--surface);}

/* prevent layout jump */
body.header-gap{padding-top:84px;}

/* ─── Main layout ─── */
.main{display:flex;min-height:100vh;}
.icon-bar{width:120px;} .content-bar{flex:1;} .right-space{width:120px;}

/* ─── Mobile burger ─── */
.menu-toggle{
  display:none;margin-left:auto;
  background:transparent;border:none;
  font-size:1.8rem;padding:0 1rem;cursor:pointer;
  color: var(--text);
  transition:color var(--headerSlideDur) ease;
}
@media (max-width:768px){
  .action-column{display:none;} .menu-toggle{display:block;}
  .icon-bar,.right-space{display:none!important;}
  .main{flex-direction:column;}
}

/* ─── Drawer ─── */
.mobile-drawer{
  position:fixed;top:0;left:0;width:240px;height:100vh;
  background: var(--surface);
  box-shadow:2px 0 8px rgba(0,0,0,.15);
  transform:translateX(-100%);transition:transform .3s ease;
  z-index:1000;padding-top:84px;
}
.mobile-drawer.open{transform:translateX(0);}
.drawer-close{
  position:absolute;top:18px;right:16px;
  background:transparent;border:none;font-size:2rem;line-height:1;cursor:pointer;
}
.drawer-nav{display:flex;flex-direction:column;gap:1rem;padding:1.5rem;}
.drawer-nav button{text-align:left;}

/* inherit global font */
button,input,select,textarea{font-family:inherit;}

/************ Loading Screen Overlay ************/
#loading-screen {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  overflow: hidden;
  pointer-events: all;
}

.loading-door {
  position: absolute;
  width: 100vw;
  height: 50vh;
  background: #000;        /* keep strong contrast for splash */
  z-index: 1;
  transition: transform 1s ease;
}

.top-door { top: 0; transform: translateY(0); }
.bottom-door { bottom: 0; transform: translateY(0); }

.loading-divider {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  height: 1px;
  overflow: visible;
}

.diamond-spinner {
  width: 20px;
  height: 20px;
  background: #000;
  border: 1px solid #fff;
  transform: rotate(45deg);
  animation: spin 1s linear infinite;
  z-index: 2;
}

/* Optional thin white line */
.loading-divider::before {
  content: '';
  position: absolute;
  width: 30rem;
  height: 1px;
  background: #fff;
  z-index: 1;
}

@keyframes spin {
  from { transform: rotate(45deg) rotate(0deg); }
  to   { transform: rotate(45deg) rotate(360deg); }
}

/* Slide doors open */
#loading-screen.loading-screen-exit .top-door { transform: translateY(-100%); }
#loading-screen.loading-screen-exit .bottom-door { transform: translateY(100%); }
#loading-screen.loading-screen-exit .loading-divider {
  opacity: 0;
  transition: opacity 0.1s ease;
}

/* ─── Shared section inner container ─── */
.section-inner {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 0 2rem;  /* Consistent horizontal padding */
  box-sizing: border-box;
}

/* ---------- Section divider with center diamond ---------- */
.section-divider {
  position: relative;
  height: 0;
  border-top: 1px solid var(--border);
  margin: 3rem auto;
  width: 100%;
  flex-shrink: 0;
  transform: scaleY(1);
}

/* Centered diamond box */
.diamond-box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  transform: translate(-50%, -50%) rotate(45deg);
  z-index: 2;
}