/*
Theme Name: Study Records
Theme URI: https://skrgbenkyo.com/
Author: Your Name
Description: A vibrant and modern theme for study records.
Version: 2.0
Requires at least: 5.8
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: study-records
*/

/* === Design System (CSS Variables) - Base Definition === */
:root {
	--color-primary-start: #5f27cd;
	--color-primary-end: #00d2d3;
	--color-primary-gradient: linear-gradient(45deg, var(--color-primary-start), var(--color-primary-end));
	--color-text-dark: #1e272e;
	--color-text-light: #485460;
	--color-bg-primary: #ffffff;
	--color-bg-secondary: #f5f6fa;
	--color-border: #dcdde1;
	--color-white: #ffffff;

	--font-family-base: 'Inter', sans-serif;
	--container-width: 1200px;
	--spacing-unit: 1rem; /* 16px */
	--border-radius: 12px;
	--shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
	--transition: all 0.3s ease-in-out;
}

/* === Base & Reset === */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html { scroll-behavior: smooth; }
body {
	font-family: var(--font-family-base);
	background-color: var(--color-bg-secondary);
	color: var(--color-text-dark);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
a { color: var(--color-primary-start); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--color-primary-end); text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }

/* === Header === */
.site-header {
	background-color: rgba(255, 255, 255, 0.85);
	border-bottom: 1px solid var(--color-border);
	position: sticky;
	top: 0;
	z-index: 1000;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.header-container {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 1.5);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* === Navigation === */
.main-navigation ul { list-style: none; display: flex; gap: calc(var(--spacing-unit) * 2); }
.main-navigation a { font-weight: 500; color: var(--color-text-light); text-decoration: none; position: relative; padding: 0.5rem 0; }
.menu-toggle { display: none; background: transparent; border: none; cursor: pointer; }

/* === Main Content Area === */
.site-content {
	max-width: var(--container-width);
	margin: calc(var(--spacing-unit) * 3) auto;
	padding: 0 calc(var(--spacing-unit) * 1.5);
}

/* === Post Grid (Index Page) === */
.posts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: calc(var(--spacing-unit) * 2.5);
}

/* === Article (Single & Page) === */
.entry-content { background: var(--color-bg-primary); padding: calc(var(--spacing-unit) * 3); border-radius: var(--border-radius); box-shadow: var(--shadow); }

/* === Footer === */
.site-footer { background-color: var(--color-text-dark); color: rgba(255, 255, 255, 0.7); padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 1.5); text-align: center; margin-top: calc(var(--spacing-unit) * 4); }
.site-footer a { color: var(--color-white); font-weight: 500; }

/* === Responsive Base === */
@media (max-width: 768px) {
	.menu-toggle { display: block; }
	.main-navigation ul { display: none; }
	.main-navigation.toggled ul { display: flex; }
}



/* スマホだけで改行する設定 */
.sp-only {
  display: none;
}

@media (max-width: 768px) {
  .sp-only {
    display: inline;
  }

  .site-title {
    font-size: 1.5rem; /* スマホ用に少し小さめに調整 */
    text-align: center;
    word-break: keep-all;
  }

  .title-part1,
  .title-part2 {
    display: block;
  }
}