/* =============================================================
   barrio_npm_prototype — frontpage & footer chrome
   Section wrappers on the homepage, frontpage hero variants,
   conference block layout, footer wrapper.
   ============================================================= */

/* ---------- News ticker ----------
   Yellow strip at the very top of the front page, full-width, centered.
   Renders the news/block_4 view. */

#ticker {
  /* background-color: rgb(255, 229, 153); */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}

#ticker .views-row {
  margin-right: 1rem;
}

/* ---------- Front-page hero ---------- */

/* Wrapper around the .front-hero-slide text card inside .bg-img-hero.
   padding-top pushes the text card DOWN inside the hero so the h1
   title + tagline sit BELOW the navbar's bottom edge — required
   because the navbar-float-over-hero ship (577a059d) pulled the
   whole hero image up 80px under the navbar, which pulled the text
   card up with it, colliding with the navbar's bottom.

   Value tuning: 100px is a starter. Adjust in DevTools by dragging
   the text card down until the h1 title clears the navbar's bottom
   edge with a comfortable gap. Per §4b-C of
   documentation/frontpage-design-plan.md.

   Only applies where the wrapper is visible — responsive.css hides
   it at <576px (mobile keeps text on the photo without a card). */
#front-hero-text-background {
  padding-top: 100px;
}

/* Rounded card inside the hero bg-img-hero — holds the intro block.
   Semi-transparent dark overlay creates a subtle panel behind the
   white h1 text so it stays readable on busy photos (like the
   powhiri crowd shot). Per §4c-B of
   documentation/frontpage-design-plan.md.

   Alpha tuning: 0.4 is a starter. Higher (0.5-0.6) darkens the
   photo more behind the text — more readable but heavier feel.
   Lower (0.2-0.3) is subtler but might lose contrast on light
   photos. Iterate in DevTools.

   `color` fallback matches the dark overlay (white text). H1s
   inside carry `.text-white` inline from the block-content editor,
   so this fallback only matters for any other content editors
   might add to block_content 5. */
.front-hero-slide {
  background-color: rgba(0, 0, 0, 0.4);
  color: rgba(255, 255, 255, 0.95);
}

#hero-right {
  margin-top: 20%;
  margin-left: 30%;
  font-weight: bold;
}

#hero-right h2 {
  font-size: 3rem;
}

#hero-image-links {
  display: none !important;
  align-items: flex-end;
  justify-content: space-around;
  height: 100%;
  margin-top: 5%;
}

#hero-image-links a {
  text-transform: uppercase;
  font-weight: 100 !important;
  border: none;
  padding: 10px;
  text-decoration: none;
  display: inline-block;
  margin: 10px;
  color: white;
  background-color: rgba(217, 202, 166, 0);
  border-radius: 5px;
}

#opportunities {
  background: linear-gradient(rgba(217, 202, 166, 0), rgba(217, 202, 166, 0));
}

#fancybox-showcase {
  background-color: rgba(217, 202, 166, 0);
}

#front-promoted {
  margin-top: 2em;
}

/* ---------- Section wrappers on the front page ----------
   Pattern images source from barrio_npm_prototype/images/ (copied in iteration 2).

   Per-section background-tint knobs at :root — scaffolding for the
   frontpage redesign (2026-08-18). Change one variable, re-tint one
   section. Post-tangerina-pivot (2026-08-18): conference wrapper
   sits directly on the cream body backdrop (no pattern, no tint) so
   it reads as a natural continuation of the hero; scholarship keeps
   the sage tint + pattern; contact keeps warm beige + pattern.

   `color-mix(in srgb, <color>, transparent <N>%)` is the modern CSS
   way to alpha-adjust a token-based colour without duplicating the
   RGB values as an rgba() literal. Equivalent to
   `rgba(140, 165, 155, 0.20)` for sage but expresses the intent via
   the brand token — change --npm-sage in colors.css → this consumer
   updates too. */
:root {
  --np-front-scholarship-bg: color-mix(in srgb, var(--npm-sage), transparent 80%);
  /* Contact wrapper — opaque pale coral (echoes --npm-tukutuku-coral
     in the hero composition + CTA #1's coral tint). Complementary
     warm-close to the pale-sky body gradient; reads as a distinct
     "reach out" band at the page bottom. Was rgba(217,202,166,0.15)
     warm beige until 2026-08-18 palette-cool iteration. */
  --np-front-contact-bg:     #6c757d9e;
}

.about-front-wrapper {
  background: linear-gradient(rgba(217, 202, 166, 0), rgba(217, 202, 166, 0));
  padding-top: 1em;
}

