/* ============================================================
   REACH: Journal of Research and Community Engagement
   Homepage stylesheet
   ============================================================

   DESIGN SYSTEM
   ------------------------------------------------------------
   Emerald   #064D3B
   Dark      #04382B
   Gold      #F2B632
   Ivory     #F8F8F5
   Text      #17231F
   Muted     #6B7772

   IMPORTANT:
   - Paste this into OJS Journal Style Sheet.
   - If your OJS version/theme sanitizes HTML, use the HTML
     through a Custom Block or homepage content block.
   - No JavaScript is required.
   ============================================================ */


/* ============================================================
   1. VARIABLES
   ============================================================ */

.reach-homepage {

  --reach-green: #064D3B;
  --reach-green-dark: #04382B;
  --reach-green-mid: #0B604A;

  --reach-gold: #F2B632;
  --reach-gold-dark: #D99A18;
  --reach-gold-soft: #FFF4D5;

  --reach-ivory: #F8F8F5;
  --reach-white: #FFFFFF;

  --reach-text: #17231F;
  --reach-muted: #6B7772;

  --reach-border: #DDE4DF;
  --reach-border-light: #EAEDEA;

  --reach-shadow:
    0 3px 12px rgba(17, 39, 31, .08);

  --reach-shadow-hover:
    0 8px 24px rgba(17, 39, 31, .12);

  --reach-radius: 7px;

  width: 100%;
  box-sizing: border-box;

  color: var(--reach-text);

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  line-height: 1.6;

}


.reach-homepage *,
.reach-homepage *::before,
.reach-homepage *::after {
  box-sizing: border-box;
}


/* ============================================================
   2. CONTAINER
   ============================================================ */

.reach-container {

  width: min(1180px, calc(100% - 40px));

  margin-left: auto;
  margin-right: auto;

}


/* ============================================================
   3. GLOBAL LINKS / IMAGES
   ============================================================ */

.reach-homepage a {
  text-decoration: none;
}

.reach-homepage img {
  display: block;
  max-width: 100%;
}

.reach-homepage a:focus-visible {
  outline: 3px solid rgba(242, 182, 50, .65);
  outline-offset: 3px;
}


/* ============================================================
   4. HERO
   ============================================================ */

.reach-hero {

  position: relative;

  min-height: 520px;

  overflow: hidden;

  background:
    var(--reach-green-dark);

}


.reach-hero-media {

  position: absolute;

  inset: 0;

  background-size: cover;
  background-position: center center;

}


.reach-hero-overlay {

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(3, 49, 37, .98) 0%,
      rgba(3, 58, 43, .91) 30%,
      rgba(3, 58, 43, .55) 53%,
      rgba(3, 58, 43, .10) 100%
    );

}


.reach-hero-inner {

  position: relative;
  z-index: 2;

  min-height: 520px;

  display: flex;
  align-items: center;

}


.reach-hero-content {

  width: min(570px, 100%);

  padding:
    60px 0 70px;

}


.reach-kicker {

  margin-bottom: 13px;

  color:
    rgba(255,255,255,.76);

  font-size:
    .68rem;

  font-weight:
    800;

  letter-spacing:
    .16em;

}


.reach-hero h1 {

  margin:
    0;

  color:
    #ffffff;

  font-size:
    clamp(3.6rem, 7vw, 5.5rem);

  font-weight:
    850;

  line-height:
    .92;

  letter-spacing:
    -.04em;

}


.reach-hero-title {

  margin-top:
    12px;

  color:
    var(--reach-gold);

  font-size:
    clamp(1.55rem, 3vw, 2.25rem);

  font-weight:
    800;

  line-height:
    1.12;

}


.reach-gold-rule {

  width:
    54px;

  height:
    3px;

  margin:
    20px 0 17px;

  background:
    var(--reach-gold);

}


.reach-hero-description {

  max-width:
    480px;

  margin:
    0 0 22px;

  color:
    rgba(255,255,255,.90);

  font-size:
    1rem;

  line-height:
    1.65;

}


.reach-hero-actions {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    12px;

  margin-bottom:
    29px;

}


.reach-btn {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  min-height:
    42px;

  padding:
    10px 19px;

  border:
    1px solid transparent;

  border-radius:
    4px;

  font-size:
    .74rem;

  font-weight:
    800;

  letter-spacing:
    .04em;

  text-transform:
    uppercase;

  transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease;

}


.reach-btn:hover {
  transform: translateY(-1px);
}


.reach-btn-gold {

  background:
    var(--reach-gold);

  color:
    #13251F !important;

}


.reach-btn-gold:hover {

  background:
    #FFC84A;

  color:
    #13251F !important;

}


