/*
Theme Name: Comserv
Theme URI: https://comserv.com/
Author: Comserv Services, LLC
Description: Custom block theme for Comserv Services. Brand colors, Montserrat type, reusable section patterns, and seasonal style variations (Appearance → Editor → Styles).
Version: 1.0.15
Update URI: false
Requires at least: 6.5
Tested up to: 6.8
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: comserv
*/

/* ---------- Header ---------- */
.comserv-hiring-bar { font-size: 0.875rem; font-weight: 600; }
.comserv-hiring-bar a { color: inherit; text-decoration: none; }
.comserv-hiring-bar .comserv-pill {
	background: var(--wp--preset--color--brand-dark);
	color: var(--wp--preset--color--base);
	padding: 0.2rem 0.7rem; border-radius: 3px; font-size: 0.75rem;
	text-transform: uppercase; letter-spacing: 0.05em; margin-left: 0.6rem; white-space: nowrap;
}
.comserv-header .comserv-logo img { width: 230px; height: auto; display: block; }
.comserv-header .comserv-phones p { margin: 0; line-height: 1.35; font-weight: 700; font-size: 0.9375rem; }
.comserv-header .comserv-phones a { color: inherit; text-decoration: none; }
.comserv-header .comserv-phones a:hover { text-decoration: underline; }
.comserv-header .comserv-phones .comserv-label { opacity: 0.75; font-size: 0.75rem; letter-spacing: 0.08em; margin-right: 0.35rem; }
.comserv-nav-row { border-top: 1px solid rgba(255,255,255,0.15); }
.comserv-nav-row .wp-block-navigation-item__content:hover { text-decoration: underline; text-underline-offset: 5px; }
.comserv-nav-row .wp-block-navigation__submenu-container {
	color: var(--wp--preset--color--contrast) !important;
	background: var(--wp--preset--color--base) !important;
	border: 0 !important; border-top: 3px solid var(--wp--preset--color--primary) !important;
	box-shadow: 0 10px 28px rgba(0,0,0,0.18); min-width: 250px !important; padding: 0.4rem 0;
	font-weight: 600;
}
.comserv-nav-row .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 0.45rem 1.1rem !important; }
.comserv-nav-row .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--tint); text-decoration: none;
}
@media (min-width: 600px) {
	.comserv-nav-row .comserv-industries > .wp-block-navigation__submenu-container {
		display: grid !important; grid-template-columns: repeat(2, minmax(230px, 1fr)); grid-template-rows: repeat(8, auto); grid-auto-flow: column; min-width: 520px !important;
	}
	.comserv-nav-row .comserv-industries > .wp-block-navigation__submenu-container > li { width: auto !important; }
}
.wp-block-navigation__responsive-container.is-menu-open { color: var(--wp--preset--color--base) !important; background: var(--wp--preset--color--brand-dark) !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { columns: 1 !important; min-width: 0 !important; background: transparent !important; color: inherit !important; box-shadow: none; border-top: 0 !important; }
.comserv-cta-nav .wp-block-navigation-item__content {
	background: var(--wp--preset--color--primary); padding: 0.4rem 0.9rem !important; border-radius: 4px;
}

/* ---------- Section helpers ---------- */
.comserv-eyebrow {
	color: var(--wp--preset--color--primary); font-weight: 800; font-size: 0.8125rem !important;
	letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.25rem !important;
}
.has-brand-dark-background-color .comserv-eyebrow,
.has-accent-background-color .comserv-eyebrow,
.has-primary-background-color .comserv-eyebrow,
.comserv-hero .comserv-eyebrow { color: var(--wp--preset--color--highlight); }
.comserv-rule { width: 60px; height: 4px; background: var(--wp--preset--color--primary); border: 0; margin-left: 0 !important; }

/* Hero */
.comserv-hero h1 { color: var(--wp--preset--color--base); max-width: 18em; }
.comserv-hero .comserv-badge img { background: #fff; padding: 8px; border-radius: 4px; box-shadow: 0 6px 18px rgba(0,0,0,0.25); }

/* Stats */
.comserv-stat { border-left: 4px solid var(--wp--preset--color--primary); padding-left: 0.9rem; }
.comserv-stat p { margin: 0; }
.comserv-stat .comserv-stat-num { color: var(--wp--preset--color--primary); font-weight: 800; font-size: 1.6rem; line-height: 1.15; }
.comserv-stat .comserv-stat-label { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--gray); }

/* Service cards */
.comserv-card {
	background: var(--wp--preset--color--brand-dark); color: var(--wp--preset--color--base);
	border-radius: 6px; padding: 1.5rem; height: 100%;
	display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.comserv-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0,0,0,0.18); background: var(--wp--preset--color--brand); }
