/*
Theme Name: Mysenko Exterior Theme
Description: Lightweight mobile-first block theme for exterior cleaning SEO websites.
Version: 1.0.2
Requires at least: 6.6
Requires PHP: 8.3
Text Domain: mysenko-exterior-theme
*/
:root{--mx-green:#173b33;--mx-green-2:#295b4f;--mx-orange:#e96f32;--mx-paper:#f7f8f5;--mx-ink:#182f29;--mx-line:#d8e1dc}.wp-site-blocks{overflow:hidden}.mx-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);border-bottom:1px solid var(--mx-line);backdrop-filter:blur(10px)}.mx-logo{font-weight:850;letter-spacing:.04em}.mx-logo small{display:block;font-size:9px;letter-spacing:.18em;color:#75847e}.mx-hero{min-height:min(720px,78vh);display:grid;align-items:center;position:relative;background:#eaf2ed}.mx-hero:before{content:"";position:absolute;inset:0 0 0 54%;background:linear-gradient(0deg,rgba(13,49,40,.25),transparent),var(--mx-hero-image,url('assets/images/hero-house.jpg')) center/cover no-repeat}.mx-hero__inner{position:relative;z-index:1;width:min(1240px,calc(100% - 40px));margin:auto}.mx-hero__copy{max-width:620px}.mx-eyebrow{font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#4e7d70}.mx-hero h1{font-size:clamp(48px,6vw,82px);line-height:1.02;margin:.25em 0;color:var(--mx-green)}.mx-hero h1 em{color:var(--mx-orange);font-style:normal;display:block}.mx-hero p{font-size:18px;line-height:1.7;color:#53645e;max-width:570px}.mx-button,.wp-element-button{border-radius:5px!important;background:var(--mx-orange)!important;color:#fff!important;font-weight:800;text-decoration:none;padding:.8em 1.1em}.mx-trust{display:flex;gap:18px;flex-wrap:wrap;margin-top:28px;font-size:13px;color:#52645e}.mx-trust span:before{content:"✓";color:#438b77;margin-right:5px}.mx-band{padding:clamp(56px,8vw,104px) 20px}.mx-band__inner{max-width:1240px;margin:auto}.mx-kicker{color:#4e7d70;font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase}.mx-heading{font-size:clamp(34px,5vw,54px);color:var(--mx-green);margin:.25em 0}.mx-services{display:grid;grid-template-columns:repeat(4,1fr);margin-top:36px;border-top:1px solid var(--mx-line);border-left:1px solid var(--mx-line)}.mx-services .wp-block-post{min-height:250px;padding:26px;border-right:1px solid var(--mx-line);border-bottom:1px solid var(--mx-line);display:flex;flex-direction:column}.mx-services .wp-block-post:hover{background:#eef4ef}.mx-services .wp-block-post-title{font-size:21px}.mx-dark{background:var(--mx-green);color:#fff}.mx-dark .mx-heading{color:#fff}.mx-result{display:grid;grid-template-columns:1.1fr .9fr;min-height:500px}.mx-result__image{background:url('assets/images/before-after.jpg') center/cover no-repeat}.mx-result__copy{padding:clamp(42px,7vw,90px)}.mx-footer{background:#102f28;color:#dcebe6;padding:50px 20px}.mx-footer a{color:#fff}.mx-mobile-cta{display:none}.single .wp-block-post-content,.single-services .wp-block-post-content,.single-locations .wp-block-post-content,.single-projects .wp-block-post-content{max-width:780px}.mx-content-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:48px;align-items:start}.mx-sidebar{position:sticky;top:110px}.mx-breadcrumbs{font-size:12px;color:#6e7d77}.mx-breadcrumbs a{color:inherit}.mx-archive-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.mx-archive-grid .wp-block-post{border:1px solid var(--mx-line);padding:20px;background:#fff;border-radius:6px}.mx-archive-grid img{aspect-ratio:16/10;object-fit:cover}.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(max-width:900px){.mx-hero:before{inset:52% 0 0}.mx-hero{padding-bottom:330px;min-height:auto}.mx-services{grid-template-columns:repeat(2,1fr)}.mx-result{grid-template-columns:1fr}.mx-result__image{min-height:380px}.mx-content-grid{grid-template-columns:1fr}.mx-sidebar{position:static}.mx-archive-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){body{padding-bottom:58px}.mx-header .wp-block-navigation{display:none}.mx-hero{padding-bottom:280px}.mx-hero__inner{width:calc(100% - 32px)}.mx-hero h1{font-size:44px}.mx-services{grid-template-columns:1fr 1fr}.mx-services .wp-block-post{min-height:210px;padding:18px}.mx-archive-grid{grid-template-columns:1fr}.mx-mobile-cta{position:fixed;display:grid;grid-template-columns:1fr 1fr 1.4fr;z-index:50;left:0;right:0;bottom:0;height:58px;background:#fff;border-top:1px solid var(--mx-line)}.mx-mobile-cta a{display:grid;place-items:center;text-decoration:none;color:var(--mx-green);font-size:12px;font-weight:800}.mx-mobile-cta a:last-child{background:var(--mx-orange);color:#fff}}

/* Compact quote section; override the constrained WordPress group width. */
#request-service.mx-band { padding: 40px 20px; }
#request-service > .mysenko-quote { width: 100%; max-width: 1120px; margin-inline: auto; }
#request-service .mysenko-quote { padding: 24px; }
@media (max-width: 700px) {
  #request-service.mx-band { padding: 24px 16px; }
  #request-service .mysenko-quote { padding: 8px 0; }
}

/* Public layout 1.0.2 */
.mx-header-v2 *, .mx-band *, .mx-footer-v2 * { box-sizing: border-box; }
.mx-header-v2 { padding: 0 24px; }
.mx-header-inner { max-width: 1240px; margin: 0 auto; min-height: 84px; display: flex; align-items: center; justify-content: flex-end; gap: 36px; }
.mx-desktop-nav { display: flex; flex-wrap: nowrap; align-items: center; gap: 32px; }
.mx-desktop-nav a, .mx-header-quote { white-space: nowrap; }
.mx-desktop-nav a { text-decoration: none; font-weight: 600; font-size: 15px; }
.mx-desktop-nav a:hover { color: #a83f0d; }
.mx-header-quote { flex-shrink: 0; font-size: 15px; }
.mx-mobile-menu { display: none; }
.mx-quote-band { background: var(--mx-green); padding: 40px 24px; margin-block: 0; scroll-margin-top: 100px; }
.mx-quote-band > .mysenko-quote { width: 100%; max-width: 1120px; margin: 0 auto; padding: 16px 0; }
.mx-service-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin-top: 32px; }
.mx-service-card { display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--mx-line); border-radius: 12px; background: #fff; text-decoration: none; color: var(--mx-ink); transition: border-color .2s, box-shadow .2s; min-width: 0; }
.mx-service-card:hover { border-color: #3f806f; box-shadow: 0 8px 24px #173b3310; }
.mx-service-number { color: #598173; font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.mx-service-card h3 { font-size: 23px; line-height: 1.2; margin: 20px 0 10px; overflow-wrap: anywhere; }
.mx-service-card p { font-size: 15px; color: #53645e; margin: 0 0 24px; }
.mx-card-link { margin-top: auto; font-size: 13px; font-weight: 700; display: flex; justify-content: space-between; gap: 12px; }
.mx-project-section { background: #eaf0eb; }
.mx-project-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; margin-top: 32px; }
.mx-project-card { background: #fff; border: 1px solid var(--mx-line); border-radius: 12px; overflow: hidden; min-width: 0; }
.mx-project-image-link { display: block; }
.mx-project-photo { display: block; width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; }
.mx-project-caption { padding: 20px 24px; }
.mx-project-caption h3 { margin: 12px 0 0; font-size: 23px; overflow-wrap: anywhere; }
.mx-project-caption h3 a { text-decoration: none; }
.mx-project-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; line-height: 1.6; color: #53645e; overflow-wrap: anywhere; }
.mx-project-crumbs a { color: inherit; }
.mx-guide-cloud { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; }
.mx-guide-pill { display: inline-flex; align-items: center; max-width: 100%; border: 1px solid #c7d8ce; border-radius: 999px; padding: 14px 22px; background: #fff; color: var(--mx-green); text-decoration: none; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; transition: background .2s,color .2s; }
.mx-guide-pill:nth-child(3n+2) { background: #e6eee7; }
.mx-guide-pill:nth-child(3n) { background: #f7ede4; border-color: #e7d5c6; }
.mx-guide-pill:hover { background: var(--mx-green); color: #fff; }
.mx-footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 36px; }
.mx-footer-grid > div { min-width: 0; }
.mx-footer-grid h3 { font-size: 17px; margin: 0 0 20px; color: #fff; }
.mx-footer-brand { font-weight: 800; margin: 0 0 20px; overflow-wrap: anywhere; }
.mx-footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; font-size: 14px; }
.mx-footer-links a { text-decoration: none; overflow-wrap: anywhere; }
.mx-footer-links a:hover { text-decoration: underline; }
.mx-muted { color: #b1c4bc; }
.mx-mobile-cta-v2 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.mx-mobile-cta-v2 a:only-child { grid-column: 1/-1; }
.mx-header-v2 a:focus-visible, .mx-mobile-menu summary:focus-visible, .mx-service-card:focus-visible, .mx-guide-pill:focus-visible, .mx-project-card a:focus-visible { outline: 3px solid #b64b16; outline-offset: 4px; }
/* Put archive columns on the actual list, not the query wrapper. */
.wp-block-query.mx-archive-grid { display: block; }
.wp-block-query.mx-archive-grid > .wp-block-post-template { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; padding: 0; }
.wp-block-query.mx-archive-grid > .wp-block-post-template > li { min-width: 0; }
@media (max-width: 900px) {
  .mx-header-inner { gap: 24px; }
  .mx-desktop-nav { gap: 20px; }
  .mx-service-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .mx-footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .mx-header-v2 { padding-inline: 16px; }
  .mx-header-inner { min-height: 72px; justify-content: space-between; gap: 12px; }
  .mx-desktop-nav { display: none; }
  .mx-mobile-menu { display: block; }
  .mx-mobile-menu summary { cursor: pointer; font-weight: 700; padding: 12px 0; }
  .mx-mobile-menu nav { position: absolute; left: 16px; right: 16px; top: calc(100% - 1px); display: grid; gap: 4px; padding: 12px; background: #fff; border: 1px solid var(--mx-line); box-shadow: 0 12px 20px #173b3320; border-radius: 8px; }
  .mx-mobile-menu nav a { padding: 12px; text-decoration: none; }
  .mx-header-quote { font-size: 14px; }
  .mx-quote-band { padding: 28px 20px; }
  .mx-quote-band > .mysenko-quote { padding: 0; }
  .mx-project-grid { grid-template-columns: 1fr; }
  .mx-service-card { padding: 22px; }
  .mx-guide-pill { padding: 12px 18px; font-size: 14px; }
  .wp-block-query.mx-archive-grid > .wp-block-post-template { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .mx-service-grid, .mx-footer-grid { grid-template-columns: 1fr; }
}