/*******************************************************************************
 * style.css — Legacy fallback (loads AFTER SFDS)
 *
 * SFDS (sfds.css + fonts.css + utilities.css) is the primary design layer.
 * This file provides ONLY:
 *   1. Image-sprite header nav (#sf_header)
 *   2. Image-based footer (#sf_footer)
 *   3. Legacy fixed-width layout (.width_container, .header)
 *   4. Focus styles (stronger than SFDS default — kept intentionally)
 *   5. Skip-link and .field-label helpers
 *
 * REMOVED (now handled by SFDS):
 *   - body margin/padding reset        → SFDS base.css
 *   - font-family (Arial→Rubik)        → SFDS typography / font-rubik
 *   - font-size, line-height on body   → SFDS text-body (16px/24px)
 *   - text color #6a655c               → SFDS #212123 (better WCAG contrast)
 *   - link color #005ea2               → SFDS text-action (#495ED4)
 *   - link hover underline             → SFDS utility classes
 *   - a img { border:0 }              → SFDS base reset
 *   - .sr-only                         → SFDS accessibility utility (sr-only)
 *   - body background #EDF5F7          → defer to SFDS (white/transparent)
 *
 * Date: 2026-03-19  |  DAIS compliance / SFDS-first refactor
 ******************************************************************************/


/* ==========================================================================
   1. LEGACY IMAGE-SPRITE HEADER NAV
   These rules drive the old sfgov.org top nav bar using GIF sprites.
   No SFDS equivalent exists — keep until header is rebuilt with SFDS components.
   ========================================================================== */

/* .sf_nav ul needs explicit reset — SFDS does NOT reset ul padding/margin
   (browsers default ul to padding-left:40px which offsets the sprite nav) */
.sf_nav ul { padding: 0; margin: 0; list-style: none; }

/* Isolate sprite header from SFDS box-sizing and border resets.
   SFDS sets *, :after, :before { box-sizing:border-box; border:0 solid }
   which breaks the pixel-precise GIF sprite positioning. */
#sf_header,
#sf_header *,
#sf_header *::before,
#sf_header *::after {
	box-sizing: content-box;
	border: 0;
}

#sf_header {
	width: 974px;
	height: 28px;
	margin: auto;
	margin-bottom: 5px;
}
#sf_header .sf_header_logo {
	float: left;
	background: url(images/Bheader_left.gif) top left no-repeat;
}
#sf_header .sf_header_logo a {
	display: block;
	width: 147px;
	height: 28px;
}
#sf_header .sf_header_logo a span {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}
#sf_header .sf_header_nav {
	width: 819px;
	height: 28px;
	float: left;
	background: url(images/Bheader_mid.gif) top left repeat-x;
}
#sf_header .sf_header_nav li { margin-top: 7px; float: left; }
#sf_header .sf_header_nav li.help { float: right; margin-right: 20px; }
#sf_header .sf_header_nav li,
#sf_header .sf_header_nav a {
	display: block;
	text-indent: -9999px;
	overflow: hidden;
}
#sf_header .sf_header_nav a {
	height: 21px;
	background-image: url(images/headerblue_nav.gif);
	background-repeat: no-repeat;
}
#sf_header_home a { width: 72px; background-position: 0 0; }
#sf_header_home a:hover,
#sf_header_home a:active,
#sf_header_home a:focus { background-position: 0 -29px; }
#sf_header_residents a { width: 90px; background-position: -72px 0; }
#sf_header_residents a:hover,
#sf_header_residents a:active,
#sf_header_residents a:focus { background-position: -72px -29px; }
#sf_header_business a { width: 85px; background-position: -162px 0; }
#sf_header_business a:hover,
#sf_header_business a:active,
#sf_header_business a:focus { background-position: -162px -29px; }
#sf_header_government a { width: 100px; background-position: -247px 0; }
#sf_header_government a:hover,
#sf_header_government a:active,
#sf_header_government a:focus { background-position: -247px -29px; }
#sf_header_visitor a { width: 70px; background-position: -347px 0; }
#sf_header_visitor a:hover,
#sf_header_visitor a:active,
#sf_header_visitor a:focus { background-position: -347px -29px; }
#sf_header_online a { width: 110px; background-position: -417px 0; }
#sf_header_online a:hover,
#sf_header_online a:active,
#sf_header_online a:focus { background-position: -417px -29px; }
#sf_header_help a { width: 60px; background-position: -740px 0; }
#sf_header_help a:hover,
#sf_header_help a:active,
#sf_header_help a:focus { background-position: -740px -29px; }
#sf_header .sf_header_end {
	width: 8px;
	height: 28px;
	float: right;
	background: url(images/Bheader_right.gif) top right no-repeat;
}


/* ==========================================================================
   2. LEGACY IMAGE-BASED FOOTER
   Uses footerbar.gif separator. Scoped to #sf_footer only.
   Font kept as Arial here since this is a self-contained legacy component.
   ========================================================================== */

