/*
	Berks Data - Theme: "Reading Blue"
	=======================================================
	Inspired by civic blues of Reading, PA and the
	Schuylkill River. Deep navy primary with golden
	amber accents — authoritative, trustworthy, and vibrant.

	HOW TO USE:
	In each HTML page, swap the berks-custom.css link
	to this file:
	  <link rel="stylesheet" href="assets/css/berks-theme-reading-blue.css" />

	COLOR PALETTE
	  Primary (nav, badges, filled buttons): #1a3a6b  (deep navy blue)
	  Accent (hover, links, outlines):       #d4820a  (golden amber)
	  Accent dark (active states):           #b36b08  (dark amber)
	  Body text:                             #1e2433  (near-black blue-gray)
	  Borders/dividers:                      #a8bcd4  (steel blue-gray)
	  Card background:                       rgba(26, 58, 107, 0.05)
	  Footer background:                     #eaf0f8  (very light blue)
	  Page background:                       #ffffff

	  Tile 1 (Municipality Explorer):        #1a3a6b  (navy)
	  Tile 2 (Letters Leaderboard):          #d4820a  (amber)
	  Tile 3 (ICE Timeline):                 #1b6e52  (teal green)
*/

/* ===== HEADER SPACING ===== */

#header {
	padding: 1.5em 0 0.1em 0 !important;
}

#header .logo {
	margin: 0 0 1.5em 0 !important;
}

@media screen and (max-width: 736px) {
	#header {
		padding: 1em 0 0.1em 0 !important;
	}

	#header .logo {
		margin: 0 0 1em 0 !important;
	}
}

/* ===== MAIN CONTENT SPACING ===== */

#main .inner {
	max-width: 90% !important;
	padding: 2em 0 1em 0 !important;
}

#main .inner h1 {
	margin: 0 0 0.75em 0 !important;
	font-size: 2.5em !important;
	color: #1a3a6b !important;
}

#main .inner > p {
	margin: 0 0 1.5em 0 !important;
}

/* ===== TYPOGRAPHY ===== */

body {
	color: #1e2433 !important;
	font-weight: 400 !important;
}

p,
body p,
#main p,
header p,
.inner p,
div p {
	color: #1e2433 !important;
	font-weight: 400 !important;
}

label {
	color: #1e2433 !important;
	font-weight: 400 !important;
}

/* Links */
a {
	color: #1a3a6b !important;
	border-bottom-color: rgba(26, 58, 107, 0.4) !important;
}

a:hover {
	color: #d4820a !important;
	border-bottom-color: transparent !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
	color: #1a3a6b !important;
}

/* ===== NAV MENU PANEL ===== */

#menu {
	background: #1a3a6b !important;
	color: #ffffff !important;
}

#menu a,
#menu ul li a {
	color: rgba(255, 255, 255, 0.75) !important;
	border-bottom-color: transparent !important;
}

#menu a:hover,
#menu ul li a:hover {
	color: #d4820a !important;
	border-bottom-color: transparent !important;
}

/* Hamburger / Menu icon strokes */
#header nav ul li a[href="#menu"]:before,
#header nav ul li a[href="#menu"]:after {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cstyle%3Eline %7B stroke-width: 8px%3B stroke: %231a3a6b%3B %7D%3C/style%3E%3Cline x1='0' y1='25' x2='100' y2='25' /%3E%3Cline x1='0' y1='50' x2='100' y2='50' /%3E%3Cline x1='0' y1='75' x2='100' y2='75' /%3E%3C/svg%3E") !important;
}

#header nav ul li a[href="#menu"]:hover:before,
#header nav ul li a[href="#menu"]:hover:after {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cstyle%3Eline %7B stroke-width: 8px%3B stroke: %23d4820a%3B %7D%3C/style%3E%3Cline x1='0' y1='25' x2='100' y2='25' /%3E%3Cline x1='0' y1='50' x2='100' y2='50' /%3E%3Cline x1='0' y1='75' x2='100' y2='75' /%3E%3C/svg%3E") !important;
}

/* ===== FOOTER ===== */

