/**
 * SketchWeb Brand Override
 * Design philosophy: Steve Jobs — "Simplicity is the ultimate sophistication."
 * Brand: sketchweb.net — coral #D37975, charcoal #3A4247, white space as a design element.
 * SEO: clear visual hierarchy, readable typography, accessible contrast, structured content.
 *
 * NOTE: Google Fonts (Work Sans) is loaded separately via wp_enqueue_style in functions.php.
 * This file only handles design tokens and component-level overrides.
 */

/* ─────────────────────────────────────────────
   1. CSS CUSTOM PROPERTIES — brand tokens
   Defined first so every downstream rule can
   reference --sw-* variables.
───────────────────────────────────────────── */
:root {
	/* SketchWeb brand palette */
	--sw-coral:        #D37975;
	--sw-coral-dark:   #B96360;
	--sw-coral-light:  #F6E4E3;
	--sw-coral-xlight: #fdf4f4;
	--sw-charcoal:     #3A4247;
	--sw-charcoal-dk:  #2c3338;
	--sw-gray-mid:     #6b7280;
	--sw-gray-light:   #e5e7eb;
	--sw-gray-xlight:  #f7f7f7;
	--sw-white:        #ffffff;
	--sw-ink:          #1a1a1a;

	/* Map brand palette onto Newspack theme tokens */
	--newspack-theme-color-primary:                 #D37975;
	--newspack-theme-color-primary-variation:       #B96360;
	--newspack-theme-color-secondary:               #3A4247;
	--newspack-theme-color-secondary-variation:     #2c3338;
	--newspack-theme-color-highlight:               #F6E4E3;
	--newspack-theme-color-primary-darken-5:        #c06967;
	--newspack-theme-color-primary-darken-10:       #ad5f5d;
	--newspack-theme-color-primary-against-white:   #B96360;
	--newspack-theme-color-secondary-against-white: #3A4247;
	--newspack-theme-color-against-primary:         #ffffff;
	--newspack-theme-color-against-secondary:       #ffffff;
	--newspack-theme-color-bg-body:                 #ffffff;
	--newspack-theme-color-bg-input:                #ffffff;
	--newspack-theme-color-bg-light:                #f7f7f7;
	--newspack-theme-color-bg-button-hover:         #B96360;
	--newspack-theme-color-bg-pre:                  #f7f7f7;
	--newspack-theme-color-bg-dark:                 #3A4247;
	--newspack-theme-color-bg-dark-lighten-5:       #46505a;
	--newspack-theme-color-bg-dark-darken-5:        #2c3338;
	--newspack-theme-color-text-main:               #1a1a1a;
	--newspack-theme-color-text-light:              #6b7280;
	--newspack-theme-color-text-hover:              #B96360;
	--newspack-theme-color-link:                    #D37975;
	--newspack-theme-color-link-hover:              #B96360;
	--newspack-theme-color-border:                  #e5e7eb;
	--newspack-theme-color-border-light:            #f3f4f6;
	--newspack-theme-color-alert-red:               #dc2626;
	--newspack-theme-color-alert-green:             #16a34a;
	--newspack-theme-color-alert-yellow:            #d97706;

	/* Typography tokens */
	--newspack-theme-font-body:    "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--newspack-theme-font-heading: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--newspack-theme-font-line-height-body:    1.75;
	--newspack-theme-font-line-height-heading: 1.15;

	/* Shared design tokens */
	--sw-radius:       8px;
	--sw-radius-lg:    16px;
	--sw-shadow:       0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.05);
	--sw-shadow-hover: 0 4px 16px rgba(211,121,117,.2), 0 8px 32px rgba(0,0,0,.08);
	--sw-transition:   0.18s cubic-bezier(0.4,0,0.2,1);
}

/* ─────────────────────────────────────────────
   2. BASE STYLES
───────────────────────────────────────────── */
html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	scroll-behavior: smooth;
}

body {
	font-family: var(--newspack-theme-font-body);
	color: var(--sw-ink);
	background-color: var(--sw-white);
}

/* Focus ring — coral, accessible */
:focus-visible {
	outline: 2px solid var(--sw-coral);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ─────────────────────────────────────────────
   3. TYPOGRAPHY
   Scope heading overrides; avoid global p rules
   that break card/sidebar/grid layouts.
───────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--newspack-theme-font-heading);
	letter-spacing: -0.02em;
	color: var(--sw-ink);
}

