/*
Theme Name: JAT Meet Theme
Theme URI: https://meetandgreet.jp/
Author: Japan Airport Transfer
Description: 空港・駅のミート＆センディングサービス専用ブロックテーマ。
Version: 0.2.3
Requires at least: 6.8
Tested up to: 7.0
Requires PHP: 8.1
Text Domain: jat-meet-theme
*/

:root {
  --jat-navy: #081b33;
  --jat-navy-2: #153a5b;
  --jat-gold: #c7a45a;
  --jat-gold-pale: #f4ecdd;
  --jat-ivory: #fbf9f4;
  --jat-white: #fff;
  --jat-text: #334155;
  --jat-muted: #64748b;
  --jat-line: #e2e8f0;
  --jat-radius: 24px;
  --jat-shadow: 0 18px 50px rgba(8, 27, 51, 0.10);
  --jat-shadow-lift: 0 24px 64px rgba(8, 27, 51, 0.16);
}

html { scroll-behavior: smooth; }
body { text-rendering: optimizeLegibility; }
body.admin-bar .jat-header { top: 32px; }

*:focus-visible {
  outline: 3px solid var(--jat-gold);
  outline-offset: 4px;
}

::selection {
  color: var(--jat-white);
  background: var(--jat-navy-2);
}

a { transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease; }
a:hover { color: var(--jat-gold); }

.jat-skip-link {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 99999;
  padding: .75rem 1rem;
  color: var(--jat-white) !important;
  background: var(--jat-navy);
  border-radius: 8px;
}
.jat-skip-link:focus { top: 1rem; }

.jat-notice-bar {
  padding: .55rem 1rem;
  color: var(--jat-white);
  background: var(--jat-navy);
  font-size: .8125rem;
  letter-spacing: .04em;
  text-align: center;
}

.jat-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid rgba(226, 232, 240, .72);
  background: rgba(251, 249, 244, .92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.jat-header__inner { min-height: 78px; }
.jat-site-logo .custom-logo { width: auto; max-height: 42px; }
.jat-wordmark { letter-spacing: .08em; line-height: 1.15; }
.jat-wordmark strong { display: block; color: var(--jat-navy); font-size: 1rem; }
.jat-wordmark small { display: block; margin-top: .15rem; color: var(--jat-muted); font-size: .65rem; letter-spacing: .16em; }
.jat-header .wp-block-navigation-item__content { padding: .65rem .35rem; }
.jat-header .wp-block-navigation-item__content:hover { color: var(--jat-navy-2); }

.wp-block-button__link {
  box-shadow: 0 8px 24px rgba(199, 164, 90, .22);
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
.wp-block-button__link:hover {
  color: var(--jat-navy);
  background: #d8b96f;
  box-shadow: 0 12px 30px rgba(199, 164, 90, .3);
  transform: translateY(-2px);
}
.wp-block-button.is-style-outline .wp-block-button__link {
  color: var(--jat-navy);
  background: transparent;
  border-color: rgba(8, 27, 51, .28);
  box-shadow: none;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  color: var(--jat-white);
  background: var(--jat-navy);
  border-color: var(--jat-navy);
}
.jat-hero .wp-block-button.is-style-outline .wp-block-button__link {
  color: var(--jat-white) !important;
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .72);
}
.jat-hero .wp-block-button.is-style-outline .wp-block-button__link:hover,
.jat-hero .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
  color: var(--jat-navy) !important;
  background: var(--jat-gold);
  border-color: var(--jat-gold);
}

