/*
Theme Name: Twenty Twenty-One Child
Theme URI: https://ec-journal.ca/
Template: twentytwentyone
Author: EC Journal
Author URI: https://ec-journal.ca/
Description: A custom child theme for EC Journal built on Twenty Twenty-One. Implements a publication-focused layout with custom single-post header behavior, structured Browse hub with Region and Topic taxonomies, filter-driven archives, controlled content widths, and refined spacing across views. Designed for clarity, hierarchy, and editorial readability.
Tags: one-column,accessibility-ready,custom-colors,custom-menu,custom-logo,editor-style,featured-images,footer-widgets,block-patterns,rtl-language-support,sticky-post,threaded-comments,translation-ready,blog,portfolio
Version: 2.7.1770892814
Updated: 2026-02-12 10:40:14
*/

/* ==========================================================================
   SEARCH RESULTS – Smaller Title
   ========================================================================== */

.search .entry-title {
  font-size: 1.5rem !important;
  line-height: 1.25 !important;
}

/* ==========================================================================
   PAGE “SUBTITLE” UNDER MAIN SITE TITLE (Articles / About / Contact)
   ========================================================================== */

/*
  Your “subtitle” may be rendered either:
  1) In the header area (site header), OR
  2) As the page title in the content area.

  These rules target BOTH locations on static pages (not home, not single posts),
  normalize weight (fix bold Articles), reduce size, and center it.

  Update (this change unit):
  - Keep the “extra gap” ABOVE the page title.
  - Reduce the gap BELOW the page title (between title text and the header separator line).
*/

/* Center the header/title blocks */
body.page:not(.home):not(.single) .site-header .site-branding,
body.page:not(.home):not(.single) .entry-header,
body.page:not(.home):not(.single) .page-header {
  text-align: center !important;
}

/* Normalize + size the “subtitle” text wherever it is output */
body.page:not(.home):not(.single) .site-header .site-description,
body.page:not(.home):not(.single) .site-header .page-title,
body.page:not(.home):not(.single) .site-header .entry-title,
body.page:not(.home):not(.single) .site-header .entry-title a,
body.page:not(.home):not(.single) .entry-header .entry-title,
body.page:not(.home):not(.single) .page-header .page-title {
  text-align: center !important;
  font-size: clamp(1.6rem, 2.9vw, 2.2rem) !important; /* smaller than before, not tiny */
  line-height: 1.2 !important;
  font-weight: 500 !important; /* fixes Articles being bold */

  /* Gap ABOVE title (between site title area and page title) */
  margin-top: 1.6rem !important;

  /* Minimal gap below title text itself */
  margin-bottom: 0.1rem !important;
}

/* Twenty Twenty-One draws the separator line as the bottom border of the entry header.
   The visible “gap under the title before the line” is entry-header padding-bottom.
   Tighten that ONLY on Pages (not posts). */
body.page:not(.home):not(.single) .entry-header {
  padding-bottom: 0.35rem !important;
}

/* If a template uses a pseudo-element separator, tighten it too */
body.page:not(.home):not(.single) .entry-header::after,
body.page:not(.home):not(.single) .page-header::after {
  margin-top: 0.15rem !important;
}

/* If the separator line is an actual <hr> block near the top of page content, tighten it */
body.page:not(.home):not(.single) .entry-content > hr:first-child,
body.page:not(.home):not(.single) .entry-content > .wp-block-separator:first-child,
body.page:not(.home):not(.single) .entry-content > *:first-child hr,
body.page:not(.home):not(.single) .entry-content > *:first-child .wp-block-separator {
  margin-top: 0.25rem !important;    /* reduces space between title and line */
  margin-bottom: 1.25rem !important; /* keeps normal breathing room before content */
}

/* ==========================================================================
   HEADER
   ========================================================================== */

/* Centered site branding + large site title */
.site-header {
  display: block;
  padding-top: 0 !important;
  margin-top: 0.75rem !important; /* one blank line above banner */
}

