/*
Theme Name:   Bestcare Underscores Child
Theme URI:    https://bestcareboreholedrilling.co.ke/
Description:  Child theme of Underscores (_s), styled with the Bestcare Borehole Drilling brand system — blue/coral palette, Inter + DM Sans type, card-based components.
Author:       Bestcare Borehole Drilling
Author URI:   https://bestcareboreholedrilling.co.ke/
Template:     underscores
Version:      1.0.0
Text Domain:  bestcare-child
*/
/*
Theme Name:   Bestcare Underscores Child
Theme URI:    https://bestcareboreholedrilling.co.ke/
Description:  Child theme of Underscores (_s), styled with the Bestcare Borehole Drilling brand system — blue/coral palette, Inter + DM Sans type, card-based components.
Author:       Bestcare Borehole Drilling
Author URI:   https://bestcareboreholedrilling.co.ke/
Template:     underscores
Version:      1.1.0
Text Domain:  bestcare-child
*/

/* ═══════════════════════════════════════════════════════════════════
   IMPORT PARENT STYLES
   (enqueue this after wp_enqueue in functions.php as usual; this
   @import is a fallback if the child stylesheet is loaded standalone)
═══════════════════════════════════════════════════════════════════ */
@import url("../_s-master/style.css");

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=DM+Sans:wght@700;800;900&display=swap");

/* ═══════════════════════════════════════════════════════════════════
   1. TOKENS
═══════════════════════════════════════════════════════════════════ */
:root{
  --blue-primary:#316ca6;
  --blue-primary-d:#24537f;
  --blue-secondary:#0f79be;
  --blue-dark:#0f79be;
  --blue-tint:#e6f3fe;
  --tint-2:#edf7ff;
  --tint-3:#f9fbfe;

  --accent:#f05656;
  --accent-light:#f68787;
  --accent-dim:#d43f3f;

  --white:#fff;
  --off-white:#f6f9fd;
  --off-white-2:#edf7ff;

  --text-dark:#142236;
  --text-body:#3a4c68;
  --text-muted:#62709a;

  --border:#d9e6f6;
  --green:#25d366;

  --col:720px;
  --box-max:1160px;
  --pad:clamp(1rem,4vw,2rem);

  --radius:8px;
  --radius-sm:5px;
  --radius-lg:14px;

  --font-main:'Inter',sans-serif;
  --font-head:'DM Sans',sans-serif;

  --shadow-sm:0 4px 16px rgba(0,0,0,.08);
  --shadow-md:0 20px 40px rgba(10,47,77,.15);
}

