/* ==========================================
OFFICIAL YOGI STUDIO
RESPONSIVE STYLES
========================================== */

/* ==========================================
LARGE DESKTOP
========================================== */

@media (max-width: 1399px) {


.container{

	max-width:1140px;

}


}

/* ==========================================
DESKTOP / LAPTOP
========================================== */

@media (max-width: 1199px) {


.container{

	max-width:960px;

}


.site-header .container{

	gap:25px;

}


.site-nav{

	gap:18px;

}


.hero-title{

	font-size:clamp(3rem,6vw,5rem);

}


.section-title{

	font-size:clamp(2rem,4vw,3.2rem);

}


.site-footer-grid{

	grid-template-columns:
	1.4fr
	1fr
	1fr;

	gap:40px;

}


}

/* ==========================================
TABLET LANDSCAPE
========================================== */

@media (max-width: 991px) {


html{

	scroll-padding-top:80px;

}


.container{

	max-width:720px;

}


/* Header */

.site-header{

	min-height:76px;

}


.site-header .container{

	min-height:76px;

	flex-wrap:wrap;

}


.navbar-brand img{

	max-height:46px;

}


.site-nav{

	width:100%;

	justify-content:center;

	order:3;

	padding:13px 0 15px;

	border-top:
	1px solid rgba(255,255,255,.07);

}


.site-nav a{

	font-size:.82rem;

}


/* Hero */

.hero{

	min-height:650px;

	padding:150px 0 90px;

}


.page-hero{

	min-height:500px;

	padding:150px 0 90px;

}


.hero-content{

	max-width:760px;

}


.hero-title{

	font-size:clamp(2.8rem,8vw,4.8rem);

}


.hero-description{

	max-width:650px;

	font-size:1.05rem;

}


/* Sections */

.section{

	padding:80px 0;

}


.section-header{

	margin-bottom:45px;

}


.section-description{

	max-width:680px;

}


/* Grids */

.grid-4{

	grid-template-columns:
	repeat(2,1fr);

}


.grid-3{

	grid-template-columns:
	repeat(2,1fr);

}


/* Footer */

.site-footer{

	padding-top:70px;

}


.site-footer-grid{

	grid-template-columns:
	repeat(2,1fr);

}


.site-footer-brand{

	grid-column:1/-1;

	max-width:650px;

}


/* Buttons */

.btn{

	padding:13px 23px;

}


/* General */

.desktop-only{

	display:none !important;

}


.tablet-hidden{

	display:none !important;

}


}

/* ==========================================
TABLET / LARGE MOBILE
========================================== */

@media (max-width: 767px) {


html{

	font-size:15px;

}


body{

	overflow-x:hidden;

}


.container{

	width:100%;

	max-width:540px;

	padding-right:20px;

	padding-left:20px;

}


/* Header */

.site-header{

	position:relative;

	min-height:auto;

}


.site-header .container{

	min-height:70px;

	flex-direction:column;

	justify-content:center;

	gap:10px;

	padding-top:12px;

	padding-bottom:0;

}


.navbar-brand{

	display:flex;

	justify-content:center;

}


.navbar-brand img{

	max-height:42px;

}


.site-nav{

	width:100%;

	display:flex;

	justify-content:center;

	flex-wrap:wrap;

	gap:7px 13px;

	padding:11px 0 13px;

}


.site-nav a{

	font-size:.77rem;

	line-height:1.5;

}


.site-nav a::after{

	display:none;

}


/* Hero */

.hero{

	min-height:600px;

	padding:110px 0 75px;

}


.page-hero{

	min-height:430px;

	padding:105px 0 70px;

}


.hero-content,

.page-hero-content{

	width:100%;

	padding-right:5px;

	padding-left:5px;

}


.hero-title{

	font-size:clamp(2.35rem,11vw,3.7rem);

	line-height:1.12;

}


.page-hero .hero-title{

	font-size:clamp(2.15rem,10vw,3.2rem);

}


.hero-description{

	font-size:1rem;

	line-height:1.75;

}


.section-subtitle{

	font-size:.73rem;

	letter-spacing:1.8px;

}


/* Sections */

.section{

	padding:65px 0;

}


.section-dark,

.section-light{

	padding:65px 0;

}


.section-header{

	margin-bottom:35px;

}


.section-title{

	font-size:clamp(1.9rem,9vw,2.8rem);

	line-height:1.2;

}


.section-description{

	font-size:.96rem;

	line-height:1.75;

}


.gold-divider{

	margin:18px auto;

}


/* Buttons */

.hero-buttons,

.section-buttons,

.music-buttons{

	flex-direction:column;

	align-items:stretch;

	width:100%;

}


.btn{

	width:100%;

	min-height:48px;

	display:inline-flex;

	align-items:center;

	justify-content:center;

	padding:13px 20px;

}


/* Grids */

.grid-4,

.grid-3,

.grid-2{

	grid-template-columns:1fr;

	gap:20px;

}


/* Cards */

.card{

	padding:25px;

	border-radius:15px;

}


/* Images */

img{

	max-width:100%;

	height:auto;

}


/* Footer */

.site-footer{

	padding-top:60px;

}


.site-footer-grid{

	grid-template-columns:1fr;

	gap:35px;

}


.site-footer-brand{

	grid-column:auto;

}


.site-footer-title{

	margin-bottom:16px;

}


.footer-bottom{

	flex-direction:column;

	justify-content:center;

	gap:12px;

	padding:20px 0;

	text-align:center;

}


.footer-socials{

	justify-content:center;

}


/* Utilities */

.mobile-hidden{

	display:none !important;

}


.mobile-center{

	text-align:center !important;

}


.mobile-full-width{

	width:100% !important;

}


}

