/*
Theme Name: Original Website Theme
Theme URI: https://
Author: M. Arakaki.
Author URI: https://
Description: No Description
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 8.0
License: Proprietary (Client Use Only)
Text Domain: theme
*/

/* =====================================================
   Main Stylesheet
   -----------------------------------------------------
   - Layout
   - Components
   - Utilities
   - Responsive
===================================================== */

/* Intentionally empty for initial scaffold */
/* =====================================================
   Layout Foundation for WordPress Blocks
   -----------------------------------------------------
   - Content width (default)
   - Wide width
   - Full width
   - Safe flow spacing
===================================================== */
/* =====================================================
   WordPress Blocks + Grid + Jumbotron (Responsive)
   -----------------------------------------------------
   Breakpoints (4):
   - Mobile:        up to 767px (iPhone/Android)
   - iPad Portrait: 768px - 1023px
   - iPad Landscape:1024px - 1279px
   - PC:            1280px and up (assume up to 1920px)
===================================================== */

/* ---------------------------------------------
   Tokens
--------------------------------------------- */
:root {
  /* jumbotron 以外は 1280px 上限 */
  --site-max: 1280px;
  /* Gutenberg alignwide の上限（jumbotron以外は同じ上限でOK） */
  --wide-max: 1280px;
  /* 本文（読み物）向けの推奨幅：必要に応じて後で変更 */
  --content-max: 760px;
  /* 基本余白・リズム */
  --gutter: 16px;
  --flow: 1rem;
  /* grid */
  --grid-gap: 16px;
  /* jumbotron */
  --jumbo-radius: 16px;
  --jumbo-pad: clamp(24px, 4vw, 64px);
  --jumbo-bg: #f5f5f5;
  --jumbo-fg: inherit;
}

/* Mobile */
@media (max-width: 767px) {
  :root {
    --gutter: 14px;
    --grid-gap: 14px;
    --flow: 0.9rem;
    --jumbo-radius: 14px;
  }
}

/* iPad Portrait */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --gutter: 18px;
    --grid-gap: 18px;
    --flow: 1rem;
  }
}

/* iPad Landscape */
@media (min-width: 1024px) and (max-width: 1279px) {
  :root {
    --gutter: 20px;
    --grid-gap: 20px;
    --flow: 1.05rem;
  }
}

/* PC */
@media (min-width: 1280px) {
  :root {
    --gutter: 24px;
    --grid-gap: 24px;
    --flow: 1.1rem;
  }
}
/* ---------------------------------------------
   Color initialize
--------------------------------------------- */
:root {
  /* =========================
     Brand Colors
  ========================= */
  --color-primary-green: #78bd54;     /* 中みどり */
  --color-secondary-green: #049ea4;   /* 青みどり */
  --color-deep-green: #17ac4e;        /* 濃い緑（強調用） */
  /* =========================
     Text Colors
  ========================= */
  --color-text-default: #333333;      /* 通常文字 */
  --color-text-accent: #17ac4e;       /* 緑の文字 */
  /* =========================
     Background Utility
  ========================= */
  --color-bg-light: #f8fdf9;          /* 薄いグリーン背景（将来用） */
  --color-border-green: #e3f3e7;      /* ボーダー用薄緑 */
}
body {color: var(--color-text-default);}
a {color: var(--color-text-accent);}
.button-primary {
  background-color: var(--color-deep-green);
  color: #ffffff;
}

.section-green {
  background-color: var(--color-primary-green);
}

/* ---------------------------------------------
   Layout base
--------------------------------------------- */
.container {
  width: min(100% - (var(--gutter) * 2), var(--site-max));
  margin-inline: auto;
}

/* 既存テンプレの .site-main > .container を本文幅にしている場合の上書き
   - 「一覧や固定ページも基本 1280 上限でOK」ならこのまま
   - 「読み物だけ狭くしたい」なら下のコメントを外して content-max にする
*/
.site-main > .container {
  width: min(100% - (var(--gutter) * 2), var(--site-max));
  margin-inline: auto;
}

/*
.site-main > .container {
  width: min(100% - (var(--gutter) * 2), var(--content-max));
  margin-inline: auto;
}
*/

/* ブロック間の縦リズム（カラムでも破綻しにくい） */
.entry-content > * + * {
  margin-top: var(--flow);
}

