/*
Theme Name:        GD Blank
Theme URI:         https://greatdigital.co.uk/
Author:            Great Digital
Author URI:        https://greatdigital.co.uk/
Description:       A blank, fully responsive starter theme with a 12-column CSS Grid system. Classic PHP templates, block editor support via theme.json, and clean PHP 7.4–8.3+ compatible code.
Version:           1.0.0
Requires at least: 6.0
Tested up to:      6.7
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:       gd-blank
Tags:              blank, starter, grid-layout, responsive-layout, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root {
	--gd-color-text: #1a1a1a;
	--gd-color-muted: #5f6368;
	--gd-color-bg: #ffffff;
	--gd-color-surface: #f5f6f7;
	--gd-color-border: #e2e4e7;
	--gd-color-primary: #0b57d0;
	--gd-color-primary-dark: #0842a0;

	--gd-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--gd-font-heading: var(--gd-font-body);
	--gd-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--gd-fs-base: 1rem;
	--gd-lh-base: 1.65;

	--gd-space-xs: 0.5rem;
	--gd-space-sm: 1rem;
	--gd-space-md: 1.5rem;
	--gd-space-lg: 2.5rem;
	--gd-space-xl: 4rem;

	--gd-radius: 6px;
	--gd-transition: 0.2s ease;
}

/* ==========================================================================
   2. Reset / base
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
	margin: 0;
	font-family: var(--gd-font-body);
	font-size: var(--gd-fs-base);
	line-height: var(--gd-lh-base);
	color: var(--gd-color-text);
	background: var(--gd-color-bg);
	-webkit-font-smoothing: antialiased;
}

img, svg, video, iframe, embed, object { max-width: 100%; height: auto; display: block; }
iframe { border: 0; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--gd-font-heading);
	line-height: 1.2;
	margin: 0 0 var(--gd-space-sm);
}
h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem); }
h3 { font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem); }
h4 { font-size: 1.2rem; }
h5 { font-size: 1.05rem; }
h6 { font-size: 1rem; }

p, ul, ol, dl, blockquote, pre, table, figure { margin: 0 0 var(--gd-space-md); }

a { color: var(--gd-color-primary); text-underline-offset: 0.15em; transition: color var(--gd-transition); }
a:hover, a:focus { color: var(--gd-color-primary-dark); }
:focus-visible { outline: 2px solid var(--gd-color-primary); outline-offset: 2px; }

blockquote { border-left: 4px solid var(--gd-color-primary); padding-left: var(--gd-space-sm); color: var(--gd-color-muted); }
code, kbd, pre, samp { font-family: var(--gd-font-mono); font-size: 0.9em; }
pre { background: var(--gd-color-surface); padding: var(--gd-space-sm); overflow-x: auto; border-radius: var(--gd-radius); }
hr { border: 0; border-top: 1px solid var(--gd-color-border); margin: var(--gd-space-lg) 0; }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--gd-color-border); text-align: left; }

input, button, select, textarea { font: inherit; color: inherit; }
input[type="text"], input[type="email"], input[type="url"], input[type="password"],
input[type="search"], input[type="number"], input[type="tel"], select, textarea {
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--gd-color-border);
	border-radius: var(--gd-radius);
	background: #fff;
}
textarea { min-height: 8rem; resize: vertical; }

button, .button, input[type="submit"], input[type="button"], input[type="reset"], .wp-element-button {
	display: inline-block;
	padding: 0.65rem 1.25rem;
	border: 0;
	border-radius: var(--gd-radius);
	background: var(--gd-color-primary);
	color: #fff;
	cursor: pointer;
	text-decoration: none;
	transition: background var(--gd-transition);
}
button:hover, .button:hover, input[type="submit"]:hover, .wp-element-button:hover { background: var(--gd-color-primary-dark); color: #fff; }

/* ==========================================================================
   3. Accessibility
   ========================================================================== */
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important; word-wrap: normal !important;
}
.screen-reader-text:focus {
	background: #fff; clip: auto !important; clip-path: none; color: var(--gd-color-text);
	display: block; font-weight: 600; height: auto; width: auto; left: 8px; top: 8px;
	padding: 1rem 1.5rem; z-index: 100000; text-decoration: none; box-shadow: 0 0 0 2px var(--gd-color-primary);
}
.skip-link:focus { position: fixed !important; }

