/*
Theme Name:   GorbLab Engineering
Theme URI:    https://gorblab.pro
Description:  Child theme of GeneratePress for GorbLab Engineering - a compact, fast, PCB-inspired corporate site. Light grey surfaces, dark blue type, solder-mask green accent, restrained black / red / gold detailing.
Author:       Andrii Tereshchenko
Template:     generatepress
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  gorblab
*/

/* --- 1. Design tokens --- */
:root {
	--gl-bg: #f3f5f7;
	--gl-surface: #ffffff;
	--gl-surface-alt: #eceff3;
	--gl-ink-surface: #0d1b2e;
	--gl-ink: #10233d;
	--gl-ink-soft: #4a5d77;
	--gl-ink-faint: #7787a0;
	--gl-on-dark: #e8edf3;
	--gl-on-dark-soft: #9fb0c4;
	--gl-accent: #0e8a4f;
	--gl-accent-dark: #0a6b3d;
	--gl-accent-tint: #e6f4ec;
	--gl-gold: #c9a227;
	--gl-red: #c0392b;
	--gl-line: #dde3ea;
	--gl-line-strong: #c4cedb;
	--gl-radius: 4px;
	--gl-radius-lg: 8px;
	--gl-gap: 1.5rem;
	--gl-section-y: clamp(3.5rem, 7vw, 6rem);
	--gl-ease: 150ms ease;
}

/* --- 2. Base --- */
body { background-color: var(--gl-bg); color: var(--gl-ink); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { color: var(--gl-ink); letter-spacing: -0.015em; line-height: 1.2; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.15rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); font-weight: 700; }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.3rem); font-weight: 650; }
p { color: var(--gl-ink-soft); }
a { color: var(--gl-accent-dark); text-underline-offset: 2px; }
a:hover, a:focus { color: var(--gl-accent); }
:focus-visible { outline: 2px solid var(--gl-accent); outline-offset: 2px; }
.gl-lead { font-size: clamp(1.03rem, 1.5vw, 1.15rem); line-height: 1.65; color: var(--gl-ink-soft); max-width: 62ch; }

.gl-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gl-accent-dark); margin-bottom: 0.85rem; }
.gl-eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--gl-accent); }

/* --- 3. Sections --- */
.gl-section { padding-block: var(--gl-section-y); }
.gl-section--tint { background: var(--gl-surface-alt); }
.gl-section--white { background: var(--gl-surface); }
.gl-section--dark { background: var(--gl-ink-surface); }
.gl-section--dark, .gl-section--dark p, .gl-section--dark li { color: var(--gl-on-dark-soft); }
.gl-section--dark h1, .gl-section--dark h2, .gl-section--dark h3 { color: var(--gl-on-dark); }
.gl-section__head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3rem); }