h1 { font-weight: 700; }
h2 { font-weight: 600; }
h3 { font-weight: 600; }
h4 { font-weight: 500; }
h5 { font-weight: 500; }
h6 {
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* Links — coral, underline only on hover */
a {
	color: var(--sw-coral);
	transition: color var(--sw-transition);
}
a:hover,
a:focus {
	color: var(--sw-coral-dark);
}

/* Article body text — scoped max-width for readability; does NOT affect grid/card paragraphs */
.single .entry-content p,
.page .entry-content p {
	max-width: 68ch;
}

/* Widen blocks that should escape the content column */
.single .entry-content .alignwide,
.single .entry-content .alignfull,
.single .entry-content figure.alignwide,
.single .entry-content figure.alignfull,
.page .entry-content .alignwide,
.page .entry-content .alignfull {
	max-width: none !important;
}

/* Code */
code, kbd {
	font-size: 0.875em;
	background: var(--sw-gray-xlight);
	border-radius: 4px;
	padding: 0.1em 0.35em;
}

pre {
	background: var(--sw-gray-xlight);
	border-left: 3px solid var(--sw-coral);
	border-radius: 0 var(--sw-radius) var(--sw-radius) 0;
	padding: 1.25rem 1.5rem;
	overflow-x: auto;
	font-size: 0.875em;
}

pre code {
	background: none;
	padding: 0;
}

/* Blockquote */
blockquote {
	border-left: 4px solid var(--sw-coral) !important;
	background: var(--sw-coral-xlight) !important;
	padding: 1.25rem 1.5rem !important;
	border-radius: 0 var(--sw-radius) var(--sw-radius) 0 !important;
	margin: 2rem 0 !important;
	font-style: normal !important;
	color: var(--sw-charcoal) !important;
}

blockquote p { margin-bottom: 0; }

blockquote cite {
	display: block;
	font-size: 0.8125rem;
	color: var(--sw-gray-mid);
	margin-top: 0.5rem;
}

/* ─────────────────────────────────────────────
   4. SITE HEADER
───────────────────────────────────────────── */
.site-header {
	background-color: #ffffff !important;
	border-bottom: 1px solid var(--sw-gray-light) !important;
	box-shadow: none !important;
}

.top-header-contain {
	background: var(--sw-gray-xlight) !important;
	border-bottom: 1px solid var(--sw-gray-light) !important;
}

.middle-header-contain {
	background: #ffffff !important;
}

.bottom-header-contain {
	background: #ffffff !important;
	border-top: 1px solid var(--sw-gray-light);
}

/* Site title */
.site-title a,
.site-title a:link,
.site-title a:visited {
	color: var(--sw-charcoal) !important;
	font-family: var(--newspack-theme-font-heading);
	font-weight: 700;
	letter-spacing: -0.03em;
}

.site-title a:hover {
	color: var(--sw-coral) !important;
	text-decoration: none;
}

.site-description {
	color: var(--sw-gray-mid) !important;
	font-style: normal !important;
	font-size: 0.75rem !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ─────────────────────────────────────────────
   5. NAVIGATION
───────────────────────────────────────────── */
.main-menu,
#site-navigation {
	background: transparent !important;
}

/* Primary nav items */
.main-menu > li > a,
.nav1 .main-menu > li > a {
	font-family: var(--newspack-theme-font-heading);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--sw-charcoal) !important;
	transition: color var(--sw-transition) !important;
}

.main-menu > li > a:hover,
.nav1 .main-menu > li > a:hover {
	color: var(--sw-coral) !important;
	text-decoration: none;
}

/* Active page indicator — thin coral underline */
.main-menu > li.current-menu-item > a,
.main-menu > li.current-menu-ancestor > a {
	color: var(--sw-coral) !important;
	border-bottom: 2px solid var(--sw-coral);
}

/* Dropdown */
.main-menu .sub-menu {
	background: #ffffff !important;
	border: 1px solid var(--sw-gray-light) !important;
	border-radius: var(--sw-radius) !important;
	box-shadow: var(--sw-shadow) !important;
	padding: 0.375rem 0 !important;
}

.main-menu .sub-menu li a {
	font-size: 0.8125rem !important;
	color: var(--sw-charcoal) !important;
	padding: 0.5rem 1rem !important;
}

.main-menu .sub-menu li a:hover {
	background: var(--sw-coral-xlight) !important;
	color: var(--sw-coral-dark) !important;
}

/* Secondary / tertiary nav text */
.nav2 a, .nav3 a {
	font-size: 0.75rem !important;
	color: var(--sw-gray-mid) !important;
}

