/*
Theme Name:			    Ogma Blogger
Theme URI:    		  https://ogma.mysterythemes.com/ogma-blog/
Author:       		  Mystery Themes
Author URI:   		  https://mysterythemes.com/
Description:  		  Ogma Blogger WordPress theme is a stylish and customizable option designed for bloggers who want to create a professional and fun online blog. This theme has a modern and clean design with customizable features that allow you to express your content beautifully. Whether your blog is about lifestyle, travel, or food, a blog theme provides an easy platform to share your stories, photos and videos. It is designed to look good on all devices and you can customize the colors and layout to suit your style. You can also enhance its functionality by adding popular plugins. Overall, if you are looking for a beautiful and user-friendly theme for your WordPress blog, a blog theme is a good choice. Check demo here: https://demo.mysterythemes.com/child-theme/ogma-blogger
Version:            1.0.4
Requires at least:  5.0
Tested up to:       6.5
Requires PHP:       7.2
License:      		  GNU General Public License v3 or later
License URI:  		  http://www.gnu.org/licenses/gpl-3.0.html
Template:     		  ogma-blog
Text Domain:  		  ogma-blogger
Tags:         		  blog, portfolio, news, grid-Layout, one-column, two-columns, three-columns, flexible-header, left-sidebar, right-sidebar, custom-background, custom-colors, custom-logo, custom-menu, featured-images, footer-widgets, full-width-template, post-formats, rtl-language-support, theme-options, sticky-post, threaded-comments, translation-ready, block-styles, wide-blocks

*/

h1,
h2,
h3,
h4,
h5,
h6,
.site-title {
  font-family: 'Work Sans', sans-serif;
  font-weight: 700;
}

body {
  font-family: 'Roboto', sans-serif;
}

.ogma-blog-site-layout--separate #page {
	background: #edf6f9;
}

.archive-content-wrapper .post-thumbnail-wrap {
	border-radius: 0;
}

.ogma-blog-post-content-wrap .post-cats-wrap {
	margin-bottom: -10px;
}

.ogma-blog-post-content-wrap .entry-title a {
	font-size: 26px;
	line-height: 1.5;
	display: block;
}

.archive-content-wrapper .entry-content {
	font-size: 16px;
}

.ogma-blog-post-content-wrap .entry-meta span a {
	font-weight: 500;
}

#site-navigation ul li a {
	font-weight: 400;
	font-size: 18px;
}

.logo-ads-wrapper {
	padding: 30px 0 30px;
}

.widget .entry-title {
	margin: -5px 0 5px;
	font-size: 18px;
}

.ogma-blogger-background-animation {
  background: transparent;
  width: 100%;
}

.ogma-blogger-circles {
  position: fixed;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.ogma-blogger-circles li {
	position: fixed;
	display: block;
	list-style: none;
	width: 20px;
	height: 20px;
	background: rgb(0 121 171 / 30%);
	animation: animate 25s linear infinite;
	bottom: -150px;
	border-radius: 100% !important;
}

.ogma-blogger-circles li:nth-child(1) {
  left: 25%;
  width: 80px;
  height: 80px;
  animation-delay: 0s;
}

.ogma-blogger-circles li:nth-child(2) {
  left: 10%;
  width: 20px;
  height: 20px;
  animation-delay: 2s;
  animation-duration: 12s;
}

.ogma-blogger-circles li:nth-child(3) {
  left: 70%;
  width: 20px;
  height: 20px;
  animation-delay: 4s;
}

.ogma-blogger-circles li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  animation-delay: 0s;
  animation-duration: 18s;
}

.ogma-blogger-circles li:nth-child(5) {
  left: 65%;
  width: 20px;
  height: 20px;
  animation-delay: 0s;
}

.ogma-blogger-circles li:nth-child(6) {
  left: 75%;
  width: 70px;
  height: 70px;
  animation-delay: 3s;
}

.ogma-blogger-circles li:nth-child(7) {
  left: 35%;
  width: 100px;
  height: 100px;
  animation-delay: 7s;
}