.comserv-card h3 { color: var(--wp--preset--color--base); text-transform: uppercase; font-size: 1.05rem; letter-spacing: 0.04em; margin: 0; }
.comserv-card h3 a { color: inherit; text-decoration: none; }
.comserv-card h3 a::after { content: ""; position: absolute; inset: 0; }
.comserv-card { position: relative; }
.comserv-card p { font-size: 0.9375rem; margin: 0; opacity: 0.92; }
.comserv-card .comserv-more { margin-top: auto !important; padding-top: 0.75rem; font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--highlight); }
.comserv-card-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.comserv-card-grid > .comserv-card { margin: 0 !important; }

/* Brand logo ribbon (scrolls; pauses on hover; still for reduced motion) */
.comserv-ribbon { overflow: hidden; position: relative; }
.comserv-ribbon::before, .comserv-ribbon::after {
	content: ""; position: absolute; top: 0; bottom: 0; width: 70px; z-index: 2; pointer-events: none;
}
.comserv-ribbon::before { left: 0; background: linear-gradient(90deg, var(--comserv-ribbon-bg, #f2f2f2), transparent); }
.comserv-ribbon::after { right: 0; background: linear-gradient(270deg, var(--comserv-ribbon-bg, #f2f2f2), transparent); }
.comserv-ribbon .comserv-ribbon__track {
	display: flex !important; flex-wrap: nowrap !important; align-items: center; gap: 3rem !important;
	width: max-content; animation: comserv-scroll 45s linear infinite;
}
.comserv-ribbon:hover .comserv-ribbon__track { animation-play-state: paused; }
.comserv-ribbon .wp-block-image { margin: 0 !important; flex: 0 0 auto; }
.comserv-ribbon .wp-block-image img { height: 52px; width: auto; max-width: 170px; object-fit: contain; }
@keyframes comserv-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	.comserv-ribbon .comserv-ribbon__track { animation: none; flex-wrap: wrap !important; width: auto; justify-content: center; }
	.comserv-ribbon .comserv-ribbon__dupe { display: none; }
}
/* Inside the editor show the logos as a wrapping row so they're easy to edit */
.editor-styles-wrapper .comserv-ribbon .comserv-ribbon__track { animation: none; flex-wrap: wrap !important; width: auto; }

/* Blog cards */
.comserv-post-card {
	background: var(--wp--preset--color--base); border: 1px solid #e6e1e1; border-radius: 6px; overflow: hidden; height: 100%;
	display: flex; flex-direction: column; transition: box-shadow .2s ease;
}
.comserv-post-card:hover { box-shadow: 0 10px 24px rgba(0,0,0,0.10); }
.comserv-post-card .wp-block-post-featured-image { margin: 0; }
.comserv-post-card .wp-block-post-featured-image img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.comserv-post-card .wp-block-post-terms { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.comserv-post-card .wp-block-post-terms a { color: var(--wp--preset--color--primary); text-decoration: none; }
.comserv-post-card .wp-block-post-title { font-size: 1.05rem; text-transform: none; letter-spacing: 0; }
.comserv-post-card .wp-block-post-title a { text-decoration: none; }
.comserv-post-card .wp-block-post-excerpt { font-size: 0.9rem; color: var(--wp--preset--color--gray); }
.comserv-post-card .wp-block-post-excerpt__more-link { font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; }
.wp-block-post-template.is-layout-grid > li { height: 100%; }

/* Single post */
.comserv-single .wp-block-post-featured-image img { border-radius: 6px; }
.comserv-single .wp-block-post-content h2 { font-size: 1.6rem; text-transform: none; letter-spacing: 0; }

/* FAQ (details block) */
.wp-block-details summary { font-weight: 700; cursor: pointer; color: var(--wp--preset--color--brand-dark); }
.wp-block-details summary::marker { color: var(--wp--preset--color--primary); }

/* Galleries in converted pages */
.wp-block-gallery.has-nested-images figure.wp-block-image img { border-radius: 4px; }

/* Outline buttons on dark bands */
.has-brand-dark-background-color .wp-block-button.is-style-outline .wp-block-button__link,
.has-primary-background-color .wp-block-button.is-style-outline .wp-block-button__link,
.has-accent-background-color .wp-block-button.is-style-outline .wp-block-button__link,
.comserv-hero .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--base); border-color: var(--wp--preset--color--base); background: transparent;
}
.wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--wp--preset--color--primary); }
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); border-color: var(--wp--preset--color--primary); }
.has-brand-dark-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
.has-accent-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
.comserv-hero .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--base); color: var(--wp--preset--color--brand-dark); border-color: var(--wp--preset--color--base);
}

