/* ====================================================================
   Stenographic Institute of WNY - custom overrides (loaded last)
   ==================================================================== */

/* Skip to content link (accessibility) */
.skip-link{
	position:absolute;
	left:-999px;
	top:0;
	z-index:100000;
	background:#c8b499;
	color:#ffffff;
	padding:10px 18px;
	border-radius:0 0 4px 0;
	font-weight:600;
	text-decoration:none;
}
.skip-link:focus{
	left:0;
	color:#ffffff;
	text-decoration:none;
}

/* Visible keyboard focus state on interactive elements */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
.theme-btn:focus,
.navigation > li > a:focus{
	outline:3px solid #8a6d3b;
	outline-offset:2px;
}

/* Career / service blocks: Font Awesome icons in place of template SVGs */
.services-block-two .inner-box .icon-box i{
	font-size:54px;
	line-height:1;
	color:#c8b499;
	transition:color .3s ease;
}
.services-block-two .inner-box:hover .icon-box i{
	color:#ffffff;
}

/* Accent hover on nav links and dropdown items (desktop) */
.main-menu .navigation > li > a:hover,
.main-menu .navigation > li.current > a,
.main-menu .navigation > li > ul > li > a:hover{
	color:#c8b499;
}

/* Content blocks never tight to the page edge at any width */
.auto-container{
	padding-left:15px;
	padding-right:15px;
}

/* Reusable simple content list spacing on text pages */
.content-page .text p{
	margin-bottom:18px;
}
.content-page ul.list-style-one{
	margin-bottom:24px;
}

/* Visually-hidden helpers (screen-reader labels, honeypot) */
.sr-only{
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0,0,0,0);
	white-space:nowrap;
	border:0;
}
.hp-field{
	position:absolute;
	left:-9999px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}

/* Definition-style tables on policy / tuition / calendar pages */
.info-table{
	width:100%;
	border-collapse:collapse;
	margin:0 0 28px;
}
.info-table th,
.info-table td{
	border:1px solid #e6e0d8;
	padding:12px 16px;
	text-align:left;
	vertical-align:top;
}
.info-table th{
	background:#f4efe9;
	color:#333333;
	font-weight:600;
}
.info-table caption{
	text-align:left;
	font-weight:600;
	padding-bottom:8px;
}

/* ====================================================================
   Section backgrounds (moved off inline styles)
   ==================================================================== */
.page-title{ background-image:url(../images/background/page-title-steno.jpg); background-position:center center; }
.page-title:before{ background:linear-gradient(to bottom, rgba(10,23,43,0.84), rgba(31,58,109,0.60)); opacity:1; }
.services-section-two{ background-image:url(../images/background/1.jpg); }
.counter-section .fact-section{ background-image:url(../images/background/2.jpg); }

/* ====================================================================
   Accessible link contrast in body content (tan -> navy)
   ==================================================================== */