.nav2 a:hover, .nav3 a:hover {
	color: var(--sw-coral) !important;
}

/* Mobile toggle buttons — scope tightly to avoid breaking all buttons */
.mobile-menu-toggle,
.desktop-menu-toggle,
button.mobile-menu-toggle,
button.desktop-menu-toggle {
	background: transparent !important;
	border: none !important;
	color: var(--sw-charcoal) !important;
	box-shadow: none !important;
}

.mobile-menu-toggle:hover,
.desktop-menu-toggle:hover {
	color: var(--sw-coral) !important;
	background: transparent !important;
	transform: none !important;
}

/* Mobile / desktop sidebars */
.mobile-sidebar,
.desktop-sidebar {
	background: var(--sw-charcoal) !important;
}

.mobile-sidebar a,
.mobile-sidebar .nav1 .main-menu > li > a,
.desktop-sidebar a {
	color: #e2e8f0 !important;
}

.mobile-sidebar a:hover,
.desktop-sidebar a:hover {
	color: var(--sw-coral-light) !important;
}

/* ─────────────────────────────────────────────
   6. BUTTONS
   Scope to actual CTA / submit buttons only —
   not to nav toggles or icon buttons.
───────────────────────────────────────────── */
.wp-block-button__link,
input[type="submit"],
.button.button-primary,
.woocommerce button.button,
.comment-form input[type="submit"],
.search-form .search-submit {
	font-family: var(--newspack-theme-font-body) !important;
	font-weight: 500 !important;
	font-size: 0.875rem !important;
	letter-spacing: 0.02em !important;
	background-color: var(--sw-coral) !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: var(--sw-radius) !important;
	padding: 0.625rem 1.25rem !important;
	cursor: pointer !important;
	transition: background-color var(--sw-transition), box-shadow var(--sw-transition) !important;
}

.wp-block-button__link:hover,
input[type="submit"]:hover,
.button.button-primary:hover,
.comment-form input[type="submit"]:hover,
.search-form .search-submit:hover {
	background-color: var(--sw-coral-dark) !important;
	color: #ffffff !important;
	box-shadow: 0 4px 12px rgba(211,121,117,.3) !important;
}

/* Outline button variant */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent !important;
	color: var(--sw-coral) !important;
	border: 2px solid var(--sw-coral) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--sw-coral) !important;
	color: #ffffff !important;
}

/* ─────────────────────────────────────────────
   7. FORMS — scoped to form containers only
───────────────────────────────────────────── */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
.search-form .search-field,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
#respond input[type="text"],
#respond input[type="email"],
#respond input[type="url"],
#respond textarea {
	font-family: var(--newspack-theme-font-body) !important;
	font-size: 0.9375rem !important;
	color: var(--sw-ink) !important;
	background: #ffffff !important;
	border: 1.5px solid var(--sw-gray-light) !important;
	border-radius: var(--sw-radius) !important;
	padding: 0.625rem 0.875rem !important;
	transition: border-color var(--sw-transition), box-shadow var(--sw-transition) !important;
	outline: none !important;
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form textarea:focus,
.search-form .search-field:focus,
#respond input:focus,
#respond textarea:focus {
	border-color: var(--sw-coral) !important;
	box-shadow: 0 0 0 3px rgba(211,121,117,.15) !important;
}

/* ─────────────────────────────────────────────
   8. ARTICLE CARDS — archive / home / blog
───────────────────────────────────────────── */
.entry-title a {
	color: var(--sw-ink) !important;
	font-weight: 600;
	text-decoration: none;
}

.entry-title a:hover {
	color: var(--sw-coral) !important;
	text-decoration: none;
}

/* Post thumbnail images — rounded corners */
.post-thumbnail,
.entry-header .post-thumbnail {
	border-radius: var(--sw-radius) !important;
	overflow: hidden;
}

.post-thumbnail img,
.wp-post-image {
	border-radius: var(--sw-radius) !important;
	display: block;
	width: 100%;
	height: auto;
}

/* Meta info */
.entry-meta,
.entry-footer,
.posted-on,
.byline {
	font-size: 0.75rem !important;
	color: var(--sw-gray-mid) !important;
}

/* Category pill labels */
.cat-links a,
.entry-header .cat-links a {
	display: inline-block;
	background: var(--sw-coral-light) !important;
	color: var(--sw-coral-dark) !important;
	font-size: 0.6875rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	padding: 0.2em 0.65em !important;
	border-radius: 100px !important;
	text-decoration: none !important;
	transition: background var(--sw-transition) !important;
}

