/*
Theme Name: MoreNews Child
Theme URI: https://gsugene.webben.in/
Author: ESTRADA
Author URI: https://gsugene.webben.in/
Description: morenews theme child
Version: 1.0.0
Requires at least: 5.6
Tested up to: 6.6
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: morenews-child
Template: morenews
Tags: ニュース, ブログ, カスタマイズ, レスポンシブ

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

MoreNews is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

MoreNews WordPress Theme, Copyright 2022 AF themes
MoreNews is distributed under the terms of the GNU GPL v2 or later.
*/
/*Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Grids
# Social icons
# Forms
# Navigation
    ## Links
    ## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
    ## Posts and pages
    ## Comments
# Infinite scroll
# Media
    ## Captions
    ## Galleries
# Footer
-----------------------------------------------------------*/
/*-----------------------------------------------------------
# Normalize
-----------------------------------------------------------*/

.wp-block-gallery.wp-block-image figcaption {
    background: linear-gradient(0deg, #0006, #0000);
    box-sizing: border-box;
    color: #ffffff;
    font-size: 100px;
    margin: 0;
    overflow: auto;
    padding: 1em;
    scrollbar-color: #00000000 #0000;
    scrollbar-gutter: stable both-edges;
    scrollbar-width: thin;
    text-align: center;
    text-shadow: 0 0 1.5px #000;
    will-change: transform;
}


/*-----------------------------------------------------------*/





.generator-entry.d-flex {
    display: flex;
    gap: 10px;
    align-items: center;
}

.d-flex {
    display: flex;
    gap: 10px;
}

.d-flex-inline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}


/* =============================================
   1️⃣ 点検スケジュールフォームの基本スタイル
   ============================================= */
form.inspection-schedule-form {
    max-width: 500px;               /* フォームの最大幅を設定 */
    margin: 20px auto;              /* 上下に余白を追加し、左右中央寄せ */
    padding: 20px;                  /* 内部に余白を追加 */
    background-color: #f9f9f9;      /* 背景色を淡い灰色に設定 */
    border-radius: 8px;             /* 角を丸くする */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 薄い影を追加 */
    font-family: 'Arial', sans-serif; /* フォントをArialに設定 */
    font-size: 25px;                /* 文字サイズを設定 */
    color: #333;                    /* 文字色を濃いグレーに設定 */
}

/* 上書きを防ぐため、背景色とフォントサイズに `!important` を追加 */
form.inspection-schedule-form {
    background-color: #f9f9f9 !important;
    font-size: 25px !important;
}

/* =============================================
   2️⃣ 入力フィールドのスタイル
   ============================================= */
form.inspection-schedule-form input,
form.inspection-schedule-form select,
form.inspection-schedule-form textarea {
    height: 50px;
    width: 100%;                   /* 幅をフォーム全体に合わせる */
    padding: 10px;                 /* 内部余白を設定 */
    margin-bottom: 10px;           /* 下に余白を追加 */
    border: 1px solid #ccc;        /* 薄い灰色のボーダーを設定 */
    border-radius: 4px;            /* 角を丸くする */
    font-size: 25px !important;    /* 文字サイズを設定（上書きを防ぐために `!important`） */
    background-color: #f9f9f9 !important; /* 背景色を設定 */
    color: #333 !important;
}

#schedule_date {
    height: 70px; /* 高さを50pxに設定 */
    padding: 10px; /* 内側の余白を調整 */
    font-size: 35px !important;/* 文字サイズを調整 */
    border-radius: 8px; /* 角を丸くする */
    border: 1px solid #ccc; /* ボーダーを設定 */
}

/* =============================================
   3️⃣ 送信ボタンのスタイル
   ============================================= */
form.inspection-schedule-form input[type="submit"] {
    width: 100%;                   /* 幅をフォーム全体に合わせる */
    padding: 12px;                 /* 内部余白を設定 */
    font-size: 16px;               /* 文字サイズを設定 */
    font-weight: bold;             /* 文字を太くする */
    color: #fff;                   /* 文字色を白に設定 */
    background-color: #4CAF50;     /* 背景色を緑に設定 */
    border: none;                  /* ボーダーを削除 */
    border-radius: 8px;            /* 角を丸くする */
    cursor: pointer;               /* カーソルを指マークに変更 */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* ボタンに影を追加 */
    transition: all 0.3s ease;     /* ホバー時の変化をスムーズにする */
}

/* ホバー時の送信ボタンスタイル */
form.inspection-schedule-form input[type="submit"]:hover {
    background-color: #45a049;     /* ホバー時の背景色を濃い緑に変更 */
}

/* =============================================
   4️⃣ 発電機追加ボタン＋カウント表示のスタイル
   ============================================= */
