@charset "UTF-8";
/* =============================================================================
 *   SITE HEADER — the single source of truth for #menu-bar-wrapper and
 *   everything inside it.
 *
 *   Breakpoints: 576 / 768 / 992 / 1200 — and there is no fifth one. Two other
 *   numbers do appear in this file and neither is a breakpoint. `max-width:
 *   1400px`, in the base #menu-bar rule below, is a container cap carried
 *   verbatim from Injector rule 3: the bar stops growing at 1400 however wide
 *   the window is, which is also why widening the window is NOT an escape from
 *   the webfont over-subscription recorded as risk 1 in the plan — past 1400 the
 *   bar cannot gain another pixel. `575.98px`, on the "< 576 — containment for
 *   CSS Injector rule 1" block, is 576's max-width complement: the same
 *   breakpoint written from the other side. Every width-dependent header
 *   rule, and every rule scoped to
 *   #menu-bar / #menu-bar-wrapper / #superfish-1-select, lives here: 63 of them
 *   were deleted out of the five responsive.* band sheets, responsive.custom and
 *   global.styles, and CSS Injector rule 3's body is reproduced here so the CHA
 *   can empty it. See .claude/plans/2026-08-26-header-consolidation.md
 *
 *   WHAT DELIBERATELY STAYED IN global.styles.css — 13 live rules, ~1150-1290,
 *   and all thirteen are named here: .nav, .nav ul(.menu), .nav li(.menu li),
 *   .nav li a, .nav .block, span.sf-sub-indicator, ul.sf-menu, ul.sf-menu a,
 *   the two outline resets (ul.sf-menu li:hover/.sfHover, and
 *   ul.sf-menu a:focus/:hover/:active), .block-superfish ul, .block-superfish li
 *   (margin/padding: 0 !important) and .sf-menu.sf-style-default a.
 *   global.styles was NOT emptied of everything that touches the header. The
 *   generic .nav / Superfish structure is still there and is meant to be.
 *   `float: left` on .nav li is what makes the horizontal menu a row — delete it
 *   and the menu stacks. `ul.sf-menu a` (global.styles.css:1212) is the other
 *   load-bearing one, and it used to be missing from this list while the count
 *   said 13: it supplies border-left: 0, border-top: 0 and text-decoration: none
 *   to every menu anchor, and this file re-declares none of those three (its
 *   padding is re-declared, at #menu-bar nav.block-superfish ul li a). Delete it
 *   and the menu links get Superfish's default anchor borders and an underline.
 *   None of the 13 carries a media query, so they cost criterion 1 nothing, and
 *   every value of theirs this file cares about is re-declared below at ID
 *   specificity. "All header rules in one file" means one file plus that
 *   structural residue, named here so nobody rediscovers it.
 *
 *   HOW IT LOADS. Attached from template.php at weight 150, NOT from
 *   harryconnickjr.info. AdaptiveTheme adds its six responsive sheets at
 *   weight 100 (at_core/inc/load.inc:173); .info stylesheets land at weight 0,
 *   i.e. BEFORE the responsive sheets, so every equal-specificity rule here
 *   would silently lose on source order. Weight 150 puts this file after the
 *   band sheets. CSS Injector lands after this file for two independent
 *   reasons, and you have to read two places in the module to see both.
 *   (a) Its weight really IS 200 + crid — but not at the drupal_add_css() call,
 *   which passes no weight at all (css_injector.module:60). The weight is
 *   written afterwards by css_injector_css_alter(), which does
 *   `$css[$file_uri]['weight'] = 200 + $css_rule['crid'];`
 *   (css_injector.module:91-98). Check only :60 and the number looks invented —
 *   it is not, and this comment has now been "corrected" to say so once. Don't.
 *   (b) Independently, :60 passes no every_page either, so drupal_sort_css_js()
 *   sorts these sheets after every every_page => TRUE item before weight is
 *   even compared (includes/common.inc:3317-3322).
 *   Either mechanism alone puts the Injector last, so raising 150 cannot beat
 *   it — do not try.
 *
 *   THREE THINGS THAT WILL BITE YOU IF YOU EDIT THIS FILE.
 *
 *   1. Never set `display` on ul#superfish-1 / ul.sf-menu. Superfish's
 *      sfsmallscreen.js turnBack() calls jQuery 1.4.4 .show(), which writes a
 *      PERMANENT inline `display: block` after the first down-then-up crossing
 *      of the breakpoint. An inline style beats any rule here short of
 *      !important, so any `display` we set becomes direction-dependent state.
 *      The JS owns that property.
 *
 *   2. #superfish-1-select carries NO media query, deliberately. Superfish
 *      creates the <select> below its breakpoint and destroys it above, so it
 *      exists if and only if the menu has collapsed. Styling it unconditionally
 *      makes the JS/CSS swap self-synchronising on every platform, scrollbar
 *      width included, and is why 783 / 815 / 992 no longer appear in any
 *      hamburger rule. It is laid out as an ordinary flex child of
 *      nav.block-superfish (which is where sfsmallscreen.js inserts it), so it
 *      needs no positioning and tracks the bar's gutter for free.
 *
 *   3. #menu-bar's ::after is a clearfix pseudo-element and, in a flex
 *      container, a FLEX ITEM. Left alone it takes a slot of its own and
 *      justify-content: space-between pushes the social block into the middle
 *      of the bar. `content: none` is load-bearing, not tidying.
 *
 *   Deleting a declaration in this theme does not restore its initial value —
 *   the band sheets set properties without ever resetting them. Every property
 *   the old header rules set is therefore re-declared explicitly below.
 * ========================================================================== */
