/* ==================================================
   SS REPOSITORY LANDING PAGE — SUPPLIED PNG EDITION

   Load this stylesheet after css/style.css. It contains
   only the rules unique to repository/index.html.

   The Repository artwork in this version comes from the
   supplied repo_*.png files in images/ui/. The shared Scout
   Society header and footer remain controlled by style.css.
   ================================================== */

.repository-page {
  --repository-forest: #263a2b;
  --repository-forest-dark: #14271a;
  --repository-forest-light: #304936;
  --repository-gold: #d2b468;
  --repository-paper: #f2e6d7;
  --repository-card-paper: #eee1cd;
  --repository-border: #c6b58e;
}

.repository-page .site-shell {
  background: var(--repository-paper);
}

/* ==================================================
   REPOSITORY IDENTITY BANNER
   ================================================== */

.repository-hero {
  position: relative;
  z-index: 4;
  min-height: var(--section-hero-height, 258px);
  overflow: hidden;
  color: #f8f2e3;
  /*
    The base color is sampled from the supplied Repository logo artwork.
    The topographic PNG is layered over that color below in ::before. This
    gives the whole banner the same background treatment as the artwork,
    which hides the rectangular edges of the supplied PNG crops.
  */
  background:
    linear-gradient(90deg, #2b3d2d 0%, #2b3d2d 53%, #243629 100%);
  border-bottom: 1px solid rgba(211, 181, 105, 0.3);
}

/*
  Repeat the supplied topographic sample over the entire banner. Keeping this
  as a separate translucent layer lets the logo/book backgrounds blend into
  the same green surface without making the contour lines overpower the text.
*/
.repository-hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image: url("../images/ui/repository/repo_28_topographic_texture_sample.png");
  background-repeat: repeat;
  background-size: 228px 66px;
  opacity: 0.52;
  pointer-events: none;
}

.repository-hero::after {
  content: "";
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224, 196, 125, 0.6), transparent);
}

.repository-hero-inner {
  position: relative;
  z-index: 3;
  width: min(calc(100% - 72px), 1120px);
  min-height: var(--section-hero-height, 258px);
  margin-inline: auto;
}

.repository-identity {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 20px;
  width: 55%;
  min-height: var(--section-hero-height, 258px);
}

.repository-identity-mark {
  width: 88px;
  height: auto;
  flex: 0 0 88px;
  object-fit: contain;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.28));
}

.repository-identity-copy h1 {
  margin: 0;
  color: #fff9e9;
  font-size: clamp(34px, 4vw, 49px);
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.42);
}

.repository-identity-copy p {
  margin: 11px 0 0;
  color: var(--repository-gold);
  font-size: clamp(13px, 1.5vw, 18px);
  font-weight: 700;
  letter-spacing: 0.105em;
  line-height: 1;
  text-transform: uppercase;
}

.repository-identity-copy p span {
  padding-inline: 6px;
}

/*
  Supplied book / compass crop. Setting height to 100% preserves its
  original proportions while allowing it to fill the right side of
  the banner. The mask softly blends its left edge into the banner.
*/
.repository-header-visual {
  position: absolute;
  z-index: 2;
  top: 0;
  right: -80px;
  width: min(62%, 760px);
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: right center;
  pointer-events: none;

  /*
    The replacement image has been physically cropped to remove its hard white
    outer border. This mask then fades the image's left edge into the solid
    Repository green/topographic background, so the title area transitions
    gradually into the book/compass artwork instead of showing a vertical cut.
  */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.18) 4%,
    rgba(0, 0, 0, 0.58) 10%,
    #000 22%,
    #000 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.18) 4%,
    rgba(0, 0, 0, 0.58) 10%,
    #000 22%,
    #000 100%
  );
}

/* ==================================================
   REPOSITORY SECTION NAVIGATION
   ================================================== */

.repository-section-navigation {
  position: relative;
  z-index: 8;
  color: #f7f0df;
  background: linear-gradient(180deg, rgba(22, 55, 34, 0.99), rgba(8, 29, 18, 0.99));
  border-top: 1px solid rgba(214, 183, 104, 0.18);
  border-bottom: 1px solid rgba(214, 183, 104, 0.58);
  box-shadow: 0 4px 8px rgba(16, 21, 16, 0.19);
}

