/* ==========================================================================
   Adhoc Technology Solutions — self-hosted RSS ticker styling
   --------------------------------------------------------------------------
   Two banners on the page: "--dark" directly under the dark (navbar-inverse)
   navigation bar, "--light" further down inside the page content. Both now
   share the SAME background/text colors by default (edit the variables on
   .adhoc-rss-ticker below to change both at once) — add a per-banner
   override further down only if you want them to look different again.

   EDIT THESE VARIABLES to change look and feel:

   --------------------------------------------------------------------------
   QUICK REFERENCE — every setting in this file, in one place
   --------------------------------------------------------------------------
   --adhoc-rss-font-family        Headline font. "inherit" (default) matches
                                   the site's normal font; or a real font
                                   stack, e.g. "Georgia, 'Times New Roman', serif".
   --adhoc-rss-font-size          Headline text size (default 14px).
   --adhoc-rss-text-color         Headline/source text color, both banners,
                                   normal (non-hover) state (default #ddd).
   --adhoc-rss-text-hover-color   Same, on hover/focus (default #fff).
   --adhoc-rss-headline-transform "none" (default) or "uppercase" — only
                                   affects the headline itself, never the
                                   source name in front of it.
   --adhoc-rss-bg                 Banner background color, both banners
                                   (default #222).
   --adhoc-rss-label-bg           Docked title box background (default #c0392b,
                                   a red — matches the reference screenshot).
   --adhoc-rss-label-color        Docked title box text color (default #fff).
   --adhoc-rss-label-font-family  Docked title box font ("inherit" by default).
   --adhoc-rss-label-font-size    Docked title box text size (default 15px).
   --adhoc-rss-label-max-width    Cap on how much of the banner's width the
                                   title box can ever take, as a percentage
                                   (default 55%). The box itself always sizes
                                   to fit its own text below that cap — see
                                   .adhoc-rss-label further down.
   --adhoc-rss-label-notch        How deep the pointed "ribbon" notch on the
                                   title box's right edge cuts in, in pixels
                                   (default 20px). Set to 0px for a plain
                                   rectangular box with square corners
                                   instead of the ribbon shape.

   All of the above are set once on .adhoc-rss-ticker below, which affects
   BOTH banners at once. To make just ONE banner different, add your own
   .adhoc-rss-ticker--dark or .adhoc-rss-ticker--light block re-declaring
   only the variables you want to change — see the commented-out example
   further down.

   Settings that live in OTHER files, not here:
     bin/rss_ticker_data.php — which feeds are shown, translation on/off
     js/rss-ticker.js        — scroll speed default, source-name on/off,
                               request timeout
     index.html /
     index_Fr.html            — data-feed-set, data-scroll-seconds-per-item,
                               data-label-text on each banner's <div>
   ========================================================================== */

