/* ============================================================
Britpave 3 Ticker Tape  a 03 Sep 2026 CSS FILE
Red Colour	:#ee2b4f;
Blue Colour	:#0068b5;
============================================================ */
  :root{
     --ticker-bg: #0068b5;
     --ticker-fg: #ffffff;
     --ticker-accent: #ee2b4f;
     --ticker-divider: rgba(255,255,255,0.35);
     --ticker-height: 64px;
     --font-sans: "Raleway",  "Segoe UI", "Helvetica Neue", Arial, sans-serif;
   }

   /* ---------------- ticker component ---------------- */
   .ticker{
     position: relative;
     top:auto;
     left:auto;
     width: 100%;
     z-index: 99;
     display:flex;
     align-items:stretch;
     height:var(--ticker-height);
     background:var(--ticker-bg);
     color:var(--ticker-fg);
     border-top:1px solid rgba(255,255,255,.08);
     border-bottom:1px solid rgba(255,255,255,.08);
     overflow:hidden;
    }
   #ticker{
    margin-top: 30px;
    margin-bottom: 30px;
     padding-top: 0;
     padding-bottom: 0;
    border:0;
   }
   .ticker__brand{
     flex:0 0 auto;
     display:flex;
     align-items:center;
     gap:.6rem;
     padding:0 1rem;
     border-right:1px solid var(--ticker-divider);
     white-space:nowrap;
   }
   .ticker__brand-text{
     font-size:16px;
     font-weight:800;
     color:#fff;
     letter-spacing:.01em;
   }
   .ticker__toggle{
     display:flex;
     align-items:center;
     justify-content:center;
     width:30px;
     height:30px;
     padding:0;
     border:1px solid var(--ticker-divider);
     border-radius:50%;
     background:transparent;
     color:var(--ticker-fg);
     cursor:pointer;
   }
   .ticker__toggle:hover{ border-color:var(--ticker-accent); color:#fdc1cc; }
   .ticker__toggle svg{ width:13px; height:13px; }
   .ticker__toggle .icon-play{ display:none; }
   .ticker.is-paused .ticker__toggle .icon-pause{ display:none; }
   .ticker.is-paused .ticker__toggle .icon-play{ display:block; }

   .ticker__viewport{
     position:relative;
     flex:1 1 auto;
     overflow:hidden;
     -webkit-mask-image:linear-gradient(to right, transparent, black 28px, black calc(100% - 28px), transparent);
             mask-image:linear-gradient(to right, transparent, black 28px, black calc(100% - 28px), transparent);
   }

   .ticker__track{
     display:flex;
     width:max-content;
     height:100%;
     animation: ticker-scroll var(--duration, 40s) linear infinite;
   }
   .ticker.is-paused .ticker__track,
   .ticker__track:hover{
     animation-play-state:paused;
   }

   .ticker__set{
     display:flex;
     align-items:center;
     flex-shrink:0;
   }

   .ticker__item{
     display:flex;
     align-items:center;
     gap:.9rem;
     padding:0 2.25rem;
     white-space:nowrap;
     text-decoration:none;
     color:inherit;
   }
   .ticker__item::after{
     content:"";
     display:inline-block;
     width:5px;
     height:5px;
     margin-left:2.25rem;
     border-radius:50%;
     background:var(--ticker-divider);
   }
   .ticker__date{
     display:flex;
     align-items:center;
     flex-shrink:0;
     height:var(--ticker-height);
     padding:0 1.3rem;
     background:var(--ticker-accent);
     color:var(--ticker-fg);
     font-family:var(--font-sans);
     font-variant-numeric:tabular-nums;
     font-weight:600;
     font-size:14px;
     letter-spacing:.03em;
   }
   .ticker__title{
     font-size:16px;
     font-weight:600;
   }
   .ticker__meta{
     font-size:14px;
     color:rgba(255,255,255,0.8);
   }
   a.ticker__item:hover .ticker__title{
     text-decoration:underline;
     color:#c7d0f1;
   }

   @keyframes ticker-scroll{
     from{ transform:translateX(0); }
     to{ transform:translateX(-50%); }
   }

   /* respect reduced-motion: no auto-scroll, let people swipe/scroll instead */
   @media (prefers-reduced-motion: reduce){
     .ticker__track{ animation:none; }
     .ticker__viewport{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
     .ticker__toggle{ display:none; }
   }

   .ticker-noscript{
     background:var(--ticker-bg);
     color:var(--ticker-fg);
     font-family:var(--font-sans);
     padding:.75rem 1rem;
     margin:0;
     list-style:none;
   }
   .ticker-noscript li{ padding:.15rem 0; font-size:.85rem; }
  .ticker-noscript span{ font-family:var(--font-mono); color:var(--ticker-accent); margin-right:.6rem; }

@media (max-width:768px)
	{
  	body{
	    padding-top: calc(var(--ticker-height) - 5px); /* 100px = replace with your header's actual height */
	   }
	}