/* ==========================================
SMALL MOBILE
========================================== */

@media (max-width: 575px) {


.container{

	padding-right:16px;

	padding-left:16px;

}


/* Header */

.site-header .container{

	padding-right:12px;

	padding-left:12px;

}


.site-nav{

	gap:6px 10px;

}


.site-nav a{

	font-size:.72rem;

}


/* Hero */

.hero{

	min-height:540px;

	padding-top:90px;

	padding-bottom:60px;

}


.page-hero{

	min-height:390px;

	padding-top:80px;

	padding-bottom:60px;

}


.hero-title{

	font-size:2.25rem;

}


.page-hero .hero-title{

	font-size:2rem;

}


.hero-description{

	font-size:.94rem;

}


/* Sections */

.section,

.section-dark,

.section-light{

	padding:55px 0;

}


.section-title{

	font-size:1.8rem;

}


.section-description{

	font-size:.93rem;

}


/* Buttons */

.btn{

	font-size:.86rem;

}


/* Cards */

.card{

	padding:22px 18px;

}


/* Footer */

.site-footer{

	padding-top:50px;

}


.site-footer-description{

	font-size:.9rem;

}


.footer-links a{

	font-size:.9rem;

}


}

/* ==========================================
VERY SMALL MOBILE
========================================== */

@media (max-width: 380px) {


html{

	font-size:14px;

}


.site-nav{

	gap:5px 8px;

}


.site-nav a{

	font-size:.68rem;

}


.hero-title{

	font-size:2.05rem;

}


.page-hero .hero-title{

	font-size:1.85rem;

}


.section-title{

	font-size:1.65rem;

}


.btn{

	padding-right:14px;

	padding-left:14px;

	font-size:.8rem;

}


}

/* ==========================================
LANDSCAPE MOBILE
========================================== */

@media
(max-height:600px)
and
(orientation:landscape) {


.hero{

	min-height:520px;

	padding-top:100px;

	padding-bottom:60px;

}


.page-hero{

	min-height:390px;

	padding-top:90px;

	padding-bottom:50px;

}


}

/* ==========================================
TOUCH DEVICES
========================================== */

@media (hover:none) {


.post-card:hover,

.card:hover,

.category-feature-card:hover{

	transform:none;

}


.post-card:hover .post-card-image img{

	transform:none;

}


}

/* ==========================================
REDUCED MOTION
========================================== */

@media (prefers-reduced-motion:reduce) {


*,

*::before,

*::after{

	scroll-behavior:auto !important;

	transition-duration:.01ms !important;

	animation-duration:.01ms !important;

	animation-iteration-count:1 !important;

}


}

