/*
 * Mount Hope Mining: Weblink widget styles
 * Egg Design, job 20399, October 2026
 *
 * Hosted on the Mount Hope site and linked by Weblink as the last stylesheet
 * in each MtHopeMining template (priceFrame, topheadlines, headlineContents,
 * chartformresponsive, chartresponsive). When this file changes, bump ?v= in
 * the link tag and tell Weblink.
 *
 * The one file loads into every widget, so each rule is scoped to markup that
 * only exists in its own widget. Weblink's own client CSS (css/headline.css,
 * css/pagenav.css and the inline template styles) already sets the brand
 * colours on the lists and the ticker; this file only adds what they lack.
 *
 * Brand: burgundy #91101C, orange #F18F24, bone #FCF5E0, tan #FCE9D3,
 * black #1C1C1C.
 */


/* ------------------------------------------------------------------------
 * Announcement lists (headlineContents, all variants)
 * Weblink's own CSS loads in the page body, after this file, and forces
 * font-weight with !important. Rules here use the widget's ids
 * (#wl_headlineDiv, #wl_nav) so they win on specificity, plus !important
 * where Weblink uses it.
 * ---------------------------------------------------------------------- */

/* Year tabs. Under the page's own orange heading, the widget stacked a
   second header: tan tabs, then an orange bar repeating the selected year in
   60px Veneer with its own pointer. The selected tab already names the year,
   so the bar and its pointer go, and the tabs become one row of labels over
   the list: black, the selected year in burgundy with an orange underline,
   and a fine tan rule under the row. */
#wl_yearSelectionTable td.wl-title-td,
#wl_headlineDiv .down-arrow-div {
	display: none !important;
}

#wl_yearSelectionTable {
	width: 100%;
}

#wl_yearSelectionTable td.wl_tabTD {
	width: 100% !important;
	padding: 0 !important;
}

#wl_yearSelectionTable td#wl_dropdownTD {
	display: none;
}

#wl_headlineDiv #wl_tabUL {
	display: flex !important;
	flex-wrap: wrap;
	column-gap: 28px;
	margin-bottom: 8px;
	padding-left: 20px;
	border-bottom: 1px solid #F3E3CC;
}

/* Tabs size to their label. Weblink's are a fixed 180px, and its script
   hides any tab that doesn't fit the row with no other way to reach it, so
   at tablet widths "2025" simply vanished. */
#wl_headlineDiv .top-tabs {
	width: auto !important;
	min-width: 0;
	background-color: transparent !important;
	border-left: 0 !important;
}

#wl_headlineDiv .top-tabs > a.wl_titleTab {
	margin-bottom: -1px;
	padding: 12px 0;
	background-color: transparent !important;
	background-image: linear-gradient(#F18F24, #F18F24) !important;
	background-repeat: no-repeat;
	background-position: 100% 100%;
	background-size: 0% 3px;
	color: #1C1C1C;
	font-size: 16px;
	font-weight: 600 !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: background-size 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* The site's tab pattern (egg-fixes.css block 23): hovering a year draws
   the selected year's orange underline in from the left. */
#wl_headlineDiv .top-tabs:not(.active) > a.wl_titleTab:is(:hover, :focus-visible),
#wl_headlineDiv .top-tabs.active > a.wl_titleTab {
	background-position: 0 100%;
	background-size: 100% 3px;
	color: #91101C;
}

/* Download icons: Weblink's peach (#F7BC7C) all but disappears on white.
   Deepen it to the brand orange. */
#wl_headlineDiv .download-img {
	filter: saturate(2.4) brightness(0.86);
}

/* Page numbers: 14px grey text with 20px targets. Make them tabs that
   match the year tabs, 40px square. */
#wl_nav .wp-pagenavi {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 4px;
	padding: 16px 0 8px;
}

#wl_nav .wp-pagenavi a,
#wl_nav .wp-pagenavi span.current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	margin: 0;
	padding: 0 10px;
	box-sizing: border-box;
	background-color: #FCE9D3;
	color: #91101C;
	font-family: Inter, sans-serif;
	font-size: 15px;
	font-weight: 600 !important;
	text-decoration: none;
}

