/* yattom.jp のスタイル
   色・フォント・モチーフは、長年使っているプレゼンテンプレート
   000テンプレート2023.pptx から抽出した実値。
   Miro のスタイルタイルを参照:
   https://miro.com/app/board/uXjVHsfkPi8=/?moveToWidget=3458764682728710391 */

:root {
  --y-accent: #de006f;
  --y-accent-dark: #b40059;
  --y-band-start: #9f3f6f;
  --y-band-end: #4d2eb0;

  /* 帯の端の斜めは水平から41度。高さ h に対して横のずれは h * tan(49deg) = h * 1.15 */
  --y-header-bar-h: 10px;
  --y-header-bar-skew: 11.5px;
  --y-rule-h: 5px;
  --y-rule-skew: 5.8px;

  /* ページ末尾の斜め帯の幅。高さは SVG の縦横比から自動で決まる */
  --y-deco-w: min(600px, 66vw);
  /* 帯の高さ = 幅 x 0.3508(viewBox 19667 x 6900 の比) */
  --y-deco-h: calc(var(--y-deco-w) * 0.3508);
}

/* Pico の primary を屋号のマゼンタに差し替える。
   Pico 側が :root:not([data-theme=...]) で定義しているので、同じ強さで上書きする */
:root:not([data-theme="dark"]),
:root:not([data-theme="light"]) {
  --pico-primary: var(--y-accent);
  --pico-primary-background: var(--y-accent);
  --pico-primary-hover: var(--y-accent-dark);
  --pico-primary-hover-background: var(--y-accent-dark);
  --pico-primary-underline: rgba(222, 0, 111, 0.5);
  --pico-primary-focus: rgba(222, 0, 111, 0.25);
  --pico-primary-inverse: #fff;

  /* 源真ゴシック(Source Han Sans 派生)に最も近い Web フォント */
  --pico-font-family-sans-serif: "Noto Sans JP", "Hiragino Sans", "Yu Gothic",
    system-ui, sans-serif;
  --pico-font-family: var(--pico-font-family-sans-serif);
}

/* 見出しはテンプレートに合わせて Light。本文は可読性を優先して通常の太さ */
h1,
h2 {
  font-weight: 300;
}

/* --- ヘッダーの帯 ----------------------------------------------------
   テンプレートのタイトル下の帯。右端が斜めのストライプに分かれて飛んでいく。
   切り欠きの位置は元データの比率どおり */
header.container {
  position: relative;
  padding-bottom: 2.5rem;
}

header.container::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1rem;
  height: var(--y-header-bar-h);
  background: var(--y-accent);
  clip-path: polygon(
    0 100%,
    var(--y-header-bar-skew) 0,
    calc(79.1% + var(--y-header-bar-skew)) 0,
    79.1% 100%,
    82.6% 100%,
    calc(82.6% + var(--y-header-bar-skew)) 0,
    calc(89.3% + var(--y-header-bar-skew)) 0,
    89.3% 100%,
    92.9% 100%,
    calc(92.9% + var(--y-header-bar-skew)) 0,
    calc(96.4% + var(--y-header-bar-skew)) 0,
    96.4% 100%,
    98.3% 100%,
    calc(98.3% + var(--y-header-bar-skew)) 0,
    100% 0,
    100% 100%
  );
}

header hgroup {
  margin-bottom: 0;
}

header nav {
  margin-bottom: 0.5rem;
}

/* --- 見出しの罫線 ----------------------------------------------------
   帯と同じ41度の傾き。スライドより細くして、繰り返してもうるさくならないようにする */
main h2 {
  margin-bottom: 1.2rem;
}

main h2::after {
  content: "";
  display: block;
  height: var(--y-rule-h);
  margin-top: 0.5rem;
  background: var(--y-accent);
  clip-path: polygon(
    0 100%,
    var(--y-rule-skew) 0,
    100% 0,
    calc(100% - var(--y-rule-skew)) 100%
  );
}

/* --- ページ末尾の斜め帯 ----------------------------------------------
   テンプレート右下のモチーフ。EMF に入っている5枚の三角形を、元の座標と
   描画順のまま SVG で再現している(HTML 側の svg.deco を参照)。
   ここでは大きさと位置だけを決める。ページ右端まで届かせたいので
   コンテナの外に置いてある */
body {
  position: relative;
}

footer.container {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  margin-top: 4rem;
  padding-top: 2rem;
  /* 帯のぶんの高さを確保する。これがないと帯が本文まではみ出す */
  min-height: var(--y-deco-h);
}

/* 帯はフローから外し、ページの右下に固定で貼り付ける。
   フローの中で負のマージンで持ち上げると、画面幅によって帯の高さが変わるのに
   持ち上げ量が固定のままになり、狭い画面で著作権表示より上へ飛び出してしまう */
.deco {
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--y-deco-w);
  height: auto;
  /* 装飾なので、上に重なっても文字の選択やクリックを邪魔しない */
  pointer-events: none;
}