.mb-3.d-flex.align-items-center {
    display: flex;                     /* 親要素をフレックスボックスに設定 */
    justify-content: space-between;    /* ボタンとカウントを左右に配置 */
    align-items: center;               /* 要素を上下中央に揃える */
    width: 50%;                       /* 親要素の幅を100%に設定 */
}

/* 発電機追加ボタンのスタイル */
#add-location-generator {
    display: inline-block;             /* ボタンをインラインブロック要素に設定 */
    width: auto;                       /* 幅を自動調整 */
    font-size: 25px;                   /* 文字サイズを設定 */
    margin-right: 0px;                /* ボタンとカウントの間に余白を追加 */
}

/* 発電機台数カウントのスタイル */
#generatorCount {
    display: inline-block;             /* カウントをインラインブロック要素に設定 */
    font-size: 30px;                   /* 文字サイズを設定 */
    color: #333;                       /* 文字色を濃いグレーに設定 */
    white-space: nowrap;               /* 改行を防ぐ */
     margin-left: 0;
}

/* =============================================
   5️⃣ モバイルデバイス対応の調整
   ============================================= */
@media screen and (max-width: 768px) {
    #inspection-schedule-submit {
        width: 100%;                  /* ボタン幅を100%に設定 */
        font-size: 16px;              /* 文字サイズを小さく調整 */
    }

    #add-location-generator {
        width: 100%;                  /* 発電機追加ボタンを幅100%に変更 */
        margin-top: 10px;             /* 上に余白を追加 */
        font-size: 13px;
    }

    #generatorCount {
        font-size: 18px;              /* カウントのフォントサイズを調整 */
    }
}



/**
 * ショートコード [repair_management_form] で修理記録の入力フォームを表示
 */
/* 例: 子テーマ style.css */
.container {
    max-width: 100% !important;
  }
  .card {
    width: 50% !important;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 6px;
  }
  .card-header {
    padding: 10px;
  }
  .card-body {
    padding: 10%;
  }
  .form-card {
    display: none;
}
.form-card.active {
    display: block;
}

/* カードコンテナのスタイリング */
.repair-form-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* カードナビゲーション */
.card-navigation {
    margin-bottom: 2rem;
}

.nav-buttons {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.nav-btn {
    flex: 1;
    padding: 1rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.nav-btn.btn-primary {
    background-color: #0d6efd;
    color: white;
}

.nav-btn.btn-secondary {
    background-color: #e9ecef;
    color: #495057;
}

/* プログレスバー */
.progress {
    height: 8px;
    background-color: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background-color: #0d6efd;
    transition: width 0.3s ease;
}

/* カードスタック */
.form-cards-stack {
    position: relative;
    min-height: 500px; /* カードの最小高さ */
}

.form-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.form-card.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* カードデザイン */
.card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
}

.card-header {
    padding: 1.5rem;
    border-radius: 12px 12px 0 0;
}

.card-header h4 {
    margin: 0;
    font-size: 1.25rem;
}

.card-body {
    padding: 2rem;
}

.card-footer {
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 0 0 12px 12px;
}

/* フォーム要素 */
.form-control, .form-select {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 0.75rem;
    transition: border-color 0.15s ease-in-out;
}

.form-control:focus, .form-select:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* ボタン */
.btn {
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-primary {
    background-color: #0d6efd;
    border: none;
    color: white;
}

.btn-primary:hover {
    background-color: #0b5ed7;
}

.btn-secondary {
    background-color: #6c757d;
    border: none;
    color: white;
}

.btn-secondary:hover {
    background-color: #5c636a;
}

.btn-success {
    background-color: #198754;
    border: none;
    color: white;
}

.btn-success:hover {
    background-color: #157347;
}

/* レスポンシブデザイン */
@media (max-width: 768px) {
    
.container {
    max-width: 100% !important;
  }
  .card {
    width: 50% !important;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 6px;
  }
  .card-header {
    padding: 10px;
  }
  .card-body {
    padding: 10%;
  }
    
    /* カードコンテナのスタイリング */
.repair-form-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}
    
    .card-navigation {
        margin-bottom: 1rem;
    }
    
    .nav-buttons {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .card-body {
        padding: 3rem !important;
    }
    
    .form-cards-stack {
        min-height: 600px;
    }
}

/* アニメーション用のユーティリティクラス */
.fade-enter {
    opacity: 0;
    transform: translateY(20px);
}

.fade-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 300ms, transform 300ms;
}

.fade-exit {
    opacity: 1;
    transform: translateY(0);
}

.fade-exit-active {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 300ms, transform 300ms;
}

/* カード表示制御の基本スタイル */
.form-cards-stack {
    position: relative;
    min-height: 500px;
}

.form-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: none;  /* 初期状態では非表示 */
}

.form-card {
    display: none;
}

.form-card.active {
    display: block; /* activeクラスが付いたら表示 */
}