/*
 * Superb Cash Advance - front end fixes
 * Loaded after assets/css/superb-theme.min.css so no !important is needed.
 *
 * 0. The current page's own entry in the States dropdown. superb-theme.min.css
 *    sets, under @media screen and (min-width:1024px):
 *        #primary-menu li.current-menu-item a{color:#fff}
 *    That was written for the top-level bar, whose links are
 *    rgba(255,255,255,.8) because the header sits over the dark hero. The
 *    descendant selector also matches sub-menu links, and the sub-menu
 *    background is #F1FAFF, so on /locations/ohio/ the "Ohio" entry rendered
 *    white on near-white at 1.06:1 and read as missing from the list. The item
 *    was always in the DOM at visibility:visible and opacity:1; only its colour
 *    was wrong.
 *
 * 1. Scrollable mobile menu. superb-theme.scss gives the open mobile menu
 *    `height: 100vh` with overflow visible while `body` is `overflow: hidden`,
 *    so anything past one viewport was unreachable by touch. The list now
 *    scrolls inside itself.
 * 2. Word breaking. The theme set `word-break: break-word` on `body`. That
 *    legacy value behaves like `overflow-wrap: anywhere`, which feeds the
 *    break opportunities into min-content sizing, so auto-layout tables gave
 *    columns one-character widths and split "$15" into three lines. The
 *    correct value is `overflow-wrap: break-word`, which only breaks a word
 *    when it genuinely cannot fit on a line of its own.
 * 3. Narrow-viewport data tables. Tighter type and padding under 600px so the
 *    five-column cost tables fit whole words.
 */

/* ------------------------------------------------ 0. drop-down link colour */

/* The offending rule is a descendant selector, so it paints every link beneath
   a current item, not just the current item's own link. Two ways in:
   the item itself is current, or an ancestor of the whole sub-menu is. Both are
   answered by giving sub-menu links an explicit colour that outranks it.
   #202C5B is the sub-menu's own resting colour in superb-theme.min.css and
   measures 12.6:1 on the #F1FAFF panel and 13.4:1 on white, so it holds up in
   every header state: transparent over the hero, sticky white, and interior
   pages with no hero at all. The top-level bar is untouched, so its links stay
   white over the photo. Carrying an id plus a class plus three elements, these
   outrank #primary-menu li.current-menu-item a on specificity rather than on
   source order. */
#primary-menu li .sub-menu li > a,
#primary-menu li .sub-menu li > a:hover,
#primary-menu li .sub-menu li > a:focus {
	color: #202C5B;
}

/* The current page's own entry. Weight and underline carry the "you are here"
   signal rather than a colour, so it stays legible whatever coral settles on,
   and it cannot collide with the panel the way white did. */
#primary-menu li .sub-menu li.current-menu-item > a,
#primary-menu li .sub-menu li.current-menu-item > a:hover,
#primary-menu li .sub-menu li.current-menu-item > a:focus {
	color: #202C5B;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------------------------------------------------------------- 1. menu */

@media screen and (max-width: 1024px) {

	.mobile-menu-open #masthead .main-navigation:not(.mobile-menu-control-wrapper) .main-nav > ul {
		height: auto;
		max-height: calc(100vh - var(--superb-mm-offset, 72px));
		max-height: calc(100dvh - var(--superb-mm-offset, 72px));
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		padding-bottom: 2.5rem;
	}

	/* Sub-menu items carry the 2.5rem gap used by the top-level items, which
	   is what pushed the state list past 1400px. */
	.mobile-menu-open #masthead .main-navigation:not(.mobile-menu-control-wrapper) .main-nav > ul ul li {
		margin-bottom: 1.25rem;
	}

	.mobile-menu-open #masthead .main-navigation:not(.mobile-menu-control-wrapper) .main-nav > ul > li:last-child {
		margin-bottom: 0;
	}
}

/* ---------------------------------------------------------- 2. word break */

body {
	word-break: normal;
	overflow-wrap: break-word;
}

/* ------------------------------------------------- 2b. store contact panel */

/* The Location, Hours & Contact panel lays its rows out as grid tracks holding
   a flex row of icon plus text. Flex and grid items default to min-width:auto,
   so once the email stopped breaking mid-word it could no longer shrink and
   pushed a 320px viewport 42px sideways. Letting the items shrink puts the
   decision back where it belongs: the email stays whole while it fits and
   breaks only when it cannot. */
.superb-nap > div,
.superb-nap > div > div,
.superb-nap > div > div > div,
.superb-nap > div > div > div > div {
	min-width: 0;
}

@media screen and (max-width: 600px) {

	/* support@superbcashadvance.com needs 253px and the text column offered
	   210px at 375px, so it split as support@superbcashadvanc / e.com. Reclaiming
	   the panel's horizontal padding gives the column 266px and the address sits
	   on one line from 320px up. !important is needed because both paddings are
	   inline styles on the markup, which no ordinary rule can outrank. Vertical
	   padding is deliberately left alone. */
	.superb-nap {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.superb-nap > div {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
}

/* Below 375px even the full column is short of the 253px the address needs, so
   the address alone steps down a size rather than splitting across lines. The
   size is set on the link itself, which beats the 16px it would otherwise
   inherit from the panel's inline style. */
@media screen and (max-width: 374px) {

	.superb-nap a[href^="mailto:"] {
		font-size: 13px;
	}

	.superb-nap > div {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}
}

/* --------------------------------------------------------- 3. data tables */

table,
table th,
table td {
	word-break: normal;
	overflow-wrap: break-word;
}

@media screen and (max-width: 600px) {

	.entry-content table,
	.superb-law table,
	.inside-article table {
		font-size: 13px;
		line-height: 1.35;
	}

	.entry-content table th,
	.entry-content table td,
	.superb-law table th,
	.superb-law table td,
	.inside-article table th,
	.inside-article table td {
		padding: 8px 6px;
	}

	/* Safety net. Whole words give each column a real minimum width, so a wide
	   enough table can still outgrow a 320px viewport. Ohio's five columns need
	   332px inside a 284px container. Rather than let it push the page sideways
	   it scrolls inside itself, with the row group carrying min-width so tables
	   that already fit stay full width. Scoped with :has() to tables whose rows
	   all live in one row group, since splitting a thead and a tbody into two
	   table boxes would decouple their column widths. Browsers without :has()
	   simply keep the current behaviour. */
	.entry-content table:not(:has(thead)):not(:has(tfoot)),
	.superb-law table:not(:has(thead)):not(:has(tfoot)),
	.inside-article table:not(:has(thead)):not(:has(tfoot)) {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.entry-content table:not(:has(thead)):not(:has(tfoot)) > tbody,
	.superb-law table:not(:has(thead)):not(:has(tfoot)) > tbody,
	.inside-article table:not(:has(thead)):not(:has(tfoot)) > tbody {
		display: table;
		width: 100%;
		min-width: 100%;
	}
}