/* ═══════════════════════════════════════════════════════════════════
   1B. BOXING SYSTEM — read this before editing widths anywhere below

   Two tiers, used consistently from header to footer:

   • FULL-BLEED SECTIONS  (.site-header, .breadcrumbs, main, .site-footer)
     Never get a max-width themselves — their background always runs
     edge to edge. This is the default block behaviour, so nothing
     needs to be set on these selectors for that to hold.

   • BOXED INNER ELEMENTS (.wrap, #content/.site-content, .breadcrumbs
     ol, .site-footer .widget-area, .site-info)
     Every one of these gets max-width + margin-inline:auto +
     padding-inline:var(--pad), so on a wide screen they sit centered
     with even space left and right, and on narrow screens the
     max-width simply never kicks in.

   Within that, there are two widths:
     --box-max (1160px) — structural bars: header row, breadcrumb
       row, footer columns. These can use the fuller width.
     --col (720px, via #content/.site-content below) — the reading
       column for pages, posts and archives, deliberately narrower
       than --box-max so body copy doesn't stretch edge to edge even
       inside the wider structural box.

   Every boxed selector below sets its own max-width/margin/padding
   directly, rather than depending on a wrapping .wrap div existing
   in the template markup — so the boxing holds regardless of how a
   given template file nests things.
═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   2. RESET + BASE
═══════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{
  font-family:var(--font-main);
  background:var(--off-white);
  color:var(--text-body);
  font-size:1rem;
  line-height:1.75;
  overflow-x:hidden;
  width:100%;
}
a{color:var(--blue-primary);text-decoration:none;transition:color .15s ease}
a:hover,a:focus{color:var(--blue-primary-d)}
img{max-width:100%;height:auto}
ul,ol{margin:0 0 1.4rem 1.4rem}
button{cursor:pointer;font-family:inherit}
:focus-visible{outline:2px solid var(--blue-secondary);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-head);
  color:var(--text-dark);
  font-weight:800;
  line-height:1.25;
  letter-spacing:-.01em;
  margin:0 0 .7rem;
}
h1{font-size:clamp(1.6rem,6vw,2.4rem);font-weight:900}
h2{font-size:1.4rem;margin-top:2rem}
h3{font-size:1.15rem;margin-top:1.6rem}
h4{font-size:.95rem;text-transform:uppercase;letter-spacing:.06em;color:var(--blue-primary)}
p{margin:0 0 1.4rem}
blockquote{
  border-left:4px solid var(--accent);
  background:var(--off-white);
  padding:1rem 1.2rem;
  border-radius:0 var(--radius) var(--radius) 0;
  margin:1.8rem 0;
  font-style:italic;
  color:var(--text-body);
}
blockquote p:last-child{margin-bottom:0}
hr{border:none;border-top:1px solid var(--border);margin:2rem 0}
code,kbd,pre,samp{font-family:"Courier New",Courier,monospace}
pre{
  background:var(--blue-dark);
  color:#e6f3fe;
  padding:1.1rem 1.2rem;
  border-radius:var(--radius);
  overflow-x:auto;
  font-size:.82rem;
  margin-bottom:1.5rem;
}
code{background:var(--blue-tint);padding:.14rem .36rem;border-radius:.22rem;font-size:.9em}
pre code{background:none;padding:0}

/* ═══════════════════════════════════════════════════════════════════
   3. LAYOUT SPINE
═══════════════════════════════════════════════════════════════════ */
.site{display:flex;flex-direction:column;min-height:100vh;width:100%}

/* .wrap — the general-purpose boxed container, used inside any
   full-bleed section (header, breadcrumb bar, footer, etc.) */
.wrap,
#page > .wrap{
  max-width:var(--box-max);
  margin-inline:auto;
  padding-inline:1.1rem;
  width:100%;
}
@media(min-width:768px){.wrap{padding-inline:1.5rem}}

/* #content / .site-content — the boxed reading column for pages,
   posts and archives. Deliberately narrower than --box-max so body
   copy and post/archive listings stay comfortable to read on wide
   screens, with clear space to the left and right. */
#content,
.site-content{
  max-width:var(--box-max);
  margin-inline:auto;
  padding-inline:var(--pad);
  padding-block:2rem 3.5rem;
  width:100%;
}
@media(min-width:640px){#content,.site-content{padding-block:3rem 4rem}}

/* Widescreen / full alignment (Gutenberg / _s support) — these
   intentionally break out of the narrow reading column, up to the
   wider structural box, or the full viewport. */
.alignwide{max-width:calc(var(--box-max) - 4rem);margin-left:calc(50% - 50vw + 2rem);margin-right:calc(50% - 50vw + 2rem)}
.alignfull{max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.alignleft{float:left;margin:.4rem 1.4rem 1.2rem 0}
.alignright{float:right;margin:.4rem 0 1.2rem 1.4rem}
.aligncenter{display:block;margin-left:auto;margin-right:auto}

.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:var(--accent);color:var(--white);display:block;
  font-weight:700;height:auto;left:1rem;line-height:normal;padding:.8rem 1.2rem;
  position:fixed;top:1rem;width:auto;z-index:100000;border-radius:var(--radius-sm);
  clip:auto!important;clip-path:none;
}

/* ═══════════════════════════════════════════════════════════════════
   4. SITE HEADER + BRANDING
   (.site-header stays full-bleed for its background; .wrap boxes
   the actual row of content inside it — see BOXING SYSTEM above)
═══════════════════════════════════════════════════════════════════ */

 
.topbar{display:none;background:var(--blue-dark);border-bottom:1px solid rgba(255,255,255,.06);padding:.42rem 0}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:1.3rem;flex-wrap:wrap}
.topbar-item{display:flex;align-items:center;gap:.4rem;font-size:.72rem;color:rgba(255,255,255,.62);letter-spacing:.02em}
.topbar-item svg{flex-shrink:0;opacity:.8;color:var(--accent-light)}
.topbar-item a{color:rgba(255,255,255,.8)}
.topbar-item a:hover{color:var(--accent-light)}
.topbar-divider{width:1px;height:14px;background:rgba(255,255,255,.1)}