.cat-links a:hover {
	background: var(--sw-coral) !important;
	color: #ffffff !important;
	text-decoration: none !important;
}

/* Read more */
.more-link,
a.more-link {
	font-weight: 600 !important;
	font-size: 0.8125rem !important;
	color: var(--sw-coral) !important;
	text-decoration: none !important;
}

.more-link:hover,
a.more-link:hover {
	color: var(--sw-coral-dark) !important;
	text-decoration: none !important;
}

/* ─────────────────────────────────────────────
   9. SINGLE POST
───────────────────────────────────────────── */
.single .entry-content {
	font-family: var(--newspack-theme-font-body);
	font-size: 1.0625rem;
	line-height: 1.8;
	color: #1f2937;
}

.single .entry-header .entry-title {
	font-size: clamp(1.75rem, 3vw + 1rem, 3rem) !important;
	font-weight: 700 !important;
	letter-spacing: -0.03em !important;
	line-height: 1.1 !important;
}

/* Author bio card */
.author-bio {
	background: var(--sw-gray-xlight) !important;
	border-radius: var(--sw-radius-lg) !important;
	padding: 1.5rem !important;
	border: 1px solid var(--sw-gray-light) !important;
}

/* Prev/next navigation */
.post-navigation a {
	color: var(--sw-charcoal) !important;
	font-weight: 500;
}

.post-navigation a:hover {
	color: var(--sw-coral) !important;
	text-decoration: none;
}

/* Featured image */
.single .post-thumbnail {
	border-radius: var(--sw-radius-lg) !important;
	overflow: hidden;
	margin-bottom: 2.5rem;
}

.single .post-thumbnail img {
	width: 100%;
	height: auto;
	display: block;
}

/* ─────────────────────────────────────────────
   10. BREADCRUMBS — SEO structural signal
───────────────────────────────────────────── */
.site-breadcrumb,
.yoast-breadcrumb {
	font-size: 0.75rem !important;
	padding: 0.5rem 0 !important;
}

.site-breadcrumb a,
.yoast-breadcrumb a {
	color: var(--sw-gray-mid) !important;
}

.site-breadcrumb a:hover,
.yoast-breadcrumb a:hover {
	color: var(--sw-coral) !important;
	text-decoration: underline !important;
}

/* ─────────────────────────────────────────────
   11. FOOTER
───────────────────────────────────────────── */
.site-footer {
	background-color: var(--sw-charcoal) !important;
	color: #cbd5e1 !important;
}

.site-footer a,
.site-footer a:link,
.site-footer a:visited {
	color: #94a3b8 !important;
}

.site-footer a:hover {
	color: var(--sw-coral-light) !important;
	text-decoration: none;
}

.footer-branding .site-title,
.footer-branding .site-title a {
	color: #ffffff !important;
}

.site-info {
	background: var(--sw-charcoal-dk) !important;
	font-size: 0.75rem !important;
	color: #64748b !important;
}

.site-info a {
	color: #64748b !important;
}

.site-info a:hover {
	color: var(--sw-coral) !important;
}

/* Footer widget titles */
.site-footer .widget-title,
.footer-widgets .widget-title {
	font-size: 0.6875rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
	color: #94a3b8 !important;
	margin-bottom: 1rem !important;
	border-bottom: none !important;
}

/* ─────────────────────────────────────────────
   12. SIDEBAR WIDGETS
───────────────────────────────────────────── */
.widget-title {
	font-size: 0.6875rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
	color: var(--sw-gray-mid) !important;
	border-bottom: 2px solid var(--sw-coral) !important;
	padding-bottom: 0.5rem !important;
	margin-bottom: 1rem !important;
}

/* ─────────────────────────────────────────────
   13. PAGINATION
───────────────────────────────────────────── */
.pagination .page-numbers,
.nav-links .page-numbers {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--sw-charcoal);
	padding: 0.5rem 0.875rem;
	border-radius: var(--sw-radius);
	border: 1.5px solid var(--sw-gray-light);
	transition: all var(--sw-transition);
	text-decoration: none;
}

.pagination .page-numbers:hover,
.nav-links .page-numbers:hover {
	border-color: var(--sw-coral);
	color: var(--sw-coral);
}

.pagination .page-numbers.current,
.nav-links .page-numbers.current {
	background: var(--sw-coral) !important;
	color: #ffffff !important;
	border-color: var(--sw-coral) !important;
}