/* Shared pattern treatment — the npm-pattern-white.png behind the
   scholarship + contact wrappers. Conference wrapper dropped from
   this selector post-pivot so it inherits the cream body backdrop. */
.front-scholarship-wrapper,
.front-contact-wrapper {
  background-image: url('/themes/custom/barrio_npm_prototype/images/npm-pattern-white.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

/* Per-section padding + background-tint. Conference wrapper carries
   only padding now (no bg-color) — reads on the cream body. */
.front-conference-wrapper  { padding-bottom: 4em; }
.front-scholarship-wrapper { background-color: var(--np-front-scholarship-bg); padding-bottom: 4em; }
.front-contact-wrapper     { background-color: var(--np-front-contact-bg);     padding-bottom: 8em; }

#news-btn {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-color: rgba(217, 202, 166, 0.15);
}

.outer-front-contact-wrapper {
  background-color: white;
}

#front-kanapu {
  margin-top: 8em;
  margin-bottom: 3em;
}

.more-opportunities,
.more-news {
  padding-top: 2em;
}

#our-stories {
  padding-bottom: 1em;
}

/* Our Stories cards — front page renders via news:block_10 →
   views-view-fields--news--block-10.html.twig → shared
   _article-spotlight-card.html.twig in np_is_first:false (small)
   mode. All rest+hover visual comes from the ambient
   .np-spotlight-small styles in patai-spotlight.css (matching
   /announcements/*  spotlight bands).
   The DS-driven rest visual + field-scoped selectors (retired
   2026-08-20 alongside the block_10 row-plugin flip from
   entity:node → fields) was replaced by the block below —
   equal-height + card-fill rules scoped to
   .view-news.view-display-id-block_10 so the 4-card row lines up
   even when individual stories have shorter summaries.
   See front-page-story-modal-implementation.md. */

/* Equal-height chain — BS5's .view-content.row (align-items:
   stretch by default) stretches the col-md-3 wrappers to the
   tallest card's height. Then contextual-region + card need to
   fill that stretched col so the CTA sits at the bottom regardless
   of summary length. Without these rules, shorter-summary cards
   collapse to content height while their neighbours tower. */
.view-news.view-display-id-block_10 .col-md-3 > .np-tile-region {
  display: flex;
  height: 100%;
  width: 100%;
}
.view-news.view-display-id-block_10 .np-spotlight-small {
  flex: 1;
  width: 100%;
}

/* ---------- Contact section ----------
   Centered "Contact Us" title above the featured_bottom regions. */

.contact-front-title {
  text-align: center;
}

.contact-front-title h1 {
  font-weight: 100 !important;
}

#contact {
  padding-bottom: 1rem;
}

/* ---------- Footer chrome ---------- */

.footer-wrapper {
  background-color: rgba(28, 71, 74, 0.3);
}

.ft-copy {
  margin-top: 5em;
}

/* ---------- Conference block ----------
   Two-column layout: square logo on the left, content on the right.
   Stacks on mobile via the rule in responsive.css. */

.conference-block-wrapper {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
}

.conference-logo {
  width: 120px;
  text-align: center;
  font-weight: 700;
}

.logo-line1,
.logo-line2 {
  width: 100%;
  display: block;
}

.logo-line1 {
  font-size: 4rem;
  line-height: 1;
}

.logo-line2 {
  font-size: 3.6rem;
  line-height: 1;
  margin-top: 0.25rem;
}

.conference-content {
  flex: 1;
}

.text-align-left {
  text-align: left;
}

/* =============================================================
   Front-page "More X" section-footer CTAs
   -------------------------------------------------------------
   Three read-more links styled to match the tangerina-hero pill
   vocabulary (--np-link violet fill, 999px radius, subtle lift
   on hover). Sources:
     .about-more                — <h3> wrapping <a> — used by:
        "more news & events"     views.view.news.yml block_3
                                 (repeats per news row on the front
                                 page — 9x currently, quirk of the
                                 view config; styling only, not
                                 restructuring here)
        "more about us"          block_content 10 body HTML
     #our-stories a[…our-stories] — <a> wrapping <h3> (reversed) —
        "More stories"           views.view.news.yml block_10 header

   The h3 wrappers carry `.text-uppercase` and inherit the global
   `h3 { font-weight: 100 !important }` from typography.css — the
   pill styling below has to defeat both. Font-weight uses
   !important to match typography.css's own escape-hatch pattern
   per CLAUDE.md's typography gotcha. Colour override on <a> and
   its inner text also needs !important because the outer <a>
   otherwise picks up the site's default link colour cascade. */

