/*
Theme Name:   Satelite Accessible
Theme URI:    http://clapat.ro/themes/satelite-wordpress/
Description:  Accessibility child theme for Satelite. Adds a skip link, landmarks, headings, form labels, keyboard support for the menu, sidebar, filters and sliders, visible focus, a pause control for motion, and colour-contrast fixes (WCAG 2.0 / 2.1 level AA).
Author:       Accessibility child theme
Template:     satelite
Version:      1.0.2
License:      GNU General Public License v3 or later
License URI:  http://www.gnu.org/licenses/gpl-3.0.html
Text Domain:  satelite-child
*/

/* ==========================================================================
   1. Screen-reader text, skip link, motion toggle
   The parent theme sets .screen-reader-text { display:none }, which hides it
   from screen readers too. This is the standard visually-hidden pattern.
   ========================================================================== */

.screen-reader-text,
.hero-title .screen-reader-text,
.page-title .screen-reader-text,
.main-title .screen-reader-text {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	-webkit-clip-path: inset(50%) !important;
	clip-path: inset(50%) !important;
	display: block !important;
	height: 1px !important;
	width: 1px !important;
	min-width: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	white-space: nowrap !important;
	word-wrap: normal !important;
	opacity: 1 !important;
	transform: none !important;
}

.skip-link.screen-reader-text:focus,
.satelite-motion-toggle:focus {
	clip: auto !important;
	-webkit-clip-path: none !important;
	clip-path: none !important;
	height: auto !important;
	width: auto !important;
	margin: 0 !important;
	overflow: visible !important;
	white-space: normal !important;
	position: fixed !important;
	top: 10px !important;
	left: 10px !important;
	z-index: 100000 !important;
	display: block !important;
	padding: 14px 22px !important;
	background: #000 !important;
	color: #fff !important;
	font: 600 14px/20px 'Poppins', Arial, sans-serif !important;
	text-decoration: none !important;
	border-radius: 3px;
	outline: 3px solid #fff !important;
	outline-offset: 0 !important;
	box-shadow: 0 0 0 6px #000 !important;
}

/* The "pause motion" button is the second stop in the tab order, hidden until focused. */
.satelite-motion-toggle {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	border: 0;
	white-space: nowrap;
	cursor: pointer;
}

#main:focus,
[role="main"]:focus {
	outline: none !important;
	box-shadow: none !important;
}

/* ==========================================================================
   2. Visible keyboard focus (WCAG 2.4.7)
   A two-colour ring (dark + light) is visible on both white and black pages.
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
[role="button"]:focus-visible {
	outline: 2px solid #000 !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 2px #fff !important;
}

.light-content a:focus-visible,
.light-content button:focus-visible,
.light-content input:focus-visible,
.light-content select:focus-visible,
.light-content textarea:focus-visible,
.light-content [tabindex]:not([tabindex="-1"]):focus-visible,
.light-content [role="button"]:focus-visible,
.light-content #menu-burger,
nav.open a:focus-visible,
#sidebar-overlay a:focus-visible,
.classic-menu .flexnav li ul a:focus-visible {
	outline-color: #fff !important;
	box-shadow: 0 0 0 2px #000 !important;
}

/* Fallback for browsers without :focus-visible */
@supports not selector(:focus-visible) {
	a:focus, button:focus, input:focus, select:focus, textarea:focus, [role="button"]:focus {
		outline: 2px solid #000 !important;
		outline-offset: 2px !important;
		box-shadow: 0 0 0 2px #fff !important;
	}
}

/* The full-screen "close filters" area: draw its focus ring inside the viewport. */
#close-sidebar:focus-visible {
	outline-offset: -8px !important;
	box-shadow: none !important;
}

/* Custom buttons need a pointer and should not hide their focus ring when scaled. */
#burger-wrapper,
#open-sidebar-nav,
#open-sidebar,
#backtotop,
#show-filters,
.icon-wrap,
.footer-button {
	cursor: pointer;
}

/* The blog sidebar toggle in the header was hidden on wide screens; keep it
   reachable for keyboard users when it receives focus. */
#open-sidebar-nav:focus-visible {
	opacity: 1 !important;
}

/* Back-to-top is invisible until the page scrolls; show it when focused. */
#backtotop:focus-visible {
	opacity: 1 !important;
	visibility: visible !important;
}

/* ==========================================================================
   3. Menus: open sub-menus for keyboard users (WCAG 2.1.1)
   ========================================================================== */

@media all and (min-width: 1025px) {
	.classic-menu .flexnav li:focus-within > ul {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1 !important;
		visibility: visible;
	}
}

/* ==========================================================================
   4. Duplicate text from CSS "content: attr(data-hover)"
   Hover effects print the same word twice; screen readers and checkers read
   both. The second declaration gives the generated text an empty
   alternative (ignored by browsers that don't support it).
   ========================================================================== */