/* Footer */
.comserv-footer a { color: inherit; text-decoration: none; }
.comserv-footer a:hover { text-decoration: underline; }
.comserv-footer h2 { font-size: 0.9375rem; letter-spacing: 0.1em; color: var(--wp--preset--color--base); }
.comserv-footer ul { list-style: none; padding: 0; margin: 0; columns: 2; font-size: 0.9rem; }
.comserv-footer li { margin-bottom: 0.35rem; }
.comserv-footer .comserv-logo img { width: 210px; height: auto; }
.comserv-footer-bottom { font-size: 0.8125rem; opacity: 0.85; }

/* Phones: tighten header */
@media (max-width: 781px) {
	.comserv-header .comserv-logo img { width: 170px; }
	.comserv-header .comserv-phones { display: none !important; }
	.comserv-hiring-bar { font-size: 0.8rem; }
	.comserv-hero .comserv-badge { display: none; }
}

/* Accessibility helper used by WordPress blocks */
.screen-reader-text { border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }
.screen-reader-text:focus { background: #fff; clip: auto !important; clip-path: none; color: #1d1d1f; display: block; height: auto; left: 5px; padding: 15px 23px 14px; top: 5px; width: auto; z-index: 100000; }

/* Alignment helpers (kept here so they always load) */
.has-text-align-center { text-align: center; }
.has-text-align-right { text-align: right; }
@media (max-width: 600px) { .comserv-hero h1 { font-size: 1.65rem; } }
/* Breathing room under the header on pages that don't start with a full-width banner */
main > .wp-block-post-content > :first-child:not(.alignfull) { margin-top: var(--wp--preset--spacing--50); }
main > .wp-block-post-content > :last-child:not(.alignfull) { margin-bottom: var(--wp--preset--spacing--60); }
.comserv-card > * + * { margin-top: 0.6rem; }
.comserv-stat > * + * { margin-top: 0.1rem; }
.comserv-stat + .comserv-stat { margin-top: 1.25rem; }

/* ---------- Converted page sections (v1.0.2) ---------- */
.comserv-box-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; margin-top: var(--wp--preset--spacing--40) !important; }
.comserv-box-grid > * { margin: 0 !important; }
.comserv-box {
	background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast);
	border: 1px solid #e6e1e1; border-radius: 6px; padding: 1.5rem; display: flex; flex-direction: column; position: relative;
}
.comserv-box > * + * { margin-top: 0.7rem; }
.comserv-box h2, .comserv-box h3, .comserv-box h4 { color: var(--wp--preset--color--brand-dark) !important; font-size: 1.02rem; text-transform: uppercase; letter-spacing: 0.03em; margin-top: 0; }
.comserv-box p, .comserv-box li { font-size: 0.9375rem; }
.comserv-box .wp-block-list { padding-left: 1.1rem; }
.comserv-box .wp-block-image { margin-bottom: 0; }
.comserv-box a:not(.wp-block-button__link) { color: var(--wp--preset--color--primary); }
.comserv-box--link { transition: box-shadow .2s ease, transform .2s ease; }
.comserv-box--link:hover { box-shadow: 0 10px 24px rgba(0,0,0,0.12); transform: translateY(-2px); }
.comserv-box--link h3 a { color: inherit; text-decoration: none; }
.comserv-box--link h3 a::after { content: ""; position: absolute; inset: 0; }
.comserv-box--post { padding: 0; overflow: hidden; }
.comserv-box--post > * { margin-left: 1.25rem !important; margin-right: 1.25rem !important; }
.comserv-box--post > .comserv-box__img { margin: 0 !important; }
.comserv-box--post > :last-child { margin-bottom: 1.25rem !important; }
.comserv-box__img img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.comserv-box .comserv-more { margin-top: auto !important; padding-top: 0.5rem; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--wp--preset--color--primary); }