#footer {
	background-color: #eaf0f8 !important;
}

#footer h2 {
	color: #1a3a6b !important;
}

/* ===== BORDERS AND CARDS ===== */

/* General border color */
input, select, textarea {
	border-bottom-color: #a8bcd4 !important;
}

/* ===== TILE OVERLAY COLORS ===== */

.tiles article.style1 > .image:before {
	background-color: #1a3a6b !important;  /* Navy blue */
}

.tiles article.style2 > .image:before {
	background-color: #d4820a !important;  /* Golden amber */
}

.tiles article.style3 > .image:before {
	background-color: #1b6e52 !important;  /* Forest teal */
}

.tiles article.style4 > .image:before {
	background-color: #2d5fa8 !important;  /* Medium blue */
}

.tiles article.style5 > .image:before {
	background-color: #7a4a1e !important;  /* Dark bronze */
}

.tiles article.style6 > .image:before {
	background-color: #1a4a6b !important;  /* Steel blue */
}

/* Tile hover overlay */
body:not(.is-touch) .tiles article:hover > .image:before {
	opacity: 0.9 !important;
}

/* Remove the diagonal X cross pattern from tile images */
.tiles article > .image:after {
	display: none !important;
}

/* Tile text — all text white.
   #main prefix needed to beat #main p { color: #1e2433 !important } specificity. */
#main .tiles article > a,
#main .tiles article > a * {
	color: #ffffff !important;
}

.tiles article > a .content {
	max-height: none !important;
	opacity: 1 !important;
}

/* ===== BUTTONS ===== */

/* Outlined/default button style */
.button,
input[type="submit"],
input[type="reset"],
input[type="button"],
button {
	box-shadow: inset 0 0 0 2px #1a3a6b !important;
	color: #1a3a6b !important;
}

.button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover {
	color: #d4820a !important;
	box-shadow: inset 0 0 0 2px #d4820a !important;
}

.button:active,
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active,
button:active {
	background-color: rgba(212, 130, 10, 0.1) !important;
}

/* Filled/primary button */
.button.primary,
input[type="submit"].primary {
	background-color: #1a3a6b !important;
	box-shadow: none !important;
	color: #ffffff !important;
}

.button.primary:hover,
input[type="submit"].primary:hover {
	background-color: #d4820a !important;
}

.button.primary:active,
input[type="submit"].primary:active {
	background-color: #b36b08 !important;
}

/* ===== BERKS WIDGET OVERRIDES ===== */

