/*
Theme Name: Scienstore V4
Theme URI: https://scienstore.com/
Author: Scienstore
Description: Scienstore block theme with a full-screen five-image hero slider, transparent-to-white sticky header, and eight everyday-science categories.
Version: 0.4.0
Requires at least: 6.6
Requires PHP: 7.4
Text Domain: scienstore
Tags: block-patterns, full-site-editing, blog, education
*/

:root {
  --sc-bg: #ffffff;
  --sc-surface: #f8f8f6;
  --sc-warm: #f3eadf;
  --sc-warm-strong: #d9b37a;
  --sc-text: #101114;
  --sc-muted: #5f6368;
  --sc-line: #e6e7e9;
  --sc-blue: #2f6bff;
  --sc-navy: #10213c;
  --sc-radius-sm: 16px;
  --sc-radius-md: 24px;
  --sc-radius-lg: 34px;
  --sc-shadow: 0 12px 36px rgba(16, 17, 20, .07);
  --sc-header-height: 76px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
a { text-underline-offset: .16em; }
img { display: block; max-width: 100%; }

/* =========================================================
   HEADER
   Normal pages: white sticky header.
   Front page: transparent over hero -> white after scrolling.
   ========================================================= */

.scienstore-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid rgba(230,231,233,.9);
  color: var(--sc-text);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: background .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.scienstore-header__inner {
  min-height: var(--sc-header-height);
  gap: 24px;
  padding-inline: clamp(18px, 3vw, 42px);
}
.scienstore-brand-row { gap: 22px !important; min-width: 0; }
.scienstore-brand a {
  color: inherit;
  font-size: clamp(1.5rem, 2vw, 2rem);
  font-weight: 800;
  letter-spacing: -.045em;
  text-decoration: none;
  text-transform: lowercase;
}
.scienstore-tagline { color: inherit; font-size: .78rem; white-space: nowrap; opacity: .86; }
.scienstore-nav { color: inherit; font-size: .83rem; font-weight: 700; }
.scienstore-nav .wp-block-navigation-item__content { color: inherit !important; text-decoration: none; }
.scienstore-nav .wp-block-navigation__responsive-container-open,
.scienstore-nav .wp-block-navigation__responsive-container-close { color: inherit; }
.scienstore-search .wp-block-search__inside-wrapper { border: 0; padding: 0; }
.scienstore-search input { display: none; }
.scienstore-search button { background: transparent !important; color: inherit !important; padding: 8px !important; }
.scienstore-header__tools { gap: 12px !important; }

body:has(.scienstore-hero__visual) .scienstore-header,
body.scienstore-has-hero .scienstore-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, rgba(3,8,16,.30) 0%, rgba(3,8,16,.10) 68%, rgba(3,8,16,0) 100%);
  border-bottom-color: transparent;
  color: #fff;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-shadow: 0 1px 16px rgba(0,0,0,.28);
}
body:has(.scienstore-hero__visual) .scienstore-tagline,
body.scienstore-has-hero .scienstore-tagline { display: none; }
body:has(.scienstore-hero__visual) .scienstore-header.is-scrolled,
body.scienstore-has-hero .scienstore-header.is-scrolled {
  background: rgba(255,255,255,.97);
  border-bottom-color: rgba(230,231,233,.92);
  color: var(--sc-text);
  box-shadow: 0 7px 28px rgba(16,17,20,.06);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  text-shadow: none;
}
.scienstore-header .wp-block-navigation__responsive-container.is-menu-open {
  background: #fff !important;
  color: var(--sc-text) !important;
  text-shadow: none;
  padding: 28px !important;
}
.scienstore-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  color: var(--sc-text) !important;
}

/* WordPress admin bar while logged in. */
body.admin-bar:has(.scienstore-hero__visual) .scienstore-header,
body.admin-bar.scienstore-has-hero .scienstore-header { top: 32px; }

/* =========================================================
   SHARED SECTIONS
   ========================================================= */