.reach-btn-outline {

  border-color:
    rgba(255,255,255,.82);

  color:
    #ffffff !important;

  background:
    rgba(255,255,255,.03);

}


.reach-btn-outline:hover {

  background:
    rgba(255,255,255,.12);

  border-color:
    #ffffff;

}


.reach-btn-small {

  width:
    fit-content;

  min-height:
    37px;

  padding:
    8px 15px;

  font-size:
    .68rem;

}


.reach-btn-icon {
  font-size: 15px;
}


.reach-hero-features {

  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  max-width:
    560px;

  border-top:
    1px solid rgba(255,255,255,.18);

  padding-top:
    20px;

}


.reach-hero-feature {

  display:
    flex;

  align-items:
    flex-start;

  gap:
    10px;

  min-height:
    57px;

  padding:
    0 15px;

  border-right:
    1px solid rgba(255,255,255,.18);

}


.reach-hero-feature:first-child {
  padding-left: 0;
}


.reach-hero-feature:last-child {
  border-right: 0;
}


.reach-feature-icon {

  flex:
    0 0 28px;

  color:
    #ffffff;

  font-size:
    1.45rem;

  line-height:
    1;

}


.reach-hero-feature strong {

  display:
    block;

  color:
    #ffffff;

  font-size:
    .75rem;

  line-height:
    1.3;

}


.reach-hero-feature span {

  display:
    block;

  margin-top:
    3px;

  color:
    rgba(255,255,255,.74);

  font-size:
    .68rem;

  line-height:
    1.45;

}


/* ============================================================
   5. SECTIONS
   ============================================================ */

.reach-section {
  padding: 26px 0;
}


.reach-intro-section {
  padding-top: 26px;
  padding-bottom: 10px;
}


.reach-content-section {
  padding-top: 14px;
}


.reach-intro-grid {

  display:
    grid;

  grid-template-columns:
    1fr 1fr 1fr;

  gap:
    18px;

}


.reach-main-grid {

  display:
    grid;

  grid-template-columns:
    minmax(0, 2.05fr) minmax(290px, .95fr);

  gap:
    18px;

}


.reach-main-column,
.reach-home-sidebar {

  min-width:
    0;

}


/* ============================================================
   6. PANELS
   ============================================================ */

.reach-panel {

  background:
    var(--reach-white);

  border:
    1px solid var(--reach-border);

  border-radius:
    var(--reach-radius);

  box-shadow:
    var(--reach-shadow);

}


.reach-about-panel,
.reach-focus-panel {

  min-height:
    220px;

  padding:
    22px;

}


.reach-section-label {

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  margin-bottom:
    16px;

  color:
    var(--reach-green);

  font-size:
    .76rem;

  font-weight:
    850;

  letter-spacing:
    .04em;

  text-transform:
    uppercase;

}


.reach-section-label > span {

  display:
    block;

  width:
    28px;

  height:
    3px;

  flex:
    0 0 28px;

  background:
    var(--reach-gold);

}


.reach-about-panel p {

  margin:
    0 0 20px;

  font-size:
    .86rem;

  line-height:
    1.75;

}


.reach-about-panel p strong {
  font-weight: 750;
}


.reach-text-link {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  color:
    var(--reach-green) !important;

  font-size:
    .75rem;

  font-weight:
    800;

}


.reach-text-link span {

  color:
    var(--reach-gold);

  transition:
    transform .2s ease;

}


.reach-text-link:hover span {
  transform: translateX(4px);
}


/* ============================================================
   7. FOCUS & SCOPE
   ============================================================ */

.reach-check-list {

  list-style:
    none;

  margin:
    0;

  padding:
    0;

}


.reach-check-list li {

  position:
    relative;

  margin:
    0;

  padding:
    4px 0 4px 25px;

  font-size:
    .81rem;

  line-height:
    1.45;

}


.reach-check-list li::before {

  content:
    "✓";

  position:
    absolute;

  left:
    0;

  top:
    3px;

  width:
    17px;

  height:
    17px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    50%;

  background:
    var(--reach-green);

  color:
    #ffffff;

  font-size:
    .65rem;

  font-weight:
    900;

}


/* ============================================================
   8. CURRENT ISSUE
   ============================================================ */

.reach-current-panel {

  padding:
    21px;

  background:
    linear-gradient(
      145deg,
      #064D3B,
      #04382B
    );

  color:
    #ffffff;

}


.reach-section-label-light {

  color:
    #ffffff;

}


.reach-current-layout {

  display:
    flex;

  gap:
    14px;

  margin-bottom:
    17px;

}


