/* ==========================================================================
   Header & Layout Structure
   ========================================================================== */

/* ── Site Wrapper ── */
.site-wrapper {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── 3-Column Layout ── */
.layout {
  display: flex;
  min-height: 100vh;
}

.layout__main {
  flex: 1;
  min-width: 0;
  max-width: var(--container-sm);
  margin: 0 auto;
  width: 100%;
}

/* ── Sidebars (Desktop 1280px+) ── */
.sidebar {
  display: none;
}

@media (min-width: 1280px) {
  .layout__main {
    max-width: var(--container-md);
  }

  .sidebar {
    display: block;
    width: var(--sidebar-width);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
  }

  .sidebar--left {
    border-right: 1px solid var(--color-border-light);
  }

  .sidebar--right {
    border-left: 1px solid var(--color-border-light);
  }

  .sidebar__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-8) var(--space-4);
    height: 100%;
  }

  .sidebar__logo {
    display: block;
    margin-bottom: var(--space-8);
  }

  .sidebar__logo-img {
    width: 120px;
    height: auto;
  }

  .sidebar__cta {
    margin-top: auto;
    transition: transform var(--duration-normal) var(--ease-out);
  }

  .sidebar__cta:hover {
    transform: scale(1.05);
    opacity: 1;
  }

  .sidebar__cta-img {
    width: 140px;
    height: auto;
  }

  /* Right sidebar nav */
  .sidebar__nav {
    display: flex;
    flex-direction: column;
    padding: var(--space-8) var(--space-4);
    gap: var(--space-1);
  }

  .sidebar__nav a {
    display: block;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    transition: all var(--duration-fast) var(--ease-in-out);
    letter-spacing: var(--tracking-normal);
  }

  .sidebar__nav a:hover {
    color: var(--color-text);
    background-color: var(--color-primary-50);
    opacity: 1;
  }

  .sidebar__contact-sub {
    padding-left: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .sidebar__contact-sub a {
    font-size: var(--text-xs);
    color: var(--color-text-light);
  }

  .sidebar__external {
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }
}

@media (min-width: 1600px) {
  .sidebar {
    width: var(--sidebar-width-wide);
  }

  .layout__main {
    max-width: 560px;
  }
}

/* ── Sticky Header (Mobile/Tablet) ── */
.header {
  position: fixed;
  top: var(--space-5);
  left: 0;
  right: 0;
  z-index: var(--z-header);
  height: var(--header-height);
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid transparent;
  transition: background var(--duration-normal) var(--ease-in-out),
              border-bottom-color var(--duration-normal) var(--ease-in-out),
              box-shadow var(--duration-normal) var(--ease-in-out);
  will-change: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* backdrop-filter: PCのみ適用（モバイルはスクロール負荷が高いため無効化） */
@media (hover: hover) and (pointer: fine) {
  .header {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

.header--scrolled {
  background: rgba(255, 255, 255, 0.95);
  border-bottom-color: var(--color-border-light);
  box-shadow: var(--shadow-sm);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 var(--space-4);
  max-width: var(--container-sm);
  margin: 0 auto;
}

.header__logo {
  display: flex;
  align-items: center;
}

.header__logo-img {
  height: 28px;
  width: auto;
}

.header__text {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-left: var(--space-2);
  display: none;
}

@media (min-width: 480px) {
  .header__text {
    display: inline;
  }
}

/* Hamburger button */
.header__menu-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: background-color var(--duration-fast) var(--ease-in-out);
}

.header__menu-btn:hover {
  background-color: var(--color-primary-50);
}

.header__menu-icon {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 22px;
}

.header__menu-icon span {
  display: block;
  height: 2px;
  width: 100%;
  background-color: var(--color-text);
  border-radius: 1px;
  transition: all var(--duration-normal) var(--ease-out);
  transform-origin: center;
}

/* Hamburger open state */
.header__menu-btn[aria-expanded="true"] .header__menu-icon span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.header__menu-btn[aria-expanded="true"] .header__menu-icon span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.header__menu-btn[aria-expanded="true"] .header__menu-icon span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Hide header on desktop with sidebar */
@media (min-width: 1280px) {
  .header {
    display: none;
  }

  .layout__main {
    padding-top: 0;
  }
}

/* Add padding for header on mobile/tablet */
@media (max-width: 1279px) {
  .layout__main {
    padding-top: var(--header-height);
  }
}

/* ── Front Page: ヒーローをヘッダー裏から全画面表示 ── */
.home .layout__main {
  padding-top: 0;
}

/* ── Front Page: 透過ヘッダー ── */
.home .header {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
}

.home .header .header__logo-img {
  height: 32px;
}

.home .header .header__text {
  color: rgba(255, 255, 255, 0.8);
}

.home .header .header__menu-icon span {
  background-color: #fff;
}

/* スクロール後: 透過のまま維持 */
.home .header.header--scrolled {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  box-shadow: none;
}

.home .header.header--scrolled .header__logo-img {
  filter: none;
  height: 28px;
}

.home .header.header--scrolled .header__text {
  color: var(--color-text-muted);
}

.home .header.header--scrolled .header__menu-icon span {
  background-color: var(--color-text);
}

/* ── Front Page: Full-Width Layout (No Sidebars) ── */
.home .header__inner {
  max-width: 100%;
  padding: 0 var(--space-8);
}

@media (min-width: 840px) {
  .home .header__inner {
    padding: 0 var(--space-12);
  }
}

@media (min-width: 1280px) {
  .home .sidebar {
    display: none;
  }

  .home .layout__main {
    max-width: 100%;
  }

  .home .header {
    display: block;
  }

  .home .header__inner {
    max-width: 100%;
    padding: 0 var(--space-16);
  }
}

/* Front page container width on PC */
@media (min-width: 840px) {
  .front .container {
    max-width: var(--container-lg);
  }
}

@media (min-width: 1280px) {
  .front .container {
    max-width: var(--container-xl);
  }
}

/* ── WordPress Admin Bar 対応 ── */
body.admin-bar .header {
  top: calc(var(--space-5) + 32px);
}

@media (max-width: 782px) {
  body.admin-bar .header {
    top: calc(var(--space-5) + 46px);
  }
}