.ogma-blogger-circles li:nth-child(8) {
  left: 50%;
  width: 25px;
  height: 25px;
  animation-delay: 15s;
  animation-duration: 45s;
}

.ogma-blogger-circles li:nth-child(9) {
  left: 20%;
  width: 15px;
  height: 15px;
  animation-delay: 2s;
  animation-duration: 35s;
}

.ogma-blogger-circles li:nth-child(10) {
  left: 85%;
  width: 70px;
  height: 70px;
  animation-delay: 0s;
  animation-duration: 11s;
}

.ogma-blogger-circles li:nth-child(11) {
  left: 5%;
  width: 40px;
  height: 40px;
  animation-delay: 0s;
  animation-duration: 11s;
}

.ogma-blogger-circles li:nth-child(12) {
  left: 95%;
  width: 40px;
  height: 40px;
  animation-delay: 0s;
  animation-duration: 11s;
}

@keyframes animate {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
    border-radius: 0;
  }

  100% {
    transform: translateY(-1000px) rotate(720deg);
    opacity: 0;
    border-radius: 50%;
  }

}

#top-header, #masthead, #content, #colophon {
	z-index: 99;
	position: relative;
}

#masthead {
	z-index: 9999;
}

.widget-title {
	font-size: 22px;
	border-left: 6px solid #00796b;
	padding-left: 10px;
	line-height: 22px;
	margin: 10px 0 20px;
}

#ogma-blog-scrollup {
	z-index: 999999;
}

.page-content, .entry-content, .entry-summary {
	margin: 15px 0 0;
	font-size: 16px;
	line-height: 1.7;
}

#colophon .widget.widget_block {
	margin: 0;
	padding: 0;
}

#footer-widget-area {
	padding: 60px 0 40px;
}

.dark-mode #comments h2.comments-title,
.dark-mode .comment-author .fn .url{
	color: #fff;
}

.single.single-posts-layout--two .related-posts-wrapper .entry-title a {
  margin-bottom: 8px;
  line-height: 1.5;
}

/*---------------------------------------------------------------
## Header Layout Two - Logo Left with Button
---------------------------------------------------------------*/

/* Main wrapper */
.header-layout-two .header-layout-two-main-wrapper {
	padding: var(--header-padding-top, 15px) var(--header-padding-right, 20px) var(--header-padding-bottom, 15px) var(--header-padding-left, 20px);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	position: relative;
	z-index: 999;
}

/* Sticky header styles */
.header-layout-two.is-sticky .header-layout-two-main-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	background: #fff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	animation: slideDown 0.3s ease;
	z-index: 9999;
}

.dark-mode .header-layout-two.is-sticky .header-layout-two-main-wrapper {
	background: #212121;
}

/* Sticky header animation */
@keyframes slideDown {
	from {
		transform: translateY(-100%);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/* Placeholder to prevent content jump when header becomes fixed */
.header-layout-two.is-sticky {
	padding-top: var(--sticky-header-height, 70px);
}

/* Slightly reduce padding when sticky for a more compact look */
.header-layout-two.is-sticky .header-layout-two-main-wrapper {
	padding-top: calc(var(--header-padding-top, 15px) * 0.7);
	padding-bottom: calc(var(--header-padding-bottom, 15px) * 0.7);
}

/* Slightly reduce logo size when sticky */
.header-layout-two.is-sticky .header-left-section .custom-logo-link img {
	max-height: calc(var(--logo-height, 50px) * 0.85);
}

.header-layout-two.is-sticky .header-left-section .site-title {
	font-size: calc(var(--logo-text-size, 28px) * 0.9);
}

.header-layout-two .header-layout-two-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

/* Logo section */
.header-layout-two .header-left-section {
	flex: 0 0 auto;
}

.header-layout-two .header-left-section .site-branding {
	margin: 0;
}

.header-layout-two .header-left-section .custom-logo-link img {
	max-height: var(--logo-height, 50px);
	width: auto;
	transition: max-height 0.3s ease;
}

.header-layout-two .header-left-section .site-title {
	font-size: var(--logo-text-size, 28px);
	margin: 0;
	line-height: 1.2;
	transition: font-size 0.3s ease;
}

/* Center section - Navigation */
.header-layout-two .header-center-section {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.header-layout-two .header-center-section #site-navigation {
	margin: 0;
}

.header-layout-two .header-center-section #site-navigation ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: var(--menu-item-gap, 30px);
	transition: gap 0.3s ease;
}

.header-layout-two .header-center-section #site-navigation ul li a {
	text-decoration: none;
	display: inline-block;
	line-height: 32.4px;
	padding-left: 0;
	padding-right: 0;
}