.repository-section-navigation-inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  width: min(calc(100% - 48px), 1120px);
  min-height: 48px;
  margin-inline: auto;
}

.repository-section-navigation a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  color: #f4eedf;
  font-size: clamp(11px, 1.05vw, 14px);
  font-weight: 700;
  letter-spacing: 0.015em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 160ms ease, background-color 160ms ease;
}

.repository-section-navigation a::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 6px;
  left: 10px;
  height: 2px;
  background: var(--repository-gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 180ms ease;
}

.repository-section-navigation a:hover,
.repository-section-navigation a:focus-visible,
.repository-section-navigation a.is-current {
  color: var(--repository-gold);
  background: rgba(255, 255, 255, 0.035);
}

.repository-section-navigation a:hover::after,
.repository-section-navigation a:focus-visible::after,
.repository-section-navigation a.is-current::after {
  transform: scaleX(1);
}

/* ==================================================
   OVERVIEW + RESOURCE CARDS
   ================================================== */

.repository-overview {
  position: relative;
  z-index: 2;
  min-height: 440px;
  padding: 32px 0 30px;

  /*
    The sketchbook is intentionally positioned partly above this section.
    Visible overflow lets that upper portion continue behind the Repository
    navigation instead of being chopped off at the cream-section boundary.
    The outer .site-shell still prevents page-level horizontal overflow.
  */
  overflow: visible;
  background-color: var(--repository-paper);
  background-image:
    radial-gradient(circle at 82% 0%, rgba(195, 165, 107, 0.13), transparent 31%),
    url("../images/ui/paper-texture.png");
  background-repeat: no-repeat, repeat;
  background-size: auto, 256px 256px;
}

.repository-content-width {
  position: relative;
  width: min(calc(100% - 28px), 1168px);
  margin-inline: auto;
}

.repository-introduction {
  position: relative;
  z-index: 4;
  width: 53%;
  min-height: 116px;
  padding: 0 24px 8px;
}

