/* Twenty-Fourteen compatibility layer — RCT-28.
 *
 * Both dfma-master.css and ocra-master.css hand-pasted an identical (or
 * near-identical, and drifting) set of fixes for Twenty Fourteen's own
 * template markup — none of it is a color, font, or logo choice, so it
 * doesn't belong in either club's Additional CSS box. This file is that
 * fix set, shipped once, enqueued by the plugin.
 *
 * Extracted from a full rule-by-rule diff of both club stylesheets, not
 * just the one example the backlog item named. Two real bugs surfaced by
 * that diff and fixed here rather than ported as-is:
 *   - ocra-master.css's .archive/.search page-header never got the
 *     max-width:none fix dfma-master.css has, so it still rendered as a
 *     narrow centered box (Twenty Fourteen's default reading width).
 *   - ocra-master.css's .post-thumbnail img still used object-fit:cover,
 *     the crop bug dfma-master.css already fixed to object-fit:contain
 *     (see the SK-archive rule below for why: cover crops a portrait or
 *     off-center photo's actual subject out).
 * Any color/font/logo value that used to sit in the same declaration as
 * one of these fixes (e.g. the SK-archive thumbnail's object-fit and its
 * navy/olive letterbox fill) stays in the club's own stylesheet — split
 * out here, not deleted.
 *
 * Selectors are all Twenty Fourteen's own template-hierarchy classes
 * (#secondary, .hentry, .entry-header, .site-content, etc.) — see RCT-29
 * for why that makes this whole file throwaway on a theme migration.
 */

/* ── Page / site wrapper ─────────────────────────────────────────── */
#page {
  background-color: #ffffff !important;
}

.site {
  margin-left: auto;
  margin-right: auto;
}

/* Twenty Fourteen's sidebar-column background block and the margin that
   makes room for #secondary both hardcode the sidebar's 240px width —
   keep the two in lockstep here so a future width change can't update
   one and miss the other. (z-index is deliberately NOT set here: ocra
   needs the theme's own z-index:2 preserved — see its own stylesheet.) */
.site::before {
  width: 240px !important;
}

/* margin-right:0 overrides Twenty Fourteen's own 29% right margin, which
   otherwise reserves space for its "Content Sidebar" widget area even
   though neither club uses it. Hide that widget area outright rather than
   just reclaiming its space — leaving it registered but empty means any
   future widget placed there would float into the reclaimed space and
   overlap the post column instead of just not showing up. */
.site-content {
  margin-left: 240px !important;
  margin-right: 0 !important;
}

#content-sidebar {
  display: none !important;
}

.content-area {
  padding-top: 0 !important;
}

div#primary {
  padding: 0;
}

/* ── Sidebar (#secondary) ────────────────────────────────────────── */
#secondary {
  padding: 0;
  width: 240px;
}

#secondary h2.site-description,
#secondary nav.navigation {
  display: none;
}

#secondary .widget {
  padding: 16px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

#secondary .widget_block,
#secondary .widget_block * {
  max-width: 100% !important;
  box-sizing: border-box !important;
  word-break: break-word;
}

#secondary .widget:last-child {
  border-bottom: none;
}

#secondary .widget {
  border-left: 2px solid rgba(232, 200, 122, 0.4);
  padding-left: 12px;
}

#secondary .textwidget>div {
  background: transparent !important;
  border-top: none !important;
  padding: 0 !important;
}

#secondary .widget-title,
#secondary h2.widget-title,
#secondary h3.widget-title {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--gold-warm) !important;
  margin: 0 0 12px !important;
}

#secondary a {
  color: var(--gold-warm);
}

#secondary a:hover {
  color: var(--gold-bright);
}