.classic-menu .flexnav li a span::before {
	content: attr(data-hover);
	content: attr(data-hover) / "";
}
.entry-categories li a span::before,
.entry-tags li a span::before {
	content: attr(data-hover);
	content: attr(data-hover) / "";
}
#filters li a::before {
	content: attr(data-hover);
	content: attr(data-hover) / "";
}
.button-border span::before {
	content: attr(data-hover);
	content: attr(data-hover) / "";
}
#counter-wrap::before {
	content: attr(data-hover);
	content: attr(data-hover) / "";
}

/* ==========================================================================
   5. Headings that replaced <div>s: keep the original look
   ========================================================================== */

h1.hero-title,
h1.error-title,
h1.post-title {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0;
}

/* .light-content h1 { opacity:1; transform:scale(1.05) } in the parent would
   otherwise override the hero title entrance animation. */
.light-content h1.hero-title {
	opacity: 0;
	-webkit-transform: translateY(5vh);
	transform: translateY(5vh);
}
.light-content h1.error-title,
.light-content h1.post-title {
	-webkit-transform: none;
	transform: none;
}

h2.satelite-post-title-heading {
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
	margin: 0;
	padding: 0;
	color: inherit;
}
.light-content h2.satelite-post-title-heading {
	-webkit-transform: none;
	transform: none;
	color: inherit !important;
}

/* "Leave a comment", "1 Comment", "Read also" headings (were list items) */
h2.satelite-meta-heading {
	display: block;
	margin: 0 0 30px;
	padding: 0;
	font-size: 18px;
	line-height: 24px;
	font-weight: 600;
	color: #000;
}
.light-content h2.satelite-meta-heading {
	color: #fff !important;
	-webkit-transform: none;
	transform: none;
}

/* Widget titles: <h5> became <h2>; keep the <h5> size */
h2.satelite-widgettitle {
	font-size: 18px;
	line-height: 28px;
	margin-left: -1px;
}
.light-content h2.satelite-widgettitle {
	-webkit-transform: none;
	transform: none;
}

/* "No posts found" message: <h4> became <h2> */
h2.search_results {
	font-size: 24px;
	line-height: 36px;
}

/* Portfolio captions: <h2>/<h4> became <div> (the link carries the text) */
.item-caption .item-title,
.item-caption .item-cat,
.slide-caption .slide-title,
.slide-caption .slide-cat {
	color: #000;
}
.light-content .item-caption .item-title,
.light-content .item-caption .item-cat,
.light-content .slide-caption .slide-title,
.light-content .slide-caption .slide-cat {
	color: #fff;
}
.slide-caption .slide-title {
	font-weight: 600;
}

/* ==========================================================================
   6. Forms: visible labels (WCAG 1.3.1, 3.3.2)
   ========================================================================== */

.satelite-field-label {
	display: block;
	height: 20px;
	margin: 0 0 4px;
	font-size: 12px;
	line-height: 20px;
	font-weight: 600;
	color: #000;
}
.light-content .satelite-field-label {
	color: #fff;
}
.satelite-field-label ~ .input_label {
	top: 73px;
}
.satelite-field-label .required {
	color: inherit;
}
.satelite-comment-notes {
	clear: both;
	margin-bottom: 20px;
}

/* Input underline: 3:1 against the background (WCAG 2.1 – 1.4.11) */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
textarea {
	border-bottom-color: rgba(0, 0, 0, 0.55) !important;
}
.light-content input[type="text"],
.light-content input[type="email"],
.light-content input[type="search"],
.light-content input[type="url"],
.light-content textarea {
	border-bottom-color: rgba(255, 255, 255, 0.6) !important;
}

/* Placeholders: 4.5:1 */
::placeholder {
	color: #6b6b6b;
	opacity: 1;
}
.light-content ::placeholder {
	color: #a8a8a8;
}

/* ==========================================================================
   7. Colour contrast (WCAG 1.4.3 – 4.5:1 for normal text)
   ========================================================================== */

/* Body text was #777 on white (4.48:1). */
p {
	color: #666;
}

/* Post dates were 45% black (3.3:1). */
.entry-date li a {
	opacity: 0.68;
}

/* Portfolio categories were 30% black/white (2.1:1). */
.below-caption .item-cat {
	opacity: 0.68;
}

/* ==========================================================================
   8. Reduced motion and "pause" mode (WCAG 2.2.2, 2.3.3)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		-webkit-animation-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		-webkit-animation-iteration-count: 1 !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}

.satelite-motion-paused *,
.satelite-motion-paused *::before,
.satelite-motion-paused *::after {
	-webkit-animation-play-state: paused !important;
	animation-play-state: paused !important;
}

/* ==========================================================================
   9. Misc
   ========================================================================== */

