/*
Theme Name: Dravix
Author: bdthemes
Author URI: https://bdthemes.com
Description: Dravix is a modern, responsive WordPress theme built with block editor compatibility in mind. It features a clean design, customizable color schemes, and full site editing capabilities.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.0.1
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.en.html
Text Domain: dravix
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations,blog, portfolio, news
*/

a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

/* Header Navigation Styles */
.wp-block-navigation {
  --navigation-layout-justification: flex-end;
  --navigation-layout-direction: row;
  --navigation-layout-wrap: nowrap;
  --navigation-layout-justify: flex-end;
  --navigation-layout-align: center;
}

/* Navigation Items */
.wp-block-navigation .wp-block-navigation-item {
  position: relative;
  margin: 0;
}

.wp-block-navigation .wp-block-navigation-item a {
  color: currentColor;
  text-decoration: none;
  padding: 0.5rem 1rem;
  display: block;
  transition: all 0.2s ease;
}

/* Hover and Focus States */
.wp-block-navigation .wp-block-navigation-item a:hover,
.wp-block-navigation .wp-block-navigation-item a:focus {
  color: var(--wp--preset--color--accent);
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
}

/* Active State */
.wp-block-navigation .wp-block-navigation-item.current-menu-item > a {
  font-weight: 600;
  color: var(--wp--preset--color--accent);
}

/* Mobile Menu Toggle */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  color: currentColor;
  background: transparent;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
}

/* Responsive Navigation */
@media (max-width: 781px) {
  .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
    background: var(--wp--preset--color--background);
    padding: 1.5rem;
  }
  
  .wp-block-navigation .wp-block-navigation-item {
    width: 100%;
    text-align: left;
  }
  
  .wp-block-navigation .wp-block-navigation-item a {
    padding: 0.75rem 0;
  }
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
  outline-width: 2px;
  outline-style: solid;
  outline-color: var(--wp--preset--color--accent);
  outline-offset: 2px;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
caption,
figcaption,
p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

.wp-block-button__link {
	&:hover {
		opacity: 0.9;
	}
}

/* Skip link accessibility styles */
.skip-link {
	position: fixed !important;
	top: -100px !important;
	left: 6px !important;
	background: #000 !important;
	color: #fff !important;
	padding: 8px 16px !important;
	text-decoration: none !important;
	border-radius: 4px !important;
	z-index: 100000 !important;
	transition: top 0.3s ease !important;
	font-weight: bold !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	display: block !important;
	width: auto !important;
	height: auto !important;
	overflow: visible !important;
	cursor: pointer !important;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
	margin: 0 !important;
	border: 0 !important;
	white-space: nowrap !important;
}

.skip-link:focus {
	top: 10px !important;
	outline: 3px solid #005cee !important;
	outline-offset: 2px !important;
	background: #005cee !important;
	color: #fff !important;
}

/* Override any screen-reader-text hiding */
.skip-link.screen-reader-text {
	position: absolute !important;
	top: -100px !important;
	left: 6px !important;
	width: auto !important;
	height: auto !important;
	overflow: visible !important;
	clip: auto !important;
	-webkit-clip-path: none !important;
	clip-path: none !important;
	margin: 0 !important;
	padding: 8px 16px !important;
	background: #000 !important;
	color: #fff !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	border-radius: 4px !important;
	z-index: 100000 !important;
	transition: top 0.3s ease !important;
	font-weight: bold !important;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
	border: 0 !important;
	white-space: nowrap !important;
}

.skip-link.screen-reader-text:focus {
	top: 10px !important;
	outline: 3px solid #005cee !important;
	outline-offset: 2px !important;
	background: #005cee !important;
	color: #fff !important;
}

/* When admin bar is present, adjust positioning */
.admin-bar .skip-link:focus,
.admin-bar .skip-link.screen-reader-text:focus {
	top: 42px !important;
}

/* Mobile responsive adjustments */
@media screen and (max-width: 782px) {
	.skip-link:focus,
	.skip-link.screen-reader-text:focus {
		top: 6px !important;
	}
	
	.admin-bar .skip-link:focus,
	.admin-bar .skip-link.screen-reader-text:focus {
		top: 52px !important;
	}
}

/* Enhanced submenu accessibility styles */
.wp-block-navigation .wp-block-navigation__submenu-container {
	position: absolute;
	z-index: 1000;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 4px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	min-width: 200px;
	padding: 8px 0;
	margin-top: 4px;
}

.wp-block-navigation .wp-block-navigation__submenu-container[aria-hidden="true"] {
	display: none;
}

.wp-block-navigation .wp-block-navigation__submenu-container[aria-hidden="false"] {
	display: block;
}

/* Prevent submenu overlap with content */
.wp-block-navigation .wp-block-navigation-submenu {
	position: relative;
}

.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item {
	margin: 0;
	padding: 4px 16px;
}

.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item a {
	display: block;
	padding: 8px 0;
	color: var(--wp--preset--color--accent-5);
	text-decoration: none;
	transition: color 0.2s ease;
}

.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item a:hover,
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item a:focus {
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--accent-6);
	outline: none;
}

/* Enhanced focus styles */
.has-focus,
*:focus {
	outline: 2px solid var(--wp--preset--color--contrast) !important;
	outline-offset: 2px !important;
}

/* Improved button focus styles */
.wp-block-button__link:focus {
	outline: 2px solid var(--wp--preset--color--base) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 4px var(--wp--preset--color--contrast) !important;
}

/* Navigation focus improvements */
.wp-block-navigation .wp-block-navigation-item__content:focus {
	background-color: var(--wp--preset--color--accent-6);
	border-radius: 4px;
}

/* Mobile menu accessibility */
.wp-block-navigation__responsive-container.is-menu-open {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100000;
	background: var(--wp--preset--color--base);
	overflow-y: auto;
}

/* Ensure main content is focusable for skip links */
#main-content:focus {
	outline: none;
}

/* Screen reader only text */
.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	overflow: hidden;
	padding: 0;
	border: 0;
	margin: -1px;
}

.screen-reader-text:focus {
	position: absolute !important;
	clip: auto;
	-webkit-clip-path: none;
	clip-path: none;
	width: auto;
	height: auto;
	overflow: visible;
	padding: 8px 16px;
	border: 2px solid var(--wp--preset--color--contrast);
	margin: 0;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	z-index: 100000;
}