/* メディアはみ出し対策 */
.entry-content img,
.entry-content video,
.entry-content iframe {
  max-width: 100%;
}

/* ---------------------------------------------
   Gutenberg alignments
--------------------------------------------- */
/* alignwide: 1280px 上限 */
.entry-content .alignwide {
  width: min(100% - (var(--gutter) * 2), var(--wide-max));
  margin-inline: auto;
}

/* alignfull: 画面幅（ただし site-main が左右padding持ってる場合に崩れにくい版）
   - 完全に端まで行きたい場合は後で「site-mainの左右padding設計」と合わせて調整
*/
.entry-content .alignfull {
  width: 100%;
  margin-left: calc(var(--gutter) * -1);
  margin-right: calc(var(--gutter) * -1);
}

/* ---------------------------------------------
   WordPress Columns block safety
--------------------------------------------- */
.wp-block-columns {
  gap: var(--grid-gap);
}

.wp-block-column > * {
  max-width: 100%;
}

/* columns の「縦中央寄せ」等で崩れないよう最低限 */
.wp-block-columns.is-not-stacked-on-mobile {
  align-items: stretch;
}

/* ---------------------------------------------
   Grid utilities (editor class usage)
   - 使い方：Group/Columns/任意ブロックに「追加CSSクラス」で付与
   - 例：grid grid--3  /  grid grid--2 grid--gap-sm
--------------------------------------------- */
.entry-content .grid {
  display: grid;
  gap: var(--grid-gap);
}

/* 既定：モバイルは1列 */
.entry-content .grid--2,
.entry-content .grid--3,
.entry-content .grid--4 {
  grid-template-columns: 1fr;
}

/* iPad縦：2列まで */
@media (min-width: 768px) and (max-width: 1023px) {
  .entry-content .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .entry-content .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .entry-content .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* iPad横：3列まで（4は3に丸める） */
@media (min-width: 1024px) and (max-width: 1279px) {
  .entry-content .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .entry-content .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .entry-content .grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* PC：4列まで */
@media (min-width: 1280px) {
  .entry-content .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .entry-content .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .entry-content .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* gap variants */
.entry-content .grid--gap-sm { gap: calc(var(--grid-gap) * 0.75); }
.entry-content .grid--gap-lg { gap: calc(var(--grid-gap) * 1.25); }

/* ---------------------------------------------
   Jumbotron component (editor class usage)
   - 使い方：Group/Cover 等に「追加CSSクラス」で付与
   - jumbotron は例外として site-max(1280) に縛らない運用もできる
--------------------------------------------- */
.entry-content .jumbotron {
  padding: var(--jumbo-pad);
  border-radius: var(--jumbo-radius);
  background: var(--jumbo-bg);
  color: var(--jumbo-fg);

  /* デフォルトは「ワイド寄り」で中央寄せ（最大1280のままが無難） */
  width: min(100% - (var(--gutter) * 2), var(--wide-max));
  margin-inline: auto;
}

/* 全幅ヒーローにしたい場合：alignfull + jumbotron の組み合わせを推奨 */
.entry-content .alignfull.jumbotron {
  width: 100%;
  margin-left: calc(var(--gutter) * -1);
  margin-right: calc(var(--gutter) * -1);
  border-radius: 0;
}

/* 中身の縦リズムを整える（ブロックのマージン差吸収） */
.entry-content .jumbotron > * + * {
  margin-top: 0.75rem;
}

/* actions row (任意) */
.entry-content .jumbotron .jumbotron-actions {
  margin-top: 1.25rem;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---- Jumbotron variants ---- */
/* tight: 余白を小さく */
.entry-content .jumbotron--tight {
  --jumbo-pad: clamp(16px, 3vw, 36px);
}

/* dark: ダーク背景（色は後で案件に合わせて調整） */
.entry-content .jumbotron--dark {
  --jumbo-bg: #111;
  --jumbo-fg: #fff;
}

/* image: 画像背景を使う場合（Coverブロックと相性良い） */
.entry-content .jumbotron--image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* 必要なら上に暗幕を重ねる運用にする */
}

/* 画像背景＋暗幕（任意で併用：jumbotron--overlay） */
.entry-content .jumbotron--overlay {
  position: relative;
  overflow: hidden;
}
.entry-content .jumbotron--overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
}
.entry-content .jumbotron--overlay > * {
  position: relative;
}