.Announcement {
  font-style: bold;
  color: #333333;
}

ul.sf-menu.sf-horizontal.sf-js-enabled li{
    margin-right:   30px;
}

.mainmenu-last {
    margin-right:0px !important;
}

.footer-main {
    background-color: #f9f9f9;
}

.footer-message {
    padding-right: 8%;
    color: #595959;
    word-spacing: 5px;
    line-height: 18px;    
 }

.footer-main #socnet li {
    padding: 0;
    color: #595959;
}

.header-adjust {
    height: 35px;
}

@media (max-width: 480px) {
.header-adjust {
    height: 0px;
}
}

.TopPages ul.sf-menu.sf-horizontal.sf-js-enabled li{
    margin-right:   44px;
}

.TopPages li:last-of-type {
    margin-right:0px !important;
}

/* Proposal 022: hide the BQUniversity page link in the top page row by its address, not its position (reordering pages must not hide a different page). */
.TopPages li:has(> a[href*="/bquniversity-jay-lytle-free-resources/"]) {
display:none;
}

.TopSubMenu {
    background-color: #f9f9f9;
    z-index:20;
    border-top: 1px solid #B6B6B6;
    border-bottom: 1px solid #B6B6B6;
    margin-bottom:0px;
    }

.double-border {
    border-top: 1px solid #B6B6B6;
    padding-top: 5px;
    border-bottom: 1px solid #B6B6B6;
    padding-bottom: 5px;
}

.DownloadItem a {
       color: blue !important;
       font-size: 150%  !important;
    }

.DownloadItem a:hover {
       color: lightblue  !important;
       font-size: 150%  !important;
    }


.header {
    border-bottom:0px;
    }

/* Proposal 020: make the top category menu stand out (bold navy). Header copy only; the phone drawer menu keeps its own white-on-grey style. */
.header .PageMenu #SideCategoryList .SideCategoryListFlyout > ul.sf-menu > li > a {
    font-weight: 700;
    color: #0b4a8b;
}
.header .PageMenu #SideCategoryList .SideCategoryListFlyout > ul.sf-menu > li > a:hover {
    text-decoration: underline;
}

/* Proposal 021: easier-to-see top links (My Account, Sign in...) and search box. */
.header .TopMenu,
.header .TopMenu a {
    color: #4a4a4a;
    font-size: 13px;
}
.header .TopMenu a:hover {
    color: #0b4a8b;
    text-decoration: underline;
}
#SearchForm {
    border: 2px solid #0b4a8b;
    border-radius: 4px;
    box-sizing: border-box;
}
#SearchForm #search_query {
    color: #333;
}
#SearchForm .Button {
    background-color: transparent;
    filter: brightness(0.3);
}
@media screen and (min-width: 769px) {
    #SearchForm { width: 320px; }
    #SearchForm form { width: 316px; }
    #SearchForm #search_query { width: 236px; font-size: 15px; }
}

/* Proposal 023: retail-style header. One dark top bar (logo, search, page tabs, account menu, orders, cart),
   one category bar, and equal buttons below 1,280px. Supersedes the look of 020 and 021 (their rules stay above, overridden here). */

/* -- All widths --
   Every rule for the bar applies only once the new Header.html is saved: it adds the classes .header.bq-header and
   #Header.bq-bar, which nothing else has. So the minutes between saving this file and saving Header.html leave today's bar
   as it is, in every browser (plain classes, not :has(), so older browsers also get the full new header).
   Only the category bar's colours and buttons apply early. */
