/*
 * QCTC Tennis Home Board 1.2.5 (compact daily layout) - styles matched to quadcitytennisclub.com (Divi + QCTC child theme).
 * Every rule is scoped under .qtbh so it cannot touch the theme.
 * Palette source (live site CSS, Oct 17 2026):
 *   --qtbh-blue     #0C71C3  Welcome section background (.et_pb_section_1) and nav link color rgba(12,113,195,.84)
 *   --qtbh-blue-btn #0071ba  "Book a Court" / "Find Your Program" pill buttons (white text)
 *   --qtbh-lime     #7CDA24  "Fall Guide 2026" pill button (black text); hover #c0d80a (site button hover)
 *   --qtbh-lime-2   #7ad800  site link / active-menu color
 *   --qtbh-olive    #94c83e  tile buttons (Pickleball Info / View Tennis Programs), used for the open-play accent
 *   --qtbh-tint     #D6ECFA  light blue used in the site's QCTC content blocks; #2ea3f2 = Divi top bar
 *   Fonts: headings Fira Sans 700, body/buttons Poppins (both loaded by the theme)
 * To use a solid blue panel instead of the light one, set on .qtbh:
 *   --qtbh-bg:#0C71C3; --qtbh-head:#fff; --qtbh-meta:rgba(255,255,255,.85);
 */
.qtbh{--qtbh-blue:#0C71C3;--qtbh-blue-btn:#0071ba;--qtbh-blue-dark:#085a9c;--qtbh-lime:#7CDA24;--qtbh-lime-hover:#c0d80a;--qtbh-lime-2:#7ad800;
  --qtbh-tint:#D6ECFA;--qtbh-bg:#EEF6FC;--qtbh-head:#0C71C3;--qtbh-meta:#4a5560;--qtbh-ink:#222222;--qtbh-soft:#565656;--qtbh-line:#e3edf5;--qtbh-card:#ffffff;
  box-sizing:border-box;width:100%;background:var(--qtbh-bg);color:var(--qtbh-ink);font-family:'Poppins',Helvetica,Arial,Lucida,sans-serif;font-size:15px;line-height:1.45;
  padding:44px clamp(16px,3.5%,48px) 40px;border-radius:16px;text-align:left;container-type:inline-size;container-name:qtbh;-webkit-font-smoothing:antialiased}