#secondary a:focus-visible {
  outline: 2px solid var(--gold-warm);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Entry / page content width (Twenty Fourteen's `margin:0 auto;
   max-width:474px` reading-width default leaks into these five
   selectors wherever a CSS Grid track — the listing/detail grids below —
   should be stretching them instead) ─────────────────────────────── */
.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content,
.hentry {
  max-width: none;
  margin: 0;
  width: 100%;
}

.wp-block-group {
  padding: 0;
  margin-bottom: 8px;
}

.full-width .site-content img.size-full.alignleft {
  margin-left: 75px;
}

.site-content .entry-content,
.site-content .entry-summary,
.page-content {
  padding: 0 20px !important;
}

.site-content .entry-header {
  padding: 0 20px !important;
}

.entry-content a,
.entry-summary a,
.page-content a,
.comment-content a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.entry-content a:hover,
.entry-summary a:hover,
.page-content a:hover,
.comment-content a:hover {
  color: var(--gold-hover);
}

.entry-content .edit-link a:hover {
  color: var(--gold);
}

.wp-block-latest-posts li {
  padding: 10px 0px;
}

.paging-navigation .page-numbers.current {
  border-top-color: var(--gold);
}

.paging-navigation a:hover {
  border-top-color: var(--gold-hover);
}

.page-links a {
  background: var(--gold);
  border-color: var(--gold);
}

.page-links a:hover {
  background: var(--gold-hover);
  border-color: var(--gold-hover);
}

/* ── Widgets / MediaElement.js skin ──────────────────────────────── */
.widget a:hover,
.widget-title a:hover {
  color: var(--gold-hover);
}

.widget button,
.widget input[type="button"],
.widget input[type="reset"],
.widget input[type="submit"] {
  background-color: var(--gold);
}

.widget input[type="button"]:hover,
.widget input[type="reset"]:hover,
.widget input[type="submit"]:hover,
.widget input[type="button"]:active,
.widget input[type="reset"]:active,
.widget input[type="submit"]:active {
  background-color: var(--gold-hover);
}

.widget_calendar tbody a {
  background-color: var(--gold);
}

.widget_calendar tbody a:hover {
  background-color: var(--gold-hover);
}

.content-sidebar .widget a {
  color: var(--gold);
}

.content-sidebar .widget a:hover {
  color: var(--gold-hover);
}

.content-sidebar .widget input[type="button"],
.content-sidebar .widget input[type="reset"],
.content-sidebar .widget input[type="submit"] {
  background-color: var(--gold);
}

.content-sidebar .widget input[type="button"]:hover,
.content-sidebar .widget input[type="reset"]:hover,
.content-sidebar .widget input[type="submit"]:hover {
  background-color: var(--gold-hover);
}

.content-sidebar .widget .widget-title {
  border-top-color: #000;
}

.content-sidebar .widget .widget-title a:hover {
  color: var(--gold);
}

.hentry .mejs-controls .mejs-time-rail .mejs-time-current,
.widget .mejs-controls .mejs-time-rail .mejs-time-current {
  background: var(--gold);
}

.hentry .mejs-overlay:hover .mejs-overlay-button,
.widget .mejs-overlay:hover .mejs-overlay-button {
  background-color: var(--gold);
}

.hentry .mejs-controls .mejs-button button:hover,
.widget .mejs-controls .mejs-button button:hover {
  color: var(--gold-hover);
}

/* ── Footer ───────────────────────────────────────────────────────── */
.site-info a:hover {
  color: var(--gold-bright) !important;
}

.site-navigation a:focus-visible {
  outline: 2px solid var(--gold-warm);
  outline-offset: -2px;
}

/* ── Archive / tag / category / author page headers ──────────────── */
/* Twenty Fourteen's base rule for .archive-header/.page-header is
   `margin: 24px auto; max-width: 474px` (its narrow single-column
   reading width) — every archive/category/tag/search page title needs
   both reset or it renders as a narrow centered box instead of the
   full-width banner the background/border imply. */
.archive .page-header,
.archive .archive-header,
.search .page-header {
  margin: 0 0 16px !important;
  max-width: none !important;
}

.archive .page-header .page-title,
.archive .archive-header .archive-title,
.search .page-header .page-title {
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  margin: 0 !important;
}

.archive .page-header .taxonomy-description {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 6px;
}

/* ── Post listing (archive/category/search/home only) ────────────── */
/* CSS Grid bypasses Twenty Fourteen's .post-thumbnail { width: 100% }
   float problem. Scoped to listing contexts only — single pages/posts
   must NOT get the grid. */
.archive .hentry,
.category .hentry,
.search .hentry,
.home .hentry {
  display: grid !important;
  grid-template-columns: 160px 1fr !important;
  column-gap: 16px !important;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}

/* Twenty Fourteen's own style.css pulls .has-post-thumbnail .entry-header
   up -48px at every breakpoint >=782px — built for its default layout,
   where a full-width featured image sits above the header and the
   negative margin lets the title overlap the image's bottom edge. In
   this grid layout the thumbnail sits beside the header, not above it,
   so the pull just opens a tall gap above the title. Cancel it, and pin
   header/content to explicit grid rows instead of relying on
   auto-placement to land them beside the thumbnail (grid-row: 1 / -1 on
   .post-thumbnail alone doesn't reliably span rows that don't exist yet
   at placement time). */
.archive .hentry .entry-header,
.category .hentry .entry-header,
.search .hentry .entry-header,
.home .hentry .entry-header {
  margin-top: 0 !important;
  grid-row: 1 !important;
}

.archive .hentry .entry-content,
.category .hentry .entry-content,
.search .hentry .entry-content,
.home .hentry .entry-content {
  grid-row: 2 !important;
}

.archive .hentry:last-of-type,
.category .hentry:last-of-type,
.search .hentry:last-of-type,
.home .hentry:last-of-type {
  border-bottom: none;
}

/* Single posts and pages: restore normal block layout */
.single .hentry,
.page .hentry {
  display: block !important;
  padding: 0;
  border-bottom: none;
}

.hentry:last-of-type {
  border-bottom: none;
}

/* Hide entry header only on pages that use a custom page-hero block */
.page header.entry-header {
  display: none;
}

.entry-title {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 2px;
  line-height: 1.35;
}

.entry-title a:hover {
  color: var(--gold) !important;
}

.entry-meta {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-bottom: 5px;
}

.entry-meta a:hover {
  color: var(--gold);
}

.entry-summary p,
.entry-content>p {
  font-size: 12px;
  color: var(--text-body);
  line-height: 1.65;
  margin: 0 0 5px;
}

.more-link {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--gold) !important;
  text-decoration: none;
}

.more-link:hover {
  color: var(--gold-hover) !important;
}

/* Post thumbnail — override Twenty Fourteen's width:100% float with CSS grid */
.post-thumbnail {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  float: none !important;
  width: 160px !important;
  max-width: 160px !important;
  margin: 0 !important;
  background: none !important;
  position: static !important;
  z-index: auto !important;
  align-self: start !important;
}

/* contain, not cover — cover crops whatever doesn't match the fixed box,
   which for a portrait or off-center source photo means cropping the
   actual subject out. Letterboxed on the club's own fill color instead
   (each club's stylesheet sets `background` on this rule). */
.post-thumbnail img,
.post-thumbnail img.wp-post-image {
  width: 160px !important;
  height: 100px !important;
  max-width: 160px !important;
  min-height: 100px !important;
  object-fit: contain !important;
  object-position: center top !important;
  border-radius: 5px !important;
  display: block !important;
}

/* All non-thumbnail children go into the text column (listing pages only) */
.archive .hentry>*:not(.post-thumbnail),
.category .hentry>*:not(.post-thumbnail),
.search .hentry>*:not(.post-thumbnail),
.home .hentry>*:not(.post-thumbnail) {
  grid-column: 2 !important;
  min-width: 0;
}

/* Posts without a thumbnail: span full width */
.archive .hentry:not(.has-post-thumbnail)>*,
.category .hentry:not(.has-post-thumbnail)>*,
.search .hentry:not(.has-post-thumbnail)>*,
.home .hentry:not(.has-post-thumbnail)>* {
  grid-column: 1 / -1 !important;
}

/* ── SK / obituary archive — grid/crop mechanics only. Each club's own
   stylesheet layers color (letterbox fill, title/link colors) and the
   show/hide choices for cat-links/byline/etc. on top of this. ────── */
:is(body.category-sk, body.tag-sk) .hentry {
  display: block !important;
  grid-template-columns: unset !important;
  border-left: none;
  padding-bottom: 2.5rem;
  margin-bottom: 0;
}

:is(body.category-sk, body.tag-sk) .hentry>* {
  grid-column: unset !important;
}

:is(body.category-sk, body.tag-sk) a.post-thumbnail {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 280px !important;
  overflow: hidden !important;
  border-radius: 4px;
  margin-bottom: 1rem !important;
  float: none !important;
  position: static !important;
}

:is(body.category-sk, body.tag-sk) .post-thumbnail,
:is(body.category-sk, body.tag-sk) a.post-thumbnail {
  grid-column: unset !important;
  grid-row: unset !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* contain, not cover — same crop-vs-letterbox reasoning as the listing
   thumbnail above, just a taller fixed box. */
:is(body.category-sk, body.tag-sk) .post-thumbnail img.wp-post-image,
:is(body.category-sk, body.tag-sk) a.post-thumbnail img.wp-post-image {
  width: 100% !important;
  max-width: 100% !important;
  height: 280px !important;
  min-height: 280px !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 0 !important;
}

/* ── Responsive (Twenty Fourteen's two-column layout starts at 1008px) */
@media (max-width: 1008px) {

  .site::before {
    display: none !important;
  }

  .site-content {
    margin-left: 0 !important;
  }

  #secondary {
    display: none !important;
  }

  .archive .hentry,
  .category .hentry,
  .search .hentry,
  .home .hentry {
    grid-template-columns: 1fr !important;
  }

  /* grid-template-columns above collapses to one explicit track, but the
     desktop rule placing text children in column 2 (more specific than a
     plain `.hentry > *` reset) keeps winning here — so the text sibling
     stays in column 2, which no longer exists, becomes a 0-width implicit
     track, and the thumbnail column collapses with it. Matches those
     selectors' own specificity so this actually overrides them: verified
     live, this is what was rendering the thumbnail as 0px wide ("cut
     off") with the text squeezed into the leftover space. */
  .archive .hentry>*:not(.post-thumbnail),
  .category .hentry>*:not(.post-thumbnail),
  .search .hentry>*:not(.post-thumbnail),
  .home .hentry>*:not(.post-thumbnail),
  .archive .hentry .post-thumbnail,
  .category .hentry .post-thumbnail,
  .search .hentry .post-thumbnail,
  .home .hentry .post-thumbnail {
    grid-column: 1 !important;
  }

  .post-thumbnail {
    width: 100% !important;
    max-width: 100% !important;
    grid-row: auto !important;
  }

  .post-thumbnail img,
  .post-thumbnail img.wp-post-image {
    width: 100% !important;
    height: 160px !important;
    max-width: 100% !important;
  }

  /* SK archive — keep full-width photo at 768px, reduce height to 200px */
  :is(body.category-sk, body.tag-sk) .hentry {
    display: block !important;
    grid-template-columns: unset !important;
  }

  :is(body.category-sk, body.tag-sk) .post-thumbnail,
  :is(body.category-sk, body.tag-sk) a.post-thumbnail {
    width: 100% !important;
    max-width: 100% !important;
    height: 200px !important;
    grid-column: unset !important;
    grid-row: unset !important;
  }

  :is(body.category-sk, body.tag-sk) .post-thumbnail img.wp-post-image,
  :is(body.category-sk, body.tag-sk) a.post-thumbnail img.wp-post-image {
    width: 100% !important;
    max-width: 100% !important;
    height: 200px !important;
    min-height: 200px !important;
  }

}

/* SK archive at 375px viewport: reduce photo height further to 160px. */
@media (max-width: 480px) {

  :is(body.category-sk, body.tag-sk) .post-thumbnail,
  :is(body.category-sk, body.tag-sk) a.post-thumbnail {
    height: 160px !important;
  }

  :is(body.category-sk, body.tag-sk) .post-thumbnail img.wp-post-image,
  :is(body.category-sk, body.tag-sk) a.post-thumbnail img.wp-post-image {
    height: 160px !important;
    min-height: 160px !important;
  }
}

/* ── Post-with-no-title spacing fix ──────────────────────────────── */
.post-0 .entry-content {
  padding-left: 0px !important
}