.content-page a:not(.theme-btn):not(.btn-pay):not([style]),
.about-section a:not(.theme-btn):not(.btn-pay):not([style]),
.text a:not(.theme-btn):not(.btn-pay):not([style]),
.panel-body a,
.info-table a,
.contact-section .info-column a:not(.theme-btn){
	color:#21407a;
	text-decoration:underline;
}
.content-page a:not(.theme-btn):not(.btn-pay):hover,
.text a:not(.theme-btn):not(.btn-pay):hover,
.panel-body a:hover{ color:#15294f; }

/* Content image to break up text on inner pages */
.page-image{ margin:8px 0 38px; }
.page-image img{ width:100%; height:auto; display:block; border-radius:6px; box-shadow:0 6px 22px rgba(0,0,0,.12); }
.page-image figcaption{ text-align:center; font-size:13px; color:#888; margin-top:8px; }

/* ====================================================================
   Accessibility floating widget (bottom-left, custom-built)
   ==================================================================== */
.a11y-widget{ position:fixed; left:18px; bottom:18px; z-index:99999; }
.a11y-toggle{
	width:52px; height:52px; border-radius:50%; border:none;
	background:#2a4d8c; color:#fff; font-size:24px; cursor:pointer;
	box-shadow:0 2px 10px rgba(0,0,0,.35);
	display:flex; align-items:center; justify-content:center;
}
.a11y-toggle:hover,.a11y-toggle:focus{ background:#21407a; }
.a11y-panel{
	position:absolute; left:0; bottom:64px; width:240px;
	background:#fff; border:1px solid #d8d2c8; border-radius:8px;
	box-shadow:0 6px 24px rgba(0,0,0,.25); padding:14px;
}
.a11y-panel[hidden]{ display:none; }
.a11y-title{ font-size:16px; line-height:1.2; margin:0 0 10px; color:#2a4d8c; }
.a11y-opt,.a11y-reset{
	display:block; width:100%; text-align:left; margin:0 0 8px;
	padding:10px 12px; border:1px solid #cfc8bd; border-radius:5px;
	background:#f6f3ee; color:#333; font-size:14px; cursor:pointer;
}
.a11y-opt[aria-pressed="true"]{ background:#2a4d8c; color:#fff; border-color:#2a4d8c; }
.a11y-reset{ text-align:center; font-weight:600; margin-bottom:0; background:#efe7df; }
.a11y-opt:hover,.a11y-reset:hover{ filter:brightness(.97); }
body.cookie-visible .a11y-widget{ bottom:120px; }

/* Accessibility STATE classes */
body.a11y-bigtext .page-wrapper{ zoom:1.12; }
body.a11y-contrast .page-wrapper{ filter:invert(1) hue-rotate(180deg); }
body.a11y-contrast .page-wrapper img,
body.a11y-contrast .page-wrapper video{ filter:invert(1) hue-rotate(180deg); }
body.a11y-links a{ text-decoration:underline !important; background-color:#fff3a0 !important; color:#1a1a1a !important; }
body.a11y-readable,
body.a11y-readable p, body.a11y-readable li, body.a11y-readable a,
body.a11y-readable h1, body.a11y-readable h2, body.a11y-readable h3,
body.a11y-readable h4, body.a11y-readable h5, body.a11y-readable h6,
body.a11y-readable td, body.a11y-readable th, body.a11y-readable label,
body.a11y-readable input, body.a11y-readable textarea, body.a11y-readable button,
body.a11y-readable .text, body.a11y-readable .sub-title{
	font-family:Arial,"Helvetica Neue",Helvetica,sans-serif !important;
	letter-spacing:.01em;
}

/* ====================================================================
   Cookie consent banner
   ==================================================================== */
.cookie-banner{
	position:fixed; left:0; right:0; bottom:0; z-index:99998;
	background:#232323; color:#f2f2f2; padding:16px 20px;
	box-shadow:0 -2px 12px rgba(0,0,0,.3);
}
.cookie-banner[hidden]{ display:none; }
.cookie-inner{
	max-width:1170px; margin:0 auto; display:flex; align-items:center;
	justify-content:space-between; gap:18px; flex-wrap:wrap;
}
.cookie-text{ margin:0; font-size:14px; line-height:1.5; flex:1 1 460px; }
.cookie-text a{ color:#c8b499; text-decoration:underline; }
.cookie-actions{ display:flex; gap:10px; flex:0 0 auto; }
.cookie-btn{ padding:10px 22px; border:none; border-radius:4px; font-size:14px; font-weight:600; cursor:pointer; }
.cookie-accept{ background:#2a4d8c; color:#fff; }
.cookie-decline{ background:#6b6b6b; color:#fff; }
.cookie-btn:hover{ filter:brightness(1.12); }

/* ====================================================================
   Footer quick-links + HTML sitemap page
   ==================================================================== */
.main-footer .footer-nav-widget ul{ list-style:none; padding:0; margin:0; }
.main-footer .footer-nav-widget ul li{ margin-bottom:8px; }
.main-footer .footer-nav-widget ul li a{ color:#cfc9c0; }
.main-footer .footer-nav-widget ul li a:hover{ color:#c8b499; }
.sitemap-list{ list-style:none; padding:0; margin:0 0 30px; }
.sitemap-list > li{ margin-bottom:12px; font-size:18px; }
.sitemap-list ul{ margin:8px 0 0 24px; list-style:disc; }
.sitemap-list ul li{ font-size:16px; margin-bottom:6px; }

/* ====================================================================
   Homepage intro: plain content area under the hero video (no box,
   no overlap of the hero on desktop)
   ==================================================================== */
.about-section-home{ padding:60px 0 35px; }
.about-section-home .about-details{
	position:static;
	transform:none;
	margin:0 auto;
	max-width:none;
	background:transparent;
	border:0;
	box-shadow:none;
	padding:0;
}

/* ====================================================================
   Call to action band: solid navy (drop the orange texture image)
   ==================================================================== */
.call-to-action{ background-image:none; background-color:#2a4d8c; }

/* ====================================================================
   Counter "1971" number: fit inside its square box
   ==================================================================== */
.fact-section .title-column .title-inner .number{
	font-size:58px;
	line-height:160px;
}

/* ====================================================================
   Pay Tuition button: clean darker green
   ==================================================================== */
.btn-pay{
	display:inline-block;
	background-color:#15722f;
	color:#ffffff;
	padding:13px 30px;
	font-size:15px;
	font-weight:600;
	letter-spacing:.02em;
	border:0;
	border-radius:4px;
	text-decoration:none;
	transition:background-color .2s ease;
}
.btn-pay:hover,
.btn-pay:focus{ background-color:#0f5a24; color:#ffffff; text-decoration:none; }
.btn-pay-lg{ padding:16px 40px; font-size:17px; }

/* ====================================================================
   Dropdown menus: blue background, white text
   ==================================================================== */
.main-menu .navigation > li > ul,
.main-menu .navigation > li > ul > li > ul{ background-color:#2a4d8c; }
.main-menu .navigation > li > ul > li{ border-bottom:1px solid rgba(255,255,255,.14); }
.main-menu .navigation > li > ul > li > a,
.main-menu .navigation > li > ul > li > ul > li > a{ color:#ffffff; }
.main-menu .navigation > li > ul > li:hover > a,
.main-menu .navigation > li > ul > li > a:hover,
.main-menu .navigation > li > ul > li > ul > li:hover > a{ background-color:#1c376b; color:#ffffff; }
@media only screen and (max-width:767px){
	.main-menu .navbar-collapse > .navigation > li > ul,
	.main-menu .navbar-collapse > .navigation > li > ul > li > ul{ background-color:#21407a !important; }
	.main-menu .navbar-collapse > .navigation > li > ul > li > a{ color:#ffffff !important; }
}

/* ====================================================================
   Footer logo: white transparent wordmark on the dark footer
   ==================================================================== */
.main-footer .logo-widget .logo img{ max-width:265px; height:auto; }

/* ====================================================================
   Accessibility: extra state classes + scrollable panel
   ==================================================================== */
.a11y-panel{ max-height:72vh; overflow-y:auto; }
body.a11y-spacing p, body.a11y-spacing li, body.a11y-spacing a,
body.a11y-spacing h1, body.a11y-spacing h2, body.a11y-spacing h3,
body.a11y-spacing h4, body.a11y-spacing h5, body.a11y-spacing h6,
body.a11y-spacing .text, body.a11y-spacing td, body.a11y-spacing th{
	letter-spacing:.12em !important; word-spacing:.16em !important;
}
body.a11y-lineheight p, body.a11y-lineheight li, body.a11y-lineheight .text,
body.a11y-lineheight td, body.a11y-lineheight th{ line-height:2.1 !important; }
body.a11y-grayscale .page-wrapper{ filter:grayscale(1); }
body.a11y-contrast.a11y-grayscale .page-wrapper{ filter:invert(1) hue-rotate(180deg) grayscale(1); }
body.a11y-cursor, body.a11y-cursor *{
	cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'%3E%3Cpath d='M5 2l14 8-6 1 4 7-3 2-4-7-5 5z' fill='%23000' stroke='%23fff' stroke-width='1.3'/%3E%3C/svg%3E") 4 2, auto !important;
}
body.a11y-pause *,
body.a11y-pause *::before,
body.a11y-pause *::after{
	animation-play-state:paused !important;
	transition:none !important;
}

/* ====================================================================
   Crisp navy header logo (replaces the blurry JPG)
   ==================================================================== */
.main-header .header-upper .logo img,
.main-header .logo-outer .logo img{ max-width:330px; height:auto; }
.main-header .sticky-header .logo img{ max-width:260px; height:auto; }

/* ====================================================================
   Footer contact: remove the » arrows before phone, website, socials
   ==================================================================== */
.main-footer .link-widget ul li a:before{ content:none; }
.main-footer .link-widget ul li a{ padding-left:0; }

/* ====================================================================
   Mobile menu: navy theme + more compact (less scrolling)
   ==================================================================== */
@media only screen and (max-width:767px){
	/* Hamburger toggle in brand navy */
	.main-menu .navbar-header .navbar-toggle{
		background-color:#2a4d8c !important;
		border-color:#2a4d8c !important;
	}
	/* Top-level + sub items: navy background, white text */
	.main-menu .navbar-collapse > .navigation > li > a,
	.main-menu .navbar-collapse > .navigation > li > a:hover,
	.main-menu .navbar-collapse > .navigation > li > a:active,
	.main-menu .navbar-collapse > .navigation > li > a:focus,
	.main-menu .navbar-collapse > .navigation > li:hover > a,
	.main-menu .navbar-collapse > .navigation > li.current > a,
	.main-menu .navbar-collapse > .navigation > li.current-menu-item > a{
		background:#2a4d8c !important;
		color:#ffffff !important;
	}
	/* Dropdown sub-items a touch darker navy */
	.main-menu .navbar-collapse > .navigation > li > ul,
	.main-menu .navbar-collapse > .navigation > li > ul > li > ul,
	.main-menu .navbar-collapse > .navigation > li > ul > li > a,
	.main-menu .navbar-collapse > .navigation > li > ul > li > ul > li > a,
	.main-menu .navbar-collapse > .navigation > li > ul > li:hover > a,
	.main-menu .navbar-collapse > .navigation > li > ul > li > ul > li:hover > a{
		background:#21407a !important;
		color:#ffffff !important;
	}
	/* Compact rows so the menu fits with less scrolling */
	.main-menu .navbar-collapse > .navigation > li > a,
	.main-menu .navbar-collapse > .navigation > li > ul > li > a,
	.main-menu .navbar-collapse > .navigation > li > ul > li > ul > li > a{
		padding-top:8px !important;
		padding-bottom:8px !important;
		line-height:20px !important;
	}
	/* Slightly smaller logo on phones so the header bar stays tidy */
	.main-header .header-upper .logo img,
	.main-header .logo-outer .logo img{ max-width:240px; }
}

/* Tighten the mobile header so the menu sits higher (less scrolling) */
@media only screen and (max-width:767px){
	.main-header .logo-outer{ padding-top:14px !important; padding-bottom:8px !important; }
	.main-header .header-upper .upper-right{ margin-top:0 !important; }
}

/* ====================================================================
   Staff / Faculty page
   ==================================================================== */
.staff-member{ margin-bottom:38px; padding-bottom:32px; border-bottom:1px solid #ece7df; }
.staff-member:last-of-type{ border-bottom:0; margin-bottom:0; padding-bottom:0; }
.staff-photo img{
	width:100%; max-width:190px;
	aspect-ratio:147 / 195; object-fit:cover; object-position:top center;
	border:4px solid #ffffff; box-shadow:0 4px 16px rgba(0,0,0,.14);
	border-radius:3px; background:#f1ede8;
}
.staff-member h3{ margin:0 0 2px; }
.staff-title{ color:#2a4d8c; font-weight:600; font-size:16px; margin:0 0 12px; }
.staff-directory-section{ background:#f7f4ef; }
ul.staff-directory{ list-style:none; padding:0; margin:0 0 26px; }
ul.staff-directory li{ padding:7px 0; border-bottom:1px solid #e7e1d7; font-size:15px; line-height:1.5; }
ul.staff-directory li:last-child{ border-bottom:0; }
.staff-directory-section h3{ margin:20px 0 12px; color:#2a4d8c; }

/* ====================================================================
   Secondary outline button (btn-style-six) on LIGHT backgrounds:
   navy outline + navy text (white version stays on dark CTA bands)
   ==================================================================== */
.content-page .btn-style-six,
.contact-section .btn-style-six,
.about-section-home .btn-style-six{
	color:#2a4d8c;
	border-color:#2a4d8c;
}
.content-page .btn-style-six:hover,
.contact-section .btn-style-six:hover,
.about-section-home .btn-style-six:hover{
	background:#2a4d8c;
	border-color:#2a4d8c;
	color:#ffffff;
}

/* ====================================================================
   Contact page embedded Google Map
   ==================================================================== */
.map-section{ margin:0 0 12px; }
.map-outer{ position:relative; border-radius:6px; overflow:hidden; box-shadow:0 4px 16px rgba(0,0,0,.12); }
.cms-map{ display:block; width:100%; height:400px; border:0; }