/* =========================================================================
   OSTNICA PRO — PREMIUM ENHANCEMENTS
   -------------------------------------------------------------------------
   Loaded last (see inc/core/theme-scripts.php) so it can refine the header,
   the site-wide button system and pagination without needing !important
   on top of the base layout stylesheets. Everything here reads the same
   design tokens (--ostn-*) the Theme Options panel already writes to, so
   changing a color/radius/spacing in Customizer still flows through.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. HEADER
   ------------------------------------------------------------------------- */

#cd_site_header_new.cd_simple_menu_header_container {
	background-color: var(--ostn-header-background, var(--ostn-color-content-background, #fff));
	border-bottom-color: rgba(17, 17, 17, 0.06);
	box-shadow: 0 1px 0 rgba(17, 17, 17, 0.04), 0 12px 24px -20px rgba(17, 17, 17, 0.18);
	transition: box-shadow 0.25s ease, background-color 0.25s ease;
}

/* Sticky mode: fixed header needs the page pushed down by its own height,
   plus a stronger shadow so it reads as "elevated" over scrolling content. */
body.cd-sticky-header-on {
	padding-top: var(--ostn-header-height, 82px);
}

body.cd-sticky-header-on #cd_site_header_new.cd-default-header {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 999;
	width: 100%;
}

body.admin-bar.cd-sticky-header-on #cd_site_header_new.cd-default-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar.cd-sticky-header-on #cd_site_header_new.cd-default-header {
		top: 46px;
	}
}

body.cd-sticky-header-on #cd_site_header_new.cd_simple_menu_header_container {
	box-shadow: 0 1px 0 rgba(17, 17, 17, 0.05), 0 18px 40px -22px rgba(17, 17, 17, 0.28);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	background-color: color-mix(in srgb, var(--ostn-header-background, #fff) 92%, transparent);
}

/* Logo: a touch tighter and bolder reads more like a wordmark than a label. */
#cd_site_header_new .cd-ostnica-text-logo {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.02em;
	display: flex;
	align-items: center;
}

/* Primary nav: soft hover pill instead of a bare underline-only state,
   generous hit target, and a slightly heavier active/hover weight. */
/* Default header navigation.
   Keep the new header clean and prevent legacy pill styling. */
#cd_site_header_new.cd-default-header .cd_simple_menu .main-navigation ul.menu > li > a {
	padding: 8px 12px;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-weight: 600;
	color: var(--ostn-menu-text, #333);
	transition: color 0.2s ease;
}

#cd_site_header_new.cd-default-header .cd_simple_menu .main-navigation ul.menu > li > a:hover,
#cd_site_header_new.cd-default-header .cd_simple_menu .main-navigation ul.menu > li.current-menu-item > a,
#cd_site_header_new.cd-default-header .cd_simple_menu .main-navigation ul.menu > li.current-menu-ancestor > a {
	background: transparent;
	color: var(--ostn-color-accent, #4338ca);
}

#cd_site_header_new.cd-default-header .cd_simple_menu .main-navigation ul.menu > li > a::after {
	left: 12px;
	right: 12px;
	bottom: 1px;
	height: 2px;
}

#cd_site_header_new .cd_simple_menu .main-navigation ul.menu > li > ul.sub-menu {
	padding: 10px;
	border: 1px solid var(--ostn-color-border, #e2e4ea);
	border-radius: var(--ostn-radius-md, 14px);
	background: var(--ostn-color-content-background, #fff);
	box-shadow: var(--ostn-shadow-dropdown, 0 18px 50px rgba(0, 0, 0, 0.08));
}

#cd_site_header_new .cd_simple_menu .main-navigation ul.menu > li > ul.sub-menu a {
	display: block;
	padding: 10px 12px;
	border-radius: var(--ostn-radius-sm, 9px);
}

