/*
Theme Name: Food Delivery Platform
Theme URI: https://example.com/food-delivery
Author: Your Name
Author URI: https://example.com
Description: デリバリーブランド卸・食材＆レシピ紹介サイト用WordPressテーマ。飲食店経営者向けのB2Bプラットフォーム。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: food-delivery
Tags: business, e-commerce, custom-colors, custom-menu, featured-images, threaded-comments

デリバリーブランド卸・食材＆レシピ紹介サイト - B2B Platform for Restaurant Owners
*/

/* Base Reset - Tailwind CSS handles most styling via CDN */
* {
    box-sizing: border-box;
}

/* 画面幅に応じてテキストサイズが変わる（fluid typography） */
html {
    font-size: clamp(14px, 0.875rem + 0.5vw, 18px);
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 一覧検索フォームのラベル（Tailwind未読込時のフォールバック） */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
    color: inherit;
}

/* WordPress Core Styles */
.alignleft {
    float: left;
    margin-right: 1.5em;
}

.alignright {
    float: right;
    margin-left: 1.5em;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption {
    max-width: 100%;
}

.wp-caption-text {
    text-align: center;
    font-size: 0.875rem;
    color: #666;
}

/* ヘッダーロゴサイズ（カスタムロゴ使用時も適用） */
.header-logo img {
    height: 3.5rem;
    width: auto;
}

/* Screen Reader Text */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* #hero 見出し: 画面幅で変わるフォントサイズ */
#hero .hero-title {
    font-size: calc(60 / 1920 * 100vw);
    word-wrap: break-word;
    overflow-wrap: break-word;
}
@media (min-width: 768px) and (max-width: 1280px) {
    #hero .hero-title {
        font-size: calc(70 / 1920 * 100vw);
    }
}

/* #hero 検索タブ: 食材・レシピで探すアクティブ時は上ボーダー・文字色を同じ緑に */
#hero .hero-search-tab.hero-tab-active-recipe {
    border-top-color: #28a745 !important;
    color: #28a745 !important;
}

/* #hero 注目ワード（食材・レシピタブ）: タブの緑と揃える */
#hero .hero-keyword-tag.hero-keyword--recipe {
    color: #28a745;
}
#hero .hero-keyword-tag.hero-keyword--recipe:hover {
    color: #218838;
}

#featured-brands .page-ranking-badge-img,
#featured-ingredients .page-ranking-badge-img {
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
}

/* ページネーション .nav-links（the_posts_pagination） */
.nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-links .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    background: #f3f4f6;
    border-radius: 0.375rem;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

.nav-links .page-numbers:hover,
.nav-links a.page-numbers:hover {
    background: #e5e7eb;
    color: #111827;
}

.nav-links .page-numbers.current {
    background: #de5a08;
    color: #fff;
    cursor: default;
    pointer-events: none;
}

.nav-links .prev.page-numbers,
.nav-links .next.page-numbers {
    padding: 0.5rem 1rem;
}

/* ========== TOP スライダー ========== */
.top-slider-wrap {
    position: relative;
    overflow: hidden;
}
.top-slider-track {
    display: flex;
}
.top-slider-slide {
    min-width: 100%;
    flex-shrink: 0;
}

.top-slider-prev,
.top-slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: background 0.2s;
}
.top-slider-prev:hover,
.top-slider-next:hover {
    background: #fff;
}
.top-slider-prev {
    left: 12px;
}
.top-slider-next {
    right: 12px;
}
.top-slider-prev .material-icons,
.top-slider-next .material-icons {
    font-size: 28px;
    color: #374151;
}

.top-slider-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}
.top-slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.top-slider-dot.active {
    background: #fff;
}

/* ========== 一覧検索（ピル型・参考デザイン寄せ） ========== */
.archive-search-pill {
    background-color: #f2f2f2;
    border-radius: 9999px;
    border: none;
    box-shadow: none;
}
.archive-search-pill-icon {
    font-size: 22px;
    color: #4b5563;
    line-height: 1;
}
.archive-search-pill-input {
    border: none;
    background: transparent;
    box-shadow: none;
    font-size: 1rem;
    line-height: 1.5;
    color: #111827;
}
.archive-search-pill-input::placeholder {
    color: #9ca3af;
}
.archive-search-pill-input:focus {
    outline: none;
    box-shadow: none;
}
.archive-search-pill-submit {
    border: none;
    background: transparent;
    color: #6b7280;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.35rem 0.75rem;
    border-radius: 9999px;
    cursor: pointer;
    font-family: inherit;
}
.archive-search-pill-submit:hover {
    color: #111827;
}

/* ========== フッター ロゴ（白フィルタ） ========== */
.footer-logo img {
    filter: brightness(0) invert(1);
}