/* --- 4. Buttons --- */
.gl-btn, .wp-block-button__link.gl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.78rem 1.5rem; border-radius: var(--gl-radius); font-size: 0.94rem; font-weight: 600; line-height: 1.2; text-decoration: none; border: 1px solid transparent; transition: background-color var(--gl-ease), border-color var(--gl-ease), color var(--gl-ease); }
.gl-btn--primary, .wp-block-button__link.gl-btn--primary { background: var(--gl-accent); border-color: var(--gl-accent); color: #fff; }
.gl-btn--primary:hover, .gl-btn--primary:focus { background: var(--gl-accent-dark); border-color: var(--gl-accent-dark); color: #fff; }
.gl-btn--ghost, .wp-block-button__link.gl-btn--ghost { background: transparent; border-color: var(--gl-line-strong); color: var(--gl-ink); }
.gl-btn--ghost:hover, .gl-btn--ghost:focus { border-color: var(--gl-ink); background: rgba(16, 35, 61, 0.04); }
.gl-section--dark .gl-btn--ghost { border-color: rgba(232, 237, 243, 0.32); color: var(--gl-on-dark); }
.gl-section--dark .gl-btn--ghost:hover { border-color: var(--gl-on-dark); background: rgba(232, 237, 243, 0.08); }

/* --- 5. Hero --- */
.gl-hero { position: relative; background: var(--gl-ink-surface); padding-block: clamp(4rem, 9vw, 7rem); overflow: hidden; }
.gl-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(14,138,79,0.14) 1px, transparent 1px), linear-gradient(90deg, rgba(14,138,79,0.14) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse 70% 80% at 78% 30%, #000 0%, transparent 72%); mask-image: radial-gradient(ellipse 70% 80% at 78% 30%, #000 0%, transparent 72%); pointer-events: none; }
.gl-hero > * { position: relative; z-index: 1; }
.gl-hero h1 { color: #fff; max-width: 18ch; }
.gl-hero__eyebrow { color: var(--gl-gold); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 1rem; }
.gl-hero__descriptor { color: var(--gl-accent); font-size: clamp(0.95rem, 1.6vw, 1.08rem); font-weight: 600; margin-block: 0.9rem 1.1rem; }
.gl-hero__intro { color: var(--gl-on-dark-soft); font-size: clamp(1rem, 1.5vw, 1.11rem); line-height: 1.68; max-width: 58ch; }
.gl-hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }

/* --- 6. Service cards --- */
.gl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); gap: var(--gl-gap); }
.gl-card { background: var(--gl-surface); border: 1px solid var(--gl-line); border-radius: var(--gl-radius-lg); padding: 1.7rem 1.6rem; position: relative; transition: border-color var(--gl-ease), box-shadow var(--gl-ease); }
.gl-card::before { content: ""; position: absolute; inset: -1px -1px auto -1px; height: 3px; background: var(--gl-accent); border-radius: var(--gl-radius-lg) var(--gl-radius-lg) 0 0; }
.gl-card:hover { border-color: var(--gl-line-strong); box-shadow: 0 2px 14px rgba(16, 35, 61, 0.07); }
.gl-card h3 { margin: 0 0 0.7rem; }
.gl-card ul { margin: 0; padding: 0; list-style: none; }
.gl-card li { position: relative; padding-left: 1.15rem; margin-bottom: 0.5rem; font-size: 0.93rem; line-height: 1.55; color: var(--gl-ink-soft); }
.gl-card li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; border-radius: 1px; background: var(--gl-accent); }

/* --- 7. Projects --- */
.gl-projects { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--gl-gap); }
.gl-project { background: var(--gl-surface); border: 1px solid var(--gl-line); border-radius: var(--gl-radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.gl-project__media { aspect-ratio: 16 / 10; background: var(--gl-surface-alt); overflow: hidden; }
.gl-project__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gl-project__body { padding: 1.4rem 1.5rem 1.6rem; }
.gl-project h3 { margin: 0 0 0.55rem; font-size: 1.12rem; }
.gl-project p { font-size: 0.93rem; line-height: 1.6; margin-bottom: 1rem; }
.gl-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.gl-tag { display: inline-block; padding: 0.24rem 0.6rem; font-size: 0.74rem; font-weight: 600; color: var(--gl-accent-dark); background: var(--gl-accent-tint); border-radius: 3px; }

/* --- 8. Technologies --- */
.gl-tech { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.gl-tech__item { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.62rem 1.05rem; background: var(--gl-surface); border: 1px solid var(--gl-line); border-radius: var(--gl-radius); font-size: 0.9rem; font-weight: 600; color: var(--gl-ink); }
.gl-tech__item::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gl-gold); flex: none; }

/* --- 9. About --- */
.gl-about { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
.gl-about__figure { border: 1px solid var(--gl-line); border-radius: var(--gl-radius-lg); overflow: hidden; background: var(--gl-surface); }
.gl-about__figure img { display: block; width: 100%; height: auto; }
.gl-facts { list-style: none; margin: 1.6rem 0 0; padding: 0; border-top: 1px solid var(--gl-line); }
.gl-facts li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.72rem 0; border-bottom: 1px solid var(--gl-line); font-size: 0.9rem; }
.gl-facts b { color: var(--gl-ink); font-weight: 600; }
.gl-facts span { color: var(--gl-ink-soft); text-align: right; }

/* --- 10. Contact --- */
.gl-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
.gl-contact__details { list-style: none; margin: 0; padding: 0; }
.gl-contact__details li { padding: 0.85rem 0; border-bottom: 1px solid var(--gl-line); }
.gl-contact__label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gl-ink-faint); margin-bottom: 0.25rem; }
.gl-form input[type="text"], .gl-form input[type="email"], .gl-form textarea, .wpforms-field input[type="text"], .wpforms-field input[type="email"], .wpforms-field textarea { width: 100%; padding: 0.72rem 0.9rem; border: 1px solid var(--gl-line-strong); border-radius: var(--gl-radius); background: var(--gl-surface); color: var(--gl-ink); font-size: 0.95rem; }
.gl-form input:focus, .gl-form textarea:focus, .wpforms-field input:focus, .wpforms-field textarea:focus { border-color: var(--gl-accent); outline: none; }
.gl-form button[type="submit"], .wpforms-submit { background: var(--gl-accent) !important; border: 1px solid var(--gl-accent) !important; color: #fff !important; padding: 0.78rem 1.6rem !important; border-radius: var(--gl-radius) !important; font-weight: 600 !important; cursor: pointer; }
.gl-form button[type="submit"]:hover, .wpforms-submit:hover { background: var(--gl-accent-dark) !important; border-color: var(--gl-accent-dark) !important; }

/* --- 11. Blog + video embeds --- */
.separate-containers .site-main > article { background: var(--gl-surface); border: 1px solid var(--gl-line); border-radius: var(--gl-radius-lg); box-shadow: none; }
.entry-meta { font-size: 0.82rem; color: var(--gl-ink-faint); }
.entry-title { font-size: clamp(1.2rem, 2.2vw, 1.55rem); }
.wp-block-embed.is-type-video .wp-block-embed__wrapper { position: relative; }
.wp-block-embed.is-type-video .wp-block-embed__wrapper::before { content: ""; display: block; padding-top: 56.25%; }
.wp-block-embed.is-type-video .wp-block-embed__wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--gl-radius); }

