/*
Theme Name: HappySCCM
Theme URI: https://happysccm.com
Author: Jay
Description: A focused dark/light block theme for technical IT writing — fast, readable, with first-class code blocks. Azure-blue accent. Built for HappySCCM.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.0
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: happysccm
Tags: blog, one-column, block-patterns, full-site-editing, dark-mode, code, technology
*/

/* Block themes are styled primarily via theme.json. The rules below cover
   things theme.json can't express: the dark/light toggle, code-block chrome,
   link underline behaviour, and a few micro-interactions. */

:root {
	--hs-bg: #0d1117;
	--hs-bg-soft: #161b22;
	--hs-bg-code: #11161d;
	--hs-border: #283039;
	--hs-text: #e6edf3;
	--hs-text-dim: #9aa7b4;
	--hs-accent: #2b88d8;       /* Azure blue */
	--hs-accent-bright: #4ea3f0;
	--hs-accent-soft: rgba(43,136,216,0.12);
}

[data-theme="light"] {
	--hs-bg: #ffffff;
	--hs-bg-soft: #f4f7fb;
	--hs-bg-code: #f6f8fa;
	--hs-border: #d6dee7;
	--hs-text: #1a2027;
	--hs-text-dim: #5a6672;
	--hs-accent: #0a6bc2;
	--hs-accent-bright: #0a6bc2;
	--hs-accent-soft: rgba(10,107,194,0.10);
}

html { scroll-behavior: smooth; }

body {
	background: var(--hs-bg);
	color: var(--hs-text);
	transition: background-color .25s ease, color .25s ease;
}

/* --- Site header / nav --- */
.wp-block-site-title a {
	text-decoration: none;
	letter-spacing: -0.02em;
}
.wp-block-site-title a::before {
	content: "> ";
	color: var(--hs-accent);
	font-weight: 700;
}

.wp-block-navigation a {
	text-decoration: none;
	color: var(--hs-text-dim);
	transition: color .15s ease;
}
.wp-block-navigation a:hover { color: var(--hs-accent-bright); }

/* --- Theme toggle button --- */
.hs-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--hs-border);
	border-radius: 8px;
	background: var(--hs-bg-soft);
	color: var(--hs-text);
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	transition: border-color .15s ease, background-color .15s ease, transform .1s ease;
}
.hs-theme-toggle:hover { border-color: var(--hs-accent); }
.hs-theme-toggle:active { transform: scale(0.94); }
.hs-theme-toggle .hs-icon-sun { display: none; }
[data-theme="light"] .hs-theme-toggle .hs-icon-sun { display: inline; }
[data-theme="light"] .hs-theme-toggle .hs-icon-moon { display: none; }

/* --- Post titles & links --- */
.wp-block-post-title a {
	text-decoration: none;
	background-image: linear-gradient(var(--hs-accent), var(--hs-accent));
	background-size: 0% 2px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size .25s ease;
}
.wp-block-post-title a:hover { background-size: 100% 2px; }

.entry-content a, .wp-block-post-content a {
	color: var(--hs-accent-bright);
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

/* --- Code: the part that matters most for this blog --- */
code, kbd, pre, .wp-block-code, .wp-block-preformatted {
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: 0.92em;
}

:not(pre) > code {
	background: var(--hs-accent-soft);
	color: var(--hs-accent-bright);
	padding: 0.15em 0.4em;
	border-radius: 5px;
	border: 1px solid var(--hs-border);
	word-break: break-word;
}

.wp-block-code, .wp-block-preformatted {
	background: var(--hs-bg-code);
	border: 1px solid var(--hs-border);
	border-left: 3px solid var(--hs-accent);
	border-radius: 8px;
	padding: 1.1rem 1.25rem;
	overflow-x: auto;
	line-height: 1.6;
	position: relative;
}
.wp-block-code code { background: none; border: none; padding: 0; color: var(--hs-text); }

/* --- Blockquotes (common in troubleshooting notes) --- */
.wp-block-quote {
	border-left: 3px solid var(--hs-accent);
	background: var(--hs-bg-soft);
	padding: 0.75rem 1.25rem;
	border-radius: 0 8px 8px 0;
	color: var(--hs-text-dim);
	font-style: normal;
}

/* --- Post-list cards on the index --- */
.wp-block-post-template li {
	border-bottom: 1px solid var(--hs-border);
	padding-bottom: 1.75rem;
}
.wp-block-post-date, .wp-block-post-terms {
	color: var(--hs-text-dim);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 0.8rem;
	letter-spacing: 0.02em;
}

/* --- Pagination --- */
.wp-block-query-pagination a {
	text-decoration: none;
	color: var(--hs-text-dim);
	border: 1px solid var(--hs-border);
	padding: 0.4rem 0.8rem;
	border-radius: 6px;
	transition: all .15s ease;
}
.wp-block-query-pagination a:hover {
	border-color: var(--hs-accent);
	color: var(--hs-accent-bright);
}
.wp-block-query-pagination-current {
	background: var(--hs-accent);
	color: #fff;
	padding: 0.4rem 0.8rem;
	border-radius: 6px;
}

/* --- Footer --- */
.hs-footer { color: var(--hs-text-dim); font-size: 0.85rem; }
.hs-footer a { color: var(--hs-accent-bright); text-decoration: none; }

/* Subtle grid texture on the body for depth */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background-image:
		linear-gradient(var(--hs-border) 1px, transparent 1px),
		linear-gradient(90deg, var(--hs-border) 1px, transparent 1px);
	background-size: 64px 64px;
	opacity: 0.10;
	mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 75%);
}
.wp-site-blocks { position: relative; z-index: 1; }