/* ==========================================================================
   SDSS 2027 — Applications Stylesheet
   Extends css/styles.css for use in the application/ subdirectory.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. APP HEADER
   -------------------------------------------------------------------------- */

/* Nav bar: full height + flex-center the return link */
.app-header .header-nav-bar {
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-header .header-nav-bar a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}

.app-header .header-nav-bar a i {
  font-size: 0.75rem;
  transition: transform var(--t-fast);
}

.app-header .header-nav-bar a:hover {
  color: var(--secondary-light);
  border-color: rgba(var(--secondary-light-rgb), 0.3);
  background: rgba(var(--secondary-light-rgb), 0.06);
}

.app-header .header-nav-bar a:hover i {
  transform: translateX(-3px);
}

/* Application title — absolutely centered in the header bar */
.app-header .header-top-inner {
  position: relative;
}

.app-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 400;
  color: var(--primary);
  letter-spacing: 0.02em;
  margin: 0;
  white-space: nowrap;
}


/* --------------------------------------------------------------------------
   2. INTERIOR CONTENT
   -------------------------------------------------------------------------- */

/* Match the JSM template's larger top padding (main styles.css uses 1.5rem) */
.interior-wrap {
  padding-block: 2.5rem 4rem;
}

/* Full-width content area — no sidebar in application pages */
/* Centred under the .app-title. width: 100% is required: this is a grid item, and auto margins
   alone would shrink it to its content, so short pages would come out narrower than 860px. */
.app-content {
  width: 100%;
  max-width: 860px;
  margin-inline: auto;
}


/* --------------------------------------------------------------------------
   3. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  /* At tablet/mobile: drop absolute centering so title flows below logo */
  .app-title {
    position: static;
    transform: none;
    width: 100%;
    text-align: center;
    font-size: 1.5rem;
    white-space: normal;
    padding-bottom: var(--sp-3);
  }

  /* Override the main site's mobile drawer — keep this bar static and visible at all sizes */
  .app-header .header-nav-bar {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    height: var(--nav-height);
    transform: none;
    visibility: visible;
    overflow-y: visible;
    box-shadow: none;
    background-color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .app-title {
    font-size: 1.25rem;
  }
}