/* --- 12. Header / footer --- */
.site-header { background: var(--gl-surface); border-bottom: 1px solid var(--gl-line); }
.main-navigation .main-nav ul li a { font-size: 0.92rem; font-weight: 550; color: var(--gl-ink); }
.main-navigation .main-nav ul li:hover > a, .main-navigation .main-nav ul li.current-menu-item > a { color: var(--gl-accent-dark); background: transparent; }
.main-navigation .main-nav ul li.current-menu-item > a { box-shadow: inset 0 -2px 0 var(--gl-accent); }
.main-navigation .main-nav ul li.gl-nav-cta > a { background: var(--gl-accent); color: #fff; border-radius: var(--gl-radius); padding-inline: 1.05rem; margin-left: 0.5rem; box-shadow: none; }
.main-navigation .main-nav ul li.gl-nav-cta:hover > a { background: var(--gl-accent-dark); color: #fff; }

.site-footer, .site-info { background: var(--gl-ink-surface); color: var(--gl-on-dark-soft); font-size: 0.87rem; }
.site-footer a, .site-info a { color: var(--gl-on-dark); }
.site-footer a:hover, .site-info a:hover { color: var(--gl-accent); }

/* --- 13. Responsive + a11y --- */
@media (max-width: 768px) { .gl-about, .gl-contact { grid-template-columns: 1fr; } }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }
@media print { .site-header, .site-footer, .gl-hero::before { display: none; } body { background: #fff; color: #000; } }


/* --- 14. Block-editor bridges ---------------------------------------------
   The page content is built from core blocks so the client can edit it in the
   normal editor. These rules stop WordPress flow margins from fighting the
   grids above, and map GeneratePress full-width groups onto the sections. */

.gl-cards > *, .gl-projects > *, .gl-tech > *, .gl-about > *, .gl-contact > * { margin-block: 0; }
.gl-cards > .wp-block-group, .gl-projects > .wp-block-group { height: 100%; }

.gl-card > *:first-child, .gl-project__body > *:first-child { margin-top: 0; }
.gl-card > *:last-child, .gl-project__body > *:last-child { margin-bottom: 0; }
.gl-card .wp-block-list { margin: 0; padding: 0; list-style: none; }

/* Full-width section groups keep their inner content on the theme grid. */
.gl-section.alignfull > .wp-block-group__inner-container,
.gl-hero.alignfull > .wp-block-group__inner-container { padding-inline: 20px; }

/* Buttons written as core button blocks. */
.wp-block-button.gl-btn--primary .wp-block-button__link { background: var(--gl-accent); border: 1px solid var(--gl-accent); color: #fff; border-radius: var(--gl-radius); padding: 0.78rem 1.5rem; font-size: 0.94rem; font-weight: 600; }
.wp-block-button.gl-btn--primary .wp-block-button__link:hover { background: var(--gl-accent-dark); border-color: var(--gl-accent-dark); }
.wp-block-button.gl-btn--ghost .wp-block-button__link { background: transparent; border: 1px solid var(--gl-line-strong); color: var(--gl-ink); border-radius: var(--gl-radius); padding: 0.78rem 1.5rem; font-size: 0.94rem; font-weight: 600; }
.gl-hero .wp-block-button.gl-btn--ghost .wp-block-button__link { border-color: rgba(232,237,243,0.32); color: var(--gl-on-dark); }
.gl-hero .wp-block-button.gl-btn--ghost .wp-block-button__link:hover { border-color: var(--gl-on-dark); background: rgba(232,237,243,0.08); }

/* Editor-side preview so the client sees roughly the published result. */
.editor-styles-wrapper .gl-hero { padding: 2.5rem 1.5rem; border-radius: 6px; }
.editor-styles-wrapper .gl-card { min-height: 0; }

/* --- 15. Full-bleed page canvas -------------------------------------------
   Pages are built from edge-to-edge section groups, so the article card that
   GeneratePress draws around post content is removed on pages only. Blog
   posts keep the card. */

body.page .inside-article { padding: 0; background: transparent; box-shadow: none; border: 0; }
body.page.separate-containers .site-main { margin: 0; }
body.page.separate-containers .inside-article > *:last-child { margin-bottom: 0; }
body.page .entry-content > .alignfull:first-child { margin-top: 0; }
body.page .entry-content > .alignfull:last-child { margin-bottom: 0; }

/* Keep inner content on the theme grid inside full-bleed sections. */
.gl-section > .wp-block-group__inner-container,
.gl-hero > .wp-block-group__inner-container { padding-inline: clamp(20px, 4vw, 40px); }

/* The site footer bar. */
.site-info { padding-block: 1.4rem; }
.site-info p { color: var(--gl-on-dark-soft); margin: 0; }

/* --- 16. Header with the stacked GorbLab mark -----------------------------
   The logo is close to square and carries the wordmark itself, so it needs
   real height and the text site title is redundant next to it. */

.site-logo { display: flex; align-items: center; }
.site-logo img { max-height: 74px; width: auto; height: auto; }
.site-header .header-image { max-height: 74px; width: auto; }
.site-header .inside-header { padding-block: 14px; }
.site-header .site-branding { display: none; }

@media (max-width: 768px) {
	.site-logo img, .site-header .header-image { max-height: 56px; }
	.main-navigation .main-nav ul li.gl-nav-cta > a { margin-left: 0; border-radius: 0; }
}

/* --- 17. Split hero (image beside the heading) ----------------------------
   Used by Vintage Repair, where an illustration carries the section. */

.gl-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: center;
}
.gl-hero__grid > * { margin-block: 0; }
.gl-hero__grid > .wp-block-group > *:first-child { margin-top: 0; }
.gl-hero__grid > .wp-block-group > *:last-child { margin-bottom: 0; }

.gl-hero__figure { position: relative; }
.gl-hero__figure figure, .gl-hero__figure .wp-block-image { margin: 0; }
.gl-hero__figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--gl-radius-lg);
	border: 1px solid rgba(232, 237, 243, 0.16);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
}
/* thin gold corner rule, a nod to the gold plating in the palette */
.gl-hero__figure::after {
	content: "";
	position: absolute;
	right: -6px;
	bottom: -6px;
	width: 64px;
	height: 64px;
	border-right: 2px solid var(--gl-gold);
	border-bottom: 2px solid var(--gl-gold);
	border-bottom-right-radius: var(--gl-radius-lg);
	pointer-events: none;
}

@media (max-width: 880px) {
	.gl-hero__grid { grid-template-columns: 1fr; }
	.gl-hero__figure { max-width: 460px; }
	.gl-hero__figure::after { display: none; }
}

/* Numbered process steps, used on the repair page. */
.gl-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: var(--gl-gap); counter-reset: gl-step; }
.gl-steps > * { margin-block: 0; }
.gl-step { position: relative; padding-top: 2.6rem; }
.gl-step::before {
	counter-increment: gl-step;
	content: counter(gl-step, decimal-leading-zero);
	position: absolute;
	top: 0; left: 0;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--gl-accent-dark);
	border-top: 2px solid var(--gl-accent);
	padding-top: 0.55rem;
	min-width: 46px;
}
.gl-step h3 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.gl-step p { margin: 0; font-size: 0.93rem; line-height: 1.6; }

