/* Makello Website Static: one stylesheet for the blog and the service-area pages
   Version: v0.1.4
   Updated: 2026-11-07 08:40 PT
   v0.1.2: sidebar archive years (details/summary).
   v0.1.1: phone layout: the one-column grid used 1fr (min-width auto), so wide content pushed the page 14 px past the screen; now minmax(0,1fr).
   Part of: Makello Website Static. Colors from makello.com (orange #f5a623, charcoal #4f4f4e). Covers the WordPress block markup
   the posts use (columns, media-text, buttons, tables, images, files, embeds) so the content keeps its layout. */
:root{--brand:#f5a623;--ink:#2b2b2a;--muted:#5f5f5e;--line:#e5e5e5;--bg:#fff;--soft:#f7f7f5;--link:#a35f00;--max:1120px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--link)}a:hover{color:#6e4000}
img,video,iframe{max-width:100%;height:auto}
.wrap{max-width:var(--max);margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:8px;background:#fff;padding:8px;z-index:9}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.site-header{border-top:5px solid var(--brand);border-bottom:1px solid var(--line);background:#fff}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:12px;padding-bottom:8px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand strong{display:block;font-size:1.35rem;line-height:1.1}.brand em{display:block;font-style:normal;color:var(--muted);font-size:.9rem}
.search{display:flex;gap:6px}.search input{padding:7px 10px;border:1px solid #ccc;border-radius:4px;font:inherit;font-size:.95rem;width:200px;max-width:50vw}
.search button,.wp-block-button__link,.more{background:var(--brand);color:#222;border:0;border-radius:4px;padding:7px 14px;font:inherit;font-size:.95rem;font-weight:600;text-decoration:none;cursor:pointer;display:inline-block}
.site-nav ul{list-style:none;margin:0;padding:6px 16px 10px;display:flex;flex-wrap:wrap;gap:4px 18px}
.site-nav a{text-decoration:none;color:var(--ink);font-size:.95rem}.site-nav a:hover{color:var(--link);text-decoration:underline}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:40px;padding-top:28px;padding-bottom:40px}
@media (max-width:860px){.layout{grid-template-columns:minmax(0,1fr)}}
.layout>*{min-width:0}
.sidebar h2{font-size:1rem;margin:1.4em 0 .4em;border-bottom:2px solid var(--brand);padding-bottom:4px}
.sidebar ul{list-style:none;padding:0;margin:0}.sidebar li{padding:3px 0}
h1,h2,h3,h4{line-height:1.25}h1{font-size:2rem;margin:.2em 0 .4em}
.meta{color:var(--muted);font-size:.9rem;margin:.2em 0 1em}
.card{border-bottom:1px solid var(--line);padding:4px 0 18px;margin-bottom:18px}.card h2{font-size:1.4rem;margin:.3em 0 .1em}.card h2 a{text-decoration:none;color:var(--ink)}
.archive-title{font-size:1.6rem}
.pager{display:flex;justify-content:space-between;gap:16px;margin:24px 0;flex-wrap:wrap}
.featured img{width:100%;border-radius:6px}
.card .thumb{display:block;margin:.5em 0 .3em}.card .thumb img{display:block;width:auto;height:auto;max-width:100%;max-height:340px;border-radius:6px}
.post-footer{border-top:1px solid var(--line);margin-top:2em;padding-top:1em;font-size:.95rem}
.tag{display:inline-block;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:1px 10px;margin:2px 4px 2px 0;text-decoration:none;font-size:.85rem}
.share a{margin-right:10px}
.site-footer{background:#4f4f4e;color:#eee;padding:20px 0;font-size:.9rem}.site-footer a{color:#fff}
/* WordPress block markup */
.entry figure{margin:1.2em 0}.entry figcaption,.wp-element-caption{color:var(--muted);font-size:.85rem;text-align:center}
.aligncenter{margin-left:auto;margin-right:auto;text-align:center}.alignleft{float:left;margin:0 1em 1em 0}.alignright{float:right;margin:0 0 1em 1em}
.wp-block-columns{display:flex;gap:24px;flex-wrap:wrap;margin:1em 0}.wp-block-column{flex:1 1 240px;min-width:0}
.wp-block-media-text{display:grid;grid-template-columns:50% 1fr;gap:24px;align-items:center;margin:1.4em 0}
.wp-block-media-text.has-media-on-the-right{grid-template-columns:1fr 50%}.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media{order:2}
@media (max-width:640px){.wp-block-media-text,.wp-block-media-text.has-media-on-the-right{grid-template-columns:1fr}.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media{order:0}}
.wp-block-media-text__media img{width:100%;border-radius:6px}
.wp-block-buttons{display:flex;gap:10px;flex-wrap:wrap;margin:1em 0}
.wp-block-table{overflow-x:auto}.wp-block-table table,.entry table{border-collapse:collapse;width:100%}.entry td,.entry th{border:1px solid var(--line);padding:6px 8px;vertical-align:top}
.wp-block-quote,.entry blockquote{border-left:4px solid var(--brand);margin:1.2em 0;padding:.2em 1em;color:#444}
.wp-block-file{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--soft);padding:8px 12px;border-radius:6px}
.wp-block-file__button{background:var(--brand);color:#222;border-radius:4px;padding:3px 10px;text-decoration:none;font-size:.85rem}
.wp-block-embed iframe,.entry iframe[src*="youtube"]{width:100%;aspect-ratio:16/9;height:auto}
.wp-block-spacer{height:24px!important}
.wp-block-separator{border:0;border-top:1px solid var(--line);margin:2em 0}
.has-text-align-center{text-align:center}
/* accordions (were a plugin with JavaScript; now <details>) */
details.accordion{border:1px solid var(--line);border-radius:6px;margin:.6em 0;background:#fff}
details.accordion summary{cursor:pointer;padding:10px 14px;font-weight:600;background:var(--soft);border-radius:6px}
details.accordion[open] summary{border-bottom:1px solid var(--line);border-radius:6px 6px 0 0}
.accordion-body{padding:4px 14px 8px}
/* sliders (were Supsystic / Slide Anything); now a swipeable strip */
.strip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;margin:1em 0}
.strip figure{flex:0 0 min(80%,420px);scroll-snap-align:start;margin:0}.strip img{width:100%;border-radius:6px}
/* search results */
.results li{margin:0 0 1em}.results .x{color:var(--muted);font-size:.9rem}
.sidebar .years summary{cursor:pointer}.sidebar .months{padding-left:18px}