.header-layout-two .header-center-section #site-navigation ul li a .menu-item-text {
	font-size: var(--menu-font-size, 16px);
	font-family: var(--menu-font-family, inherit);
	font-weight: var(--menu-font-weight, 400);
	text-transform: var(--menu-text-transform, none);
	color: var(--menu-font-color, #333333);
	padding: var(--menu-item-padding-y, 10px) var(--menu-item-padding-x, 20px);
	display: inline-block;
	border-radius: var(--menu-border-radius, 25px);
	background-color: transparent;
	transition: all 0.3s ease;
}

.header-layout-two .header-center-section #site-navigation ul li a:hover .menu-item-text {
	color: var(--menu-hover-color, #00796b);
	background-color: var(--menu-hover-bg-color, #f8bbd0);
}

/* Right section - Icons and button */
.header-layout-two .header-right-section {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

.header-layout-two .ogma-blog-icon-elements-wrap {
	display: flex;
	align-items: center;
	gap: 15px;
}

.header-layout-two .custom-button-wrap a {
	padding: var(--button-padding-y, 10px) var(--button-padding-x, 25px);
	border-radius: 5px;
	font-weight: 600;
	text-transform: uppercase;
	font-size: var(--button-font-size, 14px);
	transition: all 0.3s ease, font-size 0.3s ease, padding 0.3s ease;
	white-space: nowrap;
}

.header-layout-two .custom-button-wrap a:hover {
	opacity: 0.9;
	transform: translateY(-2px);
}

/* Mobile menu toggle */
.header-layout-two .ogma-blog-mobile-menu-toggle {
	display: none;
	background: transparent;
	border: none;
	font-size: 32px;
	line-height: 1;
	padding: 5px;
	cursor: pointer;
	color: inherit;
}

.header-layout-two .mobile-only {
	display: none;
}

/* Mobile Sidebar Menu */
.header-layout-two .mobile-sidebar-menu {
	display: none;
}

.header-layout-two .mobile-sidebar-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9998;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.header-layout-two .mobile-sidebar-content {
	position: fixed;
	top: 0;
	left: -280px;
	width: 280px;
	height: 100%;
	background: #fff;
	z-index: 9999;
	padding: 20px;
	overflow-y: auto;
	transition: left 0.3s ease;
	box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}

.dark-mode .header-layout-two .mobile-sidebar-content {
	background: #212121;
}

.header-layout-two .mobile-sidebar-menu.active .mobile-sidebar-overlay {
	opacity: 1;
	visibility: visible;
}

.header-layout-two .mobile-sidebar-menu.active .mobile-sidebar-content {
	left: 0;
}

.header-layout-two .mobile-sidebar-close {
	position: absolute;
	top: 15px;
	right: 15px;
	background: transparent;
	border: none;
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
	padding: 5px;
	color: inherit;
}

.header-layout-two .mobile-navigation {
	margin-top: 50px;
}

.header-layout-two .mobile-menu-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.header-layout-two .mobile-menu-list li {
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.dark-mode .header-layout-two .mobile-menu-list li {
	border-bottom-color: rgba(255, 255, 255, 0.1);
}

.header-layout-two .mobile-menu-list li a {
	display: block;
	text-decoration: none;
}

.header-layout-two .mobile-menu-list li a .menu-item-text {
	display: block;
	padding: var(--menu-item-padding-y, 12px) var(--menu-item-padding-x, 20px);
	margin: 5px 10px;
	font-size: var(--menu-font-size, 16px);
	font-family: var(--menu-font-family, inherit);
	font-weight: var(--menu-font-weight, 400);
	text-transform: var(--menu-text-transform, none);
	color: var(--menu-font-color, #333);
	border-radius: var(--menu-border-radius, 25px);
	background-color: transparent;
	transition: all 0.3s ease;
}

.header-layout-two .mobile-menu-list li a:hover .menu-item-text {
	color: var(--menu-hover-color, #00796b);
	background-color: var(--menu-hover-bg-color, #f8bbd0);
}

.header-layout-two .mobile-menu-list li.menu-item-has-children > a {
	position: relative;
}

.header-layout-two .mobile-menu-list ul.sub-menu {
	list-style: none;
	padding-left: 20px;
	margin: 0;
	display: none;
}

.header-layout-two .mobile-menu-list li.submenu-open > .sub-menu {
	display: block;
}

/* Responsive styles for header layout two */
@media (max-width: 979px) {
	.header-layout-two .mobile-only {
		display: block !important;
	}
	
	.header-layout-two .header-center-section #site-navigation {
		display: none;
	}
	
	.header-layout-two .mobile-sidebar-menu {
		display: block;
	}
	
	/* Mobile layout: hamburger left, logo center, icons right */
	.header-layout-two .header-layout-two-inner {
		display: grid;
		grid-template-columns: auto 1fr auto;
		align-items: center;
		gap: 15px;
	}
	
	/* Mobile specific padding */
	.header-layout-two .header-layout-two-main-wrapper {
		padding-left: var(--mobile-padding-left, 15px);
		padding-right: var(--mobile-padding-right, 15px);
	}
	
	.header-layout-two .header-center-section {
		order: 0;
		justify-content: flex-start;
	}
	
	.header-layout-two .header-left-section {
		order: 1;
		justify-content: center;
		display: flex;
		flex: 1 1 auto;
	}
	
	.header-layout-two .header-left-section .site-branding {
		text-align: center;
	}
	
	.header-layout-two .header-right-section {
		order: 2;
		justify-content: flex-end;
	}
	
	.header-layout-two .custom-button-wrap a {
		padding: 8px 15px;
		font-size: 12px;
	}
	
	.header-layout-two .ogma-blog-icon-elements-wrap {
		gap: 10px;
	}
	
	/* Sticky header adjustments for mobile */
	.header-layout-two.is-sticky .header-layout-two-main-wrapper {
		padding: 10px 15px;
	}
	
	.header-layout-two.is-sticky .header-left-section .custom-logo-link img {
		max-height: 35px;
	}
	
	.header-layout-two.is-sticky .header-left-section .site-title {
		font-size: 20px;
	}
}

@media (max-width: 768px) {
	.header-layout-two .custom-button-wrap a {
		padding: 6px 12px;
		font-size: 11px;
	}
	
	.header-layout-two .ogma-blog-icon-elements-wrap {
		gap: 8px;
	}
	
	.header-layout-two .header-left-section .custom-logo-link img {
		max-height: 40px;
	}
	
	.header-layout-two .header-left-section .site-title {
		font-size: 22px;
	}
}

@media (max-width: 480px) {
	.header-layout-two .custom-button-wrap a .custom-button-bell-icon {
		margin-right: 3px;
	}
	
	.header-layout-two .ogma-blog-icon-elements-wrap {
		gap: 5px;
	}
	
	.header-layout-two .header-left-section .site-title {
		font-size: 20px;
	}
}

@media (max-width:768px) {
.single .ogma-blog-post-content-wrap .entry-title {
	font-size: 24px;
}
.footer-widget:last-child {
	margin-bottom: 0;
}
#footer-widget-area {
	padding-top: 40px;
}
.site-branding {
	margin: 20px 0 20px;
}
}