/*
Theme Name: usof theme
Theme URI:
Description: Lightweight custom theme for usof.eu.cc, Lightning-inspired visuals with minimal CSS for fast rendering. Full WooCommerce support.
Author: usof
Author URI:
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: usof-theme
Tags: blog, one-column, custom-colors, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root {
	--primary: #337ab7;
	--primary-dark: #286090;
	--text: #464646;
	--text-light: #777;
	--border: #e5e5e5;
	--bg: #fff;
	--bg-gray: #f5f5f5;
	--danger: #c00;
	--success: #3c763d;
	--radius: 4px;
	--container: 1140px;
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	font-size: 15px;
	line-height: 1.8;
	color: var(--text);
	background: #fff;
	word-break: break-word;
}
img { max-width: 100%; height: auto; vertical-align: middle; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); text-decoration: underline; }
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.6em;
	line-height: 1.4;
	color: #222;
	font-weight: 700;
}
h1 { font-size: 28px; }
h2 { font-size: 24px; border-bottom: 1px solid var(--border); padding-bottom: 0.4em; }
h3 { font-size: 20px; }
h4 { font-size: 17px; }
p { margin: 0 0 1.2em; }
ul, ol { margin: 0 0 1.2em 1.6em; padding: 0; }
table { width: 100%; border-collapse: collapse; margin-bottom: 1.2em; }
th, td { border: 1px solid var(--border); padding: 0.5em 0.8em; text-align: left; }
th { background: var(--bg-gray); }
blockquote { margin: 1.2em 0; padding: 0.8em 1.2em; border-left: 4px solid var(--primary); background: var(--bg-gray); }
pre, code { background: var(--bg-gray); border-radius: 3px; }
code { padding: 0.15em 0.4em; font-size: 0.9em; }
pre { padding: 1em; overflow-x: auto; }
pre code { background: none; padding: 0; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }

/* ==========================================================================
   3. Layout
   ========================================================================== */
.container { max-width: var(--container); margin: 0 auto; padding: 0 15px; }
.site-header {
	background: #fff;
	border-bottom: 1px solid var(--border);
}
.site-header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 62px; }
.site-branding { display: flex; align-items: center; gap: 10px; }
.site-title { font-size: 22px; font-weight: 700; margin: 0; line-height: 1.2; }
.site-title a { color: #222; }
.site-title a:hover { text-decoration: none; color: var(--primary); }
.custom-logo { max-height: 50px; width: auto; }

/* Page header (title bar) */
.page-header { background: var(--primary); color: #fff; padding: 26px 0; margin-bottom: 30px; }
.page-header .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.page-title { margin: 0; color: #fff; font-size: 24px; line-height: 1.4; }

/* Main content */
.site-main { padding-bottom: 40px; }
.site-main .container { display: block; }
.entry { background: #fff; }
.entry-header { margin-bottom: 20px; }
.entry-title { font-size: 28px; margin-bottom: 0.3em; }
.entry-meta { color: var(--text-light); font-size: 13px; margin-bottom: 1em; }
.entry-meta span { margin-right: 12px; }
.entry-body { line-height: 1.9; }
.entry-footer { margin-top: 30px; padding-top: 15px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-light); }

/* ==========================================================================
   4. Site footer
   ========================================================================== */
.site-footer { background: #46464a; color: #c8c8c8; font-size: 13px; }
.site-footer .container { padding-top: 22px; padding-bottom: 22px; }
.site-footer a { color: #c8c8c8; }
.site-footer a:hover { color: #fff; }
.site-footer-copyright { text-align: center; }

/* ==========================================================================
   5. Navigation
   ========================================================================== */
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.site-nav li a { display: block; padding: 8px 14px; color: #222; font-size: 14px; border-radius: 3px; }
.site-nav li a:hover { color: var(--primary); text-decoration: none; background: var(--bg-gray); }
.site-nav li.current-menu-item > a { color: var(--primary); }

/* Mobile nav */
.nav-toggle {
	display: none;
	background: none;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 8px 10px;
	cursor: pointer;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: #333; margin: 4px 0; }

@media (max-width: 767px) {
	.nav-toggle { display: block; }
	.site-nav {
		display: none;
		position: absolute;
		top: 62px;
		left: 0;
		right: 0;
		background: #fff;
		border-bottom: 1px solid var(--border);
		box-shadow: 0 4px 8px rgba(0,0,0,0.08);
		z-index: 999;
	}
	.site-nav.open { display: block; }
	.site-nav ul { flex-direction: column; padding: 8px 15px; }
	.site-nav li a { padding: 10px 8px; }
}

/* ==========================================================================
   6. Components
   ========================================================================== */
.btn, .button, button[type="submit"], .button.wc-forward, .wc-block-components-button {
	display: inline-block;
	padding: 0.55em 1.4em;
	background: var(--primary);
	color: #fff;
	border: 1px solid var(--primary);
	border-radius: var(--radius);
	font-size: 14px;
	line-height: 1.5;
	cursor: pointer;
	text-align: center;
}
.btn:hover, .button:hover, button[type="submit"]:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; text-decoration: none; }

input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="number"], input[type="tel"], input[type="url"], select, textarea {
	border: 1px solid #ced4da;
	border-radius: var(--radius);
	padding: 0.45em 0.8em;
	font-size: 14px;
	font-family: inherit;
	color: var(--text);
	background: #fff;
	max-width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(51,122,183,0.15); }
label { font-weight: 400; }

/* Pagination */
.pagination { margin: 30px 0; text-align: center; }
.pagination .page-numbers { display: inline-block; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius); margin: 0 2px; color: var(--text); }
.pagination .page-numbers.current { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Messages */
.woocommerce-message, .woocommerce-info, .woocommerce-error,
.wc-block-components-notice-banner.is-success, .wc-block-components-notice-banner.is-error {
	padding: 0.9em 1.2em;
	margin-bottom: 1.2em;
	border-radius: var(--radius);
	font-size: 14px;
}
.woocommerce-message, .wc-block-components-notice-banner.is-success { background: #dff0d8; border: 1px solid #d6e9c6; color: var(--success); }
.woocommerce-info { background: #d9edf7; border: 1px solid #bce8f1; color: #31708f; }
.woocommerce-error, .wc-block-components-notice-banner.is-error { background: #f2dede; border: 1px solid #ebccd1; color: #a94442; }
.woocommerce-message a, .woocommerce-error a { font-weight: 700; }

/* ==========================================================================
   7. Archive
   ========================================================================== */
.archive .entry { margin-bottom: 28px; padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.archive .entry-title { font-size: 22px; }
.entry-summary { color: var(--text); }

/* ==========================================================================
   8. 404
   ========================================================================== */
.error-404 { text-align: center; padding: 60px 0; }
.error-404 .error-title { font-size: 48px; color: var(--primary); }

/* ==========================================================================
   9. Responsive
   ========================================================================== */
@media (max-width: 991px) {
	.container { padding: 0 12px; }
	h1 { font-size: 24px; }
	h2 { font-size: 21px; }
	.entry-title { font-size: 23px; }
	.page-title { font-size: 20px; }
}