/* ==========================================================================
   Outline Subscribe buttons + blue footer logo — The Sri COM
   --------------------------------------------------------------------------
   1. Both Subscribe buttons go from solid fill to line art: transparent
      inside, a visible outline, text in the outline colour. They fill in on
      hover, so it still reads as a button rather than a label.

        header  white outline on the blue masthead
        footer  brand-blue outline on the page background

   2. The footer logo is painted #2475e8 in BOTH themes.

      The logo file is white artwork on a transparent background, so it is
      coloured with a CSS MASK rather than a filter chain: the mask keeps the
      shape from the file's transparency and shows a flat background colour
      through it. That gives EXACTLY #2475e8, where stacked filter tricks only
      ever get close.

      The header logo is deliberately left white — it sits on the blue bar.

   Loaded last so it wins over header-blue.css, footer-v2.css, light-logo.css
   and masthead-blue.css.
   ========================================================================== */

/* --- 1a. Header Subscribe: white line art on the blue bar ----------------- */

html[data-theme] body .site-header .subscribe {
  border: 1.5px solid rgba(255, 255, 255, .85);
  background: transparent;
  color: #fff;
  box-shadow: none;
}

html[data-theme] body .site-header .subscribe:hover {
  border-color: #fff;
  background: #fff;
  color: #1a5fc4;
}

html[data-theme] body .site-header .subscribe:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* --- 1b. Footer Subscribe: brand-blue line art --------------------------- */

html[data-theme] body .footer-cta {
  border: 1.5px solid #2475e8;
  background: transparent;
  color: #2475e8;
}

html[data-theme] body .footer-cta:hover {
  background: #2475e8;
  color: #fff;
}

html[data-theme] body .footer-cta:focus-visible {
  outline: 3px solid #2475e8;
  outline-offset: 3px;
}

/* --- 2. Footer brand: mark + wordmark, always the same colour ------------- */

/* ONE variable drives both the logo and the "thesricom.lk" text, so they can
   never drift apart:

       light theme   #2475e8   brand blue on the pale footer
       dark theme    #ffffff   white on the near-black footer

   The mark is a <span class="brand-mark">, NOT an <img> (see default.hbs).
   That matters: masking an <img> masks the picture itself and the colour
   behind it never shows, so the logo just stayed white. An empty span has no
   content of its own, so the mask cuts the logo shape out of a flat colour -
   an exact match, where a stack of filters only ever gets close.

   The header logo is still an <img> and stays white on the blue bar. */

html[data-theme] body .site-footer .brand {
  --footer-brand: #2475e8;
}

html[data-theme="dark"] body .site-footer .brand {
  --footer-brand: #ffffff;
}

html[data-theme] body .site-footer .brand span {
  color: var(--footer-brand);
}

html[data-theme] body .site-footer .brand:hover span {
  opacity: .82;
}

html[data-theme] body .site-footer .brand-mark {
  display: block;
  flex: none;
  width: 42px;
  height: 42px;
  background-color: var(--footer-brand);
  -webkit-mask-image: url("../images/sricom-logo-white.png");
  mask-image: url("../images/sricom-logo-white.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* No mask support: show the real logo instead of a flat rectangle. */
@supports not ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  html[data-theme] body .site-footer .brand-mark {
    background-color: transparent;
    background-image: url("../images/sricom-logo-white.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
}

@media (max-width: 620px) {
  html[data-theme] body .site-footer .brand-mark {
    width: 36px;
    height: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme] body .footer-cta:hover { transform: none; }
}