/* ========================================
   フーデリ速報 共通ヘッダー
   トップページ基準
======================================== */


/* ========================================
   HEADER
======================================== */

.site-header {
  position: relative;
  z-index: 10;

  background:
    rgba(251, 252, 251, 0.88);

  -webkit-backdrop-filter:
    blur(18px)
    saturate(135%);

  backdrop-filter:
    blur(18px)
    saturate(135%);

  border-bottom:
    1px solid
    rgba(43, 83, 59, 0.11);
}


.header-inner {
  width:
    min(
      1180px,
      calc(100% - 40px)
    );

  min-height: 108px;

  margin: 0 auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 28px;
}


/* ========================================
   BRAND
======================================== */

.brand {
  display: flex;

  align-items: center;

  gap: 17px;

  min-width: 0;

  color: inherit;

  text-decoration: none;
}


.brand-mark {
  width: 62px;

  height: 62px;

  display: grid;

  place-items: center;

  flex: 0 0 auto;

  border-radius: 20px;

  font-size: 29px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(238, 249, 242, 0.96)
    );

  border:
    1px solid
    rgba(24, 201, 100, 0.12);

  box-shadow:
    inset 0 1px 0
      rgba(255, 255, 255, 0.95),

    0 10px 26px
      rgba(24, 201, 100, 0.10);
}


.brand-copy {
  min-width: 0;
}


.brand-title {
  display: block;

  font-size: 42px;

  line-height: 1;

  font-weight: 950;

  letter-spacing: -0.065em;

  white-space: nowrap;
}


.brand-green {
  color: #12b858;
}


.brand-gold {
  color: #e6b83f;
}


.brand-copy p {
  margin:
    10px 0 0;

  color: #44584b;

  font-size: 13px;

  font-weight: 650;

  line-height: 1.5;
}


/* ========================================
   HEADER ACTIONS
======================================== */

.header-actions {
  display: flex;

  align-items: center;

  gap: 12px;

  flex: 0 0 auto;
}


.auth-menu {
  display: flex;

  align-items: center;

  gap: 12px;
}


.auth-menu[hidden],
#userMenu[hidden],
#guestMenu[hidden] {
  display: none !important;
}


.header-user-name {
  max-width: 160px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  color: #08733d;

  font-size: 14px;

  font-weight: 900;
}


/* ========================================
   HEADER BUTTONS
======================================== */

.header-btn {
  min-width: 134px;

  min-height: 50px;

  padding:
    0 18px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border-radius: 16px;

  font-size: 14px;

  font-weight: 900;

  line-height: 1;

  text-decoration: none;

  white-space: nowrap;

  transition:
    transform 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease;
}


.header-btn:hover {
  transform:
    translateY(-2px);
}


.login-btn {
  color: #08733d;

  background:
    rgba(255, 255, 255, 0.72);

  border:
    1px solid
    rgba(24, 201, 100, 0.22);

  box-shadow:
    0 10px 34px
    rgba(14, 42, 25, 0.055);
}


.signup-btn {
  color: #201b0d;

  background:
    linear-gradient(
      135deg,
      #f0c74e,
      #e6b83f
    );

  border:
    1px solid
    rgba(207, 159, 36, 0.22);

  box-shadow:
    0 10px 28px
    rgba(207, 159, 36, 0.16);
}


.logout-btn {
  color: #4f6156;

  background: #ffffff;

  border:
    1px solid
    rgba(90, 110, 98, 0.18);

  cursor: pointer;
}


/* ========================================
   NAV
======================================== */

.global-nav {
  background:
    linear-gradient(
      90deg,
      #18c964 0%,
      #12b858 45%,
      #0da34d 100%
    );

  box-shadow:
    inset 0 1px 0
      rgba(255, 255, 255, 0.18),

    0 6px 18px
      rgba(8, 115, 61, 0.12);
}


.nav-inner {
  width:
    min(
      1180px,
      calc(100% - 24px)
    );

  margin:
    0 auto;

  padding:
    9px 0;

  display: grid;

  grid-template-columns:
    repeat(7, 1fr);

  gap: 8px;
}


.nav-inner a {
  min-width: 0;

  min-height: 48px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 14px;

  color:
    rgba(
      255,
      255,
      255,
      0.96
    );

  font-size: 15px;

  font-weight: 850;

  line-height: 1.3;

  letter-spacing: 0.01em;

  text-decoration: none;

  text-align: center;

  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}


.nav-inner a:hover {
  background:
    rgba(
      255,
      255,
      255,
      0.10
    );
}


.nav-inner a.active {
  color: #08733d;

  background:
    rgba(
      255,
      255,
      255,
      0.98
    );

  box-shadow:
    0 7px 20px
    rgba(6, 86, 44, 0.12);
}


/* ========================================
   TABLET
======================================== */

@media (max-width: 980px) {

  .header-inner {
    width:
      calc(100% - 28px);
  }


  .brand-title {
    font-size: 34px;
  }


  .brand-copy p {
    white-space: normal;
  }


  .nav-inner {
    display: grid;

    grid-template-columns:
      repeat(
        7,
        minmax(0, 1fr)
      );

    overflow: visible;

    gap: 4px;

    padding-left: 4px;

    padding-right: 4px;
  }


  .nav-inner a {
    min-width: 0;

    padding:
      0 3px;

    font-size: 12px;

    white-space: nowrap;
  }

}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 640px) {

  .header-inner {
    width:
      calc(100% - 28px);

    min-height: auto;

    padding:
      15px 0;

    display: block;
  }


  .brand {
    gap: 17px;
  }


  .brand-mark {
    width: 49px;

    height: 49px;

    border-radius: 16px;

    font-size: 24px;
  }


  .brand-title {
    font-size: 30px;
  }


  .brand-copy p {
    display: block;

    margin-top: 7px;

    font-size: 11px;

    line-height: 1.45;
  }


  .header-actions {
    width: 100%;

    margin-top: 14px;
  }


  .auth-menu {
    width: 100%;

    gap: 7px;
  }


  .header-user-name {
    max-width: 100px;

    font-size: 12px;
  }


  .header-btn {
    min-width: 0;

    min-height: 44px;

    flex: 1;

    padding-left: 8px;

    padding-right: 8px;

    border-radius: 16px;

    font-size: 12px;
  }


  #userMenu {
    display: grid;

    grid-template-columns:
      auto 1fr 1fr;

    align-items: center;
  }


  #userMenu[hidden] {
    display: none !important;
  }


  /* ========================================
     MOBILE NAV
  ======================================== */

  .global-nav {
    overflow: hidden;

    padding:
      7px 8px;
  }


  .nav-inner {
    width: 100%;

    display: grid;

    grid-template-columns:
      repeat(
        4,
        minmax(0, 1fr)
      );

    gap: 6px;

    padding: 0;
  }


  .nav-inner a {
    min-width: 0;

    min-height: 44px;

    padding:
      7px 4px;

    border-radius: 11px;

    font-size: 11px;

    line-height: 1.25;

    letter-spacing: -0.025em;

    white-space: normal;

    text-align: center;
  }


  .nav-inner a.active {
    box-shadow:
      0 4px 12px
      rgba(6, 86, 44, 0.10);
  }


  /* 2段目 */
  .nav-inner a:nth-child(5) {
    grid-column:
      1 / 2;
  }


  .nav-inner a:nth-child(6) {
    grid-column:
      2 / 3;
  }


  .nav-inner a:nth-child(7) {
    grid-column:
      3 / 4;
  }

}