.jat-section {
  padding-top: clamp(4rem, 6.5vw, 6.5rem);
  padding-bottom: clamp(4rem, 6.5vw, 6.5rem);
}
.jat-section--tight {
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.jat-section--navy {
  color: rgba(255,255,255,.82);
  background: var(--jat-navy);
}
.jat-section--navy h1,
.jat-section--navy h2,
.jat-section--navy h3,
.jat-section--navy h4 { color: var(--jat-white); }
.jat-section--white { background: var(--jat-white); }
.jat-section--gold { background: var(--jat-gold-pale); }

.jat-eyebrow {
  display: flex;
  gap: .75rem;
  align-items: center;
  margin-bottom: 1rem;
  color: var(--jat-navy-2);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.jat-eyebrow::before {
  width: 38px;
  height: 1px;
  content: "";
  background: var(--jat-gold);
}
.jat-section--navy .jat-eyebrow,
.jat-hero .jat-eyebrow { color: var(--jat-gold); }
.jat-heading { max-width: 780px; margin-bottom: 1rem; text-wrap: balance; }
.jat-lead { max-width: 720px; color: var(--jat-muted); font-size: clamp(1rem, 1.25vw, 1.125rem); line-height: 1.8; text-wrap: pretty; }
.jat-section--navy .jat-lead { color: rgba(255,255,255,.72); }

.jat-hero {
  position: relative;
  min-height: calc(100svh - 110px);
  overflow: hidden;
  color: var(--jat-white);
  background:
    radial-gradient(circle at 78% 22%, rgba(199,164,90,.25) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 28%, rgba(199,164,90,.13) 0 2px, transparent 3px),
    linear-gradient(128deg, #061528 0%, #0b2a48 62%, #153a5b 100%);
}
.jat-hero::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: .22;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to right, transparent 15%, #000 80%);
}
.jat-hero::after {
  position: absolute;
  right: -8vw;
  top: 13%;
  width: min(42vw, 600px);
  aspect-ratio: 1;
  content: "";
  border: 1px solid rgba(199,164,90,.4);
  border-radius: 50%;
  box-shadow:
    0 0 0 70px rgba(199,164,90,.04),
    0 0 0 140px rgba(199,164,90,.025);
}
.jat-hero__inner { position: relative; z-index: 1; padding-top: clamp(4.5rem, 7vw, 6.5rem); padding-bottom: clamp(4.5rem, 7vw, 6.5rem); }
.jat-hero__layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.jat-hero__copy { min-width: 0; }
.jat-hero h1 { max-width: 760px; margin: 0; color: var(--jat-white); font-size: clamp(2.25rem, 4vw, 4rem); letter-spacing: -.04em; text-wrap: balance; }
.jat-hero__sub { max-width: 660px; margin-top: 1.5rem; color: rgba(255,255,255,.8); font-size: clamp(1rem, 1.25vw, 1.125rem); line-height: 1.85; text-wrap: pretty; }
.jat-hero__actions { margin-top: 2rem; }
.jat-hero__meta { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.15); }
.jat-hero__meta span { color: rgba(255,255,255,.62); font-size: .8125rem; letter-spacing: .05em; }
.jat-hero__meta strong { display: block; margin-bottom: .2rem; color: var(--jat-white); font-size: .9375rem; }

.jat-visual {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--jat-white);
  border-radius: var(--jat-radius);
  box-shadow: var(--jat-shadow);
}
.jat-visual img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.jat-visual figcaption { padding: .85rem 1rem; color: var(--jat-muted); background: var(--jat-white); font-size: .8125rem; line-height: 1.6; }
.jat-hero__visual { border: 1px solid rgba(255,255,255,.16); box-shadow: 0 28px 70px rgba(0,0,0,.28); }
.jat-hero__visual img { min-height: 360px; }
.jat-hero__visual figcaption { color: rgba(255,255,255,.78); background: rgba(5,19,38,.94); }
.jat-visual--driver { margin-bottom: 1.25rem; }
.jat-visual--flow { max-width: 980px; margin-top: 2.25rem; margin-inline: auto; }
.jat-meeting-visuals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2.25rem; }
.jat-location-grid { margin-top: 1.25rem; }

