/*
Theme Name: ERSF Astra Child
Theme URI: https://ears.local/
Description: 一般財団法人教育研究支援機構 — Astra child theme.
Author: ERSF Dev
Template: astra
Version: 1.1.10-preview
Text Domain: ears-child
*/

/* WP-neutralizing tweaks only. Real visual rules live in assets/css/ears-base.css */

/* Hide Astra's default container chrome on our custom templates */
.ast-container,
.ast-container-fluid {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}
.site-content > .ast-container,
.ast-page-builder-template .entry-header,
.ast-page-builder-template .entry-content {
  padding: 0 !important;
  margin: 0 !important;
}
.entry-header,
.page-title,
.entry-content > .ast-no-thumb {
  display: none !important;
}

/* Hide Astra's auto-injected dropdown-toggle arrow inside our nav menu */
.nav .dropdown-menu-toggle,
.nav .ast-header-navigation-arrow {
  display: none !important;
}

/* ============================================================
   New single-row dark navy header (overrides static-reference)
   ============================================================ */
body.home { padding-top: 0; }
body:not(.home) { padding-top: 80px; }

.ears-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  z-index: 1001;
  background: rgba(7, 43, 97, 0.85);   /* matches Hero #072B61, semi-transparent on hero */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.3s ease, transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-sizing: border-box;
}
body:not(.home) .ears-header {
  background: #072B61;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.ears-header.nav-hidden { transform: translateY(-100%); }
/* Home hero: while scrolled to the very top, the nav floats transparently over
   the full-bleed hero video instead of covering it with a navy bar. JS adds
   `nav-at-top` (removed once the user scrolls, restoring the solid header). */
body.home .ears-header.nav-at-top {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

.ears-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1280px;
  height: 100%;
  margin: 0 auto;
  padding: 0 28px;
  box-sizing: border-box;
}

.ears-header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #fff;
  flex-shrink: 0;
}
.ears-header-logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  /* Force single-color logo to white on the navy header.
     brightness(0) flattens all colors to pure black, then invert(1) flips to pure white. */
  filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}
.ears-header-name {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.ears-header-name-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.08em;
}
.ears-header-name-main {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.04em;
}
.ears-header-name-main em {
  color: #C9A96E;
  font-style: normal;
  font-weight: 500;
  margin-left: 4px;
  letter-spacing: 0.1em;
}

/* Nav inside dark header */
.ears-header .nav-list {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ears-header .nav-list > li {
  position: relative;
}
.ears-header .nav-link {
  display: inline-block;
  padding: 32px 14px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: color 0.2s ease;
}
.ears-header .nav-link:hover,
.ears-header .nav-list > li:hover > .nav-link {
  color: #C9A96E;
}
.ears-header .nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: #07142a;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 8px 0;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all 0.2s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.ears-header .nav-list > li:hover > .nav-dropdown,
.ears-header .nav-list > li:focus-within > .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ears-header .nav-dropdown li a {
  display: block;
  padding: 10px 18px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease;
}
.ears-header .nav-dropdown li a:hover {
  color: #C9A96E;
  background: rgba(255, 255, 255, 0.04);
}

.ears-header .hamburger {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
}
.ears-header .hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  margin: 5px 0;
  transition: all 0.3s;
}

/* Tablet+mobile (≤921px, matching Astra's break_point and the JS handleNavPlacement
   breakpoint): swap horizontal nav for hamburger + drawer.
   The off-canvas drawer base styles live in ears-base.css at <=768px, so below we
   re-declare them under <=921px to extend drawer mode across the tablet range. */
@media (max-width: 921px) {
  .ears-header .nav { display: flex; }            /* override base 'display:flex' explicitly */
  .ears-header .hamburger { display: flex; }
  /* Drawer mode: fixed off-canvas pane, slides in on .open */
  .nav {
    position: fixed;
    top: 0;
    left: auto;
    right: -85vw;
    width: 85vw;
    max-width: 360px;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 0;
    background:
      linear-gradient(135deg, rgba(201,169,110,0.04) 0%, transparent 50%, rgba(201,169,110,0.03) 100%),
      #FAFAFA;
    border-left: 2px solid #C9A96E;
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    z-index: 1050;
    pointer-events: auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .nav.open { right: 0; }
}

/* Language switcher inside dark navy header */
.ears-header .lang-globe { margin-left: 18px; }
.ears-header .lang-globe-btn {
  color: rgba(255, 255, 255, 0.85) !important;
  background: transparent !important;
}
.ears-header .lang-globe-btn:hover {
  color: #C9A96E !important;
  background: rgba(255, 255, 255, 0.08) !important;
}
/* Mobile/tablet: with the desktop nav out (it's now an off-canvas drawer),
   space-between scatters brand/globe/hamburger evenly, leaving globe in the
   middle. margin-left:auto absorbs the leftover space so the globe stays next
   to the hamburger. */
@media (max-width: 921px) {
  .ears-header .lang-globe { margin-left: auto; margin-right: 6px; }
}

/* Push fixed header below WP admin bar when logged in */
body.admin-bar .ears-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .ears-header { top: 46px; }
}

