/* Accessibility layer (WCAG 2.1 AA). Loaded after global.css on every page.
   Desktop appearance is unchanged; everything else applies to keyboard focus,
   screen readers, or screens narrower than the 898px desktop layout. */

/* Skip link: hidden until it receives keyboard focus */
.skip-link{position:absolute; left:-9999px; top:0; z-index:1000; background:#fff; color:#1f4f73; padding:10px 16px; font-size:1.4em; font-weight:bold; border:2px solid #1f4f73;}
.skip-link:focus{left:10px; top:10px;}

/* Text for screen readers only */
.visually-hidden{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

/* Visible keyboard focus (global.css removed all outlines) */
a:focus, button:focus, input:focus, select:focus, textarea:focus, iframe:focus{outline:3px solid #1f6999; outline-offset:2px; box-shadow:0 0 0 5px #fff;}
#content:focus{outline:none; box-shadow:none;}

/* Main menu: show the hover state on keyboard focus, and a high-contrast ring */
#nav ul li a:focus{outline:3px solid #1f4f73; outline-offset:-3px; box-shadow:inset 0 0 0 5px #fff;}
#nav ul li#index a:focus{background-position:left -40px;}
#nav ul li#office > a:focus{background-position:-120px -40px;}
#nav ul li#patient > a:focus{background-position:-290px -40px;}
#nav ul li#services > a:focus{background-position:-527px -40px;}
#nav ul li#contact-us a:focus{background-position:right -40px;}
#nav ul li#office li a:focus, #nav ul li#patient li a:focus, #nav ul li#services li a:focus{background:#ebeae9; color:#000; outline-color:#1f6999;}
#nav ul li.open > ul{display:block !important;}
/* Tabbing onto a menu opens it, so every page is reachable with Tab alone */
#nav ul li:focus-within > ul{display:block !important;}

/* Header testimonial button: give the link a real box so its focus outline shows */
#title > a{display:block; float:right; margin:0;}
#title > a img{display:block;}

/* Links inside page text are underlined so they don't rely on color alone */
#content p a, #content li a, #content td a, h2.footer a{text-decoration:underline;}
ul#gallery li a, ul#pdf li a{text-decoration:none;}

/* Small screens and zoomed-in desktop windows (200% and up) */
@media screen and (max-width: 920px){
	body{background-image:none; background-color:#fff;}
	#container{background:none;}
	#wrapper, #wrapperBtm, #header, #title, #nav, #nav ul, #banner, #contentWrapper, #contentTop, #content, #footer, #footerContent, #footer ul{width:auto !important; max-width:100%; float:none;}
	#wrapper{background:#fff;}
	#wrapperBtm, #contentTop{display:none;}

	/* Header: keep the logo artwork, let the testimonial button drop below on narrow screens */
	#header{height:auto; overflow:hidden;}
	#title{left:0; height:auto; min-height:100px; background-size:auto 100px; background-position:left top;}
	#title > a{display:block; float:none; padding-top:100px; text-align:center;}
	#nav ul li a:focus{outline-color:#ffd54a; box-shadow:none;}
	#nav ul li#office li a:focus, #nav ul li#patient li a:focus, #nav ul li#services li a:focus{outline-color:#1f6999;}
	#title img{float:none; display:inline-block; max-width:100%; height:auto; margin:6px 0;}

	/* Main menu becomes a stacked text menu */
	#nav, #nav ul{height:auto;}
	#nav ul li{float:none; height:auto;}
	#nav > ul > li > a, #nav ul li#index a, #nav ul li#office > a, #nav ul li#patient > a, #nav ul li#services > a, #nav ul li#contact-us a{
		text-indent:0 !important; background:#4a3b2d !important; color:#fff !important; width:auto !important; height:auto !important;
		float:none !important; display:block; padding:12px 16px !important; font-size:1.5em; font-family:Arial, Helvetica, sans-serif; border-top:1px solid #6b5d45;}
	#nav > ul > li.hasSub > a:after{content:" \25BE";}
	#nav ul li ul{position:static; width:auto; padding:0; border:0; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none;}
	#nav ul li ul li{height:auto; line-height:1.4em; font-size:1.2em;}
	#nav ul li#office li a, #nav ul li#patient li a, #nav ul li#services li a{float:none !important; width:auto !important; height:auto !important; padding:12px 16px 12px 30px; line-height:1.4em; background:#fff !important; color:#4a3b2d !important; text-indent:0 !important; display:block;}
	#nav ul li ul{background:#fff;}

	/* Banner: drop the decorative photo, keep the address and phone */
	#banner{height:auto;}
	#banner #bLeft{display:none;}
	#banner #bRight{float:none; width:auto; height:auto; padding:16px; background:#372f22;}

	/* Content columns stack */
	#content{padding:10px 14px; background:none;}
	#left, #right, #main, #snav, .homeLeft, .homeRight{float:none !important; width:auto !important; margin:0 !important;}
	#snav{background:none; top:0; padding:10px 0 0; min-height:0;}
	#snav ul, #snav ul li{width:auto;}
	#content #welcome, #content #welcome h3{width:auto;}
	h1{font-size:2.1em;}

	/* Images and embedded videos scale to the screen */
	img{max-width:100%; height:auto;}
	#content div[style*="540px"]{width:100% !important; height:0 !important; padding-bottom:61%; position:relative;}
	#content div[style*="540px"] iframe{position:absolute; top:0; left:0; width:100%; height:100%;}
	ul#gallery li, ul#smile-gallery li{float:none; width:auto; height:auto; margin:0 0 16px;}
	ul#gallery li img, ul#smile-gallery li img{float:none;}

	/* Forms */
	table, tbody, tr, td{display:block; width:auto !important;}
	table td input, table td textarea, .input_text input, .input_text textarea, input.name, select{width:100% !important; box-sizing:border-box;}
	.col-4, .col-8{width:100% !important; margin:0 0 4px !important;}

	#footer ul li{display:inline-block; padding:4px 10px;}
}

/* Contact form: visible labels and grouped choices */
.main_form fieldset{border:0; margin:0; padding:0; min-width:0;}
.form-label{display:block; font-size:15px; color:#323232; margin:10px 0 4px; font-weight:bold;}
.form-legend{font-size:17px; color:#323232; margin:12px 0 8px; padding:0;}
.form-required-note{font-size:14px; color:#323232; margin:0 0 6px;}
.req{color:#a13838; font-weight:bold;}
._menu_form label span{font-size:17px; margin-right:10px; color:#323232;}
.input_text_p label, .showp label{font-size:15px; color:#323232; margin-right:12px;}
.main_form textarea{width:100%; box-sizing:border-box; padding:6px 12px; font-size:14px; border:1px solid #ccc; border-radius:4px; font-family:Arial, Helvetica, sans-serif;}
.main_form select{font-size:15px; padding:4px;}

/* Footer credit link is underlined so it is not identified by color alone */
#footer #dentalpc a{text-decoration:underline;}

/* Old decorative asterisks replaced by the labelled required markers */
.test_star:after, span.man_op:before{content:none !important;}
span.man_op input[type="radio"]{margin-left:0;}