.site-header{
  background:var(--blue-dark);
  position:sticky;top:0;z-index:200;
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 2px 16px rgba(15,42,82,.2);
  width:100%;
}
.site-header .wrap{display:flex;align-items:center;gap:.8rem;min-height:58px}
.site-branding{display:flex;flex-direction:column;line-height:1;flex-shrink:0}
.site-title{
  font-family:var(--font-head);font-weight:800;font-size:.96rem;
  color:var(--white);letter-spacing:.01em;margin:0;
}
.site-title a{color:var(--white)}
.site-title a:hover{color:var(--accent-light)}
.site-description{
  font-size:.5rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:#fffee0;margin-top:3px;
}
.custom-logo-link img{max-height:40px;width:auto}

/* ═══════════════════════════════════════════════════════════════════
   5. NAVIGATION (main-navigation, nested submenus, menu-toggle)
═══════════════════════════════════════════════════════════════════ */
.main-navigation{display:none;flex:1;justify-content:center}
.main-navigation ul{
  display:flex;align-items:center;gap:.05rem;list-style:none;margin:0;padding:0;
}
.main-navigation li{position:relative}
.main-navigation a{
  display:flex;align-items:center;padding:.4rem .7rem;
  color:rgba(255,255,255,.82);font-size:.8rem;font-weight:700;
  letter-spacing:.01em;border-radius:var(--radius-sm);white-space:nowrap;
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a{
  color:var(--white);background:rgba(255,255,255,.14);
}
.main-navigation ul ul{
  display:none;position:absolute;top:100%;left:0;
  background:var(--white);min-width:270px;border-radius:var(--radius);
  box-shadow:var(--shadow-md);padding:.4rem;z-index:50;flex-direction:column;
}
.main-navigation ul ul li{width:100%}
.main-navigation ul ul a{
  display:block;padding:.55rem .7rem;font-size:.8rem;font-weight:600;
  color:var(--text-dark);border-radius:var(--radius-sm);
}
.main-navigation ul ul a:hover{background:var(--blue-tint);color:var(--blue-primary)}
.main-navigation li:hover > ul,
.main-navigation li:focus-within > ul{display:flex}

.menu-toggle{
  display:flex;flex-direction:column;gap:5px;padding:.4rem;margin-left:auto;
  background:none;border:none;
}
.menu-toggle span{display:block;width:22px;height:2px;background:var(--white);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.main-navigation.toggled ul{
  display:block;position:fixed;top:58px;left:0;right:0;
  background:var(--blue-dark);z-index:190;padding:1rem 1.1rem 2rem;
  box-shadow:0 20px 40px rgba(0,0,0,.4);max-height:calc(100vh - 58px);overflow-y:auto;
}
@media(max-width:979px){
  .main-navigation.toggled ul ul{position:static;box-shadow:none;background:none;padding-left:1.2rem}
  .main-navigation.toggled a{
    display:block;padding:.6rem .5rem;color:rgba(255,255,255,.8);
    font-size:.88rem;font-weight:700;border-bottom:1px solid rgba(255,255,255,.07);
    background:none;border-radius:0;
  }
}
@media(min-width:980px){
  .main-navigation{display:flex}
  .menu-toggle{display:none}
}

/* ═══════════════════════════════════════════════════════════════════
   6. BREADCRUMBS
   (.breadcrumbs stays full-bleed for its background; the list itself
   is boxed directly, so this works whether or not the template
   markup wraps it in a .wrap div)
═══════════════════════════════════════════════════════════════════ */
.breadcrumbs{background:var(--blue-dark);border-bottom:1px solid rgba(255,255,255,.07);padding:.55rem 0;width:100%}
.breadcrumbs .wrap{padding-block:0}
.breadcrumbs ol{
  display:flex;flex-wrap:wrap;gap:.25rem;list-style:none;font-size:.75rem;margin:0;
  max-width:var(--box-max);margin-inline:auto;padding-inline:var(--pad);width:100%;
}
.breadcrumbs li{display:flex;align-items:center;gap:.25rem}
.breadcrumbs li+li::before{content:"\203A";color:rgba(255,255,255,.3)}
.breadcrumbs a{color:rgba(255,255,255,.55)}
.breadcrumbs a:hover{color:var(--accent-light)}
.breadcrumbs .current{color:var(--accent-light);font-weight:600}

/* ═══════════════════════════════════════════════════════════════════
   7. POSTS / PAGES — entry-* structure standard to _s
   (nested inside the already-boxed #content/.site-content column,
   so no additional width rules are needed on these selectors)
═══════════════════════════════════════════════════════════════════ */
.entry-header{margin-bottom:1.5rem}
.entry-title{font-size:clamp(1.4rem,6vw,2rem);margin-bottom:.6rem}
.entry-title a{color:var(--text-dark)}
.entry-title a:hover{color:var(--blue-primary)}

.entry-meta{
  display:flex;flex-wrap:wrap;gap:.35rem 1rem;font-size:.76rem;color:var(--text-muted);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:.6rem 0;margin-bottom:1.5rem;
}
.entry-meta a{color:var(--text-muted)}
.entry-meta a:hover{color:var(--blue-primary)}

.cat-links a,
.tags-links a{
  display:inline-flex;align-items:center;background:var(--blue-tint);color:var(--blue-primary);
  border:1px solid rgba(49,108,166,.22);font-size:.65rem;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;padding:.25rem .8rem;
  border-radius:2rem;margin:0 .3rem .3rem 0;
}
.cat-links a:hover,
.tags-links a:hover{background:var(--blue-primary);color:#fff}

.post-thumbnail{margin-bottom:1.6rem;border-radius:var(--radius);overflow:hidden;background:var(--blue-dark);aspect-ratio:16/9}
.post-thumbnail img{width:100%;height:100%;object-fit:cover}

.entry-content{font-size:1rem;line-height:1.85;color:var(--text-body)}
.entry-content a{color:var(--blue-primary);text-underline-offset:3px;text-decoration:underline}
.entry-content a:hover{color:var(--blue-primary-d)}
.entry-content ul{list-style:disc}
.entry-content ol{list-style:decimal}
.entry-content li{margin-bottom:.45rem}
.entry-content img{border-radius:var(--radius);margin:1.5rem auto}
.entry-content figcaption,
.wp-caption-text{font-size:.78rem;color:var(--text-muted);text-align:center;margin-top:.4rem;font-style:italic}
@media(min-width:640px){.entry-content{font-size:1.03rem}}

.entry-content table,
table{
  width:100%;border-collapse:collapse;margin:1.5rem 0;border:1px solid var(--border);
  display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.entry-content th,table th{
  background:var(--blue-dark);color:#fff;font-weight:700;font-size:.68rem;
  letter-spacing:.04em;text-transform:uppercase;text-align:left;padding:.55rem .7rem;white-space:nowrap;max-width:640px
}
.entry-content td,table td{padding:.5rem .7rem;border-bottom:1px solid var(--border);font-size:.78rem}
.entry-content tr:nth-child(even) td{background:var(--off-white)}

.entry-footer{
  border-top:1px solid var(--border);padding-top:1.2rem;margin-top:1.6rem;
  font-size:.76rem;color:var(--text-muted);
}
.entry-footer a{color:var(--blue-primary)}

.page-links{margin-top:1.5rem}
.page-links a{
  display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;
  padding:0 .5rem;margin-right:.3rem;border:1px solid var(--border);border-radius:var(--radius-sm);
  color:var(--blue-primary);font-weight:700;font-size:.8rem;
}
.page-links a:hover{background:var(--blue-primary);color:#fff;border-color:var(--blue-primary)}

/* ═══════════════════════════════════════════════════════════════════
   8. ARCHIVE / INDEX CARDS
   (also nested inside the boxed #content column — archive listings
   share the same narrow width as single posts/pages, per the brief)
═══════════════════════════════════════════════════════════════════ */
.post,
article.type-post,
article.type-page{
  background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius);
  padding:1.2rem 1.3rem;margin-bottom:1.4rem;
}
.post .entry-title{font-size:1.15rem}
.archive-title,
.page-title{
  font-size:1.5rem;padding-bottom:.6rem;margin-bottom:1.6rem;
  border-bottom:2px solid var(--border);
}
.archive-title .highlight,
.taxonomy-description{color:var(--text-muted);font-size:.85rem;font-weight:400}

/* ═══════════════════════════════════════════════════════════════════
   9. PAGINATION / NAV-LINKS
═══════════════════════════════════════════════════════════════════ */
.pagination,
.nav-links,
.posts-navigation,
.post-navigation{
  display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem;padding-top:1.2rem;
  border-top:1px solid var(--border);
}
.pagination .page-numbers,
.nav-links a,
.nav-links span{
  display:inline-flex;align-items:center;justify-content:center;min-width:2.2rem;height:2.2rem;
  padding:0 .6rem;border:1px solid var(--border);border-radius:var(--radius-sm);
  font-size:.82rem;font-weight:700;color:var(--text-dark);background:var(--white);
}
.pagination .page-numbers.current,
.nav-links .current{background:var(--blue-primary);color:#fff;border-color:var(--blue-primary)}
.pagination a:hover,
.nav-links a:hover{border-color:var(--blue-primary);color:var(--blue-primary)}

.post-navigation .nav-previous,
.post-navigation .nav-next{
  flex:1 1 260px;background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius);
  padding:1.1rem 1.2rem;height:auto;
}
.post-navigation .nav-previous a,
.post-navigation .nav-next a{border:none;padding:0;height:auto;display:block;width:100%}
.post-navigation .nav-previous a:hover,
.post-navigation .nav-next a:hover{background:none}

/* ═══════════════════════════════════════════════════════════════════
   10. COMMENTS
═══════════════════════════════════════════════════════════════════ */
.comments-area{margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--border)}
.comments-title,
.comment-reply-title{font-size:1.15rem;margin-bottom:1.2rem}
.comment-list{list-style:none;margin:0}
.comment-list .comment{
  background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius);
  padding:1.1rem 1.2rem;margin-bottom:1rem;
}
.comment-list .children{list-style:none;margin-left:1.6rem;padding-top:1rem}
.comment-author .avatar{border-radius:50%;margin-right:.6rem;vertical-align:middle}
.comment-author .fn{font-weight:700;color:var(--text-dark);font-style:normal}
.comment-metadata{font-size:.72rem;color:var(--text-muted)}
.comment-metadata a{color:var(--text-muted)}
.comment-content p{margin-bottom:.8rem}
.comment-reply-link{
  display:inline-block;margin-top:.5rem;font-size:.76rem;font-weight:700;
  color:var(--blue-primary);border:1px solid rgba(49,108,166,.28);padding:.22rem .65rem;border-radius:.3rem;
}
.comment-reply-link:hover{background:var(--blue-primary);color:#fff}
.comment-form label{display:block;font-size:.78rem;font-weight:700;color:var(--text-dark);margin-bottom:.3rem}
.comment-form p{margin-bottom:1rem}
.comment-notes,.comment-awaiting-moderation{font-size:.78rem;color:var(--text-muted)}
.no-comments{font-size:.85rem;color:var(--text-muted);font-style:italic}

/* ═══════════════════════════════════════════════════════════════════
   11. FORMS — inputs, textareas, selects, buttons/search
═══════════════════════════════════════════════════════════════════ */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select{
  width:100%;font-family:inherit;font-size:.88rem;color:var(--text-dark);
  background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius-sm);
  padding:.65rem .85rem;transition:border-color .15s ease;
}
input:focus,textarea:focus,select:focus{border-color:var(--blue-primary);outline:none}
textarea{min-height:120px;resize:vertical}

button,
input[type="submit"],
input[type="button"],
.wp-block-button__link,
.button{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--accent);color:var(--white);
  font-weight:800;font-size:.82rem;letter-spacing:.01em;
  padding:.6rem 1.3rem;border-radius:.3rem;border:none;
  transition:background .15s ease;
}
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.button:hover{background:var(--accent-dim);color:var(--white)}
button.ghost,
.button.ghost{
  background:rgba(255,255,255,.1);color:var(--text-dark);border:1px solid var(--border);
}
button.ghost:hover{background:var(--blue-tint)}

.search-form{display:flex;gap:.5rem}
.search-form .search-field{flex:1}
.search-form .search-submit{flex-shrink:0}

.wp-caption{max-width:100%}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.7rem;margin:1.6rem 0}
.gallery-item img{border-radius:var(--radius-sm)}