.reach-cover-wrap {

  width:
    74px;

  flex:
    0 0 74px;

}


.reach-cover-wrap img {

  width:
    74px;

  height:
    104px;

  object-fit:
    cover;

  border:
    3px solid rgba(255,255,255,.20);

  box-shadow:
    0 4px 12px rgba(0,0,0,.18);

}


.reach-current-info h3 {

  margin:
    2px 0 2px;

  color:
    #ffffff;

  font-size:
    .92rem;

  line-height:
    1.35;

}


.reach-current-date {

  margin:
    0 0 14px;

  color:
    var(--reach-gold);

  font-size:
    .77rem;

  font-weight:
    750;

}


.reach-current-meta {

  color:
    rgba(255,255,255,.74);

  font-size:
    .69rem;

  line-height:
    1.75;

}


.reach-current-meta strong {
  color: #ffffff;
}


/* ============================================================
   9. LATEST ARTICLES
   ============================================================ */

.reach-articles-panel {
  overflow: hidden;
}


.reach-panel-header {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  padding:
    21px 21px 4px;

}


.reach-panel-header .reach-section-label {
  margin-bottom: 0;
}


.reach-article {

  display:
    grid;

  grid-template-columns:
    125px minmax(0, 1fr) 55px;

  gap:
    18px;

  padding:
    17px 21px;

  border-top:
    1px solid var(--reach-border-light);

}


.reach-article-image {

  display:
    block;

  width:
    125px;

  height:
    104px;

  overflow:
    hidden;

  border-radius:
    4px;

  background:
    #E9EEEA;

}


.reach-article-image img {

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  transition:
    transform .35s ease;

}


.reach-article:hover .reach-article-image img {
  transform: scale(1.04);
}


.reach-article-content {
  min-width: 0;
}


.reach-article-type {

  margin-bottom:
    4px;

  color:
    var(--reach-green);

  font-size:
    .61rem;

  font-weight:
    850;

  letter-spacing:
    .06em;

  text-transform:
    uppercase;

}


.reach-article h3 {

  margin:
    0 0 4px;

  font-size:
    .88rem;

  line-height:
    1.38;

}


.reach-article h3 a {

  color:
    var(--reach-text) !important;

}


.reach-article h3 a:hover {
  color: var(--reach-green) !important;
}


.reach-article-authors {

  margin:
    0 0 4px;

  color:
    #38453F;

  font-size:
    .69rem;

}


.reach-article-meta {

  color:
    var(--reach-muted);

  font-size:
    .64rem;

}


.reach-doi {

  display:
    inline-flex;

  gap:
    5px;

  max-width:
    100%;

  margin-top:
    5px;

  overflow:
    hidden;

  color:
    var(--reach-green) !important;

  font-size:
    .62rem;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;

}


.reach-doi span {

  display:
    inline-flex;

  align-items:
    center;

  padding:
    1px 4px;

  border-radius:
    3px;

  background:
    var(--reach-gold);

  color:
    #2C271B;

  font-weight:
    850;

}


.reach-article-side {

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  padding-top:
    6px;

  color:
    var(--reach-muted);

  font-size:
    .65rem;

}


.reach-pdf-icon {

  margin-bottom:
    3px;

  font-size:
    1rem;

}


.reach-article-side small {

  margin-top:
    auto;

  font-size:
    .58rem;

}


/* ============================================================
   10. BENEFITS
   ============================================================ */

.reach-benefits {

  display:
    grid;

  grid-template-columns:
    repeat(4, 1fr);

  margin-top:
    16px;

  background:
    var(--reach-ivory);

  border:
    1px solid var(--reach-border);

  border-radius:
    var(--reach-radius);

  box-shadow:
    var(--reach-shadow);

}


.reach-benefit {

  display:
    flex;

  gap:
    10px;

  padding:
    18px;

  border-right:
    1px solid var(--reach-border);

}


.reach-benefit:last-child {
  border-right: 0;
}


.reach-benefit-icon {

  flex:
    0 0 28px;

  color:
    var(--reach-green);

  font-size:
    1.35rem;

}


.reach-benefit strong {

  display:
    block;

  margin-bottom:
    3px;

  font-size:
    .67rem;

  text-transform:
    uppercase;

}


.reach-benefit span {

  display:
    block;

  color:
    var(--reach-muted);

  font-size:
    .62rem;

  line-height:
    1.45;

}


/* ============================================================
   11. SIDEBAR STATISTICS
   ============================================================ */

.reach-home-sidebar {

  display:
    flex;

  flex-direction:
    column;

  gap:
    16px;

}


.reach-stat-panel,
.reach-index-panel,
.reach-links-panel {

  padding:
    20px;

}