/* -----------------------------------------------------------------------------
 *   Base — applies at every width; the bands below only override.
 * -------------------------------------------------------------------------- */
#menu-bar-wrapper {
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 55px;
  padding: 0;
  text-align: left;
  z-index: 200;
}

/* The fixed bar takes the header out of flow, so the page below has to be
   offset by exactly the bar's height. Declared here, next to the height it
   depends on, and at the same specificity as the band sheets' own
   #below-menu-wrapper rules, which this file (weight 150) beats on source
   order. Their margin-bottom values survive untouched. */
#below-menu-wrapper {
  margin-top: 55px;
}

#menu-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 1400px;
  height: 55px;
  margin: 0 auto;
  padding: 0 16px;
  background: #fff;
  box-sizing: border-box;
  overflow: hidden;
}

/* See note 3 in the file header — this is not tidying. */
#menu-bar:before,
#menu-bar:after {
  content: none;
}

/* flex: 0 0 auto, not the 0 1 auto default. The default lets the menu block
   shrink, which wraps the seven items onto two rows and clips the first row
   above the fixed bar. Measured across nine page types. */
#menu-bar > nav {
  float: none;
  margin: 0;
  padding: 0;
  line-height: 1;
  flex: 0 0 auto;
  min-width: 0;
}

/* Site title */
#menu-bar nav.logo-image p {
  display: inline;
  margin: 0;
  padding: 0;
}

#menu-bar nav.logo-image a.site-logo,
#menu-bar nav.logo-image a.site-logo:visited,
#menu-bar nav.logo-image a.site-logo:hover {
  color: #000;
  text-decoration: none;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 1px;
  white-space: nowrap;
}

/* Main menu (Superfish). One type scale at every width: the horizontal menu
   only renders at >=992 and it fits there with 63px to spare, so there is no
   reason for a second, smaller scale — and having one is what forced the pill
   to carry a separate 815-999 tuning. */
#menu-bar nav.block-superfish ul li {
  background-color: #fff;
}

#menu-bar nav.block-superfish ul li a,
#menu-bar nav.block-superfish ul li a:visited {
  color: #000;
  margin-left: 5px;
  padding: 0 20px 0 0;
  font-size: 18px;
  letter-spacing: 2px;
}

