/* ==========================================================================
   ベーススタイル（要素セレクタのみ。コンポーネントの見た目はここに書かない）
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/*
 * ログイン中に出る WP の管理バーの分だけ、追従ヘッダーを下げる量。
 * 管理バーは 600px 以下だとスクロールと一緒に流れて消える（WP 本体の仕様）ため、その幅では 0 にする。
 * 600px は design.md の切り替え幅ではないが、WP 本体の管理バーに合わせるための例外
 */
:root {
    --admin-bar-offset: var(--wp-admin--admin-bar--height, 0px);
}

@media screen and (max-width: 600px) {
    :root {
        --admin-bar-offset: 0px;
    }
}

/* ヘッダーが追従するため、ページ内リンクで飛んだ先がヘッダーの下に隠れないようにする */
html {
    scroll-padding-top: calc(var(--header-h) + var(--admin-bar-offset));
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-body);
    font-weight: var(--weight-regular);
    line-height: var(--leading-body);
    color: var(--color-text);
    background-color: var(--color-bg);
}

img,
svg {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

a {
    color: inherit;
}

button {
    font: inherit;
    color: inherit;
}

/* ---- コンテナ（design.md「4. レイアウト」）。画面端余白 --gutter の内側に中身の最大幅を確保する ---- */
.l-container,
.l-container--narrow {
    width: 100%;
    max-width: calc(var(--container) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.l-container--narrow {
    max-width: calc(var(--container-narrow) + var(--gutter) * 2);
}