/*
Theme Name: Astro Owl
Theme URI: https://www.owl-de-base.com/
Author: Owl de Base
Author URI: https://www.owl-de-base.com/
Description: オウルドベース公式テーマ — Astroフロントエンドと統一されたモダンデザイン
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astro-owl
*/

/* ============================
   Base Styles (Astro Layout.astro から移植)
   ============================ */

html {
    font-family: "Zen Maru Gothic", sans-serif;
    scroll-behavior: smooth;
}

/* 自然な改行 */
.balance {
    text-wrap: balance;
}

p {
    overflow-wrap: break-word;
    word-break: normal;
    line-break: strict;
    text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}

/* SubpageLayout.astro から */
h2, h3 {
    letter-spacing: -0.02em;
}

/* ============================
   Mobile Menu Animation (Header.astro から移植)
   ============================ */
.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background-color: white;
    z-index: 150;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    visibility: hidden;
}

.mobile-menu-overlay.is-open {
    visibility: visible;
    transform: translateX(0);
}

.menu-content {
    padding: 6rem 2rem 5rem;
    height: 100%;
    overflow-y: auto;
    position: relative;
}

@media (min-width: 1280px) {
    .mobile-menu-overlay {
        display: none !important;
    }
}

/* ============================
   BottomNav safe area (BottomNav.astro から移植)
   ============================ */
.pb-safe {
    padding-bottom: env(safe-area-inset-bottom);
}

/* ============================
   WordPress記事本文の微調整 (blog/[slug].astro から移植)
   ============================ */
.prose img {
    margin: 2rem auto;
}

.prose figure {
    margin: 2rem 0;
}

.prose figcaption {
    text-align: center;
    font-size: 0.8rem;
    color: #8b5a2b;
    margin-top: 0.5rem;
}

/* WordPress絵文字のサイズ制御 */
.prose img.emoji,
img.emoji {
    display: inline !important;
    border: none !important;
    box-shadow: none !important;
    height: 1em !important;
    width: 1em !important;
    margin: 0 0.07em !important;
    vertical-align: -0.1em !important;
    background: none !important;
    padding: 0 !important;
}

/* ============================
   WordPress固有のリセット
   ============================ */

/* 管理バーがある時のstickyヘッダー調整 */
.admin-bar header.sticky-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar header.sticky-header {
        top: 46px;
    }
}

/* BottomNav用の下部パディング */
@media (max-width: 1279px) {
    main {
        padding-bottom: 5rem;
    }
}

/* line-clamp (Tailwind CDNに含まれるが念のため) */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}