/* Zevonix Cloud - shared page shell.
 *
 * Every page used to carry its own copy of this: eleven inline <style>
 * blocks, about 43% of it byte-identical. That is how three different
 * topbars drifted apart without anyone noticing, and why a single footer
 * change needed eleven edits.
 *
 * Linked BEFORE each page's own <style>, so a page can still override.
 * Anything a page states differently stayed inline rather than moving.
 */

/* Tokens mirror zevonix.cloud's root so articles cannot drift from the site. */ :root {--navy-deep:#1a2d3d; --navy:#234462; --tint:#f0f7ff;  /* itservicesdaytona.com */
    --cyan:#0891b2; --cyan-text:#0e7490; --cyan-deep:#155e75;
    --ink:#0f172a; --body:#475569; --muted:#64748b; --decor:#94a3b8;
    --surface:#ffffff; --band:#f8fafc; --line:#e2e8f0;
    --maxw:1080px; --r:12px;}
* {box-sizing: border-box;}
a:focus-visible {outline:2px solid var(--cyan-text); outline-offset:2px;}
.topbar img {width:26px; height:26px;}
.topbar .spacer {flex:1;}
.topbar .topnav a:hover {color:var(--cyan-text); text-decoration:underline;}
/* Hidden on narrow screens: the bar already carries a logo, a name and a button, and six links would wrap into a second row. */ @media (min-width:1000px) {.topbar .topnav { display:flex; }} .topbar .topnav a {white-space:nowrap;}
.topbar .cta:hover {background:var(--cyan-deep);}
.crumb a {text-decoration:none;}
header.post {padding:40px 0 8px;}
header.post h1 {margin:0 0 12px; color:var(--ink); font-size:2rem; line-height:1.25;}
article:not(.card) {padding:8px 0 48px;}
article:not(.card) h2 {color:var(--ink); font-size:1.4rem; line-height:1.3; margin:34px 0 10px;}
article:not(.card) h3 {color:var(--ink); font-size:1.12rem; margin:26px 0 8px;}
article:not(.card) p {margin:0 0 16px;}
article:not(.card) ul, article:not(.card) ol {margin:0 0 16px; padding-left:22px;}
article:not(.card) li {margin:6px 0;}
article:not(.card) blockquote {margin:20px 0; padding:12px 18px; border-left:3px solid var(--cyan);
                       background:var(--band); color:var(--body); border-radius:0 var(--r) var(--r) 0;}
article:not(.card) code {background:var(--band); border:1px solid var(--line); border-radius:6px;
                 padding:1px 5px; font-size:.92em;}
article:not(.card) img {max-width:100%; height:auto; border-radius:var(--r);}
.cta-band p {margin:0 0 14px;}
.cta-band a.btn:hover {background:var(--cyan-deep);}
.site-footer address {font-style: normal; display: grid; gap: 13px;}
.site-footer address p {margin: 0; line-height: 1.5; color: rgba(255,255,255,.82);}
.site-footer address strong {display: block; color: #fff; font-weight: 700; margin-bottom: 2px;}
.site-footer a:focus-visible {outline-color: #fff;}
a:focus-visible, button:focus-visible {outline:2px solid var(--cyan-text); outline-offset:2px;}

/* Footer contact: the two offices sit side by side with the mark to their right,
   so the block spans the whole footer grid instead of one ~190px column.
   The logo is a multicolour SVG delivered through <img>, so its fills cannot be
   restyled from here; brightness(0) flattens it to black and invert(1) turns
   that white, which is why the pair is used rather than a colour property. */
.site-footer .foot-contact {grid-column: 1 / -1;}
.site-footer .foot-offices {display: grid; gap: 18px 30px; grid-template-columns: 1fr; align-items: center;}
/* The asset is already a single-colour white wordmark, so no filter: flattening
   an already-white file costs compositing on every paint and would defeat a
   two-tone variant if one is ever swapped in. */
.site-footer .foot-logo {width: 200px; max-width: 100%; height: auto; opacity: .92;}
@media (min-width: 720px) {
  .site-footer .foot-offices {grid-template-columns: auto auto 1fr;}
  .site-footer .foot-logo {justify-self: end;}
}