#wl_nav .wp-pagenavi span.current,
#wl_nav .wp-pagenavi a:hover {
	background-color: #F18F24;
	color: #1C1C1C;
}

/* The announcements table was pulled 15px up (top: -15px) under the
   orange year header's pointer, which then covered the first headline. */
table.wl_headlineTable {
	top: 0 !important;
}

/* Rows. Weblink stripes them white and cream; on the site's cream page the
   cream rows dissolve into the background and the list loses its edge.
   Solid white rows with fine tan rules, even padding. */
table.wl_headlineTable tr.wl-data-tr,
table.wl_headlineTable tr.wl-data-tr:nth-child(even),
table.wl_headlineTable tr.wl-data-tr:nth-child(odd) {
	background-color: #FFFFFF !important;
}

table.wl_headlineTable {
	border-collapse: collapse;
}

table.wl_headlineTable tr.wl-data-tr + tr.wl-data-tr > td {
	border-top: 1px solid #F3E3CC;
}

table.wl_headlineTable td.wl_dataTD,
table.wl_headlineTable td.wl_imgTD {
	padding-top: 16px !important;
	padding-bottom: 16px !important;
	vertical-align: middle;
}

/* Phones: Weblink hides the download column, which leaves headlines at
   desktop size running to the right edge. Phone type and a right margin,
   on the site's type scale. */
@media only screen and (max-width: 480px) {
	.wl_headlineTable .wl_dataTD {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	.wl_headlineTable a.wl_headlineLink {
		font-size: 18px;
		line-height: 24px;
	}

	.wl_headlineTable .wl-date-sub-div {
		font-size: 16px;
		line-height: 24px;
		margin-top: 4px;
		color: #555352;
	}

	/* Four year tabs fit one row in a 295px frame (a 320px phone). */
	#wl_headlineDiv #wl_tabUL {
		column-gap: 20px;
	}
}

.wl_headlineTable a.wl_headlineLink:focus-visible,
.investor-tabs a.wl_titleTab:focus-visible,
.wp-pagenavi a:focus-visible,
.wl-main-div a.wl-hd-link:focus-visible {
	outline: 2px solid #91101C;
	outline-offset: 2px;
}


/* ------------------------------------------------------------------------
 * Latest news cards on the home page (topheadlines)
 * Weblink's grid has a 350px minimum column, so on a phone (a 335px frame)
 * the cards run off the right edge. Titles also cut off at two lines.
 * ---------------------------------------------------------------------- */

.wl-main-div:has(> .wl-item) {
	grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
}

.wl-item .wl-hd-text {
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

.wl-item .wl-download-img {
	filter: saturate(2.4) brightness(0.86);
}

/* Tablets: two columns of cards about 340px wide, and Weblink's desktop
   title size cut most headlines off with "..." after three lines. The site's
   lead size reads them in full. */
@media only screen and (min-width: 481px) and (max-width: 900px) {
	.wl-item .wl-hd-text {
		font-size: 20px;
		line-height: 28px;
	}
}

@media only screen and (max-width: 480px) {
	.wl-main-div > .wl-item {
		padding: 16px 20px;
	}

	.wl-item .wl-hd-text {
		font-size: 19px;
		line-height: 1.3;
	}
}


/* ------------------------------------------------------------------------
 * Share price chart: range links (chartformresponsive)
 * Weblink defaults are grey text on light grey with a pale blue selected
 * state. Brand them as the same tabs the announcement lists use.
 * ---------------------------------------------------------------------- */

#dateRange a.dateRangeLink {
	display: inline-block;
	min-width: 28px;
	margin: 0 1px;
	padding: 7px 10px;
	border-radius: 0;
	background-color: #FCE9D3;
	color: #1C1C1C;
	font-family: Inter, sans-serif;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

#dateRange a.dateRangeLink.selectedLink,
#dateRange a.dateRangeLink:hover {
	background-color: #F18F24;
	color: #1C1C1C;
}