/* Banner (seasonal image) */
.site-header .site-branding.ec-site-banner {
  width: 100%;
  text-align: center;
  position: relative; /* anchor for corner brand */

  background-image: var(--ec-site-title-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Make banner higher */
  min-height: 130px;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* Corner brand (EC Journal) inside banner */
.site-header .site-branding.ec-site-banner .ec-corner-brand {
  display: block;
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 50;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1;
  color: #fff;
  background: #000;
  padding: 0.15rem 0.35rem;
  border-radius: 0.25rem;
}

/* Title area below banner */
.site-header .site-branding.ec-site-title-area {
  width: 100%;
  text-align: center;
  padding-top: 1.2rem;
}

/* Site title size */
.site-header .site-branding.ec-site-title-area .site-title,
.site-header .site-branding.ec-site-title-area .site-title a {
  font-size: clamp(4rem, 8vw, 6rem);
  line-height: 1.1;
}

/* Site title weight */
.site-title,
.site-title a {
  font-weight: 600;
}

/* Title color (black) */
.site-title,
.site-title a {
  color: #000;
}

/* NO OVERLAY on pages:
   Keep the same "shrink-wrapped" title sizing behavior as before,
   but remove the band background. */
.site-title {
  display: inline;
  padding: 0.25rem 0.6rem; /* preserve previous band sizing without background */
}

/* Single post: article title below banner */
.single .ec-article-header-title {
  /* slightly darker green than light post background */
  text-align: center;
  font-weight: 800;
  max-width: var(--responsive--alignwide-width);
  margin-left: auto;
  margin-right: auto;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1.15;
  margin-top: 0;
  margin-bottom: 0;

  /* Title color (black), no overlay */
  color: #000;
  display: inline;
  padding: 0.25rem 0.6rem; /* preserve prior title block sizing without background */
}

/* Ensure the inline title can center as a band */
.single .ec-article-header-title-wrap,
.single .entry-header,
.single .entry-header .inner {
  text-align: center;
}

/* ==========================================================================
   PRIMARY NAVIGATION
   ========================================================================== */

/* Center the primary menu under the title (desktop) */
.site-header .primary-navigation {
  width: 100%;
}

.site-header .primary-navigation > .primary-menu-container {
  width: 100%;
  display: flex;
  justify-content: center !important;
}

.site-header .primary-navigation > .primary-menu-container > .menu-wrapper {
  display: flex;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  width: auto;
  gap: 2rem;
  margin: 0;
}

/* ==========================================================================
   FRONT PAGE
   ========================================================================== */

.home .ec-home-posts {
  max-width: 1100px;
  margin: 0 auto;
}

.home .ec-home-posts > article {
  margin: 0;
}

/* Front page thumbnails: taller tiles (less cropping) + crop from bottom first (show top) */
.home .ec-home-posts .post-thumbnail-inner {
  aspect-ratio: 1 / 1 !important; /* taller than before to reduce cropping */
  overflow: hidden !important;
  display: block;
}

.home .ec-home-posts .post-thumbnail-inner a {
  display: block;
  height: 100%;
}

.home .ec-home-posts .post-thumbnail-inner img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  max-width: 100%;
  display: block;
}

.home .entry-footer,
.home .entry-meta,
.home .posted-on,
.home .cat-links,
.home .tags-links,
.home .edit-link {
  display: none !important;
}

.entry-excerpt-link,
.entry-excerpt-link:visited {
  color: inherit;
  text-decoration: none;
}

.entry-excerpt-link:hover {
  text-decoration: underline;
}

/* ==========================================================================
   TAG ARCHIVE GRID
   ========================================================================== */

.tag-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}

.tag-grid-item {
  border: 1px solid #ddd;
  padding: 1rem;
}

.tag-grid-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.tag-grid-image img {
  width: 100%;
  height: auto;
  display: block;
}

.tag-grid-title {
  font-size: 1.1rem;
  margin-top: 0.75rem;
  line-height: 1.3;
}

