/*
Theme Name: Gear Review
Theme URI: 
Author: バックグラウンド担当
Description: 機能性ウェア・安全装備のレビュー・比較メディア用オリジナルテーマ
Version: 1.0.0
Text Domain: gear-review

* CSS Reset & Base Variables
-------------------------------------------------------------- */

:root {
  /* Color Palette */
  --color-primary: #1e3a8a; /* 落ち着いたネイビー */
  --color-secondary: #0ea5e9; /* アクセントのブルー */
  --color-text-main: #334155; /* ベーステキスト色 */
  --color-text-light: #64748b; /* 補助テキスト色 */
  --color-bg-body: #f8fafc; /* 背景色 */
  --color-bg-white: #ffffff;
  --color-border: #e2e8f0;
  
  /* Status Colors */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;

  /* Typography */
  --font-family-base: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  
  /* Spacing & Layout */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
  
  --layout-max-width: 1000px;
  --layout-content-width: 680px;
  --layout-sidebar-width: 280px;
}

/* Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px; /* Base 16px */
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family-base);
  color: var(--color-text-main);
  background-color: var(--color-bg-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

a:hover {
  opacity: 0.8;
}

ul, ol {
  list-style: none;
}

/* Layout Utilities */
.container {
  width: 100%;
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.site-main {
  padding: var(--spacing-xl) 0;
}

/* Base Headings */
h1, h2, h3, h4, h5, h6 {
  color: #1e293b;
  line-height: 1.4;
  margin-bottom: var(--spacing-md);
  font-weight: 700;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.5rem; margin-top: var(--spacing-xl); }
h3 { font-size: 1.25rem; margin-top: var(--spacing-lg); }

/* Responsive adjustments (Mobile First is default, larger screens via min-width) */
@media screen and (min-width: 768px) {
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.875rem; }
  h3 { font-size: 1.5rem; }
}

/* WordPress Core CSS rules */
.aligncenter { display: block; margin: 0 auto; }
.alignleft { float: left; margin: 0 1.5em 1.5em 0; }
.alignright { float: right; margin: 0 0 1.5em 1.5em; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 0.875rem; color: var(--color-text-light); text-align: center; margin-top: var(--spacing-sm); }
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}