/* Nature Article Specific Styles */
/* Tailwind CSS is primarily used via classes in the HTML */

/* Inherit body font from theme, or define a specific one if needed */
.nature-article {
    /* font-family: 'Inter', 'Noto Sans JP', sans-serif; /* Defined in HTML style, can be theme's default */
    /* color: #374151; /* text-neutral-800 - Tailwind */
    /* background-color: #fdfbf7; /* bg-beige-50 - Hypothetical, Tailwind class would be bg-beige-50 */
}

/* General Section and Title Styling (from HTML style block, adapted) */
.nature-article .section-title {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 700; /* bold */
    color: #15803d; /* green-700 */
    margin-bottom: 1.5rem; /* mb-6 */
    text-align: center;
}

.nature-article .subsection-title {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 600; /* semibold */
    color: #166534; /* green-800 */
    margin-top: 2rem; /* mt-8 */
    margin-bottom: 1rem; /* mb-4 */
    /* text-left is applied via Tailwind class */
}

/* Card Styling (from HTML style block, can be enhanced/merged with theme's .card if desired) */
.nature-article .card {
    background-color: white;
    border-radius: 0.5rem; /* rounded-lg */
    padding: 1.5rem; /* p-6 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    transition: transform 0.3s ease;
    /* :hover transform is applied via Tailwind class or direct style if needed */
}
.nature-article .card:hover { /* If not using Tailwind hover variant */
    transform: translateY(-5px);
}


/* Chart Container (from HTML style block) */
.nature-article .chart-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    height: 300px; /* Default height */
    max-height: 400px; /* Max height for larger screens */
    background-color: #fff; /* Or a suitable color from your palette */
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

@media (min-width: 768px) { /* md breakpoint */
    .nature-article .chart-container {
        height: 350px; /* Taller on md screens and up */
    }
}

/* Accordion Styling (from HTML style block) */
.nature-article .accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
    /* active state for accordion (max-height) will be controlled by JS */
}

.nature-article .accordion-trigger.active .accordion-content {
    /* This is an example if JS adds 'active' class to the trigger */
    /* max-height will be set by JS to scrollHeight */
}

/* Icon Placeholder (from HTML style block) */
.nature-article .icon-placeholder {
    display: inline-block;
    width: 1.25em; /* Approx text-xl icon size */
    height: 1.25em;
    margin-right: 0.5em; /* Equivalent to mr-2 */
    vertical-align: middle;
    /* Font Awesome icons might be preferred for consistency if theme uses them elsewhere */
}

/* Tooltip Styling (from HTML style block) */
.nature-article .tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* Or a Tailwind border class */
}

.nature-article .tooltip .tooltiptext {
    visibility: hidden;
    width: 220px;
    background-color: #555; /* Consider Tailwind bg-gray-700 or similar */
    color: #fff;
    text-align: center;
    border-radius: 6px; /* rounded-md */
    padding: 5px 0;
    position: absolute;
    z-index: 10; /* Ensure it's above other content */
    bottom: 125%;
    left: 50%;
    margin-left: -110px; /* Half of width */
    opacity: 0;
    transition: opacity 0.3s;
}

.nature-article .tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent; /* Arrow pointing down */
}

.nature-article .tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* Table styling to match other articles if needed */
.nature-article table {
    /* Basic table styling if not relying solely on Tailwind for tables */
    width: 100%;
    border-collapse: collapse;
    margin-top: 1em;
    margin-bottom: 1em;
}
.nature-article table th,
.nature-article table td {
    border: 1px solid #e5e7eb; /* gray-200 */
    padding: 0.75rem; /* p-3 */
    text-align: left;
}
.nature-article table th {
    background-color: #dcfce7; /* green-100 */
    color: #14532d; /* green-800 */
    font-weight: 600; /* semibold */
}

/* Ensure compatibility with forest.css styles if elements overlap */
/* Example: if .nature-article is inside .forest-article, some styles might cascade. */
/* This specific file assumes .nature-article is a top-level wrapper for this post's content. */

/* Adjustments for consistency with forest-article-styles.css or birthday-article-styles.css */
.nature-article h1, .nature-article h2, .nature-article h3, .nature-article h4 {
    /* Potentially align font-family, color, margin, padding with other articles if not fully covered by Tailwind */
    /* Example: color: var(--theme-heading-color); */
}

.nature-article p {
    /* line-height: 1.8; /* As in forest-article */
    /* margin-bottom: 1.2em; /* As in forest-article */
    /* These are often handled well by Tailwind's defaults or prose classes */
}

/* Specific to the provided HTML's nav - this will be handled by the theme header, but keeping for reference if needed elsewhere */
/*
nav a {
    transition: color 0.3s ease;
}
nav a.active {
    color: #16A34A; // green-600
    font-weight: 600; // semibold
    border-bottom: 2px solid #16A34A;
}
*/