@media (max-width: 1024px) {
  .tag-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .tag-grid { grid-template-columns: 1.1fr; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer .site-info,
.site-footer .site-info .site-name,
.site-footer .site-info .powered-by {
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

.home .ec-home-posts .alignwide,
.home .ec-home-posts .alignfull {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.home .ec-home-posts .post-thumbnail {
  margin: 0;
}

.home .ec-home-posts article {
  overflow: hidden;
}

@media only screen and (max-width: 481.98px) {
  .site-header:not(.has-logo).has-title-and-tagline .site-branding {
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

.ec-home-posts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 700px) {
  .ec-home-posts {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .ec-home-posts {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================================================
   CHANGE UNIT: single-header-padding
   ========================================================================== */

.single .site-header {
  padding-bottom: var(--global--spacing-vertical) !important;
}

@media only screen and (min-width: 482px) {
  .single .site-header {
    padding-bottom: var(--global--spacing-vertical) !important;
  }
}

.single .site-main {
  padding-top: 0 !important;
}

/* ==========================================================================
   LAYOUT SPACING: non-single views (home / pages / archives)
   ========================================================================== */

/* Reduce menu→content vertical gap on non-single views */
body:not(.single) .site-header {
  padding-bottom: 0 !important;
}

body:not(.single) .site-main {
  padding-top: 0 !important;
}

/* Restore side breathing room so content does not hit screen edges */
body:not(.single) .site-content {
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

/* Home grid: inner padding for narrow screens while keeping max-width cap */
.home .ec-home-posts {
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

/* ==========================================================================
   CHANGE UNIT: overlay-band-all-views
   ========================================================================== */

/* OVERLAY BAND REMOVED: 2026-02-24 */


/* Disable seasonal background on single posts */
.single .site-header .site-branding.ec-site-branding-center {
  background-image: none;
}

/* Vertically center post article title inside branding area */
.single .site-header .site-branding.ec-site-branding-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Single posts: keep solid green branding background AND vertically center title */
.single .site-header .site-branding.ec-site-branding-center {
  background-image: none !important;
  background-color: #b9d8b9 !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Single posts: optical vertical adjustment (slightly higher) */
.single .site-header .site-branding.ec-site-branding-center {
  padding-top: 1.25rem !important;
  padding-bottom: 0.5rem !important;
}

/* Single posts: wider text but keep some side margin */
.single .entry-content,
.single .entry-content > *,
.single .site-main .entry-content > * {
  max-width: 1100px !important;
  width: calc(100% - 64px) !important; /* leaves ~32px margin on each side */
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Single posts: make the footer/meta noticeably narrower than the article content */
.single .entry-footer.default-max-width {
  max-width: 960px !important;          /* noticeably narrower than 1100px */
  width: calc(100% - 128px) !important; /* noticeably narrower than content's -64px */
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Mobile: push single-post title down to avoid EC Journal + Menu crowding */
@media (max-width: 640px) {
  .single .site-header .site-branding.ec-site-branding-center {
    padding-top: 1.75rem !important;
  }
}

/* ==========================================================================
   BROWSE HUB + TAXONOMY ARCHIVES (Region / Topic)
   Focused styling only: hierarchy, spacing, balance.
   ========================================================================== */

/* Common container: keep layouts readable without changing structure */
.page-template-page-browse .site-main,
.tax-region .site-main,
.tax-topic .site-main {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* Page + archive headings: lighter, cleaner */
.page-template-page-browse .entry-title,
.tax-region .page-title,
.tax-topic .page-title,
.tax-region .archive-title,
.tax-topic .archive-title {
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}

/* Reduce the “heavy” taxonomy prefix feel if template uses a prefixed title */
.tax-region .page-title,
.tax-topic .page-title,
.tax-region .archive-title,
.tax-topic .archive-title {
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  line-height: 1.2;
}

/* If template outputs description, give it breathing room */
.tax-region .archive-description,
.tax-topic .archive-description {
  margin-top: 0.25rem;
  margin-bottom: 1.5rem;
  color: #3a3a3a;
}

/* ===== Filter area (Browse hub) ===== */
.page-template-page-browse .ec-browse-filters,
.page-template-page-browse .browse-filters,
.page-template-page-browse form.ec-browse-form,
.page-template-page-browse form.browse-form,
.page-template-page-browse form {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}

/* “Card” styling for filter wrapper without relying on markup changes */
.page-template-page-browse .ec-browse-filters,
.page-template-page-browse .browse-filters,
.page-template-page-browse form.ec-browse-form,
.page-template-page-browse form.browse-form {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  padding: 1rem 1rem;
  box-shadow: 0 6px 22px rgba(0,0,0,0.06);
}

/* Form layout: align controls nicely */
.page-template-page-browse .ec-browse-filters label,
.page-template-page-browse .browse-filters label,
.page-template-page-browse form.ec-browse-form label,
.page-template-page-browse form.browse-form label {
  font-weight: 600;
  margin-bottom: 0.25rem;
  display: inline-block;
}

.page-template-page-browse select,
.page-template-page-browse input[type="text"],
.page-template-page-browse input[type="search"] {
  width: 100%;
  max-width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.18);
  padding: 0.55rem 0.7rem;
  background: #fff;
}

.page-template-page-browse select:focus,
.page-template-page-browse input[type="text"]:focus,
.page-template-page-browse input[type="search"]:focus {
  outline: none;
  border-color: rgba(0,0,0,0.35);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.08);
}

/* Buttons in filter form */
.page-template-page-browse button,
.page-template-page-browse input[type="submit"] {
  border-radius: 999px;
  padding: 0.55rem 1rem;
  font-weight: 600;
  border: 1px solid rgba(0,0,0,0.18);
  background: #111;
  color: #fff;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.page-template-page-browse button:hover,
.page-template-page-browse input[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
  background: #000;
}

.page-template-page-browse button:active,
.page-template-page-browse input[type="submit"]:active {
  transform: translateY(0);
  box-shadow: none;
}

/* “Current filters” indicator */
.page-template-page-browse .ec-current-filters,
.page-template-page-browse .current-filters,
.page-template-page-browse .browse-current-filters {
  margin-top: 0.75rem;
  padding: 0.65rem 0.8rem;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  font-size: 0.95rem;
}

/* ===== Results section separation (Browse hub + archives) ===== */
.page-template-page-browse .ec-browse-results,
.page-template-page-browse .browse-results,
.tax-region .site-main .ec-browse-results,
.tax-topic .site-main .ec-browse-results,
.tax-region .site-main .archive-posts,
.tax-topic .site-main .archive-posts,
.tax-region .site-main .content-area,
.tax-topic .site-main .content-area {
  margin-top: 1.25rem;
}

/* Provide a subtle top divider if results follow filters */
.page-template-page-browse .ec-browse-results,
.page-template-page-browse .browse-results {
  padding-top: 1.25rem;
  border-top: 1px solid rgba(0,0,0,0.10);
}

/* Excerpt listing: clearer rhythm */
.page-template-page-browse .ec-browse-results article,
.page-template-page-browse .browse-results article,
.tax-region article,
.tax-topic article {
  padding: 1rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.page-template-page-browse .ec-browse-results article:last-child,
.page-template-page-browse .browse-results article:last-child,
.tax-region article:last-child,
.tax-topic article:last-child {
  border-bottom: none;
}

.page-template-page-browse .ec-browse-results .entry-title,
.page-template-page-browse .browse-results .entry-title,
.tax-region .entry-title,
.tax-topic .entry-title {
  font-size: 1.25rem;
  line-height: 1.25;
  margin-bottom: 0.35rem;
}

.page-template-page-browse .ec-browse-results .entry-summary,
.page-template-page-browse .browse-results .entry-summary,
.tax-region .entry-summary,
.tax-topic .entry.summary,
.tax-region .entry-content,
.tax-topic .entry-content {
  margin-top: 0.35rem;
  color: #3a3a3a;
}

/* ===== Filter Results: title-only listing (Browse hub) ===== */
.page-template-page-browse .ec-filter-results .entry-title {
  font-size: var(--global--font-size-base);
  line-height: var(--global--line-height-body);
  margin: 0;
  font-weight: 400;
}

.page-template-page-browse .ec-filter-results .ec-archive-item {
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.page-template-page-browse .ec-filter-results .ec-archive-item:last-child {
  border-bottom: none;
}

/* ===== Browse lists (Browse by Region / Topic) ===== */
/* Make list blocks feel balanced as columns when they are in a two-column wrapper */
.page-template-page-browse .ec-browse-columns,
.page-template-page-browse .browse-columns,
.page-template-page-browse .ec-browse-lists,
.page-template-page-browse .browse-lists {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

@media (min-width: 782px) {
  .page-template-page-browse .ec-browse-columns,
  .page-template-page-browse .browse-columns,
  .page-template-page-browse .ec-browse-lists,
  .page-template-page-browse .browse-lists {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

/* If markup is simpler (headings + ul), still style nicely */
.page-template-page-browse .ec-browse-columns > *,
.page-template-page-browse .browse-columns > *,
.page-template-page-browse .ec-browse-lists > *,
.page-template-page-browse .browse-lists > * {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  padding: 1rem 1rem;
  box-shadow: 0 6px 22px rgba(0,0,0,0.05);
}

.page-template-page-browse .ec-browse-columns h2,
.page-template-page-browse .browse-columns h2,
.page-template-page-browse .ec-browse-lists h2,
.page-template-page-browse .browse-lists h2 {
  font-size: 1.15rem;
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.page-template-page-browse .ec-browse-columns ul,
.page-template-page-browse .browse-columns ul,
.page-template-page-browse .ec-browse-lists ul,
.page-template-page-browse .browse-lists ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
}

@media (min-width: 482px) {
  .page-template-page-browse .ec-browse-columns ul,
  .page-template-page-browse .browse-columns ul,
  .page-template-page-browse .ec-browse-lists ul,
  .page-template-page-browse .browse-lists ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem 0.75rem;
  }
}

.page-template-page-browse .ec-browse-columns a,
.page-template-page-browse .browse-columns a,
.page-template-page-browse .ec-browse-lists a,
.page-template-page-browse .browse-lists a {
  display: inline-block;
  padding: 0.25rem 0.35rem;
  border-radius: 8px;
  text-decoration: none;
}

.page-template-page-browse .ec-browse-columns a:hover,
.page-template-page-browse .browse-columns a:hover,
.page-template-page-browse .ec-browse-lists a:hover,
.page-template-page-browse .browse-lists a:hover {
  background: rgba(0,0,0,0.05);
  text-decoration: underline;
}

/* ===== Small screens: ensure cards breathe ===== */
@media (max-width: 640px) {
  .page-template-page-browse .ec-browse-filters,
  .page-template-page-browse .browse-filters,
  .page-template-page-browse form.ec-browse-form,
  .page-template-page-browse form.browse-form {
    padding: 0.9rem 0.9rem;
  }

  .page-template-page-browse .ec-browse-columns > *,
  .page-template-page-browse .browse-columns > *,
  .page-template-page-browse .ec-browse-lists > *,
  .page-template-page-browse .browse-lists > * {
    padding: 0.9rem 0.9rem;
  }
}