#cd_site_header_new .cd_simple_menu .main-navigation ul.menu > li > ul.sub-menu a:hover {
	background-color: color-mix(in srgb, var(--ostn-color-accent, #4338ca) 8%, transparent);
}

/* Mobile hamburger trigger: a proper rounded icon button with a hover state
   instead of a flat bordered square. */
#cd_site_header_new .cd-side-menu-click {
	border-radius: var(--ostn-radius-pill, 999px);
	background: var(--ostn-color-background, #f6f6f9);
	border-color: var(--ostn-color-border, #e2e4ea);
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

#cd_site_header_new .cd-side-menu-click:hover {
	background: color-mix(in srgb, var(--ostn-color-accent, #4338ca) 10%, transparent);
	border-color: var(--ostn-color-accent, #4338ca);
	transform: translateY(-1px);
}


/* -------------------------------------------------------------------------
   2. BUTTONS
   -------------------------------------------------------------------------
   Covers every "Read More" variant across the six blog layouts, the blog
   search submit button, and generic WP/theme buttons — all of which are
   already painted by the --ostn-button-primary-* tokens. We only add the
   motion / depth layer here; color, radius and padding stay driven by
   Theme Options so the site owner's changes keep working. */

.ostn-button-primary,
.wp-block-button__link:not(:where(.ostnica-mega-menu-panel *)),
.wp-block-search__button,
button[type="submit"],
input[type="submit"],
.button,
.cd-ostn-blog-search button,
.cd-ostn-grid-bloglist-card-readmore,
.cd-ostn-masonry-bloglist-card-readmore,
.cd-ostn-layout-fullwidth-bloglist-card-readmore,
.cd-ostn-layout-classic-bloglist-card-readmore,
.cd-post-readmore {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 10px 22px -12px color-mix(in srgb, var(--ostn-button-primary-background, var(--ostn-color-accent, #4338ca)) 55%, transparent);
	text-transform: none;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: transform 0.22s var(--ostn-ease, ease), box-shadow 0.22s ease, background-color 0.22s ease, filter 0.22s ease;
}

.ostn-button-primary:hover,
.wp-block-button__link:not(:where(.ostnica-mega-menu-panel *)):hover,
.wp-block-search__button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.button:hover,
.cd-ostn-blog-search button:hover,
.cd-ostn-grid-bloglist-card-readmore:hover,
.cd-ostn-masonry-bloglist-card-readmore:hover,
.cd-ostn-layout-fullwidth-bloglist-card-readmore:hover,
.cd-ostn-layout-classic-bloglist-card-readmore:hover,
.cd-post-readmore:hover {
	transform: translateY(-2px);
	filter: brightness(1.06);
	box-shadow: 0 4px 10px rgba(17, 17, 17, 0.06), 0 16px 28px -14px color-mix(in srgb, var(--ostn-button-primary-background, var(--ostn-color-accent, #4338ca)) 65%, transparent);
}

.ostn-button-primary:active,
.wp-block-button__link:not(:where(.ostnica-mega-menu-panel *)):active,
.wp-block-search__button:active,
button[type="submit"]:active,
input[type="submit"]:active,
.button:active,
.cd-ostn-blog-search button:active,
.cd-ostn-grid-bloglist-card-readmore:active,
.cd-ostn-masonry-bloglist-card-readmore:active,
.cd-ostn-layout-fullwidth-bloglist-card-readmore:active,
.cd-ostn-layout-classic-bloglist-card-readmore:active,
.cd-post-readmore:active {
	transform: translateY(0);
	filter: brightness(0.98);
}

/* Card "Read More" links keep an icon that should nudge forward on hover,
   whichever markup a given layout uses (svg span, <i> arrow, or ::after). */
.cd-ostn-masonry-bloglist-card-readmore-icon,
.cd-ostn-layout-fullwidth-bloglist-card-readmore i,
.cd-ostn-layout-classic-bloglist-card-readmore i,
.cd-post-readmore i {
	transition: transform 0.25s ease;
}

.cd-ostn-layout-fullwidth-bloglist-card-readmore:hover i,
.cd-ostn-layout-classic-bloglist-card-readmore:hover i,
.cd-post-readmore:hover i {
	transform: translateX(4px);
}

/* Secondary / outline button preset. */
.ostn-button-secondary,
.wp-block-button.is-style-outline .wp-block-button__link:not(:where(.ostnica-mega-menu-panel *)) {
	box-shadow: 0 1px 2px rgba(17, 17, 17, 0.03);
	transition: transform 0.22s var(--ostn-ease, ease), box-shadow 0.22s ease, background-color 0.22s ease, border-color 0.22s ease;
}

.ostn-button-secondary:hover,
.wp-block-button.is-style-outline .wp-block-button__link:not(:where(.ostnica-mega-menu-panel *)):hover {
	transform: translateY(-2px);
	border-color: var(--ostn-color-accent, #4338ca);
	color: var(--ostn-color-accent, #4338ca);
	box-shadow: 0 8px 18px -12px rgba(17, 17, 17, 0.18);
}

/* Focus visibility stays crisp on every button variant above. */
.ostn-button-primary:focus-visible,
.ostn-button-secondary:focus-visible,
.wp-block-button__link:not(:where(.ostnica-mega-menu-panel *)):focus-visible,
button[type="submit"]:focus-visible,
input[type="submit"]:focus-visible,
.cd-ostn-blog-search button:focus-visible,
.cd-ostn-grid-bloglist-card-readmore:focus-visible,
.cd-ostn-masonry-bloglist-card-readmore:focus-visible,
.cd-ostn-layout-fullwidth-bloglist-card-readmore:focus-visible,
.cd-ostn-layout-classic-bloglist-card-readmore:focus-visible,
.cd-post-readmore:focus-visible {
	outline: 2px solid var(--ostn-color-accent, #4338ca);
	outline-offset: 3px;
}


/* -------------------------------------------------------------------------
   3. PAGINATION
   -------------------------------------------------------------------------
   One consistent, premium pill pagination for every archive/blog layout
   the theme ships (fullwidth list, classic list, grid, masonry, sidebar
   grid and the legacy custom_pagination() fallback), instead of six
   slightly different black/blue/red box styles. */

.cd-ostn-blog-pagination-inner,
.cd-ostn-bloglist-pagination,
.cd-ostn-grid-bloglist-pagination,
.cd-ostn-masonry-bloglist-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.cd-ostn-blog-pagination .page-numbers,
.cd-ostn-bloglist-pagination .page-numbers,
.cd-ostn-grid-bloglist-pagination .page-numbers,
.cd-ostn-masonry-bloglist-pagination .page-numbers,
.cd-ostn-archive-page .page-numbers,
.cd-ostn-pagination .page-numbers,
.cd_pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid var(--ostn-color-border, #e2e4ea);
	border-radius: var(--ostn-radius-pill, 999px);
	background: var(--ostn-color-content-background, #fff);
	color: var(--ostn-color-text, #3d4150);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(17, 17, 17, 0.03);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease,
		color 0.2s ease, border-color 0.2s ease;
}

.cd-ostn-blog-pagination .page-numbers.dots,
.cd-ostn-bloglist-pagination .page-numbers.dots,
.cd-ostn-grid-bloglist-pagination .page-numbers.dots,
.cd-ostn-masonry-bloglist-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	box-shadow: none;
	color: var(--ostn-color-text-muted, #6b6b6b);
}

.cd-ostn-blog-pagination .page-numbers:not(.dots):hover,
.cd-ostn-bloglist-pagination .page-numbers:not(.dots):hover,
.cd-ostn-grid-bloglist-pagination .page-numbers:not(.dots):hover,
.cd-ostn-masonry-bloglist-pagination .page-numbers:not(.dots):hover,
.cd-ostn-archive-page .page-numbers:hover,
.cd-ostn-pagination .page-numbers:hover,
.cd_pagination .page-numbers:hover {
	transform: translateY(-2px);
	border-color: var(--ostn-color-accent, #4338ca);
	background: var(--ostn-color-accent, #4338ca);
	color: #fff;
	box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--ostn-color-accent, #4338ca) 60%, transparent);
}

.cd-ostn-blog-pagination .page-numbers.current,
.cd-ostn-bloglist-pagination .page-numbers.current,
.cd-ostn-grid-bloglist-pagination .page-numbers.current,
.cd-ostn-masonry-bloglist-pagination .page-numbers.current,
.cd-ostn-archive-page .page-numbers.current,
.cd-ostn-pagination .page-numbers.current,
.cd_pagination .page-numbers.current {
	border-color: var(--ostn-color-accent, #4338ca);
	background: var(--ostn-color-accent, #4338ca);
	color: #fff;
	box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--ostn-color-accent, #4338ca) 60%, transparent);
	cursor: default;
	transform: none;
}

.cd-ostn-blog-pagination .prev.page-numbers,
.cd-ostn-blog-pagination .next.page-numbers,
.cd-ostn-bloglist-pagination .prev.page-numbers,
.cd-ostn-bloglist-pagination .next.page-numbers,
.cd-ostn-grid-bloglist-pagination .prev.page-numbers,
.cd-ostn-grid-bloglist-pagination .next.page-numbers,
.cd-ostn-masonry-bloglist-pagination .prev.page-numbers,
.cd-ostn-masonry-bloglist-pagination .next.page-numbers {
	gap: 8px;
	min-width: auto;
	padding: 0 20px;
	background: var(--ostn-color-background, #f6f6f9);
	border-color: transparent;
	font-weight: 700;
}

.cd-ostn-blog-pagination .prev.page-numbers:hover,
.cd-ostn-blog-pagination .next.page-numbers:hover,
.cd-ostn-bloglist-pagination .prev.page-numbers:hover,
.cd-ostn-bloglist-pagination .next.page-numbers:hover,
.cd-ostn-grid-bloglist-pagination .prev.page-numbers:hover,
.cd-ostn-grid-bloglist-pagination .next.page-numbers:hover,
.cd-ostn-masonry-bloglist-pagination .prev.page-numbers:hover,
.cd-ostn-masonry-bloglist-pagination .next.page-numbers:hover {
	background: var(--ostn-color-accent, #4338ca);
}

.cd-ostn-pagination-arrow {
	transition: transform 0.2s ease;
}

.cd-ostn-blog-pagination .prev.page-numbers:hover .cd-ostn-pagination-arrow:first-child {
	transform: translateX(-3px);
}

.cd-ostn-blog-pagination .next.page-numbers:hover .cd-ostn-pagination-arrow:last-child {
	transform: translateX(3px);
}

.cd-ostn-blog-pagination .page-numbers:focus-visible,
.cd-ostn-bloglist-pagination .page-numbers:focus-visible,
.cd-ostn-grid-bloglist-pagination .page-numbers:focus-visible,
.cd-ostn-masonry-bloglist-pagination .page-numbers:focus-visible {
	outline: 2px solid var(--ostn-color-accent, #4338ca);
	outline-offset: 3px;
}

@media (max-width: 767px) {
	.cd-ostn-blog-pagination .page-numbers,
	.cd-ostn-bloglist-pagination .page-numbers,
	.cd-ostn-grid-bloglist-pagination .page-numbers,
	.cd-ostn-masonry-bloglist-pagination .page-numbers {
		min-width: 40px;
		height: 40px;
		padding: 0 12px;
		font-size: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	#cd_site_header_new.cd_simple_menu_header_container,
	.ostn-button-primary,
	.ostn-button-secondary,
	.cd-ostn-grid-bloglist-card-readmore,
	.cd-ostn-masonry-bloglist-card-readmore,
	.cd-ostn-layout-fullwidth-bloglist-card-readmore,
	.cd-ostn-layout-classic-bloglist-card-readmore,
	.cd-post-readmore,
	.cd-ostn-blog-pagination .page-numbers,
	.cd-ostn-bloglist-pagination .page-numbers,
	.cd-ostn-grid-bloglist-pagination .page-numbers,
	.cd-ostn-masonry-bloglist-pagination .page-numbers {
		transition: none;
	}
}