/* ============================================================
   vanuatu.v1.css — Vanuatu national accents
   Self-contained. Remove the <link> tag from a page to disable.
   Loads AFTER style.v4.css, so these rules win on equal specificity.
   ============================================================ */

:root {
  --vu-red:   #D21034;   /* flag red   — unity, the blood shared by all */
  --vu-black: #17181A;   /* flag black — the ni-Vanuatu people          */
  --vu-gold:  #FDCE12;   /* flag gold  — sunshine over the islands      */
  --vu-green: #009543;   /* flag green — richness of the land           */
}

/* ---- Flag ribbon -------------------------------------------------------
   Four solid bands in the national colours. Reusable anywhere:
   <div class="vu-ribbon"></div>                                          */
.vu-ribbon,
.site-footer::before {
  background: linear-gradient(
    90deg,
    var(--vu-red)   0%,   var(--vu-red)   25%,
    var(--vu-black) 25%,  var(--vu-black) 50%,
    var(--vu-gold)  50%,  var(--vu-gold)  75%,
    var(--vu-green) 75%,  var(--vu-green) 100%
  );
}

.vu-ribbon {
  display: block;
  width: 100%;
  height: 5px;
  border: 0;
  margin: 0;
}

/* ---- Footer: flag ribbon along the top edge --------------------------- */
.site-footer {
  position: relative;
}

.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  z-index: 2;
}

/* ---- Footer: namele fern watermark ------------------------------------
   The namele (cycad) frond is a national symbol of Vanuatu and appears on
   the flag. Kept very faint so it reads as texture, never as clutter.     */
.site-footer::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("../images/namele-fern.svg"),
                    url("../images/namele-fern.svg");
  background-repeat: no-repeat, no-repeat;
  background-position: 3% center, 97% center;
  background-size: auto 76%, auto 76%;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}

/* Keep footer content above the watermark */
.site-footer .footer-inner {
  position: relative;
  z-index: 1;
}

/* Phones: drop the ferns (too cramped) but keep the ribbon */
@media (max-width: 780px) {
  .site-footer::after { display: none; }
}

/* ---- Optional accents you can opt into -------------------------------- */

/* Small inline flag swatch, e.g. <span class="vu-dots"></span> */
.vu-dots {
  display: inline-block;
  width: 46px;
  height: 9px;
  border-radius: 2px;
  vertical-align: middle;
  background: linear-gradient(
    90deg,
    var(--vu-red)   0%,   var(--vu-red)   25%,
    var(--vu-black) 25%,  var(--vu-black) 50%,
    var(--vu-gold)  50%,  var(--vu-gold)  75%,
    var(--vu-green) 75%,  var(--vu-green) 100%
  );
}

/* ---- Vanuatu flag in the top nav bar ----------------------------------
   Replaces the old Facebook / YouTube icon buttons. Those links still live
   in the footer of every page (and on the Watch Live social cards).       */
.nav-flag {
  display: inline-block;
  width: 36px;
  height: auto;
  flex: 0 0 auto;
  vertical-align: middle;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 0 1px 5px rgba(0, 0, 0, .45);
}

@media (max-width: 700px) {
  .nav-flag { width: 30px; }
}

@media (max-width: 380px) {
  .nav-flag { width: 26px; border-width: 1px; }
}