/*
Theme Name:   MoragaDev
Theme URI:    https://moragadev.com
Description:  Child theme of GeneratePress for MoragaDev. Dark technical design system.
Author:       Ruben J Moraga
Template:     generatepress
Version:      0.1.6
Text Domain:  moragadev
License:      GPL-2.0-or-later
*/

/* ---------- Fonts (self-hosted, OFL) ---------- */
@font-face {
	font-family: "Inter";
	src: url("assets/fonts/inter-var.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "JetBrains Mono";
	src: url("assets/fonts/jetbrains-mono-var.woff2") format("woff2");
	font-weight: 100 800;
	font-style: normal;
	font-display: swap;
}

/* ---------- Design tokens ----------
   GeneratePress global colors (--base, --contrast, --accent…) are set in the
   Customizer; these tokens add what GP does not define. */
:root {
	--md-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--md-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--md-radius: 10px;
	--md-radius-sm: 6px;
	--md-border: 1px solid var(--base-3, #262d36);
	--md-grid-line: rgba(255, 255, 255, 0.035);
	--md-ease: cubic-bezier(.2, .7, .2, 1);
	--md-max: 1240px;
}

/* ---------- Base ---------- */
html { color-scheme: dark; }
html, body { overflow-x: clip; }

/* Landing pages: sections handle their own spacing */
.md-landing .site-content { padding: 0; }
.md-landing .inside-article { padding: 0; }
.md-landing .site-main { margin: 0; }
.md-landing .entry-content { margin-top: 0; }
.md-landing .entry-content > .alignfull:first-child { margin-top: 0; }
body {
	font-family: var(--md-font-sans);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--md-font-sans);
	font-weight: 650;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--contrast, #e6edf3);
}
h1 { font-size: clamp(2.2rem, 4.5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: 1.35rem; }

a { text-underline-offset: 3px; transition: color .15s var(--md-ease); }
::selection { background: var(--accent, #3ddc97); color: var(--base, #0e1116); }

/* Monospace for technical data */
code, kbd, pre, samp,
.md-mono, .md-version, .md-hash {
	font-family: var(--md-font-mono);
	font-feature-settings: "calt" 0;
}
:not(pre) > code {
	background: var(--base-2, #161b22);
	border: var(--md-border);
	border-radius: var(--md-radius-sm);
	padding: .1em .4em;
	font-size: .9em;
}
pre, .wp-block-code {
	background: var(--base-2, #161b22);
	border: var(--md-border);
	border-radius: var(--md-radius);
	padding: 1.1rem 1.25rem;
	overflow-x: auto;
	font-size: .875rem;
	line-height: 1.6;
}
.md-hash { word-break: break-all; font-size: .8rem; color: var(--contrast-2, #9aa4af); }

/* Tables styled as datasheets */
.wp-block-table table, .entry-content table {
	border-collapse: collapse;
	width: 100%;
	font-size: .95rem;
}
.wp-block-table th, .wp-block-table td,
.entry-content th, .entry-content td {
	border: none;
	border-bottom: var(--md-border);
	padding: .65rem .75rem;
	text-align: left;
}
.wp-block-table th, .entry-content th {
	font-family: var(--md-font-mono);
	font-size: .75rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--contrast-2, #9aa4af);
}

/* Buttons */
.wp-block-button__link, .button, button, input[type="submit"] {
	border-radius: var(--md-radius-sm);
	font-weight: 600;
	transition: background-color .15s var(--md-ease), color .15s var(--md-ease), transform .15s var(--md-ease);
}
.wp-block-button__link:hover, .button:hover { transform: translateY(-1px); }
.wp-block-button.is-style-outline .wp-block-button__link {
	border: 1px solid var(--base-3, #262d36);
	color: var(--contrast, #e6edf3);
	background: transparent;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--accent, #3ddc97);
	color: var(--accent, #3ddc97);
}

/* Forms */
input[type="text"], input[type="email"], input[type="url"], input[type="search"],
input[type="tel"], input[type="number"], input[type="password"], textarea, select {
	background: var(--base-2, #161b22);
	border: var(--md-border);
	border-radius: var(--md-radius-sm);
	color: var(--contrast, #e6edf3);
}
input:focus, textarea:focus, select:focus {
	border-color: var(--accent, #3ddc97);
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #3ddc97) 25%, transparent);
}

/* ---------- Header ---------- */
.site-header {
	border-bottom: var(--md-border);
	position: sticky;
	top: 0;
	z-index: 100;
	backdrop-filter: saturate(140%) blur(10px);
	background-color: color-mix(in srgb, var(--base, #0e1116) 85%, transparent) !important;
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 0; position: relative; } }
.main-title a, .site-title a {
	font-family: var(--md-font-mono);
	font-weight: 600;
	letter-spacing: -0.01em;
}
.main-navigation .main-nav ul li a { font-size: .95rem; font-weight: 500; }
.main-navigation .main-nav ul ul {
	background: var(--base-2, #161b22);
	border: var(--md-border);
	border-radius: var(--md-radius);
	padding: .35rem 0;
}

/* ---------- Footer ---------- */
.site-footer { border-top: var(--md-border); }
.site-footer .widget-title, .footer-widgets .widget-title {
	font-family: var(--md-font-mono);
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--contrast-2, #9aa4af);
}
.footer-widgets ul { list-style: none; margin: 0; }
.footer-widgets li { margin-bottom: .4rem; }
.site-info { font-size: .85rem; color: var(--contrast-3, #6b7580); }

/* ---------- Components (used by templates later) ---------- */
.md-card {
	background: var(--base-2, #161b22);
	border: var(--md-border);
	border-radius: var(--md-radius);
	overflow: hidden;
	transition: border-color .2s var(--md-ease), transform .2s var(--md-ease);
}
.md-card:hover { border-color: color-mix(in srgb, var(--accent, #3ddc97) 50%, var(--base-3, #262d36)); transform: translateY(-2px); }

.md-eyebrow, .md-badge {
	font-family: var(--md-font-mono);
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.md-eyebrow { color: var(--accent, #3ddc97); }
.md-badge {
	display: inline-block;
	padding: .2rem .55rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	color: var(--contrast-2, #9aa4af);
}
.md-badge--released { color: var(--accent, #3ddc97); }
.md-badge--beta, .md-badge--in-development { color: var(--accent-2, #ffb547); }

/* Blueprint grid background for hero sections */
.md-grid-bg {
	background-image:
		linear-gradient(var(--md-grid-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--md-grid-line) 1px, transparent 1px);
	background-size: 40px 40px;
}

/* Subtle entrance animation (CSS only) */
@media (prefers-reduced-motion: no-preference) {
	.md-reveal { animation: md-fade-up .6s var(--md-ease) both; }
	@keyframes md-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Footer links ---------- */
.footer-widgets a { text-decoration: none; }
.footer-widgets a:hover { text-decoration: underline; }

/* ---------- Fluent Forms: match the design system ---------- */
.fluentform .ff-btn-submit,
.fluentform .ff-btn-submit:focus {
	background-color: var(--accent, #3ddc97) !important;
	border-color: var(--accent, #3ddc97) !important;
	color: var(--base, #0e1116) !important;
	border-radius: var(--md-radius-sm);
	font-weight: 600;
}
.fluentform .ff-btn-submit:hover {
	background-color: var(--accent-hover, #2bb57a) !important;
	border-color: var(--accent-hover, #2bb57a) !important;
	opacity: 1 !important;
}
.fluentform .ff-el-input--label label { color: var(--contrast, #e6edf3); font-weight: 500; }
.fluentform .ff-el-form-control {
	background-color: var(--base-2, #161b22) !important;
	border-color: var(--base-3, #262d36) !important;
	color: var(--contrast, #e6edf3) !important;
}
.fluentform .ff-el-form-control:focus { border-color: var(--accent, #3ddc97) !important; }
.fluentform .ff-message-success {
	background: var(--base-2, #161b22);
	border: 1px solid var(--accent, #3ddc97);
	color: var(--contrast, #e6edf3);
	border-radius: var(--md-radius);
}

/* ---------- WooCommerce ---------- */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce-page .wc-block-components-button:not(.is-link),
.wc-block-components-button.wc-block-components-checkout-place-order-button {
	background-color: var(--accent, #3ddc97) !important;
	color: var(--base, #0e1116) !important;
	border: 0;
	border-radius: var(--md-radius-sm);
	font-weight: 600;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce button.button.alt:hover,
.woocommerce-page .wc-block-components-button:not(.is-link):hover {
	background-color: var(--accent-hover, #2bb57a) !important;
	color: var(--base, #0e1116) !important;
}
.woocommerce div.product p.price, .woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
	color: var(--contrast, #e6edf3);
	font-family: var(--md-font-mono);
	font-weight: 500;
}
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 1.5rem; border-bottom: var(--md-border); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 0 1.5rem 0 0;
	padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: var(--contrast-2, #9aa4af);
	padding: .75rem 0;
	font-weight: 500;
	border-bottom: 2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--contrast, #e6edf3);
	border-bottom-color: var(--accent, #3ddc97);
}
.woocommerce div.product .woocommerce-tabs .panel h2:first-child { font-size: 1.2rem; }
.woocommerce-product-gallery, .woocommerce img.woocommerce-placeholder,
.woocommerce div.product div.images img {
	background: var(--base-2, #161b22);
	border-radius: var(--md-radius);
}
.woocommerce .woocommerce-breadcrumb, .woocommerce .woocommerce-breadcrumb a { color: var(--contrast-2, #9aa4af); }
.woocommerce .quantity .qty { background: var(--base-2, #161b22); color: var(--contrast, #e6edf3); border: var(--md-border); border-radius: var(--md-radius-sm); }
.woocommerce span.onsale { background: var(--accent-2, #ffb547); color: var(--base, #0e1116); }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	background: var(--base-2, #161b22);
	color: var(--contrast, #e6edf3);
	border-top-color: var(--accent, #3ddc97);
}
.woocommerce ul.products li.product {
	background: var(--base-2, #161b22);
	border: var(--md-border);
	border-radius: var(--md-radius);
	padding: 0 0 1rem;
	overflow: hidden;
}
.woocommerce ul.products li.product a img { margin: 0 0 1rem; }
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .button { margin-left: 1rem; margin-right: 1rem; }
.woocommerce table.shop_table { border-color: var(--base-3, #262d36); border-radius: var(--md-radius); }
.woocommerce table.shop_table td, .woocommerce table.shop_table th { border-color: var(--base-3, #262d36); }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; border: var(--md-border); border-radius: var(--md-radius); }
.woocommerce-MyAccount-navigation li a { display: block; padding: .65rem 1rem; border-bottom: var(--md-border); text-decoration: none; }
.woocommerce-MyAccount-navigation li.is-active a { color: var(--accent, #3ddc97); }
/* Block cart/checkout */
.wc-block-components-text-input input, .wc-block-components-combobox .components-combobox-control input,
.wc-blocks-components-select .wc-blocks-components-select__select {
	background-color: var(--base-2, #161b22) !important;
	color: var(--contrast, #e6edf3) !important;
	border-color: var(--base-3, #262d36) !important;
}
.wc-block-components-text-input label, .wc-blocks-components-select__label { color: var(--contrast-2, #9aa4af) !important; }

/* ---------- Content blocks ---------- */
.wp-block-column.md-card { padding: 1.25rem 1.5rem; }
.wp-block-column.md-card h3 { margin-top: 0; font-size: 1.1rem; }
.wp-block-column.md-card p:last-child { margin-bottom: 0; }
.wp-block-details { border-bottom: var(--md-border); padding: .9rem 0; }
.wp-block-details summary { cursor: pointer; font-weight: 600; }
.wp-block-details > *:not(summary) { margin-top: .6rem; color: var(--contrast-2, #9aa4af); }
.md-notice { padding: .8rem 1rem; border-radius: var(--md-radius-sm); border: var(--md-border); }
.md-notice--warn { border-color: var(--accent-2, #ffb547); color: var(--accent-2, #ffb547); }

/* ---------- Breadcrumbs ---------- */
.rank-math-breadcrumb { font-size: .82rem; color: var(--contrast-3, #6b7580); margin: 0 0 1.25rem; padding-top: 1.5rem; }
.rank-math-breadcrumb p { margin: 0; }
.rank-math-breadcrumb a { color: var(--contrast-2, #9aa4af); text-decoration: none; }
.rank-math-breadcrumb a:hover { color: var(--accent, #3ddc97); }
.rank-math-breadcrumb .separator { margin: 0 .4rem; opacity: .6; }

/* WooCommerce fixes */
.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:focus,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { background: transparent !important; outline-offset: 4px; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: transparent; }
.woocommerce div.product p.stock.in-stock { color: var(--accent, #3ddc97); }
.woocommerce div.product p.stock.out-of-stock { color: #ff6b6b; }
.woocommerce .product_meta { font-size: .9rem; color: var(--contrast-2, #9aa4af); }