/* --- 18. Grid containers vs. the block wrapper -----------------------------
   WordPress wraps the children of a group block in .wp-block-group__inner-
   container, which would otherwise be the single child of every grid above.
   display:contents dissolves that wrapper so the real children become the
   grid items. */

.gl-cards > .wp-block-group__inner-container,
.gl-projects > .wp-block-group__inner-container,
.gl-about > .wp-block-group__inner-container,
.gl-contact > .wp-block-group__inner-container,
.gl-hero__grid > .wp-block-group__inner-container,
.gl-tech > .wp-block-group__inner-container,
.gl-steps > .wp-block-group__inner-container { display: contents; }

/* Flow margins would fight the grid gap, so reset them on the grid items. */
.gl-cards > .wp-block-group__inner-container > *,
.gl-projects > .wp-block-group__inner-container > *,
.gl-about > .wp-block-group__inner-container > *,
.gl-contact > .wp-block-group__inner-container > *,
.gl-hero__grid > .wp-block-group__inner-container > * { margin-block: 0; }

/* Cards stretch to equal height and keep their own internal rhythm. */
.gl-cards > .wp-block-group__inner-container > .wp-block-group,
.gl-projects > .wp-block-group__inner-container > .wp-block-group { height: 100%; }

/* The figure column should not stretch taller than its image. */
.gl-hero__grid > .wp-block-group__inner-container > .gl-hero__figure { align-self: center; }