.scienstore-main { margin-top: 0; }
.scienstore-section { padding-block: clamp(56px, 7vw, 96px); }
.scienstore-section--compact { padding-block: clamp(42px, 5vw, 70px); }
.scienstore-eyebrow {
  color: var(--sc-blue);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.scienstore-section-title { margin-bottom: 30px; text-align: center; }
.scienstore-section-title .wp-block-heading { margin-bottom: 6px; }
.scienstore-section-title .wp-block-heading::after {
  content: "";
  display: block;
  width: 30px;
  height: 2px;
  margin: 12px auto 0;
  background: var(--sc-blue);
}

/* =========================================================
   FRONT HERO — full visual + horizontal slider
   The gallery stays a normal editable Gallery in Site Editor.
   Front-end body class turns it into a slider.
   ========================================================= */

.scienstore-hero-shell {
  width: 100%;
  margin: 0 !important;
  overflow: hidden;
  background: #fff;
}
.scienstore-hero-shell > * { margin-block-start: 0; margin-block-end: 0; }
.scienstore-hero__visual {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 640px;
  margin: 0 !important;
  overflow: hidden;
  background: #071526;
  isolation: isolate;
}
.scienstore-hero__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3,8,16,.22) 0%, rgba(3,8,16,0) 24%),
    linear-gradient(0deg, rgba(3,8,16,.16) 0%, rgba(3,8,16,0) 22%);
}

/* Front end only: make the editable core/gallery behave as a slider. */
.scienstore-hero__slider.wp-block-gallery {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 0 !important;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  transition: transform .8s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.scienstore-hero__slider > .wp-block-image {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}
.scienstore-hero__slider > .wp-block-image img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center;
}

/* Core Gallery can add column sizing rules; these resets keep all five items as 100% slides. */
.scienstore-hero__slider.has-nested-images > figure.wp-block-image {
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  flex-basis: 100% !important;
}
.scienstore-hero__slider.has-nested-images figure.wp-block-image:not(#individual-image) {
  width: 100% !important;
}

/* Slider controls are generated by assets/js/front-hero.js. */
.scienstore-hero__controls { display: contents; }
.scienstore-hero__arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.56);
  border-radius: 50%;
  background: rgba(5,12,22,.16);
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.scienstore-hero__arrow:hover {
  background: rgba(5,12,22,.36);
  border-color: rgba(255,255,255,.9);
}
.scienstore-hero__arrow--prev { left: clamp(14px, 3vw, 46px); }
.scienstore-hero__arrow--next { right: clamp(14px, 3vw, 46px); }
.scienstore-hero__dots {
  position: absolute;
  left: 50%;
  bottom: 68px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 9px;
  transform: translateX(-50%);
}
.scienstore-hero__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.48);
  cursor: pointer;
  transition: width .25s ease, background .25s ease;
}
.scienstore-hero__dot.is-active { width: 28px; background: #fff; }
.scienstore-hero__pause {
  position: absolute;
  right: clamp(14px, 3vw, 46px);
  bottom: 55px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.56);
  border-radius: 50%;
  background: rgba(5,12,22,.16);
  color: #fff;
  font-size: .78rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .2s ease, border-color .2s ease;
}
.scienstore-hero__pause:hover,
.scienstore-hero__pause:focus-visible {
  background: rgba(5,12,22,.36);
  border-color: rgba(255,255,255,.9);
}
.scienstore-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 5;
  margin: 0 !important;
  transform: translateX(-50%);
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1.6;
  text-transform: uppercase;
}
.scienstore-hero__scroll a {
  color: #fff;
  text-decoration: none;
  text-shadow: 0 1px 12px rgba(0,0,0,.38);
}
.scienstore-hero__scroll span { font-size: 1rem; letter-spacing: 0; }