/* ==========================================
PRINT
========================================== */

@media print {


.site-header,

.site-footer,

.blog-sidebar,

.post-navigation,

.related-posts,

.comments-area,

.comment-respond,

.blog-cta-section,

.social-links,

.btn,

.navigation.pagination{

	display:none !important;

}


body{

	background:#ffffff !important;

	color:#000000 !important;

}


.article-content,

.article-content h2,

.article-content h3,

.article-content h4{

	color:#000000 !important;

}


.single-post-header{

	padding:30px 0;

	background:#ffffff !important;

	border:none;

}


.single-post-title{

	color:#000000 !important;

	font-size:2.2rem;

}


a{

	color:#000000 !important;

	text-decoration:underline;

}


.article-layout{

	display:block;

}


.article-content{

	max-width:none;

	font-size:11pt;

	line-height:1.6;

}


}




/* ==========================================================
DESKTOP SINGLE-ARTICLE LAYOUT FIX
========================================================== */

@media (min-width:992px){


/* ------------------------------------------------------
ARTICLE LAYOUT
------------------------------------------------------ */

.single-post .site-main,
.single-post main{
	padding-top:50px;
}


/* ------------------------------------------------------
FEATURED IMAGE
Prevent oversized images from filling the screen
------------------------------------------------------ */

.single-post .post-thumbnail,
.single-post .featured-image,
.single-post .entry-thumbnail{
	display:block;
	width:100%;
	max-width:900px;
	height:420px;
	margin:0 auto 40px;
	overflow:hidden;
	border-radius:4px;
}


.single-post .post-thumbnail img,
.single-post .featured-image img,
.single-post .entry-thumbnail img{
	display:block;
	width:100%;
	height:100%;
	max-width:100%;
	object-fit:cover;
	object-position:center;
}


/* Prevent WordPress images from escaping the content area */

.single-post .entry-content img{
	max-width:100%;
	height:auto;
}


/* ------------------------------------------------------
ARTICLE TITLE
------------------------------------------------------ */

.single-post .entry-header{
	max-width:900px;
	margin-right:auto;
	margin-left:auto;
	padding-top:15px;
}


.single-post .entry-title{
	max-width:900px;
	margin-right:auto;
	margin-bottom:18px;
	margin-left:auto;
	font-size:2.4rem;
	line-height:1.18;
}


/* ------------------------------------------------------
CATEGORY LINKS
Keep beside metadata and make clickable
------------------------------------------------------ */

.single-post .entry-meta,
.single-post .post-meta{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:8px 14px;
	max-width:900px;
	margin-right:auto;
	margin-bottom:28px;
	margin-left:auto;
}


.single-post .entry-meta a,
.single-post .post-meta a,
.single-post .cat-links a,
.single-post .post-categories a{
	display:inline-flex;
	align-items:center;
	position:relative;
	z-index:5;
	padding:5px 10px;
	color:#d4af37 !important;
	font-size:.72rem;
	font-weight:600;
	line-height:1.3;
	text-decoration:none;
	letter-spacing:.7px;
	text-transform:uppercase;
	background:rgba(212,175,55,0.08);
	border:1px solid rgba(212,175,55,0.28);
	border-radius:2px;
	pointer-events:auto !important;
	cursor:pointer;
	transition:
		color .25s ease,
		background .25s ease,
		border-color .25s ease;
}


.single-post .entry-meta a:hover,
.single-post .post-meta a:hover,
.single-post .cat-links a:hover,
.single-post .post-categories a:hover{
	color:#111111 !important;
	background:#d4af37;
	border-color:#d4af37;
}


/* Keep category list horizontal */

.single-post .cat-links,
.single-post .post-categories{
	display:inline-flex;
	flex-wrap:wrap;
	align-items:center;
	gap:7px;
	margin:0;
	padding:0;
	list-style:none;
}


.single-post .post-categories li{
	display:inline-block;
	margin:0;
	padding:0;
}


/* ------------------------------------------------------
ARTICLE CONTENT WIDTH
------------------------------------------------------ */

.single-post .entry-content{
	max-width:820px;
	margin-right:auto;
	margin-left:auto;
}


}