/* --- 19. Blog listing and single post -------------------------------------- */

.blog .site-main, .archive .site-main, .search .site-main {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: var(--gl-gap);
	align-items: start;
}
.blog .site-main > .paging-navigation,
.archive .site-main > .paging-navigation { grid-column: 1 / -1; }

.blog .site-main > article,
.archive .site-main > article,
.search .site-main > article {
	margin: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color var(--gl-ease), box-shadow var(--gl-ease);
}
.blog .site-main > article:hover,
.archive .site-main > article:hover { border-color: var(--gl-line-strong); box-shadow: 0 2px 14px rgba(16,35,61,0.07); }

.post-image, .post-image img { display: block; margin: 0; width: 100%; height: auto; }
.blog .post-image, .archive .post-image { border-bottom: 1px solid var(--gl-line); }

.blog .inside-article, .archive .inside-article { padding: 0 0 1.4rem; }
.blog .entry-header, .blog .entry-summary, .blog .entry-meta,
.archive .entry-header, .archive .entry-summary, .archive .entry-meta { padding-inline: 1.4rem; }
.blog .entry-header, .archive .entry-header { margin-top: 1.2rem; }
.blog .entry-title, .archive .entry-title { font-size: 1.18rem; line-height: 1.3; }
.blog .entry-title a, .archive .entry-title a { color: var(--gl-ink); text-decoration: none; }
.blog .entry-title a:hover, .archive .entry-title a:hover { color: var(--gl-accent-dark); }
.blog .entry-summary p, .archive .entry-summary p { font-size: 0.92rem; line-height: 1.6; }

/* Single post */
.single .post-image { margin-bottom: 1.8rem; border-radius: var(--gl-radius-lg); overflow: hidden; }
.single .entry-content { max-width: 70ch; }
.single .entry-content p { font-size: 1.02rem; line-height: 1.72; }

/* Source attribution line under a news item */
.gl-source {
	margin-top: 2rem;
	padding-top: 1rem;
	border-top: 1px solid var(--gl-line);
	font-size: 0.86rem;
	color: var(--gl-ink-faint);
}
.gl-source a { color: var(--gl-accent-dark); }

/* Category chips */
.entry-meta .cat-links a {
	display: inline-block;
	padding: 0.18rem 0.55rem;
	background: var(--gl-accent-tint);
	color: var(--gl-accent-dark);
	border-radius: 3px;
	font-size: 0.74rem;
	font-weight: 600;
	text-decoration: none;
}

/* --- 20. Illustration columns ---------------------------------------------
   The image block keeps its intrinsic width by default; these figures should
   fill the column they sit in. */

.gl-hero__figure figure,
.gl-about__figure figure { width: 100%; margin: 0; }
.gl-about__figure { overflow: hidden; }
.gl-about__figure img { display: block; width: 100%; height: auto; }
.gl-about__figure .wp-block-group__inner-container { display: block; }