.adhoc-rss-ticker {
	/* ---- scrolling headline text ---- */
	--adhoc-rss-font-family: inherit; /* inherits the site's normal font; put a real
	                                      font stack here instead to use a different
	                                      one just for the ticker, e.g.:
	                                      "Georgia, 'Times New Roman', serif" */
	--adhoc-rss-font-size: 14px;      /* headline text size */
	--adhoc-rss-text-color: #ddd;     /* text color, both banners, non-hover */
	--adhoc-rss-text-hover-color: #fff; /* text color on hover/focus, both banners */

	/* Set to "uppercase" to show headlines in ALL CAPS. This only affects
	   the headline itself — the source name (e.g. "Forensic Focus") before
	   it is never upper-cased, so it stays readable. */
	--adhoc-rss-headline-transform: none;

	/* ---- shared banner background ---- */
	--adhoc-rss-bg: #222;

	/* ---- docked title box on the left of the banner (optional — only
	   shown when a container has a data-label-text="..." attribute in the
	   HTML; see index.html / index_Fr.html) ---- */
	--adhoc-rss-label-bg: #c0392b;
	--adhoc-rss-label-color: #fff;
	--adhoc-rss-label-font-family: inherit;
	--adhoc-rss-label-font-size: 15px;
	/* The box sizes itself to fit its own text (a short title like
	   "Forensics" takes only as much room as "Forensics" needs) — this
	   just caps how much of the banner it's ever allowed to claim, so a
	   very long title can't crowd out the scrolling headlines entirely. */
	--adhoc-rss-label-max-width: 55%;
	--adhoc-rss-label-notch: 20px;

	display: flex;
	align-items: stretch;
	background: var(--adhoc-rss-bg);
	position: relative;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

.adhoc-rss-ticker--dark {
	border-top: 1px solid #080808;
}

.adhoc-rss-ticker--light {
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	margin-bottom: 20px;
}

/* Example: give just ONE banner different colors than the other again —
   uncomment and edit (only need to redeclare the variables you want to
   change; anything left out still comes from .adhoc-rss-ticker above):
.adhoc-rss-ticker--light {
	--adhoc-rss-bg: #f5f5f5;
	--adhoc-rss-text-color: #333;
	--adhoc-rss-text-hover-color: #000;
	--adhoc-rss-label-bg: #2c3e50;
}
*/

/* ---- Docked title box (left-hand colored label) -------------------------
   Shaped like a pointed ribbon/flag tab (a straight left edge, a point
   cut into the right edge) rather than a plain rectangle — clip-path draws
   the shape; --adhoc-rss-label-notch controls how deep the point cuts in.
   A clipped shape like this can't take a normal box-shadow (the shadow
   would get clipped away too), so the drop-shadow below uses the `filter`
   property instead, which follows the clipped shape correctly. */
.adhoc-rss-label {
	flex: 0 0 auto; /* sizes to its own text (no grow, no shrink) instead of
	                    a fixed width, so short titles like "Forensics" take
	                    only the room they need and the rest goes to the
	                    scrolling headlines */
	max-width: var(--adhoc-rss-label-max-width);
	display: flex;
	align-items: center;
	/* Extra right-hand padding equal to the notch depth, so the text never
	   sits under the pointed cut-out — without this, a notch deeper than
	   the normal padding would slice into the last letter. */
	padding: 0 calc(14px + var(--adhoc-rss-label-notch)) 0 14px;
	background: var(--adhoc-rss-label-bg);
	color: var(--adhoc-rss-label-color);
	font-family: var(--adhoc-rss-label-font-family);
	font-size: var(--adhoc-rss-label-font-size);
	font-weight: bold;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	box-sizing: border-box;
	order: -1; /* always render before the scrolling area, regardless of
	              DOM insertion order */
	clip-path: polygon(
		0 0,
		calc(100% - var(--adhoc-rss-label-notch)) 0,
		100% 50%,
		calc(100% - var(--adhoc-rss-label-notch)) 100%,
		0 100%
	);
	filter: drop-shadow(2px 0 3px rgba(0, 0, 0, 0.35));
}

/* ---- Scrolling area ------------------------------------------------------ */
.adhoc-rss-viewport {
	flex: 1 1 auto;
	min-width: 0; /* required so flex-shrink can actually clip long content */
	overflow: hidden;
	white-space: nowrap;
	position: relative;
	padding: 8px 0;
	box-sizing: border-box;
}

.adhoc-rss-track {
	display: inline-block;
	white-space: nowrap;
	padding-left: 100%;
	animation-name: adhoc-rss-scroll;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

/* Pause on hover/focus so a visitor can actually click a headline. */
.adhoc-rss-ticker:hover .adhoc-rss-track,
.adhoc-rss-ticker:focus-within .adhoc-rss-track {
	animation-play-state: paused;
}

.adhoc-rss-item {
	display: inline-block;
	margin-right: 48px;
	font-family: var(--adhoc-rss-font-family);
	font-size: var(--adhoc-rss-font-size);
	color: var(--adhoc-rss-text-color) !important;
	text-decoration: none;
}
.adhoc-rss-item:hover,
.adhoc-rss-item:focus {
	color: var(--adhoc-rss-text-hover-color) !important;
	text-decoration: underline;
}

/* The source-name span at the start of each item (e.g. "Forensic Focus"),
   shown only when SHOW_SOURCE_NAME is true in js/rss-ticker.js. Slightly
   bolder/dimmer than the headline so the two are easy to tell apart at a
   glance; always uses --adhoc-rss-text-color above, never affected by
   --adhoc-rss-headline-transform. */
.adhoc-rss-source {
	font-weight: bold;
	opacity: 0.85;
}
/* The "|" separator between source name and headline. */
.adhoc-rss-sep {
	margin: 0 8px;
	opacity: 0.5;
}
/* The headline text itself — the only part affected by
   --adhoc-rss-headline-transform above. */
.adhoc-rss-headline {
	text-transform: var(--adhoc-rss-headline-transform);
}

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

/* Respect visitors who've asked their OS/browser to reduce motion: no
   auto-scrolling marquee, just a normal scrollable single line instead. */
@media (prefers-reduced-motion: reduce) {
	.adhoc-rss-track {
		animation: none;
		padding-left: 0;
	}
	.adhoc-rss-viewport {
		overflow-x: auto;
	}
}