/* ==========================================================================
   4. Layout: header / nav / footer
   ========================================================================== */
.site { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1 0 auto; padding-block: var(--gd-space-lg); }

.site-header { border-bottom: 1px solid var(--gd-color-border); background: var(--gd-color-bg); position: relative; z-index: 50; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--gd-space-sm); min-height: 72px; }
.site-branding { display: flex; align-items: center; gap: var(--gd-space-xs); }
.site-title { font-size: 1.25rem; font-weight: 700; margin: 0; }
.site-title a { color: var(--gd-color-text); text-decoration: none; }
.site-description { margin: 0; font-size: 0.875rem; color: var(--gd-color-muted); }
.custom-logo { max-height: 56px; width: auto; }

.main-navigation ul { list-style: none; margin: 0; padding: 0; }
.main-navigation a { display: block; padding: 0.5rem 0.75rem; color: var(--gd-color-text); text-decoration: none; }
.main-navigation a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a { color: var(--gd-color-primary); }

.menu-toggle {
	display: inline-flex; align-items: center; gap: 0.5rem;
	background: transparent; color: var(--gd-color-text); padding: 0.5rem;
	border: 1px solid var(--gd-color-border);
}
.menu-toggle:hover { background: var(--gd-color-surface); color: var(--gd-color-text); }
.menu-toggle__bars, .menu-toggle__bars::before, .menu-toggle__bars::after {
	display: block; width: 20px; height: 2px; background: currentColor; position: relative; transition: transform var(--gd-transition);
}
.menu-toggle__bars::before, .menu-toggle__bars::after { content: ""; position: absolute; left: 0; }
.menu-toggle__bars::before { top: -6px; }
.menu-toggle__bars::after { top: 6px; }
.main-navigation.toggled .menu-toggle__bars { background: transparent; }
.main-navigation.toggled .menu-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.main-navigation.toggled .menu-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

/* Mobile nav (default) */
.main-navigation .menu-wrap {
	display: none; position: absolute; top: 100%; left: 0; right: 0;
	background: var(--gd-color-bg); border-bottom: 1px solid var(--gd-color-border);
	padding: var(--gd-space-xs) var(--gd-container-pad, 1rem);
}
.main-navigation.toggled .menu-wrap { display: block; }
.main-navigation .sub-menu { padding-left: var(--gd-space-sm); }

/* Desktop nav */
@media (min-width: 1024px) {
	.menu-toggle { display: none; }
	.main-navigation .menu-wrap { display: block; position: static; padding: 0; border: 0; background: none; }
	.main-navigation .menu-wrap > ul { display: flex; flex-wrap: wrap; gap: 0.25rem; }
	.main-navigation li { position: relative; }
	.main-navigation .sub-menu {
		position: absolute; top: 100%; left: 0; min-width: 220px; padding: 0.5rem 0;
		background: var(--gd-color-bg); border: 1px solid var(--gd-color-border); border-radius: var(--gd-radius);
		box-shadow: 0 8px 24px rgba(0,0,0,0.08);
		opacity: 0; visibility: hidden; transform: translateY(6px);
		transition: opacity var(--gd-transition), transform var(--gd-transition), visibility var(--gd-transition);
	}
	.main-navigation .sub-menu .sub-menu { top: 0; left: 100%; }
	.main-navigation li:hover > .sub-menu,
	.main-navigation li.focus > .sub-menu { opacity: 1; visibility: visible; transform: none; }
}

.site-footer { background: var(--gd-color-surface); border-top: 1px solid var(--gd-color-border); padding-block: var(--gd-space-lg) var(--gd-space-md); font-size: 0.925rem; }
.site-footer .widget-title { font-size: 1rem; }
.site-info { margin-top: var(--gd-space-md); padding-top: var(--gd-space-sm); border-top: 1px solid var(--gd-color-border); color: var(--gd-color-muted); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--gd-space-xs); }
.footer-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--gd-space-sm); }