.berks-where-am-i {
	--berks-color-primary: #1a3a6b !important;
	--berks-color-primary-dark: #122857 !important;
	--berks-color-secondary: #d4820a !important;
	--berks-color-secondary-dark: #b36b08 !important;
	--berks-gradient-primary: linear-gradient(135deg, #1a3a6b 0%, #2d5fa8 100%) !important;
	--berks-gradient-secondary: transparent !important;
	--berks-shadow-button: none !important;
	--berks-shadow-md: 0 2px 8px rgba(26, 58, 107, 0.08) !important;
	--berks-shadow-xl: 0 4px 12px rgba(26, 58, 107, 0.12) !important;
	--berks-shadow-2xl: 0 6px 20px rgba(26, 58, 107, 0.18) !important;
}

/* Widget card */
.berks-where-am-i__card {
	background: rgba(26, 58, 107, 0.04) !important;
	border-radius: 4px !important;
	border: solid 1px #a8bcd4 !important;
	box-shadow: none !important;
	padding: 2em !important;
}

/* Widget buttons */
.berks-where-am-i__content button {
	appearance: none !important;
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out !important;
	background: transparent !important;
	border-radius: 4px !important;
	border: 0 !important;
	box-shadow: inset 0 0 0 2px #1a3a6b !important;
	color: #1a3a6b !important;
	cursor: pointer !important;
	display: inline-block !important;
	font-size: 0.8em !important;
	font-weight: 900 !important;
	height: 3em !important;
	letter-spacing: 0.35em !important;
	line-height: 3em !important;
	padding: 0 2.25em !important;
	text-align: center !important;
	text-decoration: none !important;
	text-transform: uppercase !important;
	white-space: nowrap !important;
	transform: none !important;
}

.berks-where-am-i__content button:hover {
	box-shadow: inset 0 0 0 2px #d4820a !important;
	color: #d4820a !important;
	background: transparent !important;
	transform: none !important;
}

.berks-where-am-i__content button:active {
	background-color: rgba(212, 130, 10, 0.12) !important;
}

.berks-where-am-i__content button.primary,
.berks-where-am-i__content button[class*="primary"] {
	background-color: #1a3a6b;
	box-shadow: none;
	color: #ffffff !important;
}

.berks-where-am-i__content button.primary:hover,
.berks-where-am-i__content button[class*="primary"]:hover {
	background-color: #d4820a;
}

.berks-where-am-i__content button.primary:active,
.berks-where-am-i__content button[class*="primary"]:active {
	background-color: #b36b08;
}

/* Widget links */
.berks-where-am-i__municipality-website a {
	background: transparent !important;
	box-shadow: inset 0 0 0 2px #1a3a6b !important;
	color: #1a3a6b !important;
	font-size: 0.8em !important;
	font-weight: 900 !important;
	letter-spacing: 0.35em !important;
	text-transform: uppercase !important;
	padding: 0.75em 2em !important;
	border-radius: 4px !important;
}

.berks-where-am-i__municipality-website a:hover {
	box-shadow: inset 0 0 0 2px #d4820a !important;
	color: #d4820a !important;
	background: transparent !important;
	transform: none !important;
}

/* School district card */
.berks-where-am-i__school-district {
	background: rgba(26, 58, 107, 0.04) !important;
	border: 1px solid #a8bcd4 !important;
}

.berks-where-am-i__school-district h3,
.berks-where-am-i__school-district-name {
	color: #1a3a6b !important;
}

.berks-where-am-i__school-district-link {
	background: transparent !important;
	box-shadow: inset 0 0 0 2px #1a3a6b !important;
	color: #1a3a6b !important;
	font-size: 0.8em !important;
	font-weight: 900 !important;
	letter-spacing: 0.35em !important;
	text-transform: uppercase !important;
	padding: 0.75em 2em !important;
	border-radius: 4px !important;
}

.berks-where-am-i__school-district-link:hover {
	box-shadow: inset 0 0 0 2px #d4820a !important;
	color: #d4820a !important;
	background: transparent !important;
	transform: none !important;
}

/* Direction badges */
.berks-where-am-i__direction {
	background: #1a3a6b !important;
	color: #ffffff !important;
}

/* Widget text */
.berks-where-am-i__content,
.berks-where-am-i__content p,
.berks-where-am-i__content div {
	font-family: "Source Sans Pro", Helvetica, sans-serif;
	font-size: 0.9rem !important;
	font-weight: 400;
	line-height: 1.65 !important;
	color: #1e2433;
}

.berks-where-am-i__content strong { font-weight: 900; }

.berks-where-am-i__content h2,
.berks-where-am-i__content h3,
.berks-where-am-i__content h4 {
	font-weight: 700;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	color: #1a3a6b;
}

/* Checkbox */
.berks-where-am-i__test-mode-toggle input[type="checkbox"] + label {
	color: #1e2433;
}

.berks-where-am-i__test-mode-toggle input[type="checkbox"] + label:before {
	border: solid 1px #a8bcd4;
	background: rgba(26, 58, 107, 0.04);
}

.berks-where-am-i__test-mode-toggle input[type="checkbox"]:checked + label:before {
	background: #1a3a6b;
	border-color: #1a3a6b;
	color: #ffffff;
	content: '✓';
}

/* Layout */
.berks-where-am-i__container { text-align: left !important; }
.berks-where-am-i__content { max-width: 100% !important; }

/* ===== LOGO TITLE — stays neutral gray across all themes ===== */

#header .logo,
#header .logo .title {
	color: #585858 !important;
	border-bottom: 0 !important;
}

/* ===== RESPONSIVE ===== */

@media screen and (max-width: 736px) {
	#main .inner h1 {
		font-size: 2em !important;
	}
}