/* Shared styles for the Applied S&I pages. Each element's own look is in the
   page's custom CSS (generated by generator/mock2bricks.py); this file holds
   the rules the mock-ups share: links, buttons, menu, forms, mobile layout. */

/* Undo theme heading/paragraph styles so the page looks like the mock-up */
/* The theme sets body text to 18px with line height 1.7; the mock-ups assume browser defaults */
.asni { font-family: Lato, system-ui, sans-serif; color: #2b3443; font-size: 16px; line-height: normal; }
.asni :is(h1, h2, h3, h4, h5, h6, p, figure, figcaption, ul, ol, li, label) {
	color: inherit; font-family: inherit; letter-spacing: inherit; text-transform: none;
}
.asni :is(h1, h2, h3, h4, h5, h6) { margin: 0; line-height: normal; }
.asni [hidden] { display: none !important; }
/* Bricks base styles that differ from browser defaults the mock-ups were drawn with */
.asni p { margin: 1em 0; }
.asni figcaption { margin: 0; text-align: start; font-size: inherit; color: inherit; }
.asni img { vertical-align: baseline; }
.asni table { width: auto; }
.asni .asni-raw { display: contents; }
.asni img { max-width: 100%; }
/* The mock-ups use the browser default box model; Bricks switches it to border-box */
.asni, .asni *, .asni *::before, .asni *::after { box-sizing: content-box; }

/* Links and buttons */
.asni a { color: #b5451b; text-decoration: none; }
.asni a:hover { color: #963816; }
.asni .nav a { color: #d7dce4; }
.asni .nav a:hover, .asni .nav a[aria-current="page"] { color: #ffffff; }
.asni .btn-primary, .asni .nav a.btn-primary { color: #ffffff; }
.asni .btn-primary:hover, .asni .nav a.btn-primary:hover { color: #ffffff; background: #963816 !important; }
.asni .btn-ghost { color: #ffffff; }
.asni .btn-ghost:hover { color: #ffffff; border-color: #ffffff !important; }
.asni .card-link { color: #01091a; }
.asni .card-link:hover { color: #01091a; border-color: #b5451b !important; }
.asni .chip { color: #d7dce4; }
.asni .chip:hover { color: #ffffff; border-color: rgba(255, 255, 255, 0.6) !important; }
.asni .foot a { color: #aab3c0; }
.asni .foot a:hover { color: #ffffff; }

/* Header stays at the top while the page scrolls (below the admin bar when logged in) */
#brx-header { position: sticky; top: 0; z-index: 100; }
.admin-bar #brx-header { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar #brx-header { top: 0; } }

/* Header: menu button on small screens */
.asni .asni-menu-toggle { display: none; }
@media (max-width: 960px) {
	.asni-header .nav { position: relative; }
	.asni .asni-menu-toggle {
		display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
		box-sizing: border-box; width: 44px; height: 44px; padding: 10px; background: transparent;
		border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 8px; cursor: pointer;
	}
	.asni .asni-menu-toggle span { display: block; width: 22px; height: 2px; background: #ffffff; border-radius: 2px; }
	.asni-header #asni-nav {
		display: none !important; position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
		flex-direction: column; align-items: stretch !important; gap: 0 !important;
		background: #01091a; padding: 8px 24px 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}
	.asni-header.is-open #asni-nav { display: flex !important; }
	.asni-header #asni-nav a { padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
	.asni-header #asni-nav a.btn-primary { margin-top: 16px; border-bottom: 0; text-align: center; }
}

/* Today versus with ASVI rows: stack on phones instead of scrolling sideways */
@media (max-width: 767px) {
	.asni .asni-rows { min-width: 0 !important; }
	.asni .asni-rows > * { grid-template-columns: 1fr !important; gap: 10px !important; }
	.asni .asni-rows > * > :nth-child(3) { display: none !important; }
}

/* Forms: undo Bricks/theme field and button defaults (height, line height,
   hidden select arrows, left-aligned button text). Padding, border and colours
   come from the mock-up's own inline styles. */
.asni form label { margin: 0; line-height: normal; }
.asni form :is(input, select, textarea) {
	height: auto; min-height: 0; max-height: none; margin: 0; line-height: normal; box-shadow: none;
}
.asni form select {
	-webkit-appearance: menulist; -moz-appearance: menulist; appearance: auto;
	background-image: none; padding-right: 12px;
}
.asni form textarea { line-height: normal; }
.asni form button[type="submit"] {
	display: block; width: auto; height: auto; min-height: 0; margin: 0; line-height: normal;
	text-align: center; justify-content: center;
}
.asni form input:focus, .asni form select:focus, .asni form textarea:focus {
	outline: 2px solid rgba(181, 69, 27, 0.35); outline-offset: 1px; border-color: #b5451b !important;
}
.asni form select:disabled { background: #f4f5f7 !important; color: #8b95a5 !important; }
.asni form button[disabled] { opacity: 0.7; cursor: wait !important; }
.asni [data-asni-map].has-map > :not(.asni-map) { display: none; }
.asni [data-asni-map] .asni-map { position: absolute; inset: 0; }
.asni .asni-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.asni form label > span:has(input[type="file"]:focus-visible) { outline: 2px solid rgba(181, 69, 27, 0.35); outline-offset: 1px; }
.asni .asni-suggest {
	position: absolute; left: 0; right: 0; top: 100%; z-index: 20; margin: 4px 0 0; padding: 4px 0; list-style: none;
	background: #ffffff; border: 1px solid #cfd5dd; border-radius: 10px; box-shadow: 0 12px 28px rgba(1, 9, 26, 0.12);
	font-family: Lato, sans-serif; font-weight: 400; font-size: 14px; color: #2b3443; box-sizing: border-box;
}
.asni .asni-suggest li { padding: 9px 14px; cursor: pointer; }
.asni .asni-suggest li:hover, .asni .asni-suggest li[aria-selected="true"] { background: #f4f5f7; }