#dateRange a.dateRangeLink:focus-visible {
	outline: 2px solid #91101C;
	outline-offset: 2px;
}


/* ------------------------------------------------------------------------
 * Share price chart: plot (chartresponsive)
 * The chart is SVG drawn by Raphael with colours set as attributes, which
 * CSS outranks. Each rule matches Weblink's default colour, so if Weblink
 * later sets brand colours in their config these rules simply stop matching.
 * ---------------------------------------------------------------------- */

/* Price line */
#maincanvas path[stroke="#8a8a8a" i][stroke-width="2"] {
	stroke: #91101C;
	stroke-width: 2.5px;
}

/* Volume bars: thin lines on short ranges, filled bars on longer ones */
#maincanvas path[stroke="#8a8a8a" i][stroke-opacity] {
	stroke: #F18F24;
}

#maincanvas rect[fill="#8a8a8a" i] {
	fill: #F18F24;
	stroke: #F18F24;
}

/* Navigator line along the bottom */
#navicanvas path[stroke="#8a8a8a" i] {
	stroke: #91101C;
}

/* Navigator area fill (Weblink's pale blue-grey) in brand tan */
#navicanvas path[fill="#f5f7fa" i] {
	fill: #FCE9D3;
}

/* The selected range on the navigator: grey box to a light orange wash */
body #navCentreArea {
	background-color: #F18F24;
	opacity: 0.28;
}

/* Grid lines, warmed to the brand tan */
#maincanvas path[stroke="#eaeaea" i],
#navicanvas path[stroke="#eaeaea" i],
#navicanvas path[stroke="#cccccc" i] {
	stroke: #F3E2CC;
}

/* Axis line under the plot (Weblink's blue-grey) */
#maincanvas path[stroke="#c0d0e0" i] {
	stroke: #D9C4A8;
}

/* Axis labels: Inter instead of Arial */
#maincanvas text,
#navicanvas text {
	font-family: Inter, Arial, sans-serif !important;
	fill: #1C1C1C;
}

/* Hover price box */
div.priceBox {
	border: 1px solid #91101C;
	border-radius: 0;
	background-color: #FCF5E0;
	box-shadow: none;
}

div.priceBox p {
	font-family: Inter, sans-serif;
	color: #1C1C1C;
}

/* Weblink credit line, kept but quietened */
#weblinkcredit a {
	font-family: Inter, sans-serif !important;
	color: #8A8A8A !important;
}

/* ------------------------------------------------------------------------
 * Hover, the site's patterns (egg-fixes.css block 23) on the same timing.
 * Headlines: instead of Weblink's instant underline on the headline and its
 * date, the headline turns burgundy and draws an underline in from the
 * left. The date block sits outside the link's line boxes, so it stays
 * plain. Page numbers and chart ranges are buttons: the orange fill above,
 * now eased.
 * ---------------------------------------------------------------------- */
table.wl_headlineTable td.wl_dataTD a.wl_headlineLink,
.wl-main-div a.wl-hd-link {
	text-decoration: none !important;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 100% 100%;
	background-size: 0% max(1px, 0.08em);
	transition: background-size 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

table.wl_headlineTable td.wl_dataTD a.wl_headlineLink:is(:hover, :focus-visible),
.wl-main-div a.wl-hd-link:is(:hover, :focus-visible) {
	background-position: 0 100%;
	background-size: 100% max(1px, 0.08em);
	color: #91101C;
}

table.wl_headlineTable td.wl_dataTD a.wl_headlineLink .wl-date-sub-div {
	color: #1C1C1C;
	text-decoration: none;
}

#wl_nav .wp-pagenavi a,
#dateRange a.dateRangeLink {
	transition: background-color 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
	table.wl_headlineTable td.wl_dataTD a.wl_headlineLink,
	.wl-main-div a.wl-hd-link,
	#wl_headlineDiv .top-tabs > a.wl_titleTab,
	#wl_nav .wp-pagenavi a,
	#dateRange a.dateRangeLink {
		transition: none;
	}
}