.repository-introduction h2 {
  margin: 0 0 14px;
  color: #17231a;
  font-size: clamp(23px, 2vw, 28px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.08;
  text-transform: uppercase;
  white-space: nowrap;
}

.repository-introduction p {
  max-width: 560px;
  margin: 0;
  color: #232820;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.45;
}

/*
  Supplied open-sketchbook crop. It sits at the upper right of the
  paper area, matching the concept while staying behind real text.
*/
.repository-sketchbook-visual {
  position: absolute;
  z-index: 2;

  top: -75px;
  right: -2px;

  width: min(55%, 700px);
  height: auto;
  max-width: none;

  pointer-events: none;
  filter: none;
}


.repository-resource-grid {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.repository-resource-card {
  display: flex;
  min-width: 0;
  min-height: 275px;
  flex-direction: column;
  align-items: center;
  padding: 16px 12px 15px;
  color: #18251b;
  background:
    linear-gradient(180deg, rgba(255, 250, 239, 0.18), rgba(226, 207, 176, 0.12)),
    var(--repository-card-paper);
  border: 1px solid var(--repository-border);
  border-radius: 8px;
  box-shadow:
    0 2px 0 rgba(90, 65, 32, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.58);
  text-align: center;
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

/*
  The PNG icons contain their own paper-colored crop. The card uses
  the same base paper color so the crop edges visually disappear.
*/
.repository-resource-card > img {
  width: auto;
  height: 74px;
  max-width: 88px;
  margin-bottom: 9px;
  object-fit: contain;
  image-rendering: auto;
  transition: transform 220ms ease;
}

.repository-resource-card h3 {
  min-height: 38px;
  margin: 0 0 8px;
  color: #142519;
  font-size: clamp(14px, 1.32vw, 18px);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.08;
  text-transform: uppercase;
}

.repository-resource-card p {
  margin: 0 0 14px;
  color: #30352f;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(11px, 1.02vw, 13px);
  line-height: 1.42;
}

.repository-card-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  color: #17311f;
  font-size: clamp(12px, 1.05vw, 14px);
  font-weight: 800;
  letter-spacing: 0.025em;
  line-height: 1;
  text-transform: uppercase;
}

.repository-card-link svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transition: transform 170ms ease;
}

.repository-resource-card:hover,
.repository-resource-card:focus-visible {
  color: #142519;
  background-color: #f4e8d5;
  border-color: #a68c50;
  box-shadow: 0 9px 18px rgba(63, 47, 27, 0.18);
  transform: translateY(-5px);
}

.repository-resource-card:hover > img,
.repository-resource-card:focus-visible > img {
  transform: scale(1.045);
}

.repository-resource-card:hover .repository-card-link svg,
.repository-resource-card:focus-visible .repository-card-link svg {
  transform: translateX(4px);
}

/* ==================================================
   REPOSITORY MOTTO STRIP
   ================================================== */

.repository-motto {
  position: relative;
  z-index: 3;
  display: grid;
  min-height: 72px;
  place-items: center;
  overflow: hidden;
  color: #dbc27c;
  background-color: #243729;
  background-image:
    linear-gradient(90deg, rgba(20, 45, 29, 0.56), rgba(30, 57, 38, 0.38), rgba(13, 35, 22, 0.62)),
    url("../images/ui/repository/repo_28_topographic_texture_sample.png");
  background-repeat: no-repeat, repeat;
  background-size: auto, 228px 66px;
  border-top: 1px solid rgba(213, 181, 99, 0.22);
}

.repository-motto p {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 0 190px 0 40px;
  font-size: clamp(14px, 1.4vw, 18px);
  font-weight: 700;
  letter-spacing: 0.035em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.repository-motto img {
  position: absolute;
  z-index: 3;
  right: 12px;
  bottom: 0;
  width: 166px;
  height: auto;
  max-width: none;
  pointer-events: none;
}

/* ==================================================
   RESPONSIVE REPOSITORY LAYOUT
   ================================================== */

@media (max-width: 1110px) {
 .repository-hero-inner {
    width: min(calc(100% - 54px), 1040px);
  }

  .repository-identity {
    width: 52%;
  }

  .repository-header-visual {
    right: -18px;
    width: min(64%, 700px);
  }

  .repository-section-navigation-inner {
    width: min(calc(100% - 28px), 1060px);
  }

  .repository-resource-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .repository-resource-card {
    min-height: 236px;
  }
}

@media (max-width: 940px) {
  .repository-hero,
  .repository-hero-inner,
  .repository-identity {
    min-height: 140px;
  }

  .repository-identity {
    width: 62%;
  }

  .repository-identity-mark {
    width: 76px;
    flex-basis: 76px;
  }

  .repository-header-visual {
    right: -52px;
    width: 68%;
    opacity: 0.82;
  }

  .repository-section-navigation-inner {
    justify-content: flex-start;
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .repository-section-navigation a {
    min-height: 50px;
    flex: 0 0 auto;
    padding-inline: 20px;
  }

  .repository-introduction {
    width: 62%;
  }

  .repository-introduction h2 {
    white-space: normal;
  }

  .repository-sketchbook-visual {
    top: -2px;
    right: -24px;
    width: 62%;
  }
}

@media (max-width: 760px) {
  .repository-hero {
    min-height: 176px;
  }

 .repository-hero-inner {
    width: min(calc(100% - 38px), 680px);
    min-height: 176px;
  }

  .repository-identity {
    width: 100%;
    min-height: 176px;
    gap: 14px;
  }

  .repository-identity-mark {
    width: 68px;
    flex-basis: 68px;
  }

  .repository-identity-copy h1 {
    font-size: clamp(31px, 8vw, 42px);
  }

  .repository-identity-copy p {
    font-size: 12px;
    letter-spacing: 0.07em;
  }

  .repository-identity-copy p span {
    padding-inline: 2px;
  }

  .repository-header-visual {
    right: -235px;
    width: auto;
    opacity: 0.3;
  }

  .repository-overview {
    padding-top: 27px;
  }

  .repository-introduction {
    width: 100%;
    min-height: auto;
    padding: 0 8px 23px;
  }

  .repository-intro-break {
    display: none;
  }

  .repository-sketchbook-visual {
    top: 0;
    right: -215px;
    width: 560px;
    opacity: 0.16;
  }

  .repository-resource-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .repository-resource-card {
    min-height: 242px;
  }

  .repository-resource-card h3 {
    min-height: auto;
  }

  .repository-motto {
    min-height: 84px;
    place-items: center start;
  }

  .repository-motto p {
    max-width: 68%;
    padding: 0 0 0 22px;
    text-align: left;
  }

  .repository-motto img {
    right: -7px;
    width: 148px;
  }
}

@media (max-width: 430px) {
 .repository-hero-inner {
    width: min(calc(100% - 28px), 390px);
  }

  .repository-identity {
    gap: 10px;
  }

  .repository-identity-mark {
    width: 56px;
    flex-basis: 56px;
  }

  .repository-identity-copy h1 {
    font-size: 29px;
  }

  .repository-identity-copy p {
    max-width: 230px;
    line-height: 1.4;
  }

  .repository-sketchbook-visual {
    display: none;
  }

  .repository-resource-grid {
    grid-template-columns: 1fr;
  }

  .repository-resource-card {
    min-height: 225px;
    padding-inline: 18px;
  }

  .repository-resource-card p {
    max-width: 250px;
    font-size: 13px;
  }

  .repository-motto p {
    max-width: 62%;
    font-size: 13px;
    line-height: 1.3;
  }

  .repository-motto img {
    right: -18px;
    width: 138px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .repository-resource-card,
  .repository-resource-card > img,
  .repository-card-link svg,
  .repository-section-navigation a::after {
    transition: none;
  }
}

/* ==================================================
   REPOSITORY-ONLY GLOBAL HEADER OVERRIDES

   The homepage keeps its full Scout Society brand header. On the
   Repository page the brand block is intentionally omitted in HTML,
   leaving a shorter navigation-only bar with the links aligned right.
   ================================================== */

.repository-page .site-header {
  min-height: 40px;
  padding: 0 38px;
  justify-content: flex-end;
}

.repository-page .primary-navigation {
  margin-left: auto;
  justify-content: flex-end;
}

/* Keep the compact Repository bar compact until the existing mobile
   navigation breakpoint takes over. */
@media (max-width: 1110px) {
  .repository-page .site-header {
    min-height: 60px;
    padding-inline: 30px;
  }
}

@media (max-width: 940px) {
  .repository-page .site-header {
    min-height: 62px;
    padding-inline: 22px;
  }

  .repository-page .menu-toggle {
    margin-left: auto;
  }
}

/* ==================================================
   CAMP / MOTTO BOUNDARY ALIGNMENT

   repo_27_footer_tent_and_campfire.png was cropped from the concept
   with cream paper at its top and forest green at its bottom. The old
   layout clipped the whole PNG inside the green strip, which exposed
   the cream rectangle and abruptly cut off the fire glow.

   Letting the image overflow upward places the cream portion over the
   cream body and the green portion over the green motto strip. A soft
   horizontal mask feathers the crop edges so the fire glow and dark
   background merge into the page instead of ending on a hard line.
   ================================================== */

.repository-page .repository-motto {
  overflow: visible;
}

.repository-page .repository-motto img {
  top: -32px;
  right: 10px;
  bottom: auto;
  width: 166px;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.55) 5%,
    #000 12%,
    #000 96%,
    rgba(0, 0, 0, 0.6) 99%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.55) 5%,
    #000 12%,
    #000 96%,
    rgba(0, 0, 0, 0.6) 99%,
    transparent 100%
  );
}

@media (max-width: 760px) {
  .repository-page .repository-motto img {
    top: -12px;
    right: -2px;
    width: 148px;
  }
}

@media (max-width: 430px) {
  .repository-page .repository-motto img {
    top: -10px;
    right: -10px;
    width: 138px;
  }
}