/* ============================================================
   v1.11.1 — Vertical stack for the 3 floating buttons (right edge)
   --------------------------------------------------------------
   Top → Bottom:  Ichigo → Mail → Back-to-top.
   Back-to-top is the bottom anchor (right:24, bottom:24).
   Gap 16px between buttons. All share the right edge.
   Back-to-top is restyled to match the mail button (circle, navy).
   ============================================================ */

/* Back-to-top — bottom anchor, restyled to match .ears-mail-btn.
   Width/height = 38 (2/3 of the previous 56). Center sits 52px from
   the screen edge to align with ichigo (right:2 + 100/2 = 52). */
body #ast-scroll-top.ast-scroll-to-top-right {
  right: 33px;                    /* 52 - 38/2 = 33 */
  bottom: 24px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #0B1F3A;
  color: #fff;
  box-shadow: 0 6px 18px rgba(11, 31, 58, 0.35);
  line-height: 38px;
  padding: 0;
  transition: transform 0.25s ease, background 0.25s ease;
}
body #ast-scroll-top.ast-scroll-to-top-right:hover {
  transform: translateY(-3px);
  background: #1a2f54;
  color: #C9A96E;
}
body #ast-scroll-top.ast-scroll-to-top-right .ast-icon.icon-arrow svg {
  width: 12px;
  height: 12px;
}

/* Mail — sits 16px above back-to-top, also 2/3 size (38×38) */
.ears-mail-btn {
  right: 33px !important;         /* center-align with ichigo/back-to-top */
  bottom: 78px !important;        /* 24 + 38 + 16 */
  width: 38px !important;
  height: 38px !important;
}
.ears-mail-btn svg { width: 18px !important; height: 18px !important; }
.ears-mail-btn .ears-mail-tooltip { right: 52px !important; } /* 38 + 14 */

/* Ichigo widget — top of stack. Position unchanged; clears the shorter
   stack below: 78 (mail bottom) + 38 (mail h) + 16 (gap) = 132. */
.ichigo-widget-btn {
  right: 2px !important;
  bottom: 132px !important;
}

@media (max-width: 600px) {
  /* Mobile: mail/back-to-top shrink to 32 (2/3 of 48). Ichigo center stays
     at right:4 + 72/2 = 40; mail/back-to-top right = 40 - 32/2 = 24. */
  body #ast-scroll-top.ast-scroll-to-top-right {
    right: 24px;
    bottom: 16px;
    width: 32px;
    height: 32px;
    line-height: 32px;
  }
  body #ast-scroll-top.ast-scroll-to-top-right .ast-icon.icon-arrow svg {
    width: 11px;
    height: 11px;
  }
  .ears-mail-btn {
    right: 24px !important;
    bottom: 64px !important;      /* 16 + 32 + 16 */
    width: 32px !important;
    height: 32px !important;
  }
  .ears-mail-btn svg { width: 15px !important; height: 15px !important; }
  .ears-mail-btn .ears-mail-tooltip { right: 46px !important; }
  .ichigo-widget-btn {
    right: 4px !important;
    bottom: 112px !important;     /* 64 + 32 + 16 */
    width: 72px;
    height: 72px;
  }
}

/* ============================================================
   v1.10.0 — Contact form notice + Mobile drawer (navy continuation)
   --------------------------------------------------------------
   Notice: use ERSF palette (gold accent for OK, warm-earth for ERR)
   with a 0.4s slide-down. Drawer: continue the dark navy header
   surface into the off-canvas pane so the two read as one space.
   ============================================================ */