/* $gold from sass/_custom.scss, written literally so this file compiles on its
   own and does not have to @import "base" — which would duplicate every
   @font-face rule into the output. */
#menu-bar nav.block-superfish ul li a:hover,
#menu-bar nav.block-superfish ul li a.active {
  color: #9a8b60;
}

/* 2.5em against the anchor's 18px is the 45px line box the pill's -15px label
   offset is derived from. Scoped to #menu-bar so it cannot reach anything
   outside the header. */
#menu-bar ul.sf-menu a {
  height: 2.5em;
  line-height: 2.5em;
}

/* Social links — hidden until 1200, where the bar is finally wide enough for
   all three blocks. See the >=1200 band. */
#menu-bar .social-links {
  display: none;
  border-left: 1px solid #aaa;
  padding-left: 0;
}

#menu-bar .social-links a:hover {
  opacity: 0.8;
}

/* Hamburger. No media query — see note 2 in the file header. 44x44 meets the
   WCAG 2.5.8 minimum target size; the 39x38 it replaces did not. It sits in
   flow as the only visible child of nav.block-superfish, so align-items:center
   on #menu-bar centres it and space-between puts it on the bar's padding edge
   at every gutter, with no top/right constants to keep in sync. */
#superfish-1-select {
  display: block;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background-color: #fff;
  background-image: url("/sites/all/themes/harryconnickjr/images/menu.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 28px 28px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-size: 0;
  color: transparent;
  cursor: pointer;
}

/* -----------------------------------------------------------------------------
 *   < 576 — containment for CSS Injector rule 1.
 *
 *   Rule 1 is a database row that carries header CSS scoped to /about:
 *     @media (max-width: 450px) and (min-height: 321px) {
 *       #menu-bar         { padding-left: 0; width: fit-content }
 *       #menu-bar-wrapper { height: 50px }
 *       #superfish-1-select { font-size: 12px }
 *     }
 *   css_injector.module:60 adds its sheets with no weight and no every_page, so
 *   they take drupal_add_css()'s defaults — and every_page => FALSE sorts after
 *   every every_page => TRUE sheet regardless of weight (includes/common.inc:
 *   3317-3322). Rule 1 therefore loads after this file whatever weight this file
 *   carries, and wins every equal-specificity tie. Modelled at that cascade
 *   position on /about at 375px: #menu-bar collapsed to 193.4px, the hamburger
 *   sat 107px in from the right edge, and the 50px wrapper left a 5px white seam
 *   above the 55px content offset. That lands on deploy day, on phones, before
 *   the CHA can touch anything.
 *
 *   These three rules re-declare the base values one level more specific
 *   (body #x, 0-1-1, beats #x, 0-1-0) so rule 1 cannot win. They are confined to
 *   a max-width block because at that specificity they would otherwise also beat
 *   this file's own >= 576 gutters and >= 1200 bar height. 575.98px is Bootstrap
 *   5's own max-width form of 576 — the same breakpoint written as its
 *   complement, not a fifth number.
 *
 *   COUPLING WARNING — these three values are COPIES of the base band's: the
 *   55px wrapper height, the 16px gutter and the select's font-size: 0. They
 *   agree today, checked one at a time. If you change any of them in the base
 *   band, you must change it here in the same edit: this block is one
 *   specificity level higher, so the stale copy keeps winning below 576 and you
 *   get a header that is correct on tablet and desktop and wrong on phones —
 *   the exact profile of the M1-M4 defects this file exists to fix, in the width
 *   range least likely to be re-checked.
 *
 *   Delete this block when rule 1's header section is removed (Deploy sequence
 *   step 3 in the plan). It is inert once that happens — and deleting it is the
 *   real remedy for the coupling above, which is only insurance for the case
 *   where step 5 slips.
 * -------------------------------------------------------------------------- */