.jat-grid { display: grid; gap: 1.25rem; }
.jat-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jat-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jat-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.jat-card {
  position: relative;
  height: 100%;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  overflow: hidden;
  background: var(--jat-white);
  border: 1px solid rgba(8,27,51,.08);
  border-radius: var(--jat-radius);
  box-shadow: var(--jat-shadow);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.jat-card:hover { border-color: rgba(199,164,90,.62); box-shadow: var(--jat-shadow-lift); transform: translateY(-5px); }
.jat-card h3 { margin-top: 1rem; margin-bottom: .75rem; font-size: 1.25rem; }
.jat-card p { color: var(--jat-muted); font-size: .9375rem; line-height: 1.85; }
.jat-card__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.jat-card__icon {
  display: grid;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  place-items: center;
  color: var(--jat-gold);
  background: var(--jat-navy);
  border-radius: 15px;
  box-shadow: 0 10px 24px rgba(8, 27, 51, .14);
}
.jat-card__icon svg { width: 28px; height: 28px; fill: currentColor; }
.jat-card__number { color: #80601f; font-family: Georgia, serif; font-size: 2rem; font-style: italic; }
.jat-card__link::after { position: absolute; inset: 0; content: ""; }
.jat-card__arrow { display: inline-flex; gap: .5rem; align-items: center; margin-top: 1rem; color: var(--jat-navy-2); font-size: .875rem; font-weight: 800; }

.jat-feature-list { display: grid; gap: 1px; overflow: hidden; background: rgba(8,27,51,.12); border: 1px solid rgba(8,27,51,.12); border-radius: var(--jat-radius); }
.jat-feature { display: grid; grid-template-columns: 54px 1fr; gap: 1rem; padding: 1.5rem; background: var(--jat-white); }
.jat-feature__mark { display: grid; width: 42px; height: 42px; place-items: center; color: var(--jat-navy); background: var(--jat-gold-pale); border-radius: 50%; font-weight: 800; }
.jat-feature h3 { margin: 0 0 .35rem; font-size: 1.05rem; }
.jat-feature p { margin: 0; color: var(--jat-muted); font-size: .9rem; }

.jat-timeline { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin-top: 3rem; counter-reset: step; }
.jat-step { position: relative; padding: 3rem 1rem 1rem 0; counter-increment: step; }
.jat-step::before { display: grid; position: absolute; top: 0; left: 0; z-index: 1; width: 36px; height: 36px; place-items: center; content: counter(step, decimal-leading-zero); color: var(--jat-navy); background: var(--jat-gold); border-radius: 50%; font-size: .75rem; font-weight: 800; }
.jat-step::after { position: absolute; top: 17px; left: 40px; right: 4px; height: 1px; content: ""; background: rgba(199,164,90,.55); }
.jat-step:last-child::after { display: none; }
.jat-step h3 { margin: 0 0 .5rem; font-size: .95rem; }
.jat-step p { margin: 0; color: rgba(255,255,255,.62); font-size: .8125rem; line-height: 1.75; }

.jat-sign-preview { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.jat-sign {
  display: grid;
  min-height: 310px;
  padding: 2rem;
  place-items: center;
  color: var(--jat-white);
  background: #0b0d10;
  border: 14px solid #252a31;
  border-radius: 8px;
  box-shadow: 0 26px 65px rgba(8,27,51,.24);
  text-align: center;
}
.jat-sign strong { font-family: var(--wp--preset--font-family--serif-jp); font-size: clamp(2rem, 5vw, 4rem); letter-spacing: .06em; line-height: 1.25; }
.jat-sign small { display: block; margin-top: 1rem; color: rgba(255,255,255,.56); font-size: .75rem; letter-spacing: .18em; }

.jat-location {
  position: relative;
  min-height: 290px;
  padding: 2rem;
  overflow: hidden;
  color: var(--jat-white);
  background: linear-gradient(145deg, var(--jat-navy), var(--jat-navy-2));
  border-radius: var(--jat-radius);
}
.jat-location::after {
  position: absolute;
  right: -15%;
  bottom: -35%;
  width: 68%;
  aspect-ratio: 1;
  content: "";
  border: 1px solid rgba(199,164,90,.35);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(199,164,90,.04), 0 0 0 56px rgba(199,164,90,.025);
}
.jat-location > * { position: relative; z-index: 1; }
.jat-location__code { color: var(--jat-gold); font-family: Georgia, serif; font-size: 3.25rem; line-height: 1; }
.jat-location h3 { margin-top: 4rem; color: var(--jat-white); }
.jat-location p { color: rgba(255,255,255,.66); font-size: .875rem; }

.jat-badge { display: inline-flex; padding: .35rem .75rem; color: var(--jat-navy-2); background: var(--jat-gold-pale); border-radius: 999px; font-size: .75rem; font-weight: 800; }
.jat-kicker { color: var(--jat-gold); font-family: Georgia, serif; font-size: clamp(3rem, 7vw, 6rem); font-style: italic; line-height: 1; }

.jat-faq { border-top: 1px solid var(--jat-line); }
.jat-faq details { border-bottom: 1px solid var(--jat-line); }
.jat-faq summary { position: relative; padding: 1.5rem 3rem 1.5rem 0; cursor: pointer; color: var(--jat-navy); font-weight: 800; list-style: none; }
.jat-faq summary::-webkit-details-marker { display: none; }
.jat-faq summary::after { position: absolute; right: .5rem; top: 50%; content: "+"; color: var(--jat-gold); font-size: 1.6rem; font-weight: 400; transform: translateY(-50%); }
.jat-faq details[open] summary::after { content: "−"; }
.jat-faq details p { margin: 0; padding: 0 3rem 1.75rem 0; color: var(--jat-muted); }

.jat-cta {
  position: relative;
  padding: clamp(2.5rem, 7vw, 5rem);
  overflow: hidden;
  color: var(--jat-white);
  background: var(--jat-navy);
  border-radius: calc(var(--jat-radius) + 8px);
}
.jat-cta::after { position: absolute; right: -10%; top: -60%; width: 46%; aspect-ratio: 1; content: ""; border: 1px solid rgba(199,164,90,.4); border-radius: 50%; box-shadow: 0 0 0 60px rgba(199,164,90,.03), 0 0 0 120px rgba(199,164,90,.02); }
.jat-cta > * { position: relative; z-index: 1; }
.jat-cta h2 { color: var(--jat-white); }
.jat-cta p { color: rgba(255,255,255,.7); }

.jat-page-hero { padding-top: clamp(3rem, 5vw, 5rem); padding-bottom: clamp(2.5rem, 4.5vw, 4rem); color: var(--jat-white); background: linear-gradient(135deg, var(--jat-navy), var(--jat-navy-2)); }
.jat-page-hero h1 { max-width: 820px; margin-bottom: .75rem; color: var(--jat-white); font-size: clamp(2rem, 3.5vw, 3.25rem); text-wrap: balance; }
.jat-breadcrumb { color: rgba(255,255,255,.58); font-size: .8125rem; }
.jat-breadcrumb a { color: rgba(255,255,255,.8); }

.jat-content { padding-top: clamp(3.5rem, 7vw, 6rem); padding-bottom: clamp(4rem, 8vw, 7rem); }
.jat-content--reservation { padding-top: clamp(2rem, 4vw, 3.5rem); }
.jat-content .jat-reservation__intro h2 { margin: 0 0 .75rem; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.3; }
.jat-content h2 { margin-top: 3.5rem; }
.jat-content h3 { margin-top: 2.25rem; }
.jat-content table { width: 100%; border-collapse: collapse; background: var(--jat-white); }
.jat-content th, .jat-content td { padding: 1rem; border: 1px solid var(--jat-line); text-align: left; vertical-align: top; }
.jat-content th { color: var(--jat-navy); background: var(--jat-gold-pale); }

.jat-footer { color: rgba(255,255,255,.68); background: #051326; }
.jat-footer__top { padding-top: 4.5rem; padding-bottom: 3rem; }
.jat-footer h2, .jat-footer h3, .jat-footer h4 { color: var(--jat-white); }
.jat-footer a { color: rgba(255,255,255,.72); }
.jat-footer a:hover { color: var(--jat-gold); }
.jat-footer__legal { padding-top: 1.25rem; padding-bottom: calc(1.25rem + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.1); font-size: .75rem; }

.jat-mobile-actions { display: none; }

@media (max-width: 960px) {
  body.admin-bar .jat-header { top: 46px; }
  .jat-header__inner { min-height: 68px; }
  .jat-header .wp-block-navigation__responsive-container-open { position: relative; z-index: 2; color: var(--jat-navy); }
  .jat-header .wp-block-navigation__responsive-container.is-menu-open { display: flex; position: fixed; inset: 0; z-index: 100000; width: 100%; height: 100dvh; padding: 1.25rem; overflow-y: auto; color: var(--jat-navy); background: var(--jat-ivory); }
  .jat-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 4rem; }
  .jat-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: .5rem; align-items: stretch; }
  .jat-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { padding: .8rem 0; border-bottom: 1px solid var(--jat-line); font-size: 1rem; }
  .jat-hero__layout { grid-template-columns: 1fr; }
  .jat-hero__visual { max-width: 760px; }
  .jat-meeting-visuals { grid-template-columns: 1fr; }
  .jat-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jat-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jat-timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1.25rem; }
  .jat-timeline .jat-step:nth-child(3)::after,
  .jat-timeline .jat-step:nth-child(6)::after { display: none; }
  .jat-sign-preview { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .jat-header .wp-block-buttons { display: none; }
  .jat-wordmark small { display: none; }
  .jat-hero { min-height: auto; }
  .jat-hero::after { width: 72vw; right: -35vw; top: 12%; }
  .jat-hero__inner { padding-top: 3.25rem; padding-bottom: 3.5rem; }
  .jat-hero__layout { gap: 2rem; }
  .jat-hero h1 { font-size: clamp(2rem, 10vw, 3rem); line-height: 1.18; }
  .jat-hero__sub { margin-top: 1.15rem; line-height: 1.75; }
  .jat-hero__visual img { min-height: 0; }
  .jat-hero__meta { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; margin-top: 2.25rem; }
  .jat-section { padding-top: 3.75rem; padding-bottom: 3.75rem; }
  .jat-page-hero { padding-top: 2.5rem; padding-bottom: 2.25rem; }
  .jat-page-hero--reservation { padding-top: 1.5rem; padding-bottom: 1.5rem; }
  .jat-page-hero--reservation h1 { margin-top: .65rem; margin-bottom: 0; font-size: 1.75rem; line-height: 1.25; }
  .jat-content { padding-top: 2.75rem; padding-bottom: 4rem; }
  .jat-content--reservation { padding-top: 1.5rem; }
  .jat-content--reservation .wp-block-post-content > .jat-lead { font-size: .9375rem; line-height: 1.7; }
  .jat-content--reservation .jat-reservation { margin-top: 1rem; }
  .jat-grid--2, .jat-grid--3, .jat-grid--4 { grid-template-columns: 1fr; }
  .jat-timeline { grid-template-columns: 1fr; gap: 0; }
  .jat-step { padding: .15rem 0 2rem 3.25rem; }
  .jat-step::before { top: 0; }
  .jat-step::after { top: 40px; left: 17px; bottom: 4px; width: 1px; height: auto; }
  .jat-timeline .jat-step:nth-child(3)::after { display: block; }
  .jat-sign { min-height: 230px; padding: 1.25rem; }
  .jat-content table { display: block; overflow-x: auto; white-space: nowrap; }
  .jat-mobile-actions {
    display: grid;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1500;
    grid-template-columns: 1fr 1.35fr;
    padding: .6rem max(.75rem, env(safe-area-inset-right)) calc(.6rem + env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left));
    gap: .55rem;
    background: rgba(255,255,255,.96);
    border-top: 1px solid var(--jat-line);
    box-shadow: 0 -12px 35px rgba(8,27,51,.12);
    backdrop-filter: blur(14px);
  }
  .jat-mobile-actions a { display: grid; min-height: 46px; place-items: center; color: var(--jat-navy); border: 1px solid rgba(8,27,51,.18); border-radius: 999px; font-size: .8rem; font-weight: 800; }
  .jat-mobile-actions a:last-child { background: var(--jat-gold); border-color: var(--jat-gold); }
}

/* v0.2.3: widen only the home service and location card grids on desktop. */
@media (min-width: 961px) {
  #services .jat-grid--4,
  .jat-location-grid {
    position: relative;
    left: 50%;
    width: min(1400px, calc(100vw - 3rem));
    max-width: none;
    column-gap: clamp(1.25rem, 2vw, 2rem);
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

@media print {
  .jat-notice-bar, .jat-header, .jat-mobile-actions, .jat-footer, .wp-block-buttons { display: none !important; }
  body { color: #000; background: #fff; padding: 0; }
  a { color: #000; text-decoration: underline; }
}