.reach-stat-grid {

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    14px 10px;

}


.reach-stat {

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

}


.reach-stat-icon {

  width:
    37px;

  height:
    37px;

  flex:
    0 0 37px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    50%;

  background:
    #F1F5F2;

  color:
    var(--reach-green);

  font-size:
    1rem;

}


.reach-stat strong {

  display:
    block;

  color:
    var(--reach-green);

  font-size:
    1rem;

  line-height:
    1.1;

}


.reach-stat span {

  display:
    block;

  margin-top:
    2px;

  color:
    var(--reach-text);

  font-size:
    .61rem;

}


.reach-stat-note {

  margin:
    17px 0 0;

  color:
    var(--reach-muted);

  font-size:
    .59rem;

}


/* ============================================================
   12. INDEXED BY
   ============================================================ */

.reach-index-grid {

  display:
    grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap:
    8px;

}


.reach-index-logo {

  min-height:
    42px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    7px;

  border:
    1px solid #E4E9E5;

  border-radius:
    4px;

  background:
    #ffffff;

  color:
    var(--reach-green) !important;

  font-size:
    .68rem;

  font-weight:
    850;

  transition:
    transform .2s ease,
    border-color .2s ease;

}


.reach-index-logo:hover {

  transform:
    translateY(-1px);

  border-color:
    var(--reach-gold);

}


.reach-index-garuda {
  color: #C62A2A !important;
}


.reach-index-google {
  display: flex;
  flex-direction: column;
  line-height: 1;
}


.reach-index-google span {
  font-size: .73rem;
  color: #4285F4;
}


.reach-index-google small {
  margin-top: 3px;
  color: #555;
  font-size: .53rem;
}


.reach-index-crossref {
  color: #E84A35 !important;
}


.reach-index-road {
  color: #D73B4B !important;
}


.reach-index-openalex {
  color: #0B7774 !important;
}


/* ============================================================
   13. IMPORTANT LINKS
   ============================================================ */

.reach-important-links {

  display:
    flex;

  flex-direction:
    column;

}


.reach-important-links a {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  min-height:
    34px;

  border-bottom:
    1px solid #EEF1EF;

  color:
    var(--reach-text) !important;

  font-size:
    .69rem;

}


.reach-important-links a:last-child {
  border-bottom: 0;
}


.reach-important-links b {

  color:
    #A2AAA6;

  font-size:
    1rem;

  font-weight:
    400;

}


.reach-important-links a:hover {

  color:
    var(--reach-green) !important;

}


.reach-important-links a:hover b {
  color: var(--reach-gold);
}


/* ============================================================
   14. FOOTER
   ============================================================ */

.reach-home-footer {

  margin-top:
    30px;

  background:
    linear-gradient(
      145deg,
      #04382B,
      #064D3B
    );

  color:
    #ffffff;

}


.reach-footer-grid {

  display:
    grid;

  grid-template-columns:
    1.55fr 1fr 1fr 1.25fr;

  gap:
    40px;

  padding:
    42px 0 35px;

}


.reach-footer-column {

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

}


.reach-footer-column h3 {

  position:
    relative;

  margin:
    0 0 17px;

  padding-bottom:
    8px;

  color:
    #ffffff;

  font-size:
    .76rem;

  font-weight:
    800;

  letter-spacing:
    .05em;

  text-transform:
    uppercase;

}


.reach-footer-column h3::after {

  content:
    "";

  position:
    absolute;

  left:
    0;

  bottom:
    0;

  width:
    28px;

  height:
    2px;

  background:
    var(--reach-gold);

}


.reach-footer-column p {

  max-width:
    320px;

  margin:
    0 0 15px;

  color:
    rgba(255,255,255,.72);

  font-size:
    .68rem;

  line-height:
    1.65;

}


.reach-footer-column > a {

  margin:
    0 0 7px;

  color:
    rgba(255,255,255,.76) !important;

  font-size:
    .68rem;

}


.reach-footer-column > a:hover {
  color: var(--reach-gold) !important;
}


.reach-footer-unma {

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  margin-top:
    4px;

  color:
    #ffffff;

  font-size:
    .58rem;

  font-weight:
    800;

}


.reach-footer-unma-mark {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    38px;

  height:
    38px;

  border:
    1px solid rgba(255,255,255,.35);

  border-radius:
    50%;

  color:
    var(--reach-gold);

  font-size:
    .62rem;

}


.reach-footer-contact a {

  display:
    block;

  margin:
    0 0 7px;

}


.reach-socials {

  display:
    flex;

  gap:
    8px;

  margin-top:
    8px;

}