@media only screen and (max-width: 575.98px) {
  body #menu-bar-wrapper {
    height: 55px;
  }
  body #menu-bar {
    width: 100%;
    padding-left: 16px;
  }
  body #superfish-1-select {
    font-size: 0;
  }
}
/* -----------------------------------------------------------------------------
 *   >= 576  — gutter and title step up. Nothing structural.
 * -------------------------------------------------------------------------- */
@media only screen and (min-width: 576px) {
  #menu-bar {
    padding: 0 24px;
  }
  #menu-bar nav.logo-image a.site-logo,
  #menu-bar nav.logo-image a.site-logo:visited,
  #menu-bar nav.logo-image a.site-logo:hover {
    font-size: 28px;
  }
}
/* -----------------------------------------------------------------------------
 *   >= 768  — full gutter, title at its small-screen maximum. Still a hamburger.
 * -------------------------------------------------------------------------- */
@media only screen and (min-width: 768px) {
  #menu-bar {
    padding: 0 30px;
  }
  #menu-bar nav.logo-image a.site-logo,
  #menu-bar nav.logo-image a.site-logo:visited,
  #menu-bar nav.logo-image a.site-logo:hover {
    font-size: 34px;
  }
}
/* -----------------------------------------------------------------------------
 *   >= 992  — the swap. Superfish's smallscreen breakpoint is pinned to the
 *   same number in public/sites/default/settings.php, so the <select> and this
 *   band change over together.
 *
 *   The only declaration here is the overflow reset, and it is the whole point
 *   of the band. Below 992 #menu-bar clips: during a narrowing drag the JS is
 *   up to 100ms behind the CSS (sfsmallscreen.js debounces its resize handler
 *   and media queries do not), so a horizontal menu is briefly laid out in a
 *   narrow bar. `overflow: hidden` in the base band contains that instead of
 *   letting it run off the viewport. At >=992 it must go back to `visible` or
 *   it would clip the Superfish dropdowns, which are absolutely positioned
 *   inside #menu-bar.
 *
 *   The mirror-image transient — a <select> still present while the CSS is
 *   already in this band — needs no rule at all: the select is styled
 *   unconditionally and is a 44px flex child either way, so it renders as a
 *   correct hamburger until the JS catches up. Measured: no overflow in either
 *   direction, and the settled state at each boundary is identical from both.
 * -------------------------------------------------------------------------- */
@media only screen and (min-width: 992px) {
  #menu-bar {
    overflow: visible;
  }
}
/* -----------------------------------------------------------------------------
 *   >= 1200 — desktop scale, and the first width the social block fits.
 *
 *   Measured with the logo margin-right ladder deleted (it was 130/30/50/100/
 *   100px, two of them !important): the three blocks need 1087.7px plus the
 *   60px gutter, so they cannot fit below ~1148. 1200 is the first Bootstrap
 *   line that clears it — 47.3px of slack, identical on all nine page types
 *   tested. This is what retires the measured 1247/1248 the header used to
 *   carry.
 *
 *   The bar height is a single declared value, not height + padding-top. The
 *   old 76px + 20px = 96px could be grown by anything that added padding; this
 *   cannot.
 * -------------------------------------------------------------------------- */
