/* site_global.css - site-wide design rules (typography, layout helpers)
   NOTE:
   - Keep this file global (loaded by every HTML page).
   - Do NOT put page-specific tweaks here.
*/

/* =========================================
   Global: Section header typography scale-up
   Goal: Keep existing subtitle/title/lead ratio,
         scale up overall by ~1.25x–1.4x (PC/SP safe),
         and tighten vertical spacing for denser layout.
   ========================================= */

/* Global anchor landing offset (site-wide)
   - Prevent fixed headers from covering section titles
   - Works with/without nav_apple.css (fallback height included)
*/
:where([id]){
  scroll-margin-top: calc(var(--nav-h, 64px) + 32px);
}

/* Pattern A:
   A typical section header block contains:
   - an "eyebrow" subtitle: <span class="... uppercase ... tracking-...">
   - a title: <h1|h2|h3 ...>
   - (optional) a lead: <p ...>
   We detect it via :has() so we don't have to edit every HTML tag.
*/
:where(main, section)
  :where(div, header)
  :has(> span[class*="uppercase"][class*="tracking-"])
  :has(> :is(h1, h2, h3)){
  /* typography (bigger, keep ratio) */
  --sec-kicker-size: clamp(1.05rem, 0.95rem + 0.42vw, 1.25rem);
  --sec-title-size: clamp(2.55rem, 2.05rem + 1.9vw, 3.6rem);
  --sec-lead-size: clamp(1.18rem, 1.05rem + 0.6vw, 1.6rem);

  /* spacing (denser) */
  --sec-mb: clamp(1.6rem, 1.2rem + 0.9vw, 2.4rem);
  --sec-gap-kicker: clamp(0.35rem, 0.28rem + 0.25vw, 0.55rem);
  --sec-gap-title: clamp(0.55rem, 0.45rem + 0.35vw, 0.9rem);
  --sec-gap-lead: clamp(0.95rem, 0.8rem + 0.45vw, 1.3rem);
}

:where(main, section)
  :where(div, header)
  :has(> span[class*="uppercase"][class*="tracking-"])
  :has(> :is(h1, h2, h3))
  > span[class*="uppercase"][class*="tracking-"]{
  font-size: var(--sec-kicker-size) !important;
  margin-bottom: var(--sec-gap-kicker) !important;
}

:where(main, section)
  :where(div, header)
  :has(> span[class*="uppercase"][class*="tracking-"])
  :has(> :is(h1, h2, h3))
  > :is(h1, h2, h3){
  font-size: var(--sec-title-size) !important;
  margin-top: 0 !important;
  margin-bottom: var(--sec-gap-title) !important;
}

:where(main, section)
  :where(div, header)
  :has(> span[class*="uppercase"][class*="tracking-"])
  :has(> :is(h1, h2, h3))
  > p{
  font-size: var(--sec-lead-size) !important;
  margin-top: 0 !important;
  margin-bottom: var(--sec-gap-lead) !important;
}

/* reduce "header block -> next content" spacing (common mb-12/mb-16 etc) */
:where(main, section)
  :where(div, header)
  :has(> span[class*="uppercase"][class*="tracking-"])
  :has(> :is(h1, h2, h3)){
  margin-bottom: var(--sec-mb) !important;
}

/* Pattern B:
   Some pages (e.g. thanks.html) have no subtitle span.
   To avoid affecting small card headings, we only target "section-title-ish" sizes:
   - direct child heading is serif AND text-3xl+ (Tailwind classes)
   - direct sibling is a lead text block (p or div) in gray tone
*/
:where(main, section)
  :where(div, header)
  :has(> :is(h1, h2, h3)[class*="serif"][class*="text-3xl"])
  :has(> :where(p, div)[class*="text-gray-"]),
:where(main, section)
  :where(div, header)
  :has(> :is(h1, h2, h3)[class*="serif"][class*="text-4xl"])
  :has(> :where(p, div)[class*="text-gray-"]),
:where(main, section)
  :where(div, header)
  :has(> :is(h1, h2, h3)[class*="serif"][class*="text-5xl"])
  :has(> :where(p, div)[class*="text-gray-"]),
:where(main, section)
  :where(div, header)
  :has(> :is(h1, h2, h3)[class*="serif"][class*="text-6xl"])
  :has(> :where(p, div)[class*="text-gray-"]),
:where(main, section)
  :where(div, header)
  :has(> :is(h1, h2, h3)[class*="serif"][class*="text-7xl"])
  :has(> :where(p, div)[class*="text-gray-"]){
  --sec-title-size: clamp(2.55rem, 2.05rem + 1.9vw, 3.6rem);
  --sec-lead-size: clamp(1.18rem, 1.05rem + 0.6vw, 1.6rem);
  --sec-mb: clamp(1.6rem, 1.2rem + 0.9vw, 2.4rem);
  --sec-gap-title: clamp(0.55rem, 0.45rem + 0.35vw, 0.9rem);
  --sec-gap-lead: clamp(0.95rem, 0.8rem + 0.45vw, 1.3rem);
}