/* Brand copy beneath the visual. */
.scienstore-hero__copy {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  min-height: 58vh;
  padding: clamp(82px, 9vw, 138px) max(24px, calc((100vw - 1180px)/2));
  background: #fff;
}
.scienstore-hero__copy-inner { width: min(100%, 1180px); }
.scienstore-hero__copy h1 {
  max-width: 9.2em;
  margin: 18px 0 28px;
  font-size: clamp(3.2rem, 7vw, 7.4rem);
  line-height: 1.06;
  letter-spacing: -.06em;
}
.scienstore-hero__lead {
  max-width: 32rem;
  margin-inline: 0;
  color: #282b2f;
  font-size: clamp(1rem, 1.35vw, 1.22rem);
  line-height: 2;
}
.scienstore-hero__lead strong { font-size: 1.08em; }
.scienstore-hero__buttons { margin-top: 34px; }
.scienstore-hero__buttons .wp-element-button {
  min-width: 240px;
  justify-content: space-between;
  background: var(--sc-text);
  color: #fff;
  box-shadow: 0 8px 24px rgba(16,17,20,.12);
}

/* =========================================================
   EXISTING LOWER FRONT-PAGE BLOCKS
   ========================================================= */

.scienstore-featured-query, .scienstore-latest-query { margin-top: 0; }
.scienstore-featured-grid, .scienstore-latest-grid { gap: 20px; }
.scienstore-why-card {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  border-radius: var(--sc-radius-md);
  background: var(--sc-navy);
  box-shadow: var(--sc-shadow);
}
.scienstore-why-card > .wp-block-post-featured-image { position: absolute; inset: 0; margin: 0; }
.scienstore-why-card > .wp-block-post-featured-image a, .scienstore-why-card > .wp-block-post-featured-image img { width: 100%; height: 100%; }
.scienstore-why-card > .wp-block-post-featured-image img { object-fit: cover; }
.scienstore-why-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,rgba(6,10,18,.16),rgba(6,10,18,.82));
  pointer-events: none;
}
.scienstore-why-card__content { position: relative; z-index: 3; min-height: 330px; padding: 24px !important; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; }
.scienstore-why-card__content a { color: #fff; text-decoration: none; }
.scienstore-why-card .taxonomy-category a {
  display: inline-flex;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.48);
  font-size: .72rem;
}
.scienstore-why-card .wp-block-post-title { margin: 14px 0 8px; font-size: clamp(1.55rem,2vw,2.1rem); line-height: 1.25; }
.scienstore-why-card .wp-block-post-excerpt { margin: 0; font-size: .88rem; opacity: .94; }
.scienstore-why-card .wp-block-read-more {
  margin-top: 20px;
  align-self: flex-end;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 50%;
}