@media only screen and (min-width: 1200px) {
  #menu-bar-wrapper {
    height: 76px;
  }
  #below-menu-wrapper {
    margin-top: 76px;
  }
  #menu-bar {
    height: 76px;
  }
  #menu-bar nav.logo-image a.site-logo,
  #menu-bar nav.logo-image a.site-logo:visited,
  #menu-bar nav.logo-image a.site-logo:hover {
    font-size: 40px;
  }
  #menu-bar .social-links {
    display: block;
    padding-left: 5px;
  }
  #menu-bar .social-links a {
    display: inline-block;
    padding-right: 5px;
  }
}
/* -----------------------------------------------------------------------------
 *   Pre-order nav pill — li#menu-2537-1.
 *
 *   Moved verbatim from CSS Injector rule 3 except that its 815-999 variant is
 *   gone: with one menu type scale the anchor is a 45px line box wherever the
 *   horizontal menu renders, so the desktop tuning is the only tuning needed.
 *
 *   Targets the menu item by ID because Superfish 7.x-1.9 builds the <li>
 *   itself and never reads menu_attributes, so a class cannot be added through
 *   the UI. If the menu link is ever deleted and recreated the mlid changes and
 *   these rules stop matching SILENTLY — read the new id off the <li> and
 *   replace menu-2537-1 throughout.
 *
 *   No !important needed: the theme styles this link at
 *     #menu-bar nav.block-superfish ul li a          1 ID, 1 class, 4 elements
 *   and these are
 *     #menu-bar .block-superfish li#menu-2537-1 > a  2 IDs, 1 class, 2 elements
 *   Two IDs beat one, decided before classes are compared.
 *
 *   Contrast on the #e0e0e0 ground, both AA:  link #2e2a22 10.82:1,
 *   sub-label #8a4a12 5.18:1.
 * -------------------------------------------------------------------------- */
#menu-bar .block-superfish li#menu-2537-1 > a,
#menu-bar .block-superfish li#menu-2537-1 > a:visited,
#menu-bar .block-superfish li#menu-2537-1 > a:hover {
  background: #e0e0e0;
  border-radius: 0.25rem;
  padding: 0 0.5rem 0.25rem;
  margin-right: 0.5rem;
  color: #2e2a22;
  transform: scale(1);
  transform-origin: center center;
  /* declared on the resting state, not only on :hover, so it eases out as
     slowly as it eases in instead of snapping back */
  transition: transform 0.55s cubic-bezier(0.42, 0, 0.58, 1), background-color 0.55s cubic-bezier(0.42, 0, 0.58, 1), box-shadow 0.55s cubic-bezier(0.42, 0, 0.58, 1);
}

/* The anchor's line box is 45px (2.5em of 18px) and this label would otherwise
   inherit it and paint below the pill. Declaring line-height ends the
   inheritance: 13 x 1.15 = 14.95px. The anchor cannot grow, so -15px pulls the
   label up into it. */
#menu-bar .block-superfish li#menu-2537-1 > a::after {
  content: "available for pre-order";
  display: block;
  text-align: center;
  line-height: 1.15;
  margin: -15px 0 0;
  font-family: "Tungsten", "Archivo Narrow", Arial, sans-serif;
  font-size: 13px;
  color: #8a4a12;
}

#menu-bar .block-superfish li#menu-2537-1 > a:hover,
#menu-bar .block-superfish li#menu-2537-1 > a:focus {
  transform: scale(1.06);
  background: #eaeaea;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

/* the press — this is what a phone gets, hover never fires on touch */
#menu-bar .block-superfish li#menu-2537-1 > a:active {
  transform: scale(1.01);
  transition-duration: 0.1s;
}

#menu-bar .block-superfish li#menu-2537-1 > a:focus-visible {
  outline: 2px solid #8a4a12;
  outline-offset: 3px;
}

/* Current page. Superfish puts .active on the link and .active-trail on the
   <li>; both are in the live markup and either triggers the inversion.
     #efe9dd on #191919  14.54:1
     #e2a760 on #191919   8.31:1 */
#menu-bar .block-superfish li#menu-2537-1 > a.active,
#menu-bar .block-superfish li#menu-2537-1 > a.active:hover,
#menu-bar .block-superfish li#menu-2537-1.active-trail > a,
#menu-bar .block-superfish li#menu-2537-1.active-trail > a:hover {
  background: #191919;
  color: #efe9dd;
}

#menu-bar .block-superfish li#menu-2537-1 > a.active::after,
#menu-bar .block-superfish li#menu-2537-1.active-trail > a::after {
  color: #e2a760;
}