/* Add any other specific styles for nature.html here, especially those not easily achieved with Tailwind utility classes */

/* Making sure the content within .nature-article doesn't get overly wide if not constrained by parent */
.nature-article .max-w-5xl {
    /* This class is already in the HTML, CSS here would be for override or default */
}

/* Styling for the introductory paragraphs */
.nature-article #intro p.text-lg {
    /* Example custom style for intro text if needed */
    line-height: 1.7;
}
.nature-article #intro p.text-sm {
    color: #6b7280; /* gray-500 */
}

/* Styling for the card accordion titles */
.nature-article .accordion-trigger h3 {
    display: flex;
    align-items: center;
}
.nature-article .accordion-trigger h3 .icon-placeholder {
    flex-shrink: 0; /* Prevent icon from shrinking */
}

/* Styling for the list in the takeaway section */
.nature-article #takeaway ul {
    /* Tailwind classes list-disc list-inside space-y-3 handle this */
}
.nature-article #takeaway ul li {
    /* Add specific li styling if needed */
}

/* Responsive adjustments if necessary beyond Tailwind's capabilities */
@media (max-width: 768px) { /* md */
    .nature-article .section-title {
        font-size: 1.75rem; /* text-2xl or slightly larger */
    }
    .nature-article .subsection-title {
        font-size: 1.375rem; /* text-xl or slightly larger */
    }
    .nature-article .grid.md\:grid-cols-2 { /* Targeting the specific grid */
        grid-template-columns: 1fr; /* Stack on smaller screens */
    }
}

@media (max-width: 640px) { /* sm */
    .nature-article main {
        padding: 1rem; /* p-4 */
    }
     .nature-article #intro h1 {
        font-size: 2rem; /* Slightly smaller h1 on small screens */
    }
}

/* Ensure the background of sections like "mindfulness" (bg-green-50) and "mechanism" (bg-beige-100) are correctly applied. */
/* These are Tailwind classes and should work directly. */

/* If using .card class from forest-theme, ensure styles integrate well or make .nature-article .card specific */
.nature-article .card {
    /* If theme's .card has glassmorphism, and you don't want it here, override: */
    /* background: white !important; */
    /* backdrop-filter: none !important; */
    /* border: 1px solid #e5e7eb !important; /* Example: simple border */
    /* box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); /* shadow-md */
}

/* Text color consistency */
.nature-article .text-neutral-700 { color: #404040; }
.nature-article .text-neutral-600 { color: #525252; }
.nature-article .text-neutral-500 { color: #737373; }
.nature-article .text-green-700 { color: #15803d; }
.nature-article .text-green-800 { color: #166534; }

.nature-article .bg-green-50 { background-color: #f0fdf4; }
.nature-article .bg-beige-100 { background-color: #f5f5f0; } /* Example beige */
.nature-article .bg-green-100 { background-color: #dcfce7; }


/* Ensure specific colors from HTML are covered or mapped to theme variables if available */
/* green-700, green-800, green-600 */
/* neutral-800, neutral-700, neutral-600, neutral-500, neutral-300, neutral-200 */
/* beige-50 (assuming this is a custom color or similar to a Tailwind beige/gray) */

/* MathJax or KaTeX might be needed for $g = 0.54$ if true mathematical rendering is desired.
   For now, it's plain text. If MathJax is used, ensure its styles don't conflict. */

/* Styles for cards within the "satisfaction" section */
.nature-article #satisfaction .card {
    /* Tailwind classes already provide: bg-white, rounded-lg, p-6 (padding: 1.5rem), shadow-md */
    border-left: 5px solid #10b981; /* Tailwind green-500 */
    background-color: #f9fafb; /* Tailwind gray-50 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.nature-article #satisfaction .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Tailwind shadow-lg */
}

.nature-article #satisfaction .card h3 {
    /* Tailwind classes: text-xl font-semibold text-green-700 mb-3 */
    display: flex;
    align-items: center;
    margin-bottom: 1rem; /* 0.75rem (mb-3) から 1rem (mb-4相当) に変更 */
}

.nature-article #satisfaction .card h3 .icon-placeholder { /* Modified selector */
    margin-right: 0.75em;
    color: #10b981; /* Tailwind green-500 */
    font-size: 1.1em; /* 少し調整 */
    line-height: 1; /* Ensure proper vertical alignment for text-based icons/emojis */
    align-self: center; /* flexアイテムとして中央揃え */
}

/* Style for the main paragraph inside these cards */
.nature-article #satisfaction .card > p:not(.accordion-content p) {
    /* This targets the direct child <p> that is the summary */
    line-height: 1.75; /* leading-relaxed (1.625) より少し広げる */
    margin-bottom: 0.75rem;
}

/* Accordion content styling */
.nature-article #satisfaction .card .accordion-content p {
    font-size: 0.95em;
    line-height: 1.65;
}

/* Specific styling for accordion triggers if needed, already has Tailwind classes */
.nature-article .accordion-trigger .fa-chevron-down { /* For accordion arrow icon */
    transition: transform 0.3s ease;
}
.nature-article .accordion-trigger.active .fa-chevron-down {
    transform: rotate(180deg);
}

/* --- グラスモーフィズムスタイル --- */

/* ナビゲーションバー */
.nature-article-nav {
    background-color: rgba(255, 255, 255, 0.75) !important; /* Tailwindのbg-whiteを上書き */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Safari対応 */
    /* shadow-md はTailwindのものをそのまま使用 */
    /* border-bottom: 1px solid rgba(255, 255, 255, 0.2); */
}

/* セクション共通スタイル（#intro, #calmness, #takeaway） */
.nature-article section#intro,
.nature-article section#calmness,
.nature-article section#takeaway {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px; /* 既存のrounded-lgより少し大きめの角丸に統一 */
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1); /* ソフトな影 */
    margin-bottom: 3rem; /* 2remから3remに変更 */
}

.nature-article section#intro,
.nature-article section#calmness,
.nature-article section#takeaway {
    padding: 20px;
}