/* ═══════════════════════════════════════════════════════════════════
   12. WIDGETS / SIDEBAR
   (nested inside the boxed #content column when used as a sidebar
   alongside .content-area — no extra width rules needed here)
═══════════════════════════════════════════════════════════════════ */
.widget-area{display:flex;flex-direction:column;gap:1.6rem}
.widget{
  background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius);
  padding:1.2rem 1.3rem;
}
.widget-title{
  font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.13em;
  color:var(--text-muted);margin-bottom:.9rem;padding-bottom:.5rem;
  border-bottom:1px solid var(--border);
}
.widget ul{list-style:none;margin:0}
.widget li{padding:.35rem 0;border-bottom:1px solid var(--border);font-size:.85rem}
.widget li:last-child{border-bottom:none}
.widget a{color:var(--text-dark)}
.widget a:hover{color:var(--blue-primary)}
.widget select,.widget input{margin-top:.4rem}
.widget_calendar table{font-size:.75rem}
.widget_calendar caption{font-weight:700;padding-bottom:.5rem}
.tagcloud a{
  display:inline-block;background:var(--off-white);border:1px solid var(--border);
  color:var(--text-dark);font-size:.73rem!important;font-weight:600;padding:.25rem .8rem;
  border-radius:2rem;margin:0 .3rem .3rem 0;
}
.tagcloud a:hover{background:var(--blue-primary);color:#fff;border-color:var(--blue-primary)}

/* ═══════════════════════════════════════════════════════════════════
   13. SITE FOOTER
   (.site-footer stays full-bleed for its background; .widget-area
   and .site-info are boxed directly at --box-max, matching the
   header, so this works with or without a .wrap div in footer.php)
═══════════════════════════════════════════════════════════════════ */
.site-footer{background:var(--blue-dark);padding:2.6rem 0 0;border-top:1px solid rgba(255,255,255,.06);color:rgba(255,255,255,.7);width:100%}
.site-footer .widget-area{
  display:grid;grid-template-columns:1fr;gap:1.8rem;padding-bottom:2rem;
  border-bottom:1px solid rgba(255,255,255,.06);
  max-width:var(--box-max);margin-inline:auto;padding-inline:1.1rem;width:100%;
}
.site-footer .widget{background:none;border:none;padding:0}
.site-footer .widget-title{color:rgba(255,255,255,.5);border-bottom:none}
.site-footer .widget li{border-bottom:1px solid rgba(255,255,255,.06);color:rgba(255,255,255,.5)}
.site-footer a{color:rgba(255,255,255,.6)}
.site-footer a:hover{color:var(--white)}
@media(min-width:540px){.site-footer .widget-area{grid-template-columns:1fr 1fr}}
@media(min-width:768px){
  .site-footer .widget-area{grid-template-columns:1.6fr 1fr 1fr 1fr;padding-inline:1.5rem}
}

.site-info{
  display:flex;flex-direction:column;gap:.5rem;padding-block:1.3rem;
  font-size:.7rem;color:rgba(255,255,255,.35);
  max-width:var(--box-max);margin-inline:auto;padding-inline:1.1rem;width:100%;
}
.site-info a{color:rgba(255,255,255,.5)}
.site-info a:hover{color:var(--white)}
@media(min-width:768px){.site-info{flex-direction:row;align-items:center;justify-content:space-between;padding-inline:1.5rem}}

/* ═══════════════════════════════════════════════════════════════════
   14. UTILITIES / MISC _s SELECTORS
═══════════════════════════════════════════════════════════════════ */
.sticky{border-left:4px solid var(--accent)}
.updated:not(.published){display:none}
.bypostauthor{}
.error404 .page-content{text-align:center;padding:3rem 0}
.error404 .search-form{max-width:420px;margin:1.5rem auto 0}

@media print{
  .site-header,.main-navigation,.menu-toggle,.widget-area,.comments-area{display:none}
}