#menu-bar .block-superfish li#menu-2537-1 > a.active:hover,
#menu-bar .block-superfish li#menu-2537-1.active-trail > a:hover {
  background: #241f1a;
}

/* -----------------------------------------------------------------------------
 *   Reduced motion
 * -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #menu-bar .block-superfish li#menu-2537-1 > a {
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
  }
  #menu-bar .block-superfish li#menu-2537-1 > a:hover,
  #menu-bar .block-superfish li#menu-2537-1 > a:focus,
  #menu-bar .block-superfish li#menu-2537-1 > a:active {
    transform: none;
  }
}
/* -----------------------------------------------------------------------------
 *   Print. Measured 2026-08-25: on paper the -15px sub-label landed on top of
 *   the link text and the active-trail state printed as a solid black block.
 *   Neither belongs on paper, and the pill is a call to action that cannot be
 *   acted on in print.
 *
 *   THE BAR ITSELF ALSO HAS TO BE UNDONE FOR PRINT, and this is not optional.
 *   Every band above is scoped to the `screen` MEDIA TYPE, and the media type is
 *   what makes those queries false on paper. The `only` keyword has nothing to
 *   do with it: `only` exists solely to hide a query from user agents that
 *   predate media queries, and `@media screen and (min-width: 992px)` with
 *   `only` deleted is equally false in print. Do not try to "fix" print by
 *   dropping `only` — it changes nothing. (Verified in page under print
 *   emulation: matchMedia('only screen and (min-width: 992px)') is false while
 *   the untyped matchMedia('(min-width: 992px)') is true. Correct evidence, and
 *   note that the two strings differ by the media type, not by the keyword.)
 *   So on paper the header falls back to the base band — a declared 55px
 *   bar with overflow: hidden, position: fixed and a 55px content offset — while
 *   the horizontal <ul> is still in the DOM, because Superfish builds it in JS
 *   and not from a media query. Without the four rules below the printed bar
 *   overflowed by 97px at 1200 and the pre-order item was sheared off the right
 *   margin. The live site prints correctly today, so this would have been a
 *   regression introduced by consolidating the header.
 *
 *   The fourth rule is the one that is easy to miss. Paper is about 816 CSS px
 *   wide, not 1200, and this file's menu type scale is unconditional, so the
 *   menu block is ~1020px wide on paper at every viewport width. `flex: 0 0 auto`
 *   (correct on screen — it is what stops the seven items wrapping into two rows
 *   above the bar) would keep it at that width and overflow the sheet. Letting
 *   it shrink in print lets the floated <li>s wrap instead: measured at a
 *   816px-wide print viewport, bar overflow 0, two menu rows, and document
 *   overflow back down to the 152px the live site already has from page content.
 *
 *   Social links stay hidden on paper. Restoring them (live prints them) would
 *   add ~190px to a bar that is already at the sheet's width, and they are seven
 *   outbound icon links that cannot be followed from paper.
 * -------------------------------------------------------------------------- */
@media print {
  #menu-bar-wrapper {
    position: static;
    height: auto;
  }
  #below-menu-wrapper {
    margin-top: 0;
  }
  #menu-bar {
    height: auto;
    overflow: visible;
    flex-wrap: wrap;
  }
  #menu-bar > nav {
    flex: 0 1 auto;
  }
  #menu-bar .block-superfish li#menu-2537-1 > a,
  #menu-bar .block-superfish li#menu-2537-1 > a:visited,
  #menu-bar .block-superfish li#menu-2537-1 > a.active,
  #menu-bar .block-superfish li#menu-2537-1.active-trail > a {
    background: none;
    box-shadow: none;
    transform: none;
    border-radius: 0;
    padding: 0;
    margin-right: 0;
    color: #000;
  }
  #menu-bar .block-superfish li#menu-2537-1 > a::after {
    display: none;
  }
}