/* Wrapping h3 for `.about-more` / `.more-opportunities` (whose
   child anchor becomes the pill). Neutralise heading typography +
   centre the enclosed inline-block anchor via text-align: center.
   #our-stories's "More stories" uses a different DOM shape (anchor
   wraps h3, not the other way around) so its centring lives on the
   anchor rule below. */
.about-more,
.more-opportunities,
#front-kanapu h3.text-red {
  display: block;
  /* 2em top clears the preceding news card / body text; 2em bottom
     leaves breathing room before the next section's content (visible
     on the About wrapper where "more news & events" sits directly
     above the About block's body paragraph). */
  margin: 2em 0;
  padding: 0;
  text-align: center;
  text-transform: none;
  font-size: inherit;
  font-weight: 400 !important;
}

/* Shared pill visual — colours, radius, text treatment.
   The #our-stories selector uses `:has(h3)` to distinguish the
   "More stories" anchor from the sibling anchor that wraps the
   section's h1 title (block_content 32 body — same href, we
   don't want to pill-style the title). #front-kanapu targets the
   `<h3 class="text-center text-red"><a>kanapu.maori.nz</a></h3>`
   footer in block_content 33's body. */
.about-more a,
.more-opportunities a,
#front-kanapu h3.text-red a,
#our-stories a[href="/news-events/our-stories"]:has(h3) {
  padding: 12px 28px;
  border-radius: 999px;
  background: var(--np-link);
  color: #fff !important;
  text-decoration: none !important;
  font-size: 0.9rem;
  font-weight: 600 !important;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.15;
  transition: transform .15s ease, background-color .15s ease;
}

/* `.about-more a` / `.more-opportunities a` / kanapu link sit inside
   an h3 that's already centred via text-align: center → inline-block
   is enough. */
.about-more a,
.more-opportunities a,
#front-kanapu h3.text-red a {
  display: inline-block;
}

/* `#our-stories` "More stories" anchor has no centring ancestor,
   so it self-centres with fit-content + auto margins. Block-level
   so `margin: auto` works. */
#our-stories a[href="/news-events/our-stories"]:has(h3) {
  display: block;
  width: fit-content;
  margin: 3em auto 0;
}

.about-more a:hover,
.about-more a:focus,
.more-opportunities a:hover,
.more-opportunities a:focus,
#front-kanapu h3.text-red a:hover,
#front-kanapu h3.text-red a:focus,
#our-stories a[href="/news-events/our-stories"]:has(h3):hover,
#our-stories a[href="/news-events/our-stories"]:has(h3):focus {
  color: #fff !important;
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--np-link), black 12%);
  text-decoration: none !important;
}

/* h3 inside the "More stories" anchor — force to inline so it
   doesn't force the anchor to fill parent width (which was making
   the pill render as a fat oval / near-circle on desktop). */
#our-stories a[href="/news-events/our-stories"]:has(h3) h3 {
  display: inline;
  margin: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

/* Section title anchor — the block_content 32 body wraps its h1
   in the same /news-events/our-stories href as the CTA. It's
   semantically a link but visually should read as a section
   heading, not a CTA. Strip link styling; the h1 inside carries
   text-center + inherits typography.css's heading treatment. */
#our-stories a[href="/news-events/our-stories"]:has(h1) {
  display: block;
  color: inherit;
  text-decoration: none;
}
#our-stories a[href="/news-events/our-stories"]:has(h1):hover,
#our-stories a[href="/news-events/our-stories"]:has(h1):focus {
  color: inherit;
  text-decoration: none;
}

/* Conference "View conference website" CTA — matches the pill CTA
   vocabulary (rounded 999px, uppercase, letter-spaced, subtle lift
   on hover) but retains Bootstrap's .btn-secondary grey background
   per the user's ask (2026-08-18) — reads as a secondary/external
   action distinct from the primary violet CTAs elsewhere on the
   page. Sits inside block_content 12's body, rendered inside
   .front-conference-wrapper. */
.front-conference-wrapper .btn.btn-secondary {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 999px;
  border: none;
  font-size: 0.9rem;
  font-weight: 600 !important;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.15;
  transition: transform .15s ease, background-color .15s ease;
}
.front-conference-wrapper .btn.btn-secondary:hover,
.front-conference-wrapper .btn.btn-secondary:focus {
  color: #fff !important;
  transform: translateY(-2px);
  /* Darken the Bootstrap secondary grey (#6c757d) by 12% on hover
     — same "self-darken" pattern as the other CTAs. Hardcoded here
     rather than mixed via var(), since the base grey is not a
     theme token. */
  background: color-mix(in srgb, #6c757d, black 12%);
  text-decoration: none !important;
}