/**
 * Accessibility overrides.
 *
 * Compiled into public/css/main.css by gulp — added as the LAST source in the
 * `mainCss` task — so these rules load after every theme rule and win the
 * cascade without !important. After editing, run `npx gulp mainCss` to rebuild.
 * Three concerns, all behaviour/visual preserving except where noted:
 *   1. Colour contrast (WCAG AA).
 *   2. Touch-target size + spacing (>=24px).
 *   3. Size preservation for the heading-order tag changes (the theme sizes
 *      headings by tag, so re-assert the original sizes against the .title class
 *      after <h4>/<h5> were demoted to <h3> for a sequential outline).
 *
 * Lives under inc/winhq (our code) and is pulled into the build by reference
 * from gulpfile.js, so it is not hand-maintained in the vendor css/ dir.
 */

/* ============================================================
   1. COLOUR CONTRAST (WCAG AA)
   ============================================================ */

/* Category chips use white text, so the chip *background* must reach 4.5:1.
   The amber and green term colours failed (1.80:1 / 2.38:1); darken to the
   nearest AA-passing shade of the same hue. Navy (color-1) and purple
   (color-3) already pass and are untouched. These render only when a category
   is assigned that colour, so this is a pre-emptive fix. */
.newsup-categories.category-color-2 { background: #9a6c20; } /* amber  #feb236 -> 4.63:1 */
.newsup-categories.category-color-4 { background: #5c8135; } /* green  #82b74b -> 4.52:1 */

/* Light header skin: secondary date text was #848582 on white (3.71:1). */
.mg-headwidget.light .info-left li { color: #6c6d6a; } /* -> 4.54:1 */

/* ============================================================
   2. TOUCH TARGETS (>=24px target + spacing)
   ============================================================ */

/* Category pill links: ~18px tall, 7px apart. Grow via padding + min-height
   (font size unchanged) and widen the inter-pill gap. */
.mg-blog-category { gap: 8px; }
.mg-blog-category a {
	min-height: 24px;
	padding: 6px 10px;
	display: inline-flex;
	align-items: center;
	line-height: 1.1;
}

/* Inline post-date link: pad the hit area to 24px without shifting layout. */
.mg-blog-date { display: inline-flex; align-items: center; }
.mg-blog-date a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 2px 0;
}

/* Persistent header controls: enlarge hit areas + separate the home button
   from the burger so neither trips the 24px spacing check. */
.mobilehomebtn {
	min-width: 36px;
	min-height: 36px;
	width: auto;
	height: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	margin-right: 12px;
}
.m-header .navbar-toggler {
	min-height: 44px;
	min-width: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Pagination numbers are 40px but only 12px apart -> raise the gap to 24px. */
.navigation.pagination .nav-links .page-numbers,
.navigation.pagination .nav-links a { margin: 0 12px 12px; }

/* Icon-only / nav links inside the collapsed menu. */
a.msearch {
	min-width: 40px;
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
.navbar-wp .navbar-nav > li > a.homebtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
}
.navbar-nav .nav-link { min-height: 24px; display: flex; align-items: center; }
.navbar-nav .dropdown-item {
	min-height: 24px;
	padding-top: .4rem;
	padding-bottom: .4rem;
	display: flex;
	align-items: center;
}

/* Hero/owl carousel controls. The pagination dots and prev/next arrows are
   injected by Owl after load and are small/closely spaced. Enlarge each tap
   area to >=24px (the visual dot stays its original size, centred) — covers
   both Owl v1 (.owl-pagination .owl-page) and v2 (.owl-dots .owl-dot) markup. */
.owl-pagination .owl-page,
.owl-dots .owl-dot {
	min-width: 24px;
	min-height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.owl-nav button,
.owl-nav [class*="owl-"],
.owl-buttons > div {
	min-width: 24px;
	min-height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ============================================================
   3. HEADING-ORDER SIZE PRESERVATION
   The theme sizes headings by tag (h4=24px, h5=20px, bare h3=28px) with no
   class-only size rule, so demoting card titles to <h3> would resize them.
   Re-assert the originals against the .title class to keep the look identical.
   ============================================================ */

/* Featured carousel card title (was h4: 24px, white, 2-line clamp). */
.mg-blog-post .bottom h3.title {
	font-size: 24px;
	font-weight: 400;
	line-height: 120%;
	color: #fff;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mg-blog-post .bottom h3.title a { color: #fff; }
.mg-blog-post .bottom h3.title a:hover,
.mg-blog-post .bottom h3.title:hover { color: #202f5b; }

/* Main list-loop card title (was h4: 24px). */
.mg-posts-sec-post .entry-title.title { font-size: 24px; font-weight: 400; line-height: 1.2; }

/* "You missed" footer card titles (was h4: 24px, 3-line clamp). */
.mg-blog-inner h3.title {
	font-size: 24px;
	font-weight: 400;
	line-height: 1.2;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mg-blog-inner h3.title a:hover { color: #202f5b; }

/* Tabbed small-post list titles (was h5: 16px). */
.small-list-post .title,
.title_small_post .title {
	font-size: 16px;
	font-weight: 400;
	margin: 0;
	padding-right: 8px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.title_small_post .title a { color: #212121; }
.title_small_post .title a:hover { color: #202f5b; }

/* "More in the news" section title promoted h4 -> h2. Mirror the theme's exact
   navy pill-badge rules (from public/css/{style,main}.css) onto h2. */
.mg-sec-title h2 {
	display: inline-block;
	font-size: 18px;
	font-weight: 400;
	line-height: 2.2;
	height: auto;
	min-height: 40px;
	margin: 0;
	padding: 0 7px 0 15px;
	width: auto;
	position: relative;
	background-color: #202f5b;
	color: #fff;
}
.mg-sec-title h2:before {
	content: "";
	clip-path: polygon(0 0, 0 100%, 100% 100%);
	height: 41px;
	width: 30px;
	position: absolute;
	right: -29px;
	top: 0;
	border-color: transparent transparent transparent #202f5b;
}