/* The decorative custom cursor must never block clicks or hide focus. */
#magic-cursor {
	pointer-events: none;
}

/* Social links: underline on focus so they don't rely on hover effects only. */
.socials a:focus-visible {
	text-decoration: underline;
}

/* ==========================================================================
   10. Footer: copyright and social links only appeared on mouse hover.
   Show them when they receive keyboard focus as well (WCAG 2.1.1, 2.4.7).
   ========================================================================== */

.copyright-wrap:focus-within { transform: translateY(-40px); -webkit-transform: translateY(-40px); }
.copyright-wrap:focus-within .copyright-icon { transform: scale(0) translateY(80px); width: 0; margin: 0; overflow: hidden; }
.copyright-wrap:focus-within .copyright p { opacity: 1; transform: translateY(10px); -webkit-transform: translateY(10px); }
.socials-wrap:focus-within { transform: translateY(-40px); -webkit-transform: translateY(-40px); }
.socials-wrap:focus-within .socials-text { transform: translateY(10px); -webkit-transform: translateY(10px); }
.socials-wrap:focus-within .socials-icon { transform: scale(0) translateY(40px); width: 0; margin: 0; overflow: hidden; }
.socials-wrap:focus-within .socials li { opacity: 1; transform: translateY(10px); -webkit-transform: translateY(10px); }

@media only screen and (max-width: 1024px) {
	.socials-wrap:focus-within { transform: translateY(20px); -webkit-transform: translateY(20px); }
	.copyright-wrap:focus-within { transform: translateY(0); -webkit-transform: translateY(0); }
	.copyright-wrap:focus-within .copyright p { transform: translateY(0); -webkit-transform: translateY(0); }
}

/* Comment date/time was #999 on white (2.85:1). */
.comment-head span {
	color: #666;
}
.light-content .comment-head span {
	color: #aaa;
}

/* Carousel categories were 30% opacity (2.1:1). */
#showcase-carousel .slide-cat {
	opacity: 0.68;
}

/* Sidebar widget links on dark pages were 40% white on #222 (3.7:1). */
.light-content .satelite-sidebar-widget ul li a {
	opacity: 0.7;
}
.satelite-sidebar-widget ul li a:focus-visible {
	opacity: 1;
}

/* ==========================================================================
   11. Page wrapper
   The parent wrapped the whole page (header and footer included) in <main>,
   so screen readers saw no banner or footer and everything as "main".
   The wrapper is now <div class="satelite-main"> and the real main region is
   #main. These rules copy the parent's "main" styles onto the new wrapper.
   ========================================================================== */

.satelite-main {
	overflow: hidden;
	-webkit-transition: background 0.4s ease-in-out 0s;
	transition: background 0.4s ease-in-out 0s;
}
.satelite-main .cd-main-content > div { height: 100%; min-height: 100vh; }
.satelite-main .cd-main-content { width: 100%; }
.satelite-main .cd-main-content.cd-index > div { vertical-align: middle; }
.satelite-main .cd-main-content.cd-index::after { background-color: rgba(64,137,166,0); background-image: -webkit-linear-gradient(bottom,#4089a6,rgba(64,137,166,0)); background-image: linear-gradient(to top,#4089a6,rgba(64,137,166,0)); }
.satelite-main .cd-main-content.cd-index::before { background-color: rgba(64,137,166,0); background-image: -webkit-linear-gradient(top,#4089a6,rgba(64,137,166,0)); background-image: linear-gradient(to bottom,#4089a6,rgba(64,137,166,0)); }
.satelite-main .cd-main-content.cd-about { background-color: #fff; }
.satelite-main .cd-main-content.cd-about > div { padding-top: 50px; }

/* "Comments are closed." was an <h5>; keep its look. */
.satelite-comments-closed {
	font-size: 18px;
	line-height: 28px;
	font-weight: 600;
	color: #000;
}
.light-content .satelite-comments-closed {
	color: #fff;
}

/* ==========================================================================
   12. Outlined titles ("next page" / "next project" / "next post")
   The letters were transparent with a 1px outline, which checkers read as
   1:1 contrast. They are now filled (the look the theme uses on hover).
   ========================================================================== */
.page-title span,
.main-title span,
.post-next a {
	color: #000;
	-webkit-text-stroke-color: transparent;
}
.light-content .page-title span,
.light-content .main-title span,
.light-content .post-next a {
	color: #fff;
	-webkit-text-stroke-color: transparent;
}

/* Icon boxes: <h6> title became <h3>; keep the <h6> look. */
h3.satelite-icon-title {
	font-size: 14px;
	line-height: 24px;
	margin-left: 0;
	margin-bottom: 10px;
}
.light-content h3.satelite-icon-title {
	-webkit-transform: none;
	transform: none;
}
.clapat-icon span.fa {
	position: relative;
	margin-bottom: 0;
	font-size: 24px;
}