/* ---- Contact form notice ---- */
.contact-form-notice {
  position: relative;
  margin: 0 0 28px;
  padding: 16px 22px 16px 26px;
  background: #FAFAF6;
  border: 1px solid #ECE6D8;
  color: #0B1F3A;
  font-size: 0.9rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
  border-radius: 2px;
  animation: ears-notice-slide 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.contact-form-notice::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: #C9A96E;
  transform-origin: top;
  animation: ears-notice-bar 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both;
}
.contact-form-notice-err {
  background: #FBF6F1;
  border-color: #E5D5BF;
  color: #5C3A1E;
}
.contact-form-notice-err::before { background: #B8895B; }

@keyframes ears-notice-slide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ears-notice-bar {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .contact-form-notice,
  .contact-form-notice::before { animation: none; }
}

/* ---- Mobile drawer — navy continuation of header ---- */
@media (max-width: 921px) {
  .nav {
    background:
      radial-gradient(120% 80% at 100% 0%, rgba(201, 169, 110, 0.10) 0%, transparent 55%),
      linear-gradient(180deg, #0B1F3A 0%, #0E2547 100%);
    border-left: 1px solid rgba(201, 169, 110, 0.35);
    box-shadow: -16px 0 40px rgba(0, 0, 0, 0.25);
  }

  /* Corner buttons → light on dark */
  .nav-back-btn,
  .nav-close-btn {
    color: rgba(255, 255, 255, 0.85);
  }
  .nav-back-btn:hover,
  .nav-close-btn:hover { color: #C9A96E; }

  /* Drawer brand divider — single hairline gold */
  .nav-drawer-brand {
    border-bottom: 1px solid rgba(201, 169, 110, 0.22);
  }
  .nav-drawer-brand-name {
    color: rgba(201, 169, 110, 0.85);
  }

  /* Menu items: hairline dividers, white serif text */
  .nav-list > li {
    border-bottom: 1px solid rgba(201, 169, 110, 0.14);
  }
  .nav-link {
    color: rgba(255, 255, 255, 0.92);
  }
  .nav-link:hover,
  .nav-link:active { color: #C9A96E; }

  .menu-subtext {
    color: rgba(201, 169, 110, 0.55);
  }

  /* Dropdown children: dimmer white, gold hover */
  .nav-dropdown li a {
    color: rgba(255, 255, 255, 0.55);
  }
  .nav-dropdown li a:hover { color: #C9A96E; background: transparent; }
  .nav-dropdown-heading {
    color: rgba(201, 169, 110, 0.55);
  }

  /* Drawer footer */
  .nav-drawer-footer {
    border-top: 1px solid rgba(201, 169, 110, 0.22);
  }
  .nav-drawer-footer p {
    color: rgba(255, 255, 255, 0.35);
  }
}

/* ===== いちごちゃん draggable feedback (v2.3.0, desktop only) ===== */
@media (min-width: 922px) {
  .ichigo-widget-btn { cursor: grab; touch-action: none; user-select: none; }
  .ichigo-chat-header { cursor: grab; touch-action: none; user-select: none; }
  .ichigo-close-btn { cursor: pointer; }

  /* button while dragging: lift the bob, scale + stronger shadow */
  .ichigo-widget-btn.ichigo-dragging {
    cursor: grabbing;
    animation: none !important;
    transform: scale(1.08) !important;
    z-index: 10000;
  }
  .ichigo-widget-btn.ichigo-dragging .ichigo-btn-img {
    filter: drop-shadow(0 10px 26px rgba(0,0,0,.32));
  }
  .ichigo-widget-btn.ichigo-dragging .ichigo-tooltip { opacity: 0 !important; }

  /* panel while dragging: kill the open-transition lag, boost shadow */
  .ichigo-chat-panel.ichigo-dragging {
    cursor: grabbing;
    transition: none !important;
    box-shadow: 0 28px 72px rgba(0,0,0,.34);
    z-index: 10000;
  }
  .ichigo-chat-panel.ichigo-dragging .ichigo-chat-header { cursor: grabbing; }
}

/* ===== ERSF UI preview polish v1.1.0 ===== */
.ichigo-root {
  opacity: 0.9;
  transition: opacity 0.2s ease, filter 0.2s ease;
  filter: drop-shadow(0 8px 18px rgba(11, 31, 58, 0.18));
}
.ichigo-root:hover {
  opacity: 1;
}

@media (max-width: 600px) {
  .ears-header-inner {
    padding-left: 18px;
    padding-right: 18px;
  }
  .ears-header-logo {
    width: 48px;
    height: 48px;
  }
  .ears-header-name-sub {
    font-size: 10px;
  }
  .ears-header-name-main {
    font-size: 13px;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
  .ears-header-name-main em {
    margin-left: 3px;
    letter-spacing: 0.06em;
  }
  .ichigo-root {
    opacity: 0.86;
  }
}

/* ── 草莓猫 浮動エージェント（旧 ichigo フローティングボタン置換）────────── */
.scat-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 116px;
  height: 116px;
  z-index: 9999;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.scat-fab strawberry-cat-agent {
  display: block;
  width: 100%;
  height: 100%;
}
.scat-fab .ichigo-tooltip { opacity: 0; }
.scat-fab:hover .ichigo-tooltip { opacity: 1; }
body.chat-open .scat-fab { visibility: hidden; }
@media (max-width: 560px) {
  .scat-fab { width: 92px; height: 92px; right: 14px; bottom: 14px; }
}

/* 内部テスト版:チャット入力の個人情報注意 */
.ichigo-chat-hint {
  margin: 0;
  padding: 7px 14px;
  font-size: 11px;
  line-height: 1.4;
  color: #a3261f;
  background: #fdecec;
  border-top: 1px solid #f3d3d0;
}