.header.bq-header .double-border { display: none; }
#Header.bq-bar { background: #1f1f1f; border: 0; }
#Header.bq-bar > .inner { display: flex; align-items: center; gap: 16px; width: auto; max-width: none; margin: 0; padding: 8px 18px; box-sizing: border-box; background: none; }
#Header.bq-bar #ToggleMenu { display: none; }
#Header.bq-bar .header-logo { float: none; flex: 0 0 auto; display: flex; margin: 0; padding: 3px 6px; background: #fff; border-radius: 6px; }
#Header.bq-bar .header-logo img { display: block; width: auto; height: 54px; max-height: none; margin: 0; }
#Header.bq-bar .bq-search { flex: 1 1 auto; min-width: 0; }
#Header.bq-bar #SearchForm { float: none; width: 100%; height: 42px; margin: 0; padding: 0; border: 2px solid #f5c400; border-radius: 6px; background: #fff; box-sizing: border-box; overflow: hidden; }
#Header.bq-bar #SearchForm form { display: flex; width: 100%; height: 100%; margin: 0; }
#Header.bq-bar #SearchForm label { display: none; }
#Header.bq-bar #SearchForm #search_query { flex: 1 1 auto; width: auto; min-width: 0; height: 100%; margin: 0; padding: 0 12px; border: 0; background: #fff; color: #333; font-size: 16px; line-height: normal; }
#Header.bq-bar #SearchForm .Button { position: static; flex: 0 0 52px; width: 52px; height: 100%; margin: 0; border: 0; filter: none; background: #f5c400 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='10' r='6.5' fill='none' stroke='%231f1f1f' stroke-width='2.6'/%3E%3Cline x1='15' y1='15' x2='21' y2='21' stroke='%231f1f1f' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 22px 22px; }
#Header.bq-bar .bq-tabs { display: flex; flex: 0 0 auto; gap: 10px; }
#Header.bq-bar .bq-tab { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 6px; color: #fff; font-size: 15px; font-weight: 700; white-space: nowrap; text-decoration: none; }
#Header.bq-bar .bq-tab:hover { background: rgba(255, 255, 255, .12); }
#Header.bq-bar .bq-tab-new { border: 2px solid #f5c400; color: #f5c400; }
#Header.bq-bar .bq-tab-new:hover { background: #f5c400; color: #1f1f1f; }
#Header.bq-bar .bq-orders { flex: 0 0 auto; color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; text-decoration: none; }
#Header.bq-bar .bq-orders:hover { text-decoration: underline; }

/* Account menu: the TopMenu panel. Closed, it shows "My Account"; hover or keyboard focus opens the rest. */
#Header.bq-bar .TopMenu { display: block; position: relative; flex: 0 0 auto; width: 112px; height: 40px; margin: 0; padding: 0; border: 0; background: none; }
#Header.bq-bar .TopMenu > .inner { width: auto; margin: 0; padding: 0; }
#Header.bq-bar .TopMenu ul { position: absolute; top: 0; right: 0; z-index: 60; min-width: 112px; margin: 0; padding: 0; list-style: none; text-align: left; }
#Header.bq-bar .TopMenu ul > li { display: none; float: none; margin: 0; padding: 0; border: 0; }
#Header.bq-bar .TopMenu ul > li.First { display: block; }
#Header.bq-bar .TopMenu li.First > a { display: block; color: #fff; font-size: 14px; font-weight: 700; line-height: 40px; white-space: nowrap; text-decoration: none; }
#Header.bq-bar .TopMenu li.First > a:after { content: " \25BE"; }
#Header.bq-bar .TopMenu:hover ul,
#Header.bq-bar .TopMenu:focus-within ul { min-width: 220px; padding: 0 0 8px; background: #fff; border: 1px solid #ddd; border-radius: 6px; box-shadow: 0 4px 14px rgba(0, 0, 0, .2); }
#Header.bq-bar .TopMenu:hover li.First > a,
#Header.bq-bar .TopMenu:focus-within li.First > a { padding: 0 14px; color: #222; border-bottom: 1px solid #eee; }
#Header.bq-bar .TopMenu:hover ul > li:not(.First):not(.CartLink):not(.HeaderLiveChat):not(.js-drawermenu-store-phone-container):not(.js-drawermenu-currency-converter),
#Header.bq-bar .TopMenu:focus-within ul > li:not(.First):not(.CartLink):not(.HeaderLiveChat):not(.js-drawermenu-store-phone-container):not(.js-drawermenu-currency-converter) { display: block; }
#Header.bq-bar .TopMenu ul > li:not(.First) > a { display: block; padding: 7px 14px; color: #222; font-size: 14px; white-space: nowrap; text-decoration: none; }
#Header.bq-bar .TopMenu ul > li:not(.First) > a:hover { background: #f4f4f4; color: #c8102e; }
#Header.bq-bar .TopMenu ul > li > div { padding: 7px 14px; color: #555; font-size: 13px; white-space: nowrap; }
#Header.bq-bar .TopMenu ul > li > div a { display: inline; padding: 0; color: #222; font-weight: 700; }
#DrawerMenu .bq-acct-downloads { display: none; }