:where(main, section)
  :where(div, header)
  :has(> :is(h1, h2, h3)[class*="serif"][class*="text-3xl"])
  :has(> :where(p, div)[class*="text-gray-"])
  > :is(h1, h2, h3)[class*="serif"],
:where(main, section)
  :where(div, header)
  :has(> :is(h1, h2, h3)[class*="serif"][class*="text-4xl"])
  :has(> :where(p, div)[class*="text-gray-"])
  > :is(h1, h2, h3)[class*="serif"],
:where(main, section)
  :where(div, header)
  :has(> :is(h1, h2, h3)[class*="serif"][class*="text-5xl"])
  :has(> :where(p, div)[class*="text-gray-"])
  > :is(h1, h2, h3)[class*="serif"],
:where(main, section)
  :where(div, header)
  :has(> :is(h1, h2, h3)[class*="serif"][class*="text-6xl"])
  :has(> :where(p, div)[class*="text-gray-"])
  > :is(h1, h2, h3)[class*="serif"],
:where(main, section)
  :where(div, header)
  :has(> :is(h1, h2, h3)[class*="serif"][class*="text-7xl"])
  :has(> :where(p, div)[class*="text-gray-"])
  > :is(h1, h2, h3)[class*="serif"]{
  font-size: var(--sec-title-size) !important;
  margin-top: 0 !important;
  margin-bottom: var(--sec-gap-title) !important;
}

:where(main, section)
  :where(div, header)
  :has(> :is(h1, h2, h3)[class*="serif"][class*="text-3xl"])
  :has(> :where(p, div)[class*="text-gray-"])
  > :where(p, div)[class*="text-gray-"],
:where(main, section)
  :where(div, header)
  :has(> :is(h1, h2, h3)[class*="serif"][class*="text-4xl"])
  :has(> :where(p, div)[class*="text-gray-"])
  > :where(p, div)[class*="text-gray-"],
:where(main, section)
  :where(div, header)
  :has(> :is(h1, h2, h3)[class*="serif"][class*="text-5xl"])
  :has(> :where(p, div)[class*="text-gray-"])
  > :where(p, div)[class*="text-gray-"],
:where(main, section)
  :where(div, header)
  :has(> :is(h1, h2, h3)[class*="serif"][class*="text-6xl"])
  :has(> :where(p, div)[class*="text-gray-"])
  > :where(p, div)[class*="text-gray-"],
:where(main, section)
  :where(div, header)
  :has(> :is(h1, h2, h3)[class*="serif"][class*="text-7xl"])
  :has(> :where(p, div)[class*="text-gray-"])
  > :where(p, div)[class*="text-gray-"]{
  font-size: var(--sec-lead-size) !important;
  margin-top: 0 !important;
  margin-bottom: var(--sec-gap-lead) !important;
}

/* reduce Pattern B block spacing to next content */
:where(main, section)
  :where(div, header)
  :has(> :is(h1, h2, h3)[class*="serif"][class*="text-3xl"])
  :has(> :where(p, div)[class*="text-gray-"]),
:where(main, section)
  :where(div, header)
  :has(> :is(h1, h2, h3)[class*="serif"][class*="text-4xl"])
  :has(> :where(p, div)[class*="text-gray-"]),
:where(main, section)
  :where(div, header)
  :has(> :is(h1, h2, h3)[class*="serif"][class*="text-5xl"])
  :has(> :where(p, div)[class*="text-gray-"]),
:where(main, section)
  :where(div, header)
  :has(> :is(h1, h2, h3)[class*="serif"][class*="text-6xl"])
  :has(> :where(p, div)[class*="text-gray-"]),
:where(main, section)
  :where(div, header)
  :has(> :is(h1, h2, h3)[class*="serif"][class*="text-7xl"])
  :has(> :where(p, div)[class*="text-gray-"]){
  margin-bottom: var(--sec-mb) !important;
}

/* =========================================
   Hero CTA visibility (index.html hero area)
   Goal: Stand out against ocean video background
   ========================================= */

/* "VIEW PROFILE" button: frosted glass effect */
.hero-kv a[href="#about"],
.hero-kv a[class*="border"][class*="teal"]{
  background: rgba(255, 255, 255, 0.22) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.hero-kv a[href="#about"]:hover,
.hero-kv a[class*="border"][class*="teal"]:hover{
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 8px 20px rgba(20, 184, 166, 0.25) !important;
}

/* "移住シリーズを読む（note）" link: stronger shadow & weight */
.hero-kv a[href*="note.com"]{
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.65) !important;
  font-weight: 500 !important;
}

/* =========================================
   Wave separator fill color (site-wide)
   Goal: Softer boundary between sections
   ========================================= */
.wave-fill{
  fill: #f8f8f8;
}