@media (min-width: 1024px) { /* PC向けのメディアクエリ */
    .nature-article section#intro,
    .nature-article section#calmness,
    .nature-article section#takeaway {
        padding: 40px;
    }
}

/* 背景色付きセクション（#satisfaction, #mechanism） */
.nature-article section#satisfaction,
.nature-article section#mechanism {
    /* 元のbg-green-50 (#f0fdf4) の色味を活かした半透明背景 */
    background: rgba(240, 253, 244, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(220, 235, 223, 0.25);
    border-radius: 16px; /* 角丸を統一 */
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1); /* ソフトな影 */
    margin-bottom: 3rem; /* 2remから3remに変更 */
    /* HTML側のpadding (px-4 md:px-6など) と rounded-lg を活かす */
}

/* セクション内のカード要素 (#satisfaction .card, #mechanism .card) */
.nature-article #satisfaction .card,
.nature-article #mechanism .card {
    background: rgba(255, 255, 255, 0.8); /* やや不透明度を上げた白 */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    /* HTML側のp-8, rounded-lg, shadow-mdを基本とし、背景とボーダーをグラスモーフィズム風に */
    /* 必要であれば、 여기서 border-radius や box-shadow を上書きして統一感を高める */
    display: flex; /* カード内部のレイアウト調整のためflexを指定 */
    flex-direction: column; /* 子要素を縦方向に並べる */
}

.nature-article #mechanism .card h3 {
    margin-bottom: 1rem; /* satisfactionセクションと統一 */
}

.nature-article #mechanism .card p,
.nature-article #mechanism .card ul {
    line-height: 1.75; /* satisfactionセクションと統一 */
}

/* チャートコンテナ */
.chart-container {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

/* アイコンプレースホルダーのスタイル（もし未定義の場合） */
.icon-placeholder {
    display: inline-block;
    margin-right: 0.5em;
    font-size: 1.2em; /* アイコンサイズの調整 */
    color: inherit;
}

/* セクションタイトルの調整（必要に応じて） */
.section-title {
    margin-bottom: 2rem; /* 十分なマージンを確保 */
}

/* サブセクションタイトルの調整（必要に応じて） */
.subsection-title {
    margin-bottom: 1rem;
}

/* ページ全体の背景設定案 (WordPressのカスタマイザー等で設定推奨) */
/*
body.nature-article-page {
    background: linear-gradient(120deg, #f6d365 0%, #fda085 100%); // 例: 暖色系グラデーション
    background-attachment: fixed;
}
main.nature-article {
    position: relative; // backdrop-filter のために必要になる場合がある
}
*/

/* Mobile chart/table display adjustments */
@media (max-width: 767px) { /* Corresponds to md:hidden in Tailwind (max-width for 'medium' breakpoint minus 1px) */
    .nature-article .chart-container canvas {
        display: none !important; /* Ensure the canvas itself is hidden */
    }
    .nature-article .chart-container {
        height: 0 !important; /* Force container height to 0 */
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        visibility: hidden; /* Also hide visibility */
    }
    .nature-article #chart-table-container {
        display: block; /* Ensure table container is visible */
        width: 100%;
        overflow-x: auto; /* Allow horizontal scrolling for the table */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        margin-top: 1rem; /* Add some space above the table */
        margin-bottom: 1rem; /* Add some space below the table */
    }
    .nature-article #chart-table-container table {
        width: 100%; /* Make table use full width of its container */
        min-width: 500px; /* Set a min-width to ensure table content isn't too cramped, adjust as needed */
        border-collapse: collapse;
    }
    .nature-article #chart-table-container th,
    .nature-article #chart-table-container td {
        padding: 0.5rem; /* Adjust padding for mobile */
        white-space: nowrap; /* Prevent text wrapping within cells, forcing scroll if needed */
    }
}