/* ---------- sf.gov-style dark footer ----------
   Matches sf.gov pattern: dark navy bg, white text/links
   SFDS tokens: Slate L4 #002B48 (bg), white text, 14px/18px small */

#sf_footer {
	margin: 0;
	padding: 24px 20px 28px;
	font-size: 14px;
	line-height: 18px;
	text-align: center;
	clear: both;
	background-color: #002B48;  /* SFDS Slate L4 — matches sf.gov footer */
	color: #ffffff;
}
#sf_footer:after {
	content: "";
	display: block;
	clear: both;
}
#sf_footer nav {
	text-align: center;
	margin-bottom: 12px;
}
#sf_footer nav a {
	color: #ffffff;
	text-decoration: none;
}
#sf_footer nav a:hover,
#sf_footer nav a:focus {
	text-decoration: underline;
}
#sf_footer .bar {
	color: #5A7A92;        /* SFDS Slate L2 — subtle separator */
	padding: 0 2px;
}

.sf-footer-copyright {
	font-size: 14px;
	line-height: 18px;
	width: 100% !important;
	padding-top: 8px;
	display: block !important;
	text-align: center !important;
	clear: both !important;
	float: none !important;
	margin: 0 auto !important;
	color: #ffffff;
}
.sf-footer-copyright a {
	color: #ffffff;
	text-decoration: none;
	display: inline-block !important;
	float: none !important;
	margin: 0 auto !important;
}
.sf-footer-copyright a:hover,
.sf-footer-copyright a:focus {
	text-decoration: underline;
}


/* ==========================================================================
   3. LEGACY LAYOUT — fixed-width container + header banner image
   No SFDS equivalent for this fixed 972px layout.
   NOTE: font-family, font-size, color REMOVED — now inherits from SFDS.
   ========================================================================== */

.header {
	background: transparent url(images/sfgov_headerimage.jpg) no-repeat scroll center top;
	clear: both;
	height: 98px;
	margin: 0;
	margin-top: 20px;
}

/* Sticky footer — push #sf_footer to bottom of viewport regardless of content height */
#Form1 {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.width_container {
	flex: 1;
	padding-top: 35px;
	background: white url(images/nav_backg.gif) top left repeat-x;
	border-left: 1px solid #CCCCCC;
	border-right: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	width: 972px;
	margin: 0 auto;
	text-align: left;
	/* REMOVED: font-family, font-size, color — now from SFDS */
}

.width_container table img { margin: 0 10px 10px 10px; }

/* REMOVED: .width_container table { font-size:11pt }
   — SFDS body text (16px/24px) applies via inheritance */

/* REMOVED: .width_container, .width_container td/th/p/select/li/ul/input/blockquote/textarea
   { font-family: Arial; font-size: 11pt; line-height:1.5; color: #6a655c }
   — All now inherit SFDS Rubik 16px/24px #212123 */


/* ==========================================================================
   4. FOCUS STYLES — kept (stronger than SFDS 2px dotted grey)
   SFDS default: outline: 2px dotted #A1A1A1; outline-offset: 3px
   Legacy:       outline: 3px solid #1e88e5;  outline-offset: 2px  ← better
   ========================================================================== */

a:focus, a:focus-visible,
button:focus, button:focus-visible,
input:focus, input:focus-visible,
select:focus, select:focus-visible,
textarea:focus, textarea:focus-visible {
	outline: 3px solid #1e88e5;
	outline-offset: 2px;
}


/* ==========================================================================
   5. SKIP-LINK + FIELD-LABEL — accessibility helpers
   ========================================================================== */

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: #ffffff;
	color: #002B48;        /* SFDS Slate L4 (was #0b1f2a) */
	border: 2px solid #495ED4;  /* SFDS action blue (was #1e88e5) */
	padding: 8px 12px;
	z-index: 10000;
	text-decoration: none;
}
.skip-link:focus,
.skip-link:focus-visible {
	left: 16px;
	top: 16px;
}

.field-label {
	font-weight: bold;
	color: #1D4D70;  /* SFDS Slate L3 (was #1f3b57) */
}


/* ==========================================================================
   REMOVED RULES — documented here for reference
   ========================================================================== */

/* REMOVED: body { border:none; margin:0; padding:0; background:#EDF5F7; text-align:center }
   — SFDS base.css resets margin/padding; background deferred to SFDS (white) */

/* REMOVED: a img { border:0 }
   — SFDS base reset handles this */

/* REMOVED: #sf_footer a, .width_container a { color:#005ea2 }
   — SFDS text-action (#495ED4) is the standard link color */

/* REMOVED: #sf_footer a:hover, .width_container a:hover { text-decoration:underline }
   — SFDS handles link hover via utility classes */

/* REMOVED: .sr-only { ... }
   — SFDS provides identical sr-only utility class */