.qtbh *,.qtbh *::before,.qtbh *::after{box-sizing:border-box;margin:0;padding:0;text-shadow:none}
.qtbh .qtbh-wrap{max-width:1320px;margin:0 auto}
.qtbh .qtbh-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 24px;margin-bottom:22px}
.qtbh .qtbh-kicker{font-family:'Poppins',Helvetica,Arial,sans-serif;font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--qtbh-soft);display:flex;align-items:center;gap:8px}
.qtbh .qtbh-dot{width:9px;height:9px;border-radius:50%;background:var(--qtbh-lime);animation:qtbh-pulse 2s infinite}
@keyframes qtbh-pulse{0%{box-shadow:0 0 0 0 rgba(124,218,36,.7)}70%{box-shadow:0 0 0 8px rgba(124,218,36,0)}100%{box-shadow:0 0 0 0 rgba(124,218,36,0)}}
@media (prefers-reduced-motion:reduce){.qtbh .qtbh-dot{animation:none}}
.qtbh .qtbh-title{font-family:'Fira Sans',Helvetica,Arial,Lucida,sans-serif;font-weight:700;font-size:40px;line-height:1.2;color:var(--qtbh-head);margin-top:2px;letter-spacing:0;text-transform:none}
.qtbh .qtbh-meta{font-size:14px;color:var(--qtbh-meta);text-align:right}
.qtbh .qtbh-meta b{color:inherit;font-weight:600}
.qtbh .qtbh-banner{display:none;background:#fff3a0;border:1px solid #e8d35a;color:#3a3000;font-weight:600;font-size:14px;border-radius:10px;padding:9px 14px;margin-bottom:16px}
.qtbh.qtbh-stale .qtbh-banner{display:block}
/* Buttons: same as the site's Divi pill buttons (Poppins 700, radius 50px, no border, soft drop shadow, title case). */
.qtbh a.qtbh-btn,.qtbh a.qtbh-btn:visited{justify-self:end;display:inline-block;text-align:center;font-family:'Poppins',Helvetica,Arial,Lucida,sans-serif;font-weight:700;font-size:15px;line-height:1.7;
  letter-spacing:0;text-transform:none;text-decoration:none;border:0;border-radius:50px;padding:6px 20px;white-space:nowrap;
  box-shadow:0 12px 18px -10px rgba(0,0,0,.4);transition:background-color .3s ease,box-shadow .3s ease}
.qtbh a.qtbh-btn::after,.qtbh a.qtbh-btn::before{content:none!important;display:none!important}
.qtbh a.qtbh-btn:hover{box-shadow:0 12px 18px -14px rgba(0,0,0,.4)}
.qtbh a.qtbh-reserve,.qtbh a.qtbh-reserve:visited{background:var(--qtbh-lime);color:#000}
.qtbh a.qtbh-reserve:hover,.qtbh a.qtbh-reserve:focus{background:var(--qtbh-lime-hover);color:#000}
.qtbh a.qtbh-signup,.qtbh a.qtbh-signup:visited{background:var(--qtbh-blue-btn);color:#fff}
.qtbh a.qtbh-signup:hover,.qtbh a.qtbh-signup:focus{background:var(--qtbh-blue-dark);color:#fff}
.qtbh a.qtbh-btn:focus-visible{outline:3px solid var(--qtbh-blue);outline-offset:2px}
.qtbh .qtbh-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:24px}
.qtbh .qtbh-note{font-size:13px;color:var(--qtbh-meta)}
.qtbh .qtbh-links{display:flex;flex-wrap:wrap;gap:12px}
.qtbh .qtbh-foot a.qtbh-btn{font-size:16px;padding:10px 30px}   /* exact site button size */
.qtbh .qtbh-empty{padding:10px 0 14px;color:var(--qtbh-soft);font-size:14px}
.qtbh{--qtbh-olive:#94c83e}
/* Header: kicker, then "Today" with the sport switch right beside it; date/updated on the right */
.qtbh .qtbh-headl{min-width:0;flex:1 1 auto}
.qtbh .qtbh-headline{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:2px}
.qtbh .qtbh-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Sport switch: large segmented pill. Active = solid site blue, white text; inactive = white, blue text, blue border. */
.qtbh .qtbh-tabs{display:inline-flex;gap:4px;padding:4px;background:#fff;border:2px solid var(--qtbh-blue);border-radius:50px;box-shadow:0 12px 18px -12px rgba(12,113,195,.45)}
.qtbh button.qtbh-tab{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:'Poppins',Helvetica,Arial,Lucida,sans-serif;font-weight:700;font-size:18px;line-height:1.3;letter-spacing:0;text-transform:none;
  border:0;border-radius:50px;padding:10px 26px;margin:0;background:#fff;color:var(--qtbh-blue);cursor:pointer;box-shadow:none;
  transition:background-color .15s ease,color .15s ease,box-shadow .15s ease;min-width:0;width:auto;height:auto;white-space:nowrap}
.qtbh button.qtbh-tab .qtbh-ico{width:20px;height:20px;flex:0 0 auto;display:block}
.qtbh button.qtbh-tab:hover{background:var(--qtbh-tint);color:var(--qtbh-blue-dark)}
.qtbh button.qtbh-tab[aria-selected="true"],.qtbh button.qtbh-tab[aria-selected="true"]:hover{background:var(--qtbh-blue);color:#fff;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.qtbh button.qtbh-tab:focus{outline:none}
.qtbh button.qtbh-tab:focus-visible{outline:3px solid var(--qtbh-lime);outline-offset:3px}
.qtbh button.qtbh-tab:active{transform:scale(.98)}
.qtbh .qtbh-head{align-items:flex-end}
.qtbh .qtbh-title{white-space:nowrap}
/* Banner ("hero"): one card with title, status / session chips and one action button */
.qtbh .qtbh-hero{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;background:#fff;border:1px solid var(--qtbh-line);
  border-left:6px solid var(--qtbh-blue);border-radius:12px;padding:18px 22px;box-shadow:0 12px 18px -10px rgba(0,0,0,.25)}
.qtbh[data-qtbh-active="pickleball"] .qtbh-hero{border-left-color:var(--qtbh-olive)}
.qtbh .qtbh-hero-main{min-width:0;flex:1 1 auto}
.qtbh .qtbh-hero-title{font-family:'Fira Sans',Helvetica,Arial,Lucida,sans-serif;font-weight:700;font-size:24px;line-height:1.25;color:var(--qtbh-blue);margin-bottom:10px}
.qtbh .qtbh-hero-act{flex:0 0 auto}
.qtbh .qtbh-hero-act a.qtbh-btn{font-size:16px;padding:10px 30px}
.qtbh .qtbh-hint{font-size:14px;color:var(--qtbh-soft)}
/* Tennis status line */
.qtbh .qtbh-status{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--qtbh-ink);background:#f3f6f9;border-radius:50px;padding:6px 14px}
.qtbh .qtbh-sdot{width:9px;height:9px;border-radius:50%;background:#aab4bf;flex:0 0 auto}
.qtbh .qtbh-status.is-open{background:#eefadf}
.qtbh .qtbh-status.is-open .qtbh-sdot{background:var(--qtbh-lime)}
/* Open-play session chips */
.qtbh ul.qtbh-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.qtbh li.qtbh-chip{list-style:none;display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14px;line-height:1.2;color:var(--qtbh-ink);
  background:#fff;border:1px solid #cfdbe6;border-radius:50px;padding:6px 13px;white-space:nowrap}
.qtbh li.qtbh-chip::before{content:none}
.qtbh li.qtbh-chip.is-now{background:var(--qtbh-olive);border-color:var(--qtbh-olive);color:#000}
.qtbh li.qtbh-chip.is-past{opacity:.45;text-decoration:line-through;text-decoration-thickness:1px}
.qtbh .qtbh-now{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--qtbh-blue);color:#fff;border-radius:50px;padding:2px 7px;line-height:1.3}
/* Classes today */
.qtbh .qtbh-classes{margin-top:22px}
.qtbh .qtbh-subhead{font-family:'Fira Sans',Helvetica,Arial,Lucida,sans-serif;font-weight:700;font-size:24px;line-height:1.25;letter-spacing:0;text-transform:none;color:var(--qtbh-blue);margin:0 0 12px;padding:0}
.qtbh ul.qtbh-clist{list-style:none;margin:0;padding:0;background:#fff;border:1px solid var(--qtbh-line);border-radius:12px;overflow:hidden;box-shadow:0 12px 18px -10px rgba(0,0,0,.2)}
.qtbh li.qtbh-class{list-style:none;display:grid;grid-template-columns:190px minmax(0,1fr) auto;align-items:center;gap:6px 18px;padding:12px 20px;border-top:1px solid var(--qtbh-line)}
.qtbh li.qtbh-class::before{content:none}
.qtbh li.qtbh-class:first-child{border-top:0}
.qtbh li.qtbh-class.is-now{background:#f5fbff}
.qtbh .qtbh-ctime{font-weight:700;font-size:14px;color:var(--qtbh-ink);white-space:nowrap;display:flex;align-items:center;gap:8px}
.qtbh .qtbh-cwhat{min-width:0}
.qtbh .qtbh-ctitle{font-weight:600;font-size:15px;line-height:1.3;color:var(--qtbh-ink);overflow-wrap:anywhere}
.qtbh .qtbh-ccourts{font-size:12.5px;color:var(--qtbh-soft)}
.qtbh .qtbh-cspacer{display:block;width:1px}
.qtbh .qtbh-classes{margin-top:26px}
/* Tennis: open-court chips */
.qtbh ul.qtbh-courts{display:flex;flex-wrap:wrap;gap:8px 10px;list-style:none;margin:0;padding:0}
.qtbh li.qtbh-cchip{list-style:none;display:inline-flex;align-items:center;gap:7px;background:#eefadf;border:1px solid #c6eba0;border-radius:50px;padding:7px 14px;
  font-size:15px;line-height:1.2;color:var(--qtbh-ink);white-space:nowrap}
.qtbh li.qtbh-cchip::before{content:none}
.qtbh li.qtbh-cchip .qtbh-sdot{background:var(--qtbh-lime)}
.qtbh li.qtbh-cchip b{font-weight:700}
.qtbh .qtbh-until{font-weight:500;color:#3d4650}
.qtbh .qtbh-later{margin-top:10px;font-size:13.5px;color:var(--qtbh-soft)}
.qtbh .qtbh-later b{font-weight:600;color:var(--qtbh-ink)}
/* Layout follows the widget's own width (works in a narrow Divi row or a full-width section). */
.qtbh.qtbh-full,.qtbh-fullwidth .qtbh{border-radius:0}
@media (min-width:1600px){.qtbh .qtbh-wrap{max-width:1440px}}
@container qtbh (max-width:760px){
  .qtbh li.qtbh-class{grid-template-columns:minmax(0,1fr) auto}
  .qtbh .qtbh-ctime{grid-column:1/-1}
}
@container qtbh (max-width:620px){
  .qtbh .qtbh-title{font-size:30px}
  .qtbh .qtbh-head{flex-direction:column;align-items:stretch}
  .qtbh .qtbh-headline{gap:10px 14px}
  .qtbh button.qtbh-tab{font-size:16px;padding:8px 16px;gap:6px}
  .qtbh button.qtbh-tab .qtbh-ico{width:18px;height:18px}
  .qtbh .qtbh-meta{text-align:left}
  .qtbh .qtbh-hero{flex-direction:column;align-items:stretch;padding:16px}
  .qtbh .qtbh-hero-title{font-size:21px}
  .qtbh .qtbh-subhead{font-size:21px}
  .qtbh li.qtbh-cchip{font-size:13px;padding:6px 11px;gap:6px}
  .qtbh .qtbh-hero-act{width:100%}
  .qtbh .qtbh-hero-act a.qtbh-btn{display:block;width:100%;text-align:center}
  .qtbh li.qtbh-class{padding:12px 14px}
  .qtbh li.qtbh-class a.qtbh-btn{padding:5px 16px;font-size:14px}
  .qtbh .qtbh-foot{flex-direction:column;align-items:stretch}
  .qtbh .qtbh-links{flex-direction:column}
  .qtbh .qtbh-foot a.qtbh-btn{text-align:center;justify-self:stretch}
}
/* Fallback for browsers without container queries */
@supports not (container-type:inline-size){
  @media (max-width:640px){.qtbh .qtbh-hero{flex-direction:column;align-items:stretch}.qtbh li.qtbh-class{grid-template-columns:minmax(0,1fr) auto}.qtbh .qtbh-ctime{grid-column:1/-1}.qtbh .qtbh-foot{flex-direction:column;align-items:stretch}}
}
@media (max-width:640px){.qtbh{padding:30px 14px 28px;border-radius:12px}}
/* Very narrow: the switch drops under "Today" and spans the full width. */
@container qtbh (max-width:400px){
  .qtbh .qtbh-tabs{display:flex;flex:1 1 100%}
  .qtbh button.qtbh-tab{flex:1 1 0;padding:9px 10px}
}

/* ---------- 1.2.4: full-width section background (shortcode bg="photo|pattern", filter qctc_tennis_home_bg) ---------- */
/* The band breaks out of the Divi row to the full viewport width; --qtbh-sbw (set by the script) removes the scrollbar width
   so 100vw never adds a horizontal scrollbar, and the Divi section clips any remainder. */
.qtbh-band{--qtbh-sbw:0px;position:relative;box-sizing:border-box;display:block;width:100vw;width:calc(100vw - var(--qtbh-sbw));max-width:none;
  margin:0 0 0 calc(50% - 50vw + var(--qtbh-sbw) / 2);padding:clamp(44px,6.5vw,88px) clamp(14px,4vw,40px);background-color:#0a2347;isolation:isolate}
.qtbh-band *,.qtbh-band *::before,.qtbh-band *::after{box-sizing:border-box}
.qtbh-band .qtbh-band-in{position:relative;z-index:1;max-width:1080px;margin:0 auto}
/* Remove the white Divi section/row padding around the band so the background meets the hero and the blue section. */
.et_pb_section:has(.qtbh-band){padding-top:0!important;padding-bottom:0!important;overflow-x:clip}
.et_pb_section:has(.qtbh-band) .et_pb_row:has(.qtbh-band){padding-top:0!important;padding-bottom:0!important}
.et_pb_section:has(.qtbh-band) .et_pb_module:has(.qtbh-band){margin-bottom:0!important}
/* The board card stays white on top of the background, with a soft shadow. */
.qtbh-band .qtbh{--qtbh-bg:#ffffff;border-radius:18px;box-shadow:0 22px 60px rgba(2,14,34,.38),0 3px 10px rgba(2,14,34,.20)}
.qtbh-band .qtbh .qtbh-hero{background:#f6fafd}
/* A) photo: indoor courts photo under a dark navy overlay (distinct from the solid #0C71C3 section below). */
.qtbh-band--photo{--qtbh-photo:url('https://quadcitytennisclub.com/wp-content/uploads/2026/06/Flow_IMG_20260604_165847_01_942-copy.webp');
  background:linear-gradient(180deg,rgba(5,22,50,.84) 0%,rgba(7,33,72,.80) 55%,rgba(5,22,50,.86) 100%),var(--qtbh-photo) center 40%/cover no-repeat,#0a2347}
/* B) pattern: deep green gradient, subtle white court lines, lime glow; lime accent on the card. */
.qtbh-band--pattern{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180' viewBox='0 0 320 180'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.6'%3E%3Cpath stroke-opacity='.11' d='M30 30h260v120h-260zM30 45.0h260M30 135.0h260M90.0 45.0V135.0M230.0 45.0V135.0M90.0 90.0H230.0M30 90.0h6M290 90.0h-6'/%3E%3Cpath stroke-opacity='.16' stroke-dasharray='2 5' d='M160.0 22V158'/%3E%3C/g%3E%3C/svg%3E") center top/320px 180px repeat,
  radial-gradient(ellipse at 88% 0%,rgba(124,218,36,.22) 0%,rgba(124,218,36,0) 46%),
  radial-gradient(ellipse at 8% 100%,rgba(124,218,36,.12) 0%,rgba(124,218,36,0) 40%),
  linear-gradient(160deg,#0B5132 0%,#083f27 55%,#052a1a 100%);background-color:#0B5132}
.qtbh-band--pattern::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:#7CDA24;z-index:0}
.qtbh-band--pattern .qtbh{border-top:5px solid #7CDA24}
@media (max-width:700px){
  .qtbh-band{padding:36px 12px 40px}
  .qtbh-band .qtbh{border-radius:14px}
  .qtbh-band--pattern{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180' viewBox='0 0 320 180'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.6'%3E%3Cpath stroke-opacity='.11' d='M30 30h260v120h-260zM30 45.0h260M30 135.0h260M90.0 45.0V135.0M230.0 45.0V135.0M90.0 90.0H230.0M30 90.0h6M290 90.0h-6'/%3E%3Cpath stroke-opacity='.16' stroke-dasharray='2 5' d='M160.0 22V158'/%3E%3C/g%3E%3C/svg%3E") center top/240px 135px repeat,
  radial-gradient(ellipse at 90% 0%,rgba(124,218,36,.22) 0%,rgba(124,218,36,0) 50%),
  linear-gradient(170deg,#0B5132 0%,#083f27 55%,#052a1a 100%);background-color:#0B5132}
}
@media print{.qtbh-band{width:auto;margin:0;padding:0;background:none}}