/* ==========================================================================
   5. Content
   ========================================================================== */
.entry { margin-bottom: var(--gd-space-xl); }
.entry-header { margin-bottom: var(--gd-space-md); }
.entry-title a { color: inherit; text-decoration: none; }
.entry-title a:hover { color: var(--gd-color-primary); }
.entry-meta, .entry-footer { font-size: 0.875rem; color: var(--gd-color-muted); }
.entry-meta > span + span::before { content: "·"; margin: 0 0.4rem; }
.post-thumbnail { margin-bottom: var(--gd-space-md); }
.post-thumbnail img { width: 100%; border-radius: var(--gd-radius); }
.entry-content > *:last-child { margin-bottom: 0; }
.page-header { margin-bottom: var(--gd-space-lg); }
.archive-description { color: var(--gd-color-muted); }

.sticky .entry-title::after { content: " \2605"; color: var(--gd-color-primary); }
.bypostauthor {}

/* WordPress core alignment & captions */
.alignleft  { float: left;  margin: 0 var(--gd-space-md) var(--gd-space-sm) 0; }
.alignright { float: right; margin: 0 0 var(--gd-space-sm) var(--gd-space-md); }
.aligncenter { display: block; margin-inline: auto; }
.alignwide { margin-inline: calc(-1 * var(--gd-space-lg)); max-width: calc(100% + 2 * var(--gd-space-lg)); }
.alignfull { margin-inline: calc(50% - 50vw); max-width: 100vw; width: 100vw; }
@media (max-width: 767px) {
	.alignleft, .alignright { float: none; margin-inline: 0; }
	.alignwide { margin-inline: 0; max-width: 100%; }
}
.wp-caption { max-width: 100%; }
.wp-caption-text, .wp-element-caption, figcaption { font-size: 0.875rem; color: var(--gd-color-muted); text-align: center; margin-top: 0.5rem; }
.gallery { display: grid; gap: var(--gd-space-xs); grid-template-columns: repeat(var(--gallery-cols, 3), minmax(0, 1fr)); }
.gallery-columns-1 { --gallery-cols: 1; } .gallery-columns-2 { --gallery-cols: 2; } .gallery-columns-4 { --gallery-cols: 4; }
.gallery-columns-5 { --gallery-cols: 5; } .gallery-columns-6 { --gallery-cols: 6; }

/* Pagination */
.pagination .nav-links, .post-navigation .nav-links { display: flex; flex-wrap: wrap; gap: var(--gd-space-xs); justify-content: space-between; }
.pagination .page-numbers { padding: 0.4rem 0.8rem; border: 1px solid var(--gd-color-border); border-radius: var(--gd-radius); text-decoration: none; }
.pagination .page-numbers.current { background: var(--gd-color-primary); border-color: var(--gd-color-primary); color: #fff; }

/* Widgets / sidebar */
.widget { margin-bottom: var(--gd-space-lg); }
.widget-title { font-size: 1.1rem; margin-bottom: var(--gd-space-sm); }
.widget ul { padding-left: 1.1rem; }

/* Search form */
.search-form { display: flex; gap: var(--gd-space-xs); }
.search-form label { flex: 1; }

/* Comments */
.comments-area { margin-top: var(--gd-space-xl); }
.comment-list, .comment-list .children { list-style: none; padding-left: 0; }
.comment-list .children { padding-left: var(--gd-space-md); }
.comment-body { padding: var(--gd-space-sm) 0; border-bottom: 1px solid var(--gd-color-border); }
.comment-meta { font-size: 0.875rem; color: var(--gd-color-muted); }
.comment-author .avatar { float: left; margin-right: 0.75rem; border-radius: 50%; }
.comment-form p { margin-bottom: var(--gd-space-sm); }

/* 404 */
.error-404 { text-align: center; padding-block: var(--gd-space-xl); }
.error-404 .search-form { max-width: 480px; margin-inline: auto; }