/* =============================================================================
 * Krannon Archaeology — Local Navigation & Home Hero v1.4.6.2
 *
 * Two concerns in one stylesheet, both scoped tightly:
 *
 *   1. Home hero — finalise the full-viewport behaviour so the hero
 *      genuinely fills the first screen on every breakpoint, including
 *      tablet/mobile where editorial-home.css used to clamp the height
 *      back to 86vh.
 *
 *   2. Local navigation — render the new two-row architecture cleanly:
 *      a primary tab strip and an optional subordinate index list with
 *      visibly lower weight. The PHP renderer in inc/local-navigation.php
 *      now produces semantic markup; this file only styles it.
 *
 * Loaded last in the front-end stylesheet chain.
 * ========================================================================== */


/* -----------------------------------------------------------------------------
 * 1. Home hero — full first viewport on every breakpoint.
 * Re-asserts 100vh / 100svh so the editorial-home.css 86vh override on
 * narrow screens no longer wins. Container width and content layout were
 * fixed in v1.4.6.1 and are not redefined here.
 * -------------------------------------------------------------------------- */

body.home .krannon-editorial-home-hero,
body.home .krannon-section-hero,
body.home .krannon-page-hero,
body.home .krannon-hero-height-full {
  min-height: 100vh;
  min-height: calc(100vh - var(--krannon-header-height, 0px));
}

@supports (height: 100svh) {
  body.home .krannon-editorial-home-hero,
  body.home .krannon-section-hero,
  body.home .krannon-page-hero,
  body.home .krannon-hero-height-full {
    min-height: 100svh;
    min-height: calc(100svh - var(--krannon-header-height, 0px));
  }
}

@media (max-width: 900px) {
  body.home .krannon-hero-height-full {
    min-height: 100vh;
  }
  @supports (height: 100svh) {
    body.home .krannon-hero-height-full {
      min-height: 100svh;
    }
  }
}

/* The next section starts cleanly at the bottom of the first viewport. */
body.home .krannon-editorial-home-hero + .krannon-section,
body.home .krannon-section-hero + .krannon-section,
body.home .krannon-page-hero + .krannon-section {
  margin-top: 0;
}


/* -----------------------------------------------------------------------------
 * 2. Local navigation — outer wrapper.
 * One quiet horizontal strip immediately below the hero, with reduced
 * vertical padding so the body content surfaces faster.
 * -------------------------------------------------------------------------- */

.krannon-local-nav {
  background: transparent;
  border-bottom: 1px solid var(--krannon-border);
  padding: 24px 0 18px;
}

.krannon-local-nav .krannon-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

@media (max-width: 900px) {
  .krannon-local-nav { padding: 20px 0 16px; }
  .krannon-local-nav .krannon-container { gap: 12px; }
}

@media (max-width: 560px) {
  .krannon-local-nav { padding: 16px 0 14px; }
  .krannon-local-nav .krannon-container { gap: 10px; }
}


/* -----------------------------------------------------------------------------
 * 3. Primary navigation row — tabs.
 * Flex row with generous gap, thin underline on the current page, no
 * heavy pills, no boxed buttons.
 * -------------------------------------------------------------------------- */

.krannon-local-nav-primary { width: 100%; }

.krannon-local-nav-list--primary {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
}

@media (max-width: 720px) {
  .krannon-local-nav-list--primary { gap: 18px 22px; }
}

.krannon-local-nav-list--primary > .krannon-local-nav-item {
  margin: 0;
  padding: 0;
}

.krannon-local-nav-list--primary > .krannon-local-nav-item > a,
.krannon-local-nav-list--primary > .krannon-local-nav-item > span {
  display: inline-block;
  padding: 4px 0;
  border: 0;
  border-bottom: 1.5px solid transparent;
  background: transparent;
  font-family: var(--krannon-font-nav, inherit);
  font-size: var(--krannon-font-size-nav, .98rem);
  font-weight: 500;
  letter-spacing: .005em;
  color: var(--krannon-text);
  text-decoration: none;
  transition: color var(--krannon-transition),
              border-color var(--krannon-transition);
}

.krannon-local-nav-list--primary > .krannon-local-nav-item > a:hover,
.krannon-local-nav-list--primary > .krannon-local-nav-item > a:focus-visible {
  color: var(--krannon-primary);
}