.scienstore-category-grid {
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 14px !important;
}
.scienstore-category-card {
  height: 100%;
  min-height: 130px;
  padding: 20px 10px !important;
  border: 1px solid var(--sc-line);
  border-radius: var(--sc-radius-sm);
  background: #fff;
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.scienstore-category-card:hover { transform: translateY(-3px); border-color: #ccd7f5; box-shadow: 0 10px 26px rgba(16,17,20,.07); }
.scienstore-category-card figure { margin: 0 auto 12px; width: 52px; }
.scienstore-category-card img { width: 52px; height: 52px; object-fit: contain; }
.scienstore-category-card p { margin: 0; font-size: .84rem; font-weight: 750; }
.scienstore-category-card a { color: var(--sc-text); text-decoration: none; }

.scienstore-latest-card { height: 100%; overflow: hidden; border: 1px solid #ececef; border-radius: var(--sc-radius-sm); background: #fff; transition: transform .2s ease, box-shadow .2s ease; }
.scienstore-latest-card:hover { transform: translateY(-3px); box-shadow: var(--sc-shadow); }
.scienstore-latest-card .wp-block-post-featured-image { margin: 0; aspect-ratio: 16/9; overflow: hidden; }
.scienstore-latest-card .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.scienstore-latest-card:hover .wp-block-post-featured-image img { transform: scale(1.025); }
.scienstore-latest-card__body { padding: 18px 18px 20px !important; }
.scienstore-latest-card .taxonomy-category { color: var(--sc-blue); font-size: .69rem; font-weight: 800; }
.scienstore-latest-card .taxonomy-category a { color: var(--sc-blue); text-decoration: none; }
.scienstore-latest-card .wp-block-post-title { margin: 8px 0 8px; font-size: 1.04rem; line-height: 1.45; }
.scienstore-latest-card .wp-block-post-title a { color: var(--sc-text); text-decoration: none; }
.scienstore-latest-card .wp-block-post-excerpt { color: var(--sc-muted); font-size: .82rem; line-height: 1.7; }
.scienstore-latest-card .wp-block-post-date { margin-top: 14px; color: #81858b; font-size: .72rem; }

.scienstore-about-wrap { padding-block: 18px 64px; }
.scienstore-about {
  padding: clamp(28px,4vw,52px) !important;
  border: 1px solid #eadcc9;
  border-radius: var(--sc-radius-md);
  background: linear-gradient(100deg,#fbf6ef,#f2e6d7);
  overflow: hidden;
}
.scienstore-about__illustration img { width: min(100%,360px); margin-inline: auto; }
.scienstore-about__copy h2 { font-size: clamp(1.6rem,2.8vw,2.6rem); }
.scienstore-about__copy p { max-width: 38rem; color: #45484d; line-height: 1.9; }

.scienstore-footer { border-top: 1px solid var(--sc-line); background: #fafafa; }
.scienstore-footer__inner { padding-block: 42px 28px; }
.scienstore-footer h3, .scienstore-footer h4 { margin-bottom: 12px; }
.scienstore-footer p, .scienstore-footer li { color: #50545a; font-size: .78rem; }
.scienstore-footer a { color: inherit; text-decoration: none; }
.scienstore-footer__brand .wp-block-site-title { margin-bottom: 6px; }
.scienstore-footer__brand .wp-block-site-title a { color: var(--sc-text); font-size: 1.6rem; font-weight: 800; letter-spacing: -.04em; text-transform: lowercase; }
.scienstore-footer__bottom { padding-top: 18px; border-top: 1px solid #ececee; }

.scienstore-article-shell { padding-block: clamp(48px,7vw,88px); }
.scienstore-article-header { max-width: 860px; }
.scienstore-article-header .wp-block-post-title { font-size: clamp(2.3rem,5vw,4.8rem); line-height: 1.18; letter-spacing: -.04em; }
.scienstore-article-meta { color: var(--sc-muted); font-size: .82rem; }
.scienstore-article-featured { margin-block: 34px 44px; border-radius: var(--sc-radius-md); overflow: hidden; }
.scienstore-article-content { font-size: 1.05rem; line-height: 1.95; }
.scienstore-article-content h2 { margin-top: 2.2em; }
.scienstore-archive-shell { padding-block: 56px 86px; }
.scienstore-archive-title { margin-bottom: 36px; }

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

@media (max-width: 980px) {
  :root { --sc-header-height: 70px; }

  .scienstore-tagline { display: none; }
  .scienstore-search { display: none; }

  /* タブレット以下はハンバーガーメニュー */
  .scienstore-nav
  .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }

  .scienstore-nav
  .wp-block-navigation__responsive-container-open {
    display: flex !important;
  }

  .scienstore-hero__visual {
    height: 88svh;
    min-height: 560px;
  }

  .scienstore-hero__copy {
    min-height: auto;
    padding: 88px 28px 92px;
  }

  .scienstore-hero__copy h1 {
    font-size: clamp(3rem, 10vw, 6rem);
  }

  .scienstore-category-grid {
    grid-template-columns: repeat(4,minmax(0,1fr));
  }
}


/* =========================================================
   DESKTOP NAVIGATION
   ========================================================= */

@media (min-width: 981px) {

  .scienstore-nav
  .wp-block-navigation__responsive-container-open {
    display: none !important;
  }

  .scienstore-nav
  .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    color: inherit !important;
  }

  .scienstore-nav
  .wp-block-navigation__responsive-container-content {
    padding: 0 !important;
  }
}


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

@media (max-width: 680px) {
  :root { --sc-header-height: 64px; }

  .scienstore-header__inner {
    min-height: var(--sc-header-height);
    padding-inline: 16px;
    gap: 12px;
  }

  .scienstore-brand a {
    font-size: 1.42rem;
  }

  .scienstore-header__tools {
    gap: 4px !important;
  }

  .scienstore-hero__visual {
    height: 84svh;
    min-height: 500px;
  }

  .scienstore-hero__visual::after {
    background:
      linear-gradient(
        180deg,
        rgba(3,8,16,.25) 0%,
        rgba(3,8,16,0) 27%
      ),
      linear-gradient(
        0deg,
        rgba(3,8,16,.18) 0%,
        rgba(3,8,16,0) 24%
      );
  }

  .scienstore-hero__arrow {
    width: 44px;
    height: 44px;
    font-size: 1.65rem;
  }

  .scienstore-hero__arrow--prev {
    left: 10px;
  }

  .scienstore-hero__arrow--next {
    right: 10px;
  }

  .scienstore-hero__dots {
    bottom: 62px;
    gap: 7px;
  }

  .scienstore-hero__dot {
    width: 6px;
    height: 6px;
  }

  .scienstore-hero__dot.is-active {
    width: 24px;
  }

  .scienstore-hero__pause {
    right: 10px;
    bottom: 50px;
    width: 32px;
    height: 32px;
  }

  .scienstore-hero__scroll {
    bottom: 14px;
  }

  .scienstore-hero__copy {
    padding: 74px 22px 82px;
  }

  .scienstore-hero__copy h1 {
    margin-top: 14px;
    font-size: clamp(2.85rem, 15vw, 4.8rem);
  }

  .scienstore-hero__lead {
    font-size: .98rem;
    line-height: 1.9;
  }

  .scienstore-featured-grid,
  .scienstore-latest-grid {
    grid-template-columns: 1fr !important;
  }

  .scienstore-category-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .scienstore-category-card {
    min-height: 116px;
  }

  .scienstore-about > .wp-block-columns {
    gap: 10px;
  }

  .scienstore-footer .wp-block-columns {
    gap: 24px;
  }
}


/* =========================================================
   WORDPRESS ADMIN BAR
   ========================================================= */

@media (max-width: 782px) {

  body.admin-bar:has(.scienstore-hero__visual)
  .scienstore-header,

  body.admin-bar.scienstore-has-hero
  .scienstore-header {
    top: 46px;
  }
}


/* =========================================================
   TABLET / MOBILE OFF-CANVAS MENU
   ========================================================= */

@media (max-width: 980px) {

  .scienstore-header
  .wp-block-navigation__responsive-container.is-menu-open {
    position: fixed !important;

    top: 0;
    right: 0;
    bottom: 0;
    left: auto !important;

    width: min(82vw, 380px) !important;
    height: 100dvh;

    padding: 28px 26px 40px !important;

    background: rgba(255,255,255,.98) !important;
    color: #101114 !important;

    box-shadow: -20px 0 60px rgba(0,0,0,.16);

    animation:
      scienstore-menu-in .32s
      cubic-bezier(.22,.61,.36,1);

    overflow-y: auto;

    /* スクロール可能だがバーは非表示 */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .scienstore-header
  .wp-block-navigation__responsive-container.is-menu-open::-webkit-scrollbar {
    display: none;
  }

  .scienstore-header
  .wp-block-navigation__responsive-container-content {
    align-items: flex-start !important;
    padding-top: 72px !important;
  }

  .scienstore-header
  .wp-block-navigation__responsive-container
  .wp-block-navigation__container {
    width: 100%;
    align-items: flex-start !important;
    gap: 0 !important;
  }

  .scienstore-header
  .wp-block-navigation__responsive-container
  .wp-block-navigation-item {
    width: 100%;
  }

  .scienstore-header
  .wp-block-navigation__responsive-container
  .wp-block-navigation-item__content {
    display: block;
    width: 100%;

    padding: 17px 4px;

    border-bottom: 1px solid rgba(16,17,20,.08);

    font-size: 1.05rem;
    font-weight: 700;
    text-align: left;
  }

  .scienstore-header
  .wp-block-navigation__responsive-container-close {
    top: 24px !important;
    right: 24px !important;
  }
}


/* =========================================================
   OFF-CANVAS ANIMATION
   ========================================================= */

@keyframes scienstore-menu-in {

  from {
    transform: translateX(100%);
    opacity: .7;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}