/*
Theme Name: Hartmann Hub
Theme URI: https://charleshartmann.com/
Description: Dark, fast hub for CharlesHartmann.com: Hartmann Studios apps, Homelab the Right Way blog, podcast, videos, ebooks and links. Child of Twenty Twenty-Four. Content comes from the Hartmann Hub mu-plugin shortcodes.
Author: Charles Hartmann
Template: twentytwentyfour
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
Text Domain: hartmann-hub
*/
:root{--hh-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}
body{-webkit-font-smoothing:antialiased}
.hh-header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);background:rgba(11,14,20,.82)!important;border-bottom:1px solid #232a3a}
.admin-bar .hh-header{top:32px}
.hh-header .wp-block-site-title a{font-family:var(--hh-mono);font-weight:600;letter-spacing:-.01em;text-decoration:none}
.hh-header .wp-block-site-title a:before{content:"~/";color:#7cf2b0;margin-right:2px}
.hh-header .wp-block-navigation{font-size:15px;gap:1.3em}
.hh-header .wp-block-navigation a{text-decoration:none}
.hh-header .wp-block-navigation a:hover{color:#7cf2b0}
.wp-block-navigation__responsive-container.is-menu-open{background:#0b0e14!important;color:#e6e8ee!important}
.wp-block-navigation .wp-block-navigation__submenu-container{background:#11151f!important;border:1px solid #232a3a!important;border-radius:10px;padding:6px 0}
.hh-footer{border-top:1px solid #232a3a}
.hh-footer a{text-decoration:none}
.hh-footer a:hover{color:#7cf2b0}
.hh-footer h2{font-family:var(--hh-mono);font-size:13px!important;color:#7cf2b0;font-weight:500;letter-spacing:.02em;margin-bottom:.6em}
.hh-footer ul{list-style:none;padding:0;margin:0;line-height:2}
code,kbd,pre{font-family:var(--hh-mono)}
.wp-block-post-content a:not(.hs-btn):not(.hs-lt){text-underline-offset:3px}
.wp-block-post-title{letter-spacing:-.03em}

/* 2026-10-23: mobile menu fix. A backdrop-filter on the sticky header made the fixed menu overlay only as tall as the header (only "Home" showed). The blur now lives on a pseudo-element. */
.hh-header{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:transparent!important}
.hh-header:before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(11,14,20,.82);backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);pointer-events:none}
.wp-block-navigation__responsive-container.is-menu-open{position:fixed!important;inset:0!important;height:100vh;height:100dvh;overflow-y:auto!important;padding:24px!important;z-index:100000}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{padding-top:40px}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{font-size:18px}
/* 2026-10-23: "Contact Us" popup (Sticky Floating Forms + CF7) styled to match the dark theme and fit phones */
.cww-ssf-outer-wrapp .cww-sff-wrapp{background:#121722!important;color:#e6e8ee!important;border:1px solid #232a3a;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.65)!important;box-sizing:border-box;width:min(520px,calc(100vw - 24px))!important;max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow-y:auto;padding:28px 24px 20px!important;font-size:0}
.cww-ssf-outer-wrapp .cww-sff-wrapp>a{display:none!important}
.cww-ssf-outer-wrapp .cww-sff-wrapp .wpcf7{font-size:15px;line-height:1.45}
.cww-ssf-outer-wrapp .cww-sff-wrapp .wpcf7 p{margin:0 0 12px}
.cww-ssf-outer-wrapp .cww-sff-wrapp label{color:#9aa3b5!important;font-size:14px;display:block;width:100%}
.cww-ssf-outer-wrapp .cww-sff-wrapp input:not([type=submit]),.cww-ssf-outer-wrapp .cww-sff-wrapp textarea{width:100%!important;box-sizing:border-box;background:#0b0e14!important;color:#e6e8ee!important;border:1px solid #2b3346!important;border-radius:10px!important;padding:10px 12px!important;font:inherit;font-size:16px;margin-top:4px}
.cww-ssf-outer-wrapp .cww-sff-wrapp textarea{height:110px!important;resize:vertical}
.cww-ssf-outer-wrapp .cww-sff-wrapp input[type=submit]{width:100%;background:#7cf2b0!important;color:#06120c!important;border:0!important;border-radius:10px!important;padding:12px!important;font-weight:700;font-size:16px;cursor:pointer}
.cww-ssf-outer-wrapp .cww-sff-wrapp i.dashicons{color:#e6e8ee!important;font-size:22px}
.cww-ssf-outer-wrapp .cww-sff-wrapp .wpcf7-quiz-label{display:block;margin:2px 0 4px}
.cww-ssf-outer-wrapp .cww-sff-wrapp .wpcf7-response-output{color:#e6e8ee;border-radius:8px}
.cww-ssf-outer-wrapp .cww-ssf-toggle{background:#7cf2b0!important;color:#06120c!important;font-weight:700}

/* 2026-10-23: anchor jumps (e.g. /#contact) land below the sticky header */
html{scroll-padding-top:72px}

/* 2026-10-23: desktop "More" dropdown links were black on the dark panel */
.hh-header .wp-block-navigation__submenu-container{background:#121722!important;border:1px solid #232a3a!important;border-radius:10px;padding:6px 0!important}
.hh-header .wp-block-navigation__submenu-container a,.hh-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content{color:#e6e8ee!important}
.hh-header .wp-block-navigation__submenu-container a:hover{color:#7cf2b0!important}
/* 2026-10-23: Contact Form 7 outside the showcase sections (e.g. /contact/) matched to the dark theme */
.wp-block-post-content .wpcf7 label{color:#9aa3b5;font-size:14px;display:block;width:100%}
.wp-block-post-content .wpcf7 input:not([type=submit]),.wp-block-post-content .wpcf7 textarea{width:100%;max-width:560px;box-sizing:border-box;background:#121722;color:#e6e8ee;border:1px solid #2b3346;border-radius:10px;padding:10px 12px;font:inherit;font-size:16px;margin-top:4px}
.wp-block-post-content .wpcf7 textarea{height:140px}
.wp-block-post-content .wpcf7 .wpcf7-quiz-label{display:block;margin-bottom:4px}
.wp-block-post-content .wpcf7 input[type=submit]{background:#7cf2b0;color:#06120c;border:0;border-radius:10px;padding:12px 26px;font-weight:700;font-size:16px;cursor:pointer}
.wpcf7 .wpcf7-not-valid-tip{color:#ff8a8a;font-size:13px}
.wpcf7 form .wpcf7-response-output{border-radius:8px;color:#e6e8ee}

/* 2026-10-23: CF7 result popups (cf7-popups / SweetAlert2) were a white box; match the dark theme */
.swal2-popup{background:#121722!important;color:#e6e8ee!important;border:1px solid #232a3a!important;border-radius:14px!important}
.swal2-popup .swal2-title{color:#fff!important}
.swal2-popup .swal2-html-container,.swal2-popup .swal2-content{color:#c8cdd7!important}
.swal2-popup .swal2-close{color:#9aa3b5!important}
.swal2-popup .swal2-confirm{background:#7cf2b0!important;color:#06120c!important;font-weight:700}

.swal2-modal{background:#121722!important;color:#e6e8ee!important;border:1px solid #232a3a!important;border-radius:14px!important;max-width:calc(100vw - 24px)!important;box-sizing:border-box}
.swal2-modal .swal2-title{color:#fff!important}
.swal2-modal .swal2-content{color:#c8cdd7!important}
.swal2-modal .swal2-close{color:#9aa3b5!important}
.swal2-modal .swal2-confirm{background:#7cf2b0!important;color:#06120c!important;font-weight:700}


/* 2026-10-23: App Gallery (/gallery/, shortcode [hs_gallery]) promo cards */
.hs-gallery .hs-chips a span{opacity:.6;margin-left:2px}
.hs-promo-grid{display:grid;gap:18px;grid-template-columns:minmax(0,1fr);margin-top:14px}
@media(min-width:620px){.hs-promo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:980px){.hs-promo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1280px){.hs-promo-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.hs-promo{display:flex;flex-direction:column;min-width:0;background:var(--hs-card,#151a26);border:1px solid var(--hs-line,#232a3a);border-radius:16px;overflow:hidden;transition:border-color .15s,transform .15s}
.hs-promo:hover{border-color:#3a4763;transform:translateY(-2px)}
.hs-promo-art{position:relative;height:150px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(135deg,#1b2233,#10141e)}
.hs-promo-art:before{content:"";position:absolute;inset:-30px;background-image:var(--hs-art);background-size:cover;background-position:center;filter:blur(28px) saturate(1.5);opacity:.55;transform:scale(1.2)}
.hs-promo-art:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,14,20,0) 40%,rgba(21,26,38,.9))}
.hs-promo-art img{position:relative;z-index:1;width:96px;height:96px;border-radius:22px;box-shadow:0 10px 30px rgba(0,0,0,.45);display:block}
.hs-promo-body{display:flex;flex-direction:column;flex:1;padding:14px 18px 18px}
.hs-promo-cat{font-family:var(--hs-mono,monospace);font-size:11.5px;color:var(--hs-acc,#7cf2b0);text-transform:uppercase;letter-spacing:.05em}
.hs-promo h3{margin:6px 0 2px;font-size:19px;line-height:1.25;color:#fff;letter-spacing:-.01em;overflow-wrap:anywhere}
.hs-promo-sub{margin:0;color:#c9cedb;font-size:14px;font-weight:600}
.hs-promo-pitch{margin:8px 0 0;color:var(--hs-mute,#9aa3b5);font-size:14.5px;line-height:1.5}
.hs-promo-cta{margin-top:auto;padding-top:16px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hs a.hs-gp,.hs-gp{display:inline-flex;align-items:center;gap:9px;padding:8px 14px 8px 12px;border-radius:10px;background:#000;border:1px solid #3a4152;color:#fff!important;line-height:1.1;font-weight:600;font-size:16px;transition:border-color .15s,transform .15s}
.hs a.hs-gp:hover{border-color:var(--hs-acc,#7cf2b0);color:#fff!important;transform:translateY(-1px)}
.hs-gp svg{color:var(--hs-acc,#7cf2b0);flex:0 0 18px}
.hs-gp span{display:flex;flex-direction:column}
.hs-gp small{font-size:9.5px;font-weight:500;letter-spacing:.08em;color:#c9cedb}
.hs-gp-soon{background:transparent;border-style:dashed;border-color:rgba(243,198,107,.5);cursor:default}
.hs-gp-soon svg{color:#f3c66b}
.hs-gp-soon small{color:#f3c66b}
.hs-promo-soon .hs-promo-art img{opacity:.85}

/* 2026-10-23 (task 9aa805e1): one clean menu. Phones AND tablets (<1024px) use the single hamburger; the nav no longer wraps into two rows at 600-1023px. In the open menu the "More" group is flattened into the same list (no second boxed menu). */
@media (min-width:600px) and (max-width:1023px){
 .hh-header .wp-block-navigation__responsive-container-open:not(.always-shown){display:flex!important}
 .hh-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open){display:none!important}
 .hh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close{display:flex!important}
}
.hh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.hh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{align-items:flex-start!important;width:100%}
.hh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{gap:0!important}
.hh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{width:100%;border-bottom:1px solid #1c2230}
.hh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{display:block;width:100%;padding:13px 4px!important;text-align:left}
.hh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu{border-bottom:0}
.hh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu>.wp-block-navigation-item__content,
.hh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu>.wp-block-navigation__submenu-icon{display:none!important}
.hh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container{position:static!important;border:0!important;background:transparent!important;padding:0!important;margin:0!important;border-radius:0!important;width:100%!important;min-width:0!important;box-shadow:none!important;opacity:1!important;visibility:visible!important;height:auto!important}
.hh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content{padding:13px 4px!important}
.hh-header .wp-block-navigation__responsive-container.is-menu-open a:focus{outline:none}
.hh-header .wp-block-navigation__responsive-container.is-menu-open a:focus-visible{outline:2px solid #7cf2b0;outline-offset:2px}

/* hide the floating Beer + Contact Us buttons while the menu overlay is open */
html.has-modal-open #bmc-wbtn,html.has-modal-open #bmc-iframe,html.has-modal-open #cww-sff-disp-wrap-outer{display:none!important}

/* 2026-10-23 (task 9aa805e1): Book time with me card (mu-plugins/hs-booking.php) */
.hs-book{margin:8px 0 32px;padding:22px;border:1px solid #232a3a;border-radius:14px;background:#11151f;scroll-margin-top:90px}
.hs-book h2{margin:0 0 6px;font-size:1.35rem}
.hs-book p{margin:0 0 14px;color:#b9c0cf}
.hs-book-form[hidden],.hs-book-open[hidden]{display:none!important}
.hs-book-q{display:block;margin-bottom:8px}
.hs-book-row{display:flex;gap:10px;flex-wrap:wrap}
.hs-book-row input{width:110px;padding:10px 12px;border-radius:10px;border:1px solid #2c3446;background:#0b0e14;color:#e6e8ee;font-size:16px}
.hs-book-msg{min-height:1.4em;margin:10px 0 0!important;font-size:.95rem}
.hs-book-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.hs-book .hs-btn{display:inline-flex;align-items:center;padding:11px 18px;border-radius:10px;border:0;background:#7cf2b0;color:#0b0e14!important;font-size:15px;font-weight:700;line-height:1.2;cursor:pointer}
.hs-book .hs-btn:hover{filter:brightness(1.08)}