/* Cart: the theme's #cart-amount (its count is filled in by the theme's script). */
#Header.bq-bar #cart-amount { display: block; flex: 0 0 auto; width: auto; margin: 0; padding: 0; }
#Header.bq-bar #cart-amount .Cart { display: flex; align-items: center; gap: 5px; position: relative; width: auto; padding: 0; color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; }
#Header.bq-bar #cart-amount .Cart:before { content: "\f07a"; font-family: FontAwesome; font-size: 24px; font-weight: normal; }
#Header.bq-bar #cart-amount .bag-handle { display: none; }
#Header.bq-bar #cart-amount .total { position: absolute; top: -8px; left: 12px; min-width: 0; height: auto; padding: 0 5px; border: 0; border-radius: 9px; background: #f5c400; color: #1f1f1f; font-size: 11px; line-height: 16px; }
#Header.bq-bar #cart-amount .total:empty { display: none; }

/* Category bar */
.header .PageMenu:not(.TopSubMenu) { background: #2e2e2e; border: 0; border-bottom: 3px solid #c8102e; }
.header .PageMenu:not(.TopSubMenu) > .inner { width: auto; max-width: none; margin: 0; padding: 4px 12px; background: none; }
.header .PageMenu #SideCategoryList { float: none; margin: 0; padding: 0; }
.header .PageMenu #SideCategoryList h3 { display: none; }
.header .PageMenu .bq-page-buttons { display: none; }
.header .PageMenu .SideCategoryListFlyout > ul.sf-menu { display: inline; margin: 0; padding: 0; }
.header .PageMenu .SideCategoryListFlyout > ul.sf-menu > li { float: none; display: inline-block; margin: 0; padding: 0; vertical-align: middle; }
.header .PageMenu #SideCategoryList .SideCategoryListFlyout > ul.sf-menu > li > a { display: block; padding: 7px 9px; border-bottom: 2px solid transparent; color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; }
.header .PageMenu #SideCategoryList .SideCategoryListFlyout > ul.sf-menu > li > a:hover { border-bottom-color: #c8102e; text-decoration: none; }

/* -- Wide screens: a little more room between categories -- */
@media screen and (min-width: 1401px) {
    .header .PageMenu #SideCategoryList .SideCategoryListFlyout > ul.sf-menu > li > a { padding: 7px 13px; }
}

/* -- Laptops, 1,280 to 1,400px: slightly tighter, so the category line doesn't wrap -- */
@media screen and (min-width: 1280px) and (max-width: 1400px) {
    .header .PageMenu #SideCategoryList .SideCategoryListFlyout > ul.sf-menu > li > a { padding: 7px 6px; font-size: 13px; }
    #Header.bq-bar .bq-tabs { gap: 8px; }
}

/* -- Below 1,280px: page tabs and orders move into the menus; categories become equal buttons -- */
@media screen and (max-width: 1279px) {
    #Header.bq-bar > .inner { gap: 12px; padding: 8px 12px; }
    #Header.bq-bar .header-logo img { height: 46px; }
    #Header.bq-bar .bq-tabs,
    #Header.bq-bar .bq-orders { display: none; }
    .header .PageMenu:not(.TopSubMenu) > .inner { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 10px 14px; }
    .header .PageMenu #SideCategoryList,
    .header .PageMenu #SideCategoryList .BlockContent,
    .header .PageMenu .SideCategoryListFlyout,
    .header .PageMenu .SideCategoryListFlyout > ul.sf-menu,
    .header .PageMenu .bq-page-buttons { display: contents; }
    .header .PageMenu .SideCategoryListFlyout li > ul,
    .header .PageMenu .sf-sub-indicator { display: none !important; }
    .header .PageMenu:not(.TopSubMenu) .inner li,
    .header .PageMenu .SideCategoryListFlyout > ul.sf-menu > li { display: flex; float: none; margin: 0; padding: 0; border: 0; }
    .header .PageMenu:not(.TopSubMenu) .inner li > a,
    .header .PageMenu #SideCategoryList .SideCategoryListFlyout > ul.sf-menu > li > a { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; min-height: 44px; padding: 4px 8px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 8px; background: rgba(255, 255, 255, .06); color: #fff; font-size: 14px; font-weight: 600; line-height: 1.15; text-align: center; text-decoration: none; }
    .header .PageMenu:not(.TopSubMenu) .inner li > a:hover,
    .header .PageMenu #SideCategoryList .SideCategoryListFlyout > ul.sf-menu > li > a:hover { border-color: #fff; background: rgba(255, 255, 255, .16); }
}

@media screen and (max-width: 767px) {
    .header .PageMenu:not(.TopSubMenu) > .inner { grid-template-columns: 1fr 1fr; padding: 8px 10px; }
}

/* -- Tablets and any touch screen wider than a phone: no hover and no drawer here, so the account menu becomes a slim
      row of plain links under the bar (as today's tablet top row), each reachable by one tap -- */
@media screen and (min-width: 481px) and (max-width: 1279px), screen and (min-width: 481px) and (hover: none) {
    #Header.bq-bar > .inner { flex-wrap: wrap; row-gap: 6px; }
    #Header.bq-bar .bq-orders { display: none; }
    #Header.bq-bar .TopMenu,
    #Header.bq-bar .TopMenu:hover,
    #Header.bq-bar .TopMenu:focus-within { order: 20; flex: 1 0 100%; width: auto; height: auto; }
    #Header.bq-bar .TopMenu ul,
    #Header.bq-bar .TopMenu:hover ul,
    #Header.bq-bar .TopMenu:focus-within ul { position: static; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 18px; min-width: 0; padding: 0; background: none; border: 0; box-shadow: none; }
    #Header.bq-bar .TopMenu ul > li:not(.CartLink):not(.HeaderLiveChat):not(.js-drawermenu-store-phone-container):not(.js-drawermenu-currency-converter):not(.bq-acct-downloads),
    #Header.bq-bar .TopMenu:hover ul > li:not(.CartLink):not(.HeaderLiveChat):not(.js-drawermenu-store-phone-container):not(.js-drawermenu-currency-converter):not(.bq-acct-downloads),
    #Header.bq-bar .TopMenu:focus-within ul > li:not(.CartLink):not(.HeaderLiveChat):not(.js-drawermenu-store-phone-container):not(.js-drawermenu-currency-converter):not(.bq-acct-downloads) { display: block; }
    #Header.bq-bar .TopMenu ul > li.bq-acct-downloads,
    #Header.bq-bar .TopMenu:hover ul > li.bq-acct-downloads:not(.First):not(.CartLink):not(.HeaderLiveChat):not(.js-drawermenu-store-phone-container):not(.js-drawermenu-currency-converter),
    #Header.bq-bar .TopMenu:focus-within ul > li.bq-acct-downloads:not(.First):not(.CartLink):not(.HeaderLiveChat):not(.js-drawermenu-store-phone-container):not(.js-drawermenu-currency-converter) { display: none; }
    #Header.bq-bar .TopMenu li.First > a,
    #Header.bq-bar .TopMenu:hover li.First > a,
    #Header.bq-bar .TopMenu:focus-within li.First > a,
    #Header.bq-bar .TopMenu ul > li:not(.First) > a { padding: 6px 0; border: 0; color: #fff; font-size: 14px; font-weight: 700; line-height: 1.2; background: none; }
    #Header.bq-bar .TopMenu li.First > a:after { content: none; }
    #Header.bq-bar .TopMenu ul > li > div { padding: 6px 0; color: #bbb; }
    #Header.bq-bar .TopMenu ul > li > div a { color: #fff; }
    #Header.bq-bar .TopMenu ul > li:not(.First) > a:hover,
    #Header.bq-bar .TopMenu li.First > a:hover { background: none; color: #f5c400; }
}

/* -- Phones, 480px and below: the theme's fixed bar, now dark, with the search always visible -- */
@media screen and (max-width: 480px) {
    .header.bq-header { padding-top: 106px; }
    #Header.bq-bar > .inner { display: flex; flex-wrap: wrap; gap: 8px 10px; width: 100%; padding: 6px 10px 8px; }
    #Header.bq-bar #ToggleMenu { display: flex; align-items: center; justify-content: center; align-self: center; width: 44px; height: 44px; margin: 0; padding: 0; color: #fff; font-size: 26px; line-height: 1; }
    #Header.bq-bar .header-logo { display: flex; align-self: center; }
    #Header.bq-bar .header-logo img { height: 38px; max-height: none; margin: 0; }
    #Header.bq-bar .bq-search { order: 10; flex: 1 0 100%; }
    #Header.bq-bar #SearchForm { height: 40px; }
    #Header.bq-bar .TopMenu { display: block !important; width: auto; height: auto; margin-left: auto; }
    #Header.bq-bar .TopMenu ul { position: static; min-width: 0; }
    #Header.bq-bar .TopMenu:hover ul,
    #Header.bq-bar .TopMenu:focus-within ul { min-width: 0; padding: 0; background: none; border: 0; box-shadow: none; }
    #Header.bq-bar .TopMenu ul > li:not(.First),
    #Header.bq-bar .TopMenu:hover ul > li:not(.First):not(.CartLink):not(.HeaderLiveChat):not(.js-drawermenu-store-phone-container):not(.js-drawermenu-currency-converter),
    #Header.bq-bar .TopMenu:focus-within ul > li:not(.First):not(.CartLink):not(.HeaderLiveChat):not(.js-drawermenu-store-phone-container):not(.js-drawermenu-currency-converter) { display: none; }
    #Header.bq-bar .TopMenu:hover li.First > a,
    #Header.bq-bar .TopMenu:focus-within li.First > a,
    #Header.bq-bar .TopMenu li.First > a { padding: 0; color: #fff; border: 0; font-size: 13px; line-height: 1.2; }
    #Header.bq-bar .TopMenu li.First > a:after { content: none; }
    #Header.bq-bar #cart-amount { display: block; width: auto; padding: 0; }
    #Header.bq-bar #cart-amount .Cart { width: auto; padding: 0 4px 0 0; }
    #Header.bq-bar #cart-amount .bq-cart-label { display: none; }
}

/* Proposal 027: navy header (owner choice, 2026-10-27). Overrides the 023 bar colours, and narrows the theme's 10px white gap under the top bar to 3px. */
#Header.bq-bar { background: #0b4a8b; margin-bottom: 3px; }
.header .PageMenu:not(.TopSubMenu) { background: #093d73; }

/* Proposal 029: SEASONAL fall look (owner choice, 2026-10-27). Remove this whole block after Thanksgiving.
   Faint maple leaves across the top bar, a pumpkin with leaves at the right end of the category bar (wide screens only),
   pumpkin-orange line under the categories and on the "New to Bible Quizzing?" tab. Colours of the bars (027) are unchanged. */
#Header.bq-bar { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 110' width='420' height='110'%3E%3Cg transform='translate(40 30) rotate(-20) scale(0.22) translate(-50 -50)' opacity='0.22'%3E%3Cpath d='M50 2 L58 22 L70 14 L68 34 L88 26 L80 44 L98 48 L82 58 L90 70 L66 66 L64 82 L54 72 L52 98 L48 98 L46 72 L36 82 L34 66 L10 70 L18 58 L2 48 L20 44 L12 26 L32 34 L30 14 L42 22 Z' fill='%23F28C28'/%3E%3Cpath d='M50 98 L50 40' stroke='%235a2d0c' stroke-width='3' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate(160 78) rotate(40) scale(0.18) translate(-50 -50)' opacity='0.2'%3E%3Cpath d='M50 2 L58 22 L70 14 L68 34 L88 26 L80 44 L98 48 L82 58 L90 70 L66 66 L64 82 L54 72 L52 98 L48 98 L46 72 L36 82 L34 66 L10 70 L18 58 L2 48 L20 44 L12 26 L32 34 L30 14 L42 22 Z' fill='%23E74C3C'/%3E%3Cpath d='M50 98 L50 40' stroke='%235a2d0c' stroke-width='3' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate(270 24) rotate(10) scale(0.2) translate(-50 -50)' opacity='0.2'%3E%3Cpath d='M50 2 L58 22 L70 14 L68 34 L88 26 L80 44 L98 48 L82 58 L90 70 L66 66 L64 82 L54 72 L52 98 L48 98 L46 72 L36 82 L34 66 L10 70 L18 58 L2 48 L20 44 L12 26 L32 34 L30 14 L42 22 Z' fill='%23F1C40F'/%3E%3Cpath d='M50 98 L50 40' stroke='%235a2d0c' stroke-width='3' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate(370 80) rotate(-35) scale(0.24) translate(-50 -50)' opacity='0.22'%3E%3Cpath d='M50 2 L58 22 L70 14 L68 34 L88 26 L80 44 L98 48 L82 58 L90 70 L66 66 L64 82 L54 72 L52 98 L48 98 L46 72 L36 82 L34 66 L10 70 L18 58 L2 48 L20 44 L12 26 L32 34 L30 14 L42 22 Z' fill='%23E67E22'/%3E%3Cpath d='M50 98 L50 40' stroke='%235a2d0c' stroke-width='3' opacity='.5'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: repeat-x; background-position: left center; }
.header .PageMenu:not(.TopSubMenu) { border-bottom-color: #e8711a; }
#Header.bq-bar .bq-tab-new { border-color: #f28c28; color: #ffb347; background-color: #0b4a8b; } /* solid navy behind the orange text, so the leaves never lower its contrast */
#Header.bq-bar .bq-tab-new:hover { background: #f28c28; color: #1f1f1f; }
@media screen and (min-width: 1280px) {
    .header .PageMenu:not(.TopSubMenu) { position: relative; }
    .header .PageMenu:not(.TopSubMenu)::after { content: ""; position: absolute; right: 18px; bottom: -6px; width: 150px; height: 66px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 230 100'%3E%3Cg transform='translate(30 60) rotate(-25) scale(0.42) translate(-50 -50)' opacity='1'%3E%3Cpath d='M50 2 L58 22 L70 14 L68 34 L88 26 L80 44 L98 48 L82 58 L90 70 L66 66 L64 82 L54 72 L52 98 L48 98 L46 72 L36 82 L34 66 L10 70 L18 58 L2 48 L20 44 L12 26 L32 34 L30 14 L42 22 Z' fill='%23C0392B'/%3E%3Cpath d='M50 98 L50 40' stroke='%235a2d0c' stroke-width='3' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate(70 72) rotate(20) scale(0.36) translate(-50 -50)' opacity='1'%3E%3Cpath d='M50 2 L58 22 L70 14 L68 34 L88 26 L80 44 L98 48 L82 58 L90 70 L66 66 L64 82 L54 72 L52 98 L48 98 L46 72 L36 82 L34 66 L10 70 L18 58 L2 48 L20 44 L12 26 L32 34 L30 14 L42 22 Z' fill='%23E67E22'/%3E%3Cpath d='M50 98 L50 40' stroke='%235a2d0c' stroke-width='3' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate(100 0)'%3E%3Cg%3E%3Cellipse cx='60' cy='62' rx='44' ry='34' fill='%23E8711A'/%3E%3Cellipse cx='60' cy='62' rx='30' ry='34' fill='%23F28C28'/%3E%3Cellipse cx='60' cy='62' rx='14' ry='33' fill='%23F7A23B'/%3E%3Cpath d='M16 62 Q16 30 60 28 Q104 30 104 62' fill='none' stroke='%23C4580F' stroke-width='2' opacity='.5'/%3E%3Cpath d='M57 30 Q55 16 62 8 L68 11 Q62 18 64 30 Z' fill='%234E7A27'/%3E%3Cpath d='M64 14 Q80 4 86 18 Q74 14 66 20' fill='%236B9E34'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(205 58) rotate(35) scale(0.4) translate(-50 -50)' opacity='1'%3E%3Cpath d='M50 2 L58 22 L70 14 L68 34 L88 26 L80 44 L98 48 L82 58 L90 70 L66 66 L64 82 L54 72 L52 98 L48 98 L46 72 L36 82 L34 66 L10 70 L18 58 L2 48 L20 44 L12 26 L32 34 L30 14 L42 22 Z' fill='%23D4A017'/%3E%3Cpath d='M50 98 L50 40' stroke='%235a2d0c' stroke-width='3' opacity='.5'/%3E%3C/g%3E%3C/svg%3E") no-repeat right bottom / contain; }
}

/* Proposal 029b: SEASONAL fall look on tablets and phones (owner choice, 2026-10-27). Remove together with the 029 block after Thanksgiving.
   Denser, slightly stronger leaves below 1280px; a pumpkin at the left of the tablet account row (740px and up, where it is clear of the links); on phones a small pumpkin beside the logo (360px and up)
   and an orange line along the bottom of the fixed bar (inset shadow: no change to its 106px height). */
@media screen and (max-width: 1279px) { #Header.bq-bar { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 106' width='200' height='106'%3E%3Cg transform='translate(30 28) rotate(-20) scale(0.2) translate(-50 -50)' opacity='0.3'%3E%3Cpath d='M50 2 L58 22 L70 14 L68 34 L88 26 L80 44 L98 48 L82 58 L90 70 L66 66 L64 82 L54 72 L52 98 L48 98 L46 72 L36 82 L34 66 L10 70 L18 58 L2 48 L20 44 L12 26 L32 34 L30 14 L42 22 Z' fill='%23F28C28'/%3E%3Cpath d='M50 98 L50 40' stroke='%235a2d0c' stroke-width='3' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate(95 80) rotate(35) scale(0.17) translate(-50 -50)' opacity='0.3'%3E%3Cpath d='M50 2 L58 22 L70 14 L68 34 L88 26 L80 44 L98 48 L82 58 L90 70 L66 66 L64 82 L54 72 L52 98 L48 98 L46 72 L36 82 L34 66 L10 70 L18 58 L2 48 L20 44 L12 26 L32 34 L30 14 L42 22 Z' fill='%23E74C3C'/%3E%3Cpath d='M50 98 L50 40' stroke='%235a2d0c' stroke-width='3' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate(150 30) rotate(10) scale(0.18) translate(-50 -50)' opacity='0.3'%3E%3Cpath d='M50 2 L58 22 L70 14 L68 34 L88 26 L80 44 L98 48 L82 58 L90 70 L66 66 L64 82 L54 72 L52 98 L48 98 L46 72 L36 82 L34 66 L10 70 L18 58 L2 48 L20 44 L12 26 L32 34 L30 14 L42 22 Z' fill='%23F1C40F'/%3E%3Cpath d='M50 98 L50 40' stroke='%235a2d0c' stroke-width='3' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate(185 85) rotate(-30) scale(0.2) translate(-50 -50)' opacity='0.3'%3E%3Cpath d='M50 2 L58 22 L70 14 L68 34 L88 26 L80 44 L98 48 L82 58 L90 70 L66 66 L64 82 L54 72 L52 98 L48 98 L46 72 L36 82 L34 66 L10 70 L18 58 L2 48 L20 44 L12 26 L32 34 L30 14 L42 22 Z' fill='%23E67E22'/%3E%3Cpath d='M50 98 L50 40' stroke='%235a2d0c' stroke-width='3' opacity='.5'/%3E%3C/g%3E%3C/svg%3E"); background-size: 200px 106px; } }
@media screen and (min-width: 740px) and (max-width: 1279px) { #Header.bq-bar::after { content: ""; position: absolute; left: 16px; bottom: 6px; width: 110px; height: 36px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 230 100'%3E%3Cg transform='translate(30 60) rotate(-25) scale(0.42) translate(-50 -50)' opacity='1'%3E%3Cpath d='M50 2 L58 22 L70 14 L68 34 L88 26 L80 44 L98 48 L82 58 L90 70 L66 66 L64 82 L54 72 L52 98 L48 98 L46 72 L36 82 L34 66 L10 70 L18 58 L2 48 L20 44 L12 26 L32 34 L30 14 L42 22 Z' fill='%23C0392B'/%3E%3Cpath d='M50 98 L50 40' stroke='%235a2d0c' stroke-width='3' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate(70 72) rotate(20) scale(0.36) translate(-50 -50)' opacity='1'%3E%3Cpath d='M50 2 L58 22 L70 14 L68 34 L88 26 L80 44 L98 48 L82 58 L90 70 L66 66 L64 82 L54 72 L52 98 L48 98 L46 72 L36 82 L34 66 L10 70 L18 58 L2 48 L20 44 L12 26 L32 34 L30 14 L42 22 Z' fill='%23E67E22'/%3E%3Cpath d='M50 98 L50 40' stroke='%235a2d0c' stroke-width='3' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate(100 0)'%3E%3Cellipse cx='60' cy='62' rx='44' ry='34' fill='%23E8711A'/%3E%3Cellipse cx='60' cy='62' rx='30' ry='34' fill='%23F28C28'/%3E%3Cellipse cx='60' cy='62' rx='14' ry='33' fill='%23F7A23B'/%3E%3Cpath d='M16 62 Q16 30 60 28 Q104 30 104 62' fill='none' stroke='%23C4580F' stroke-width='2' opacity='.5'/%3E%3Cpath d='M57 30 Q55 16 62 8 L68 11 Q62 18 64 30 Z' fill='%234E7A27'/%3E%3Cpath d='M64 14 Q80 4 86 18 Q74 14 66 20' fill='%236B9E34'/%3E%3C/g%3E%3Cg transform='translate(205 58) rotate(35) scale(0.4) translate(-50 -50)' opacity='1'%3E%3Cpath d='M50 2 L58 22 L70 14 L68 34 L88 26 L80 44 L98 48 L82 58 L90 70 L66 66 L64 82 L54 72 L52 98 L48 98 L46 72 L36 82 L34 66 L10 70 L18 58 L2 48 L20 44 L12 26 L32 34 L30 14 L42 22 Z' fill='%23D4A017'/%3E%3Cpath d='M50 98 L50 40' stroke='%235a2d0c' stroke-width='3' opacity='.5'/%3E%3C/g%3E%3C/svg%3E") no-repeat left bottom / contain; } }
@media screen and (max-width: 480px) { #Header.bq-bar { box-shadow: inset 0 -3px 0 #e8711a; } }
@media screen and (min-width: 360px) and (max-width: 480px) { #Header.bq-bar::after { content: ""; position: absolute; left: 136px; top: 9px; width: 46px; height: 34px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 100'%3E%3Cg transform='translate(24 64) rotate(-25) scale(0.38) translate(-50 -50)' opacity='1'%3E%3Cpath d='M50 2 L58 22 L70 14 L68 34 L88 26 L80 44 L98 48 L82 58 L90 70 L66 66 L64 82 L54 72 L52 98 L48 98 L46 72 L36 82 L34 66 L10 70 L18 58 L2 48 L20 44 L12 26 L32 34 L30 14 L42 22 Z' fill='%23C0392B'/%3E%3Cpath d='M50 98 L50 40' stroke='%235a2d0c' stroke-width='3' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate(26 0)'%3E%3Cellipse cx='60' cy='62' rx='44' ry='34' fill='%23E8711A'/%3E%3Cellipse cx='60' cy='62' rx='30' ry='34' fill='%23F28C28'/%3E%3Cellipse cx='60' cy='62' rx='14' ry='33' fill='%23F7A23B'/%3E%3Cpath d='M16 62 Q16 30 60 28 Q104 30 104 62' fill='none' stroke='%23C4580F' stroke-width='2' opacity='.5'/%3E%3Cpath d='M57 30 Q55 16 62 8 L68 11 Q62 18 64 30 Z' fill='%234E7A27'/%3E%3Cpath d='M64 14 Q80 4 86 18 Q74 14 66 20' fill='%236B9E34'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain; } }