.reach-socials a {

  width:
    30px;

  height:
    30px;

  display:
    flex !important;

  align-items:
    center;

  justify-content:
    center;

  margin:
    0 !important;

  border:
    1px solid rgba(255,255,255,.27);

  border-radius:
    50%;

  color:
    #ffffff !important;

  font-size:
    .75rem !important;

}


.reach-socials a:hover {

  border-color:
    var(--reach-gold);

  color:
    var(--reach-gold) !important;

}


.reach-footer-bottom {

  border-top:
    1px solid rgba(255,255,255,.14);

}


.reach-footer-bottom-inner {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  padding:
    15px 0;

  color:
    rgba(255,255,255,.60);

  font-size:
    .59rem;

}


/* ============================================================
   15. OJS COMPATIBILITY
   Prevent common OJS theme rules from breaking the custom block.
   ============================================================ */

.reach-homepage .reach-btn,
.reach-homepage .reach-article-image,
.reach-homepage .reach-text-link,
.reach-homepage .reach-index-logo,
.reach-homepage .reach-important-links a,
.reach-homepage .reach-footer-column a {
  border-bottom: 0;
}


.reach-homepage ul,
.reach-homepage ol {
  margin-top: 0;
}


.reach-homepage .reach-check-list li::before {
  content: "✓";
}


/* ============================================================
   16. TABLET
   ============================================================ */

@media (max-width: 1050px) {

  .reach-container {
    width: min(100% - 30px, 1000px);
  }

  .reach-intro-grid {
    grid-template-columns: 1fr 1fr;
  }

  .reach-current-panel {
    grid-column: 1 / -1;
  }

  .reach-main-grid {
    grid-template-columns: 1fr;
  }

  .reach-home-sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .reach-links-panel {
    grid-column: 1 / -1;
  }

}


/* ============================================================
   17. MOBILE
   ============================================================ */

@media (max-width: 700px) {

  .reach-container {
    width: min(100% - 24px, 100%);
  }

  .reach-hero,
  .reach-hero-inner {
    min-height: 0;
  }

  .reach-hero-media {
    background-position: 62% center;
  }

  .reach-hero-overlay {
    background:
      linear-gradient(
        90deg,
        rgba(3, 49, 37, .97),
        rgba(3, 58, 43, .78)
      );
  }

  .reach-hero-content {
    padding:
      52px 0 48px;
  }

  .reach-hero-features {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .reach-hero-feature {
    min-height: 0;
    padding: 0 0 12px;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.15);
  }

  .reach-hero-feature:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .reach-intro-grid {
    grid-template-columns: 1fr;
  }

  .reach-current-panel {
    grid-column: auto;
  }

  .reach-article {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 13px;
  }

  .reach-article-image {
    width: 88px;
    height: 82px;
  }

  .reach-article-side {
    display: none;
  }

  .reach-benefits {
    grid-template-columns: 1fr 1fr;
  }

  .reach-benefit:nth-child(2) {
    border-right: 0;
  }

  .reach-benefit:nth-child(3),
  .reach-benefit:nth-child(4) {
    border-top: 1px solid var(--reach-border);
  }

  .reach-home-sidebar {
    grid-template-columns: 1fr;
  }

  .reach-links-panel {
    grid-column: auto;
  }

  .reach-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px 24px;
  }

  .reach-footer-about,
  .reach-footer-contact {
    grid-column: 1 / -1;
  }

  .reach-footer-bottom-inner {
    flex-direction: column;
    align-items: flex-start;
  }

}


/* ============================================================
   18. SMALL MOBILE
   ============================================================ */

@media (max-width: 430px) {

  .reach-hero h1 {
    font-size: 3.25rem;
  }

  .reach-hero-title {
    font-size: 1.4rem;
  }

  .reach-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .reach-btn {
    width: 100%;
  }

  .reach-current-layout {
    align-items: flex-start;
  }

  .reach-cover-wrap,
  .reach-cover-wrap img {
    width: 64px;
  }

  .reach-cover-wrap img {
    height: 90px;
  }

  .reach-article {
    grid-template-columns: 1fr;
  }

  .reach-article-image {
    width: 100%;
    height: 150px;
  }

  .reach-benefits {
    grid-template-columns: 1fr;
  }

  .reach-benefit,
  .reach-benefit:nth-child(2),
  .reach-benefit:nth-child(3) {
    border-right: 0;
    border-top: 1px solid var(--reach-border);
  }

  .reach-benefit:first-child {
    border-top: 0;
  }

  .reach-footer-grid {
    grid-template-columns: 1fr;
  }

  .reach-footer-about,
  .reach-footer-contact {
    grid-column: auto;
  }

}