/* ─────────────────────────────────────────────
   14. SEARCH
───────────────────────────────────────────── */
.search-field:focus {
	border-color: var(--sw-coral) !important;
	box-shadow: 0 0 0 3px rgba(211,121,117,.15) !important;
	outline: none !important;
}

mark,
.search-results mark {
	background: var(--sw-coral-light);
	color: var(--sw-charcoal);
	padding: 0.05em 0.25em;
	border-radius: 2px;
}

/* ─────────────────────────────────────────────
   15. HIGHLIGHT / TOPIC BAR
───────────────────────────────────────────── */
.highlight-menu-contain {
	background: var(--sw-coral) !important;
}

.highlight-menu a {
	color: #ffffff !important;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}

.highlight-menu a:hover {
	color: var(--sw-coral-light) !important;
}

/* ─────────────────────────────────────────────
   16. TABLES
───────────────────────────────────────────── */
table {
	border-collapse: collapse;
	width: 100%;
	font-size: 0.875rem;
}

th {
	background: var(--sw-gray-xlight);
	font-weight: 600;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--sw-charcoal);
	padding: 0.75rem 1rem;
	text-align: left;
	border-bottom: 2px solid var(--sw-gray-light);
}

td {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--sw-gray-light);
}

tr:last-child td { border-bottom: none; }

/* ─────────────────────────────────────────────
   17. HR
───────────────────────────────────────────── */
hr {
	border: none;
	border-top: 1px solid var(--sw-gray-light);
	margin: 2.5rem 0;
}

/* ─────────────────────────────────────────────
   18. COMMENTS
───────────────────────────────────────────── */
#comments {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--sw-gray-light);
}

.comment-list .comment-author b {
	font-weight: 600;
	color: var(--sw-charcoal);
}

.comment-list .comment-meta a {
	color: var(--sw-gray-mid) !important;
	font-size: 0.75rem;
}

.comment-reply-link {
	font-size: 0.75rem;
	color: var(--sw-coral) !important;
	font-weight: 500;
}

#respond .comment-reply-title {
	font-size: 1.25rem;
	font-weight: 600;
}

/* ─────────────────────────────────────────────
   19. GUTENBERG BLOCKS
───────────────────────────────────────────── */
.wp-block-pullquote {
	border-top: 4px solid var(--sw-coral) !important;
	border-bottom: 4px solid var(--sw-coral) !important;
}

.wp-block-pullquote blockquote p {
	font-weight: 500;
	color: var(--sw-charcoal);
}

.wp-block-separator {
	border-color: var(--sw-coral) !important;
	border-width: 2px !important;
	max-width: 3rem;
}

.tagcloud a {
	background: var(--sw-gray-xlight) !important;
	color: var(--sw-charcoal) !important;
	border-radius: 100px !important;
	padding: 0.25em 0.75em !important;
	font-size: 0.8125rem !important;
	font-weight: 500 !important;
	border: 1.5px solid var(--sw-gray-light) !important;
	text-decoration: none !important;
	display: inline-block;
	transition: all var(--sw-transition);
}

.tagcloud a:hover {
	background: var(--sw-coral-light) !important;
	color: var(--sw-coral-dark) !important;
	border-color: var(--sw-coral) !important;
}

/* ─────────────────────────────────────────────
   20. SKIP LINK (accessibility + SEO)
───────────────────────────────────────────── */
.skip-link {
	position: absolute;
	top: -100%;
	left: 1rem;
	background: var(--sw-coral);
	color: #ffffff !important;
	font-weight: 600;
	font-size: 0.875rem;
	padding: 0.5rem 1rem;
	border-radius: 0 0 var(--sw-radius) var(--sw-radius);
	z-index: 9999;
	transition: top 0.15s;
	text-decoration: none;
}

.skip-link:focus {
	top: 0;
}

/* ─────────────────────────────────────────────
   21. 404 PAGE
───────────────────────────────────────────── */
.error-404 .entry-title {
	font-size: clamp(4rem, 10vw, 10rem) !important;
	color: var(--sw-coral-light) !important;
	font-weight: 700 !important;
	line-height: 1;
}

/* ─────────────────────────────────────────────
   22. RESPONSIVE REFINEMENTS
───────────────────────────────────────────── */
@media (max-width: 767px) {
	.single .entry-header .entry-title {
		font-size: 1.625rem !important;
	}

	.post-thumbnail {
		border-radius: var(--sw-radius) !important;
	}
}