/* ============================================================
   extra.css — static-site overrides on top of the original theme.

   The original WP theme depended on a plugin (dropdown-menu-widget)
   for the horizontal nav and on widgets for the header/footer.
   These rules replace what the plugins used to inject.
   ============================================================ */


/* ---- eyebrow menu (#headermenu) — external cross-site links ---- */
/* No strip background. Buttons sit flush against each other (no gap) and
   carry the brown translucent wash themselves. Hover = ~20% more opaque
   (visually a bit darker). No focus outline. */
:root {
  --eyebrow-btn-width: 150px;
}

#heaermiddle {
  background: transparent;               /* strip is invisible */
  height: auto;
  overflow: visible;
  box-sizing: border-box;
  padding: 0;
}

#headermenu {
  width: auto;
  height: auto;
  float: none;
}

#headermenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;                                /* flush — no space between buttons */
  align-items: stretch;
}

#headermenu li {
  background: none !important;
  float: none;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  list-style: none;
}

#headermenu li a {
  display: block;
  width: var(--eyebrow-btn-width) !important;
  padding: 8px 6px;
  text-align: center;
  background: rgba(84, 54, 6, 0.22) !important;  /* the wash color, per button */
  background-image: none !important;             /* defeat original theme's button graphic */
  border: none !important;
  border-radius: 0;
  box-shadow: none !important;
  color: #fffaf0 !important;
  font-family: arial;
  font-size: 12px;
  line-height: 1 !important;
  text-decoration: none;
  height: auto !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease;
}

/* Round only the OUTER bottom corners of the button group.
   Keeps the top edge flush against the caption (still "attached") and the
   inner edges flush against each other (no gap notches). */
#headermenu li:first-child a {
  border-bottom-left-radius: 8px;
}
#headermenu li:last-child a {
  border-bottom-right-radius: 8px;
}

#headermenu li a:hover,
#headermenu li a:focus,
#headermenu li a:focus-visible,
#headermenu li a:active,
#headermenu li:hover a {
  background: rgba(84, 54, 6, 0.42) !important;  /* ~20% more opaque → darker */
  background-image: none !important;
  color: #fff !important;
  text-decoration: none;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}


/* ---- main nav strip (#menupart) ---- */
/* Original CSS sets #menupart width:980px / height:44px / dark-blue bg,
   but never made the <li>s horizontal — the plugin did that. */
#menupart ul.dropdown {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  height: 44px;
  align-items: stretch;
}

#menupart ul.dropdown > li {
  float: none;            /* override the inherited rule */
  display: flex;
  align-items: center;
  border-left: 1px solid #0A2345;
}

#menupart ul.dropdown > li:first-child {
  border-left: none;
}

#menupart ul.dropdown > li > a {
  color: #fff;
  font-family: arial;
  font-size: 14px;
  line-height: 44px;        /* matches strip height → vertically centers text */
  text-decoration: none;
  padding: 0 14px;
  display: block;
}

#menupart ul.dropdown > li:hover {
  background: #1C57A7;
}


/* ---- Sifu cards on home page — uniform sizing ---- */
/* Goals:
   - Every card image at the SAME pixel height (regardless of row).
   - Every card the same total height within its row.
   Adjust --card-img-height below if you want shorter/taller image slots. */
:root {
  --card-img-height: 280px;
}

.row {
  align-items: stretch;            /* columns equal height */
}
.col-6,
.col-4 {
  display: flex;                   /* let the card child stretch vertically */
}
.q-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.q-card-media {
  height: var(--card-img-height);  /* fixed pixel height → uniform across all cards */
  background: #eee;
}
.q-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;               /* crop to fill, no distortion */
  object-position: center top;     /* bias crop to top so faces stay visible */
  display: block;
}
.q-card-main {
  flex: 1;                         /* text area absorbs leftover space → cards equalize */
}


/* ---- pages don't need the wide 980px chrome strict-sizing ---- */
/* The original theme assumed a 980px-wide WP layout. Loosen so the
   content area scales a little better on smaller screens without
   breaking the home page's hand-coded layout. */
@media (max-width: 1000px) {
  #mainbody,
  #headerpart,
  #menupart,
  #footerpart {
    width: 100%;
    max-width: 980px;
    box-sizing: border-box;
  }
  #maincontainer {
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
  }
  #leftleave,
  #rightleave {
    display: none;        /* decorative side art, hide on narrow screens */
  }
}