.krannon-local-nav-list--primary > .krannon-local-nav-item.is-current > span {
  color: var(--krannon-primary);
  border-bottom-color: var(--krannon-primary);
  font-weight: 600;
}


/* -----------------------------------------------------------------------------
 * 4. Subordinate row — quieter, narrower, clearly below the primary row.
 * Used when the current page is itself a hub (e.g. "Τοπογραφία" with
 * Θέση / Επιφανειακά Μνημεία beneath it).
 * -------------------------------------------------------------------------- */

.krannon-local-nav-subordinate {
  width: 100%;
  max-width: 520px;
  padding-top: 4px;
}

.krannon-local-nav-list--subordinate {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  border-top: 1px solid var(--krannon-border);
}

.krannon-local-nav-list--subordinate > .krannon-local-nav-item {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--krannon-border);
}

.krannon-local-nav-list--subordinate > .krannon-local-nav-item > a {
  display: block;
  padding: 9px 0;
  font-family: var(--krannon-font-body, inherit);
  font-size: .94rem;
  line-height: 1.4;
  color: var(--krannon-muted, var(--krannon-text));
  text-decoration: none;
  transition: color var(--krannon-transition),
              padding-left var(--krannon-transition);
}

.krannon-local-nav-list--subordinate > .krannon-local-nav-item > a:hover,
.krannon-local-nav-list--subordinate > .krannon-local-nav-item > a:focus-visible {
  color: var(--krannon-primary);
  padding-left: 4px;
}


/* -----------------------------------------------------------------------------
 * 5. Tighten the content that follows the navigation strip so the article
 * surfaces quickly after the hero + nav block.
 * -------------------------------------------------------------------------- */

.krannon-local-nav + .krannon-section,
.krannon-local-nav + .krannon-section.krannon-bg-white,
.krannon-local-nav + .krannon-section.krannon-bg-soft {
  padding-top: 24px;
}

@media (max-width: 900px) {
  .krannon-local-nav + .krannon-section,
  .krannon-local-nav + .krannon-section.krannon-bg-white,
  .krannon-local-nav + .krannon-section.krannon-bg-soft {
    padding-top: 18px;
  }
}

@media (max-width: 560px) {
  .krannon-local-nav + .krannon-section,
  .krannon-local-nav + .krannon-section.krannon-bg-white,
  .krannon-local-nav + .krannon-section.krannon-bg-soft {
    padding-top: 14px;
  }
}


/* -----------------------------------------------------------------------------
 * 6. Suppress legacy nav blocks if any third-party plugin or older
 * customization re-introduces them via the old class names. The new
 * orchestrator never emits these, so this is purely defensive.
 * -------------------------------------------------------------------------- */

.krannon-local-nav .krannon-local-nav-deeper { display: none; }

/* v1.4.7.7 — iPad-friendly horizontal subordinate local navigation.
   The secondary row (for years / child pages) now behaves as a quiet
   horizontal tab strip instead of a vertical list. */
.krannon-local-nav-subordinate {
  max-width: none;
  padding-top: 2px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.krannon-local-nav-list--subordinate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  border-top: 1px solid var(--krannon-border);
  padding-top: 14px;
}

.krannon-local-nav-list--subordinate > .krannon-local-nav-item {
  border-bottom: 0;
  flex: 0 0 auto;
}

.krannon-local-nav-list--subordinate > .krannon-local-nav-item > a {
  display: inline-block;
  padding: 4px 0;
  border-bottom: 1.5px solid transparent;
  white-space: nowrap;
  font-family: var(--krannon-font-nav, inherit);
  font-size: .94rem;
  line-height: 1.35;
  color: var(--krannon-muted, var(--krannon-text));
}

.krannon-local-nav-list--subordinate > .krannon-local-nav-item > a:hover,
.krannon-local-nav-list--subordinate > .krannon-local-nav-item > a:focus-visible {
  padding-left: 0;
  color: var(--krannon-primary);
  border-bottom-color: var(--krannon-primary);
}

@media (max-width: 720px) {
  .krannon-local-nav-list--subordinate {
    flex-wrap: nowrap;
    gap: 18px;
    min-width: max-content;
  }
}