/* Pills ("who uses radios", related links) */
.comserv-tags { list-style: none; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.comserv-tags li { margin: 0; padding: 0.35rem 0.85rem; border-radius: 999px; font-size: 0.875rem; font-weight: 600;
	background: var(--wp--preset--color--tint); color: var(--wp--preset--color--brand-dark); border: 1px solid #f0d6d4; }
.comserv-tags--links li { padding: 0; }
.comserv-tags--links a { display: block; padding: 0.35rem 0.85rem; text-decoration: none; color: inherit; }
.comserv-tags--links li:hover { background: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); }
.comserv-tags--links li:hover a { color: var(--wp--preset--color--base); }

/* Check lists ("Why choose Comserv") */
.comserv-checklist { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0.75rem 1.5rem; }
.comserv-checklist li { position: relative; padding: 0.6rem 0.9rem 0.6rem 2.4rem; border-radius: 4px; background: rgba(0,0,0,0.04); margin: 0; }
.comserv-dark .comserv-checklist li { background: rgba(255,255,255,0.08); }
.comserv-checklist li::before { content: "✓"; position: absolute; left: 0.85rem; top: 0.55rem; font-weight: 800; color: var(--wp--preset--color--primary); }
.comserv-dark .comserv-checklist li::before { color: var(--wp--preset--color--highlight); }

/* Dark sections */
.comserv-dark h1, .comserv-dark h2, .comserv-dark h3, .comserv-dark h4 { color: var(--wp--preset--color--base); }
.comserv-dark .comserv-eyebrow { color: var(--wp--preset--color--highlight); }
.comserv-dark > p a, .comserv-dark .wp-block-columns p > a { color: var(--wp--preset--color--base); }
.comserv-dark .wp-block-button.is-style-outline .wp-block-button__link { color: var(--wp--preset--color--base); border-color: var(--wp--preset--color--base); }
.comserv-banner { min-height: 320px; }
.comserv-hero p { color: rgba(255,255,255,0.92); }
.wp-block-columns .wp-block-image img { border-radius: 6px; }
@media (min-width: 782px) {
	.comserv-box-grid.comserv-cols-2 { grid-template-columns: repeat(2, 1fr); }
	.comserv-box-grid.comserv-cols-3 { grid-template-columns: repeat(3, 1fr); }
	.comserv-box-grid.comserv-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) { .comserv-box-grid.comserv-cols-4 { grid-template-columns: repeat(4, 1fr); } }

/* City lists (Service Area) */
.comserv-citylist { list-style: none; padding: 0 !important; columns: 2; column-gap: 1.5rem; margin-top: 0.5rem; }
.comserv-citylist li { padding: 0.3rem 0; break-inside: avoid; border-bottom: 1px solid #efe7e7; }
.wp-block-column h3 + .comserv-citylist { border-top: 2px solid var(--wp--preset--color--primary); padding-top: 0.4rem !important; }

/* ===== Blog post "On this page" sidebar ===== */
.comserv-single .wp-block-post-content h2 { scroll-margin-top: 24px; }
.comserv-single > .comserv-toc-layout { max-width: 1138px !important; width: 100%; margin-left: auto !important; margin-right: auto !important; }
.comserv-toc { border: 1px solid #ddd; border-radius: 14px; background: #fff; padding: 16px 18px; margin: 0 0 32px; font-size: 0.95rem; }
.comserv-toc summary { font-weight: 800; cursor: pointer; color: var(--wp--preset--color--contrast, #1a1a1a); }
.comserv-toc ol { list-style: none; margin: 12px 0 0; padding: 0 0 0 14px; border-left: 2px solid #e3e3e3; }
.comserv-toc li { margin: 0 0 10px; line-height: 1.35; }
.comserv-toc a { color: #333; text-decoration: none; font-weight: 600; display: block; padding-left: 10px; margin-left: -16px; border-left: 3px solid transparent; }
.comserv-toc a:hover { color: var(--wp--preset--color--primary); }
.comserv-toc a[aria-current="true"] { color: var(--wp--preset--color--primary); border-left-color: var(--wp--preset--color--primary); }
@media (min-width: 1100px) {
	.comserv-single > .comserv-toc-layout { display: grid; grid-template-columns: minmax(0, 820px) 270px; gap: 48px; justify-content: center; align-items: start; }
	.comserv-toc-layout > .wp-block-post-content { grid-column: 1; grid-row: 1; max-width: none; }
	.comserv-toc { grid-column: 2; grid-row: 1; position: sticky; top: 24px; margin: 0; }
	.comserv-toc summary { pointer-events: none; list-style: none; }
	.comserv-toc summary::-webkit-details-marker { display: none; }
	.comserv-toc ol { max-height: calc(100vh - 120px); overflow-y: auto; }
	.comserv-single:has(.comserv-toc-layout) > .wp-block-post-title,
	.comserv-single:has(.comserv-toc-layout) > .wp-block-post-terms,
	.comserv-single:has(.comserv-toc-layout) > .wp-block-post-date,
	.comserv-single:has(.comserv-toc-layout) > .wp-block-post-featured-image { max-width: 1138px; padding-right: 318px; box-sizing: border-box; }
}

/* ===== Blog article archive (below the post grid and page numbers) ===== */
.comserv-archive { border-top: 1px solid #ddd; padding-top: var(--wp--preset--spacing--50); }
.comserv-archive-list { list-style: none; padding: 0; margin: 1rem 0 0; columns: 2; column-gap: 48px; }
.comserv-archive-list li { break-inside: avoid; margin: 0 0 .6rem; }
.comserv-archive-list .wp-block-post-title { font-size: .95rem; font-weight: 500; text-transform: none; letter-spacing: 0; line-height: 1.4; margin: 0; }
.comserv-archive-list .wp-block-post-title a { text-decoration: none; }
.comserv-archive-list .wp-block-post-title a:hover { text-decoration: underline; }
@media (max-width: 700px) { .comserv-archive-list { columns: 1; } }

/* ===== Hiring bar close button ===== */
.comserv-hiring-bar { position: relative; overflow: hidden; max-height: 120px; transition: max-height .25s ease, padding .25s ease, opacity .25s ease; }
.comserv-hiring-bar.is-closing { max-height: 0; padding-top: 0 !important; padding-bottom: 0 !important; opacity: 0; }
.comserv-hiring-closed .comserv-hiring-bar { display: none; }
.comserv-hiring-close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); margin: 0 !important; max-width: none !important; background: none; border: 0; font-size: 1.4rem; line-height: 1; padding: 2px 6px; cursor: pointer; color: inherit; opacity: .7; }
.comserv-hiring-close:hover, .comserv-hiring-close:focus-visible { opacity: 1; }
.comserv-hiring-bar p { padding: 0 32px; }

/* ===== Social icons in header ===== */
.comserv-header .comserv-header-social { margin-top: 0.35rem !important; }
.comserv-header .comserv-header-social .wp-social-link a { padding: 0; }
.comserv-header .comserv-header-social .wp-social-link:hover { transform: none; opacity: .8; }

/* ===== Yellow "badge" pill (paragraph style) and dealer header card ===== */
p.is-style-badge { display: inline-block; width: auto !important; background: var(--wp--preset--color--highlight, #ffd800); color: #1a1a1a !important; font-size: 0.8rem; font-weight: 700; line-height: 1; padding: 0.45em 0.95em; border-radius: 999px; margin: 0; }
.has-text-align-center.is-style-badge { display: table; margin-left: auto; margin-right: auto; }
.comserv-dealer-head { max-width: 820px; margin-left: auto !important; margin-right: auto !important; }
.comserv-dealer-head .comserv-dealer-logo { margin: 0; }
.comserv-dealer-head .comserv-dealer-logo img { background: #fff; padding: 6px 8px; border-radius: 3px; display: block; }
.comserv-dealer-head .comserv-dealer-tagline { margin: 0.9rem 0 0; font-size: 0.95rem; opacity: 0.95; }

/* Whole-card links: keep the invisible click layer above the card text */
.comserv-card h3 a::after, .comserv-box--link h3 a::after { z-index: 2; }
.comserv-card .comserv-more a, .comserv-box .comserv-more a { color: inherit; text-decoration: none; }
.comserv-box.comserv-box--link h3 a { color: inherit; }