/* ==========================================
OFFICIAL YOGI STUDIO
MAIN THEME STYLESHEET
========================================== */

/* ==========================================
ROOT VARIABLES
========================================== */

:root{


/* Brand Colors */

--gold:#d4af37;

--gold-light:#ead27a;

--gold-dark:#9d7a18;


/* Background Colors */

--black:#080808;

--black-soft:#0d0d0d;

--dark:#111111;

--dark-light:#181818;

--card:#151515;


/* Text Colors */

--white:#ffffff;

--text:#c8c8c8;

--text-light:#a5a5a5;

--text-muted:#7f7f7f;


/* Borders */

--border:rgba(255,255,255,.09);

--gold-border:rgba(212,175,55,.28);


/* Shadows */

--shadow-sm:
0 8px 25px rgba(0,0,0,.18);

--shadow:
0 18px 55px rgba(0,0,0,.30);

--shadow-gold:
0 15px 45px rgba(212,175,55,.12);


/* Layout */

--container-width:1200px;

--header-height:82px;


/* Border Radius */

--radius-sm:8px;

--radius:14px;

--radius-lg:20px;


/* Transitions */

--transition:
.3s ease;


}

/* ==========================================
RESET
========================================== */

*{


box-sizing:border-box;


}

html{


scroll-behavior:smooth;

scroll-padding-top:90px;


}

body{


margin:0;

padding:0;

background:var(--black);

color:var(--text);

font-family:

"Helvetica Neue",

Arial,

sans-serif;

font-size:16px;

font-weight:400;

line-height:1.65;

overflow-x:hidden;

-webkit-font-smoothing:antialiased;

-moz-osx-font-smoothing:grayscale;


}

img{


max-width:100%;

height:auto;


}

figure{


margin:0;


}

iframe{


max-width:100%;


}

button,

input,

textarea,

select{


font:inherit;


}

button{


cursor:pointer;


}

a{


color:var(--gold);

transition:

color var(--transition),

opacity var(--transition);


}

a:hover{


color:var(--gold-light);


}

::selection{


background:var(--gold);

color:#111111;


}

::-moz-selection{


background:var(--gold);

color:#111111;


}

/* ==========================================
TYPOGRAPHY
========================================== */

h1,

h2,

h3,

h4,

h5,

h6{


margin-top:0;

color:var(--white);

font-family:

Georgia,

"Times New Roman",

serif;

font-weight:700;

line-height:1.25;


}

h1{


font-size:3rem;


}

h2{


font-size:2rem;


}

h3{


font-size:1.2rem;


}

h4{


font-size:1rem;


}

h5{


font-size:0.8rem;


}

h6{


font-size:0.5rem;


}

p{


margin-top:0;

margin-bottom:1.3rem;


}

strong{


color:var(--white);

font-weight:700;


}

small{


font-size:.82rem;


}

blockquote{


margin:0;


}

hr{


height:1px;

margin:40px 0;

background:var(--border);

border:0;


}

/* ==========================================
CONTAINER
========================================== */

.container{


width:100%;

max-width:var(--container-width);

margin-right:auto;

margin-left:auto;

padding-right:20px;

padding-left:20px;


}

/* ==========================================
SITE HEADER
========================================== */

.site-header{


position:relative;

z-index:100;

width:100%;

min-height:var(--header-height);

background:

rgba(8,8,8,.96);

border-bottom:

1px solid rgba(255,255,255,.07);


}

.site-header .container{


min-height:var(--header-height);

display:flex;

align-items:center;

justify-content:space-between;

gap:35px;


}

.navbar-brand{


display:inline-flex;

align-items:center;

flex-shrink:0;

text-decoration:none;


}

.navbar-brand img{


width:auto;

max-height:50px;

display:block;


}

/* ==========================================
SITE NAVIGATION
========================================== */

.site-nav{


display:flex;

align-items:center;

justify-content:flex-end;

flex-wrap:wrap;

gap:25px;


}

.site-nav a{


position:relative;

padding:7px 0;

color:#c7c7c7;

font-size:.88rem;

font-weight:600;

letter-spacing:.2px;

text-decoration:none;

white-space:nowrap;


}

.site-nav a::after{


content:"";

position:absolute;

right:0;

bottom:0;

left:0;

height:2px;

background:var(--gold);

transform:scaleX(0);

transform-origin:center;

transition:transform .3s ease;


}

.site-nav a:hover,

.site-nav a.active,

.site-nav .current-menu-item > a,

.site-nav .current_page_item > a{


color:var(--white);


}

.site-nav a:hover::after,

.site-nav a.active::after,

.site-nav .current-menu-item > a::after,

.site-nav .current_page_item > a::after{


transform:scaleX(1);


}

/* ==========================================
MAIN CONTENT
========================================== */

.site-main{


min-height:50vh;


}

/* ==========================================
HERO
========================================== */

.hero{


position:relative;

min-height:720px;

display:flex;

align-items:center;

justify-content:center;

padding:150px 0 100px;

background-position:center;

background-size:cover;

background-repeat:no-repeat;

overflow:hidden;

isolation:isolate;


}

.hero::before{


content:"";

position:absolute;

inset:0;

z-index:-2;

background:

linear-gradient(

90deg,

rgba(0,0,0,.90),

rgba(0,0,0,.60),

rgba(0,0,0,.38)

);


}

.hero::after{


content:"";

position:absolute;

right:0;

bottom:0;

left:0;

z-index:-1;

height:45%;

background:

linear-gradient(

to top,

var(--black),

transparent

);


}

.hero-content{


width:100%;

max-width:950px;

text-align:center;


}

.hero-title{


margin:15px 0 22px;

color:var(--white);

font-size:

clamp(

3.2rem,

7vw,

6rem

);

line-height:1.08;

text-shadow:

0 5px 30px

rgba(0,0,0,.50);


}

.hero-description{


max-width:720px;

margin-right:auto;

margin-bottom:0;

margin-left:auto;

color:#d0d0d0;

font-size:1.1rem;

line-height:1.8;


}

/* ==========================================
PAGE HERO
========================================== */

.page-hero{


position:relative;

min-height:520px;

display:flex;

align-items:center;

justify-content:center;

padding:150px 0 100px;

background-position:center;

background-size:cover;

background-repeat:no-repeat;

overflow:hidden;

isolation:isolate;


}

.page-hero::before{


content:"";

position:absolute;

inset:0;

z-index:-2;

background:

linear-gradient(

135deg,

rgba(5,5,5,.93),

rgba(5,5,5,.73)

);


}

.page-hero::after{


content:"";

position:absolute;

right:0;

bottom:0;

left:0;

z-index:-1;

height:45%;

background:

linear-gradient(

to top,

var(--black),

transparent

);


}

.page-hero-content{


width:100%;

max-width:900px;

margin:auto;

padding:0 20px;

text-align:center;


}

.page-hero .hero-title{


font-size:

clamp(

2.8rem,

6vw,

5rem

);


}

/* ==========================================
SECTION
========================================== */

.section{


position:relative;

padding:100px 0;


}

.section-dark{


position:relative;

padding:100px 0;

background:var(--black-soft);


}

.section-light{


position:relative;

padding:100px 0;

background:var(--dark);


}

.section-card{


position:relative;

padding:100px 0;

background:

linear-gradient(

135deg,

#101010,

#17130b

);


}

/* ==========================================
SECTION HEADER
========================================== */

.section-header{


max-width:850px;

margin:0 auto 60px;

text-align:center;


}

.section-subtitle{


display:inline-block;

color:var(--gold);

font-size:.78rem;

font-weight:700;

letter-spacing:2.2px;

line-height:1.4;

text-transform:uppercase;


}

.section-title{


margin:15px 0 0;

color:var(--white);

font-size:

clamp(

2.2rem,

4.5vw,

3.8rem

);

line-height:1.2;


}

.section-description{


max-width:760px;

margin:22px auto 0;

color:var(--text-light);

font-size:1rem;

line-height:1.85;


}

.gold-divider{


width:65px;

height:2px;

margin:22px auto;

background:

linear-gradient(

90deg,

transparent,

var(--gold),

transparent

);


}

/* ==========================================
BUTTONS
========================================== */

.btn{


min-height:48px;

display:inline-flex;

align-items:center;

justify-content:center;

gap:8px;

padding:13px 26px;

border:1px solid transparent;

border-radius:7px;

font-size:.88rem;

font-weight:700;

letter-spacing:.25px;

line-height:1.2;

text-align:center;

text-decoration:none;

transition:

transform .25s ease,

background .25s ease,

color .25s ease,

border-color .25s ease,

box-shadow .25s ease;


}

.btn:hover{


transform:translateY(-3px);

text-decoration:none;


}

.btn-gold{


background:var(--gold);

border-color:var(--gold);

color:#111111;

box-shadow:

0 8px 25px

rgba(212,175,55,.16);


}

.btn-gold:hover{


background:var(--gold-light);

border-color:var(--gold-light);

color:#111111;

box-shadow:

0 12px 30px

rgba(212,175,55,.25);


}

.btn-outline-gold{


background:transparent;

border-color:

rgba(212,175,55,.65);

color:var(--gold);


}

.btn-outline-gold:hover{


background:var(--gold);

border-color:var(--gold);

color:#111111;


}

.btn-dark{


background:#151515;

border-color:

rgba(255,255,255,.13);

color:var(--white);


}

.btn-dark:hover{


background:#202020;

border-color:var(--gold);

color:var(--gold);


}

.btn-white{


background:var(--white);

border-color:var(--white);

color:#111111;


}

.btn-white:hover{


background:var(--gold-light);

border-color:var(--gold-light);

color:#111111;


}

.hero-buttons,

.section-buttons,

.music-buttons{


display:flex;

align-items:center;

justify-content:center;

flex-wrap:wrap;

gap:15px;

margin-top:32px;


}

/* ==========================================
CARDS
========================================== */

.card{


height:100%;

padding:32px;

background:var(--card);

border:1px solid var(--border);

border-radius:var(--radius);

box-shadow:var(--shadow-sm);

transition:

transform .3s ease,

border-color .3s ease,

box-shadow .3s ease;


}

.card:hover{


transform:translateY(-6px);

border-color:

rgba(212,175,55,.38);

box-shadow:

var(--shadow),

var(--shadow-gold);


}

.card-title{


margin-bottom:13px;

font-size:1.4rem;


}

.card-description{


margin-bottom:0;

color:var(--text-light);

line-height:1.8;


}

/* ==========================================
GRID SYSTEM
========================================== */

.grid{


display:grid;


}

.grid-2{


grid-template-columns:

repeat(

2,

minmax(0,1fr)

);

gap:30px;


}

.grid-3{


grid-template-columns:

repeat(

3,

minmax(0,1fr)

);

gap:28px;


}

.grid-4{


grid-template-columns:

repeat(

4,

minmax(0,1fr)

);

gap:24px;


}

/* ==========================================
VIDEO
========================================== */

.video-wrapper{


position:relative;

width:100%;

padding-top:56.25%;

background:#050505;

border:1px solid var(--border);

border-radius:var(--radius);

overflow:hidden;

box-shadow:var(--shadow);


}

.video-wrapper iframe{


position:absolute;

top:0;

left:0;

width:100%;

height:100%;

border:0;


}

/* ==========================================
FORMS
========================================== */

input,

textarea,

select{


width:100%;

padding:13px 15px;

background:#101010;

border:

1px solid

rgba(255,255,255,.12);

border-radius:8px;

color:var(--white);

outline:none;

transition:

border-color .25s ease,

box-shadow .25s ease;


}

input::placeholder,

textarea::placeholder{


color:#747474;


}

input:focus,

textarea:focus,

select:focus{


border-color:var(--gold);

box-shadow:

0 0 0 3px

rgba(212,175,55,.08);


}

textarea{


min-height:150px;

resize:vertical;


}

label{


display:block;

margin-bottom:8px;

color:#d5d5d5;

font-size:.88rem;

font-weight:600;


}

/* ==========================================
WORDPRESS CONTENT
========================================== */

.entry-content{


color:var(--text);


}

.entry-content::after{


content:"";

display:block;

clear:both;


}

.entry-content > *:first-child{


margin-top:0;


}

.entry-content > *:last-child{


margin-bottom:0;


}

.entry-content a{


color:var(--gold);


}

.entry-content a:hover{


color:var(--gold-light);


}

.entry-content img{


max-width:100%;

height:auto;


}

.entry-content .wp-block-image{


margin:2rem 0;


}

.entry-content .wp-block-image img{


border-radius:12px;


}

.entry-content .wp-block-quote{


margin:2rem 0;

padding:28px;

background:

rgba(212,175,55,.06);

border-left:

4px solid

var(--gold);

border-radius:

0 12px 12px 0;


}

.entry-content .wp-block-quote p{


color:#e2e2e2;

font-size:1.15rem;

font-style:italic;


}

.entry-content .wp-block-quote cite{


color:var(--gold);


}

.entry-content .wp-block-separator{


max-width:100px;

margin:50px auto;

background:var(--gold);

border:0;


}

.entry-content .wp-block-button__link{


padding:13px 25px;

background:var(--gold);

border-radius:7px;

color:#111111;

font-weight:700;

text-decoration:none;


}

.entry-content .wp-block-button__link:hover{


background:var(--gold-light);


}

/* ==========================================
FOOTER
========================================== */

.site-footer{


position:relative;

padding-top:90px;

background:#050505;

border-top:

1px solid

rgba(212,175,55,.13);


}

.site-footer-grid{


display:grid;

grid-template-columns:

1.5fr

1fr

1fr

1fr;

gap:50px;

padding-bottom:65px;


}

.site-footer-brand{


max-width:390px;


}

.footer-logo{


display:inline-flex;

margin-bottom:20px;


}

.footer-logo img{


width:auto;

max-height:50px;


}

.site-footer-description{


margin-bottom:22px;

color:#929292;

font-size:.93rem;

line-height:1.8;


}

.site-footer-title{


margin:0 0 22px;

color:var(--white);

font-family:

"Helvetica Neue",

Arial,

sans-serif;

font-size:.92rem;

font-weight:700;

letter-spacing:1px;

text-transform:uppercase;


}

.footer-links{


margin:0;

padding:0;

list-style:none;


}

.footer-links li{


margin-bottom:11px;


}

.footer-links a{


color:#979797;

font-size:.9rem;

text-decoration:none;


}

.footer-links a:hover{


color:var(--gold);


}

.footer-socials{


display:flex;

align-items:center;

flex-wrap:wrap;

gap:10px;


}

.footer-socials a{


width:40px;

height:40px;

display:inline-flex;

align-items:center;

justify-content:center;

background:#101010;

border:

1px solid

rgba(255,255,255,.10);

border-radius:50%;

color:#c7c7c7;

text-decoration:none;

transition:.25s;


}

.footer-socials a:hover{


background:var(--gold);

border-color:var(--gold);

color:#111111;

transform:translateY(-3px);


}

.footer-bottom{


display:flex;

align-items:center;

justify-content:space-between;

gap:20px;

padding:24px 0;

border-top:

1px solid

rgba(255,255,255,.07);

color:#707070;

font-size:.8rem;


}

.footer-bottom p{


margin:0;


}

.footer-bottom a{


color:#8f8f8f;

text-decoration:none;


}

.footer-bottom a:hover{


color:var(--gold);


}

/* ==========================================
BACK TO TOP
========================================== */

.back-to-top{


position:fixed;

right:25px;

bottom:25px;

z-index:90;

width:46px;

height:46px;

display:flex;

align-items:center;

justify-content:center;

background:var(--gold);

border:0;

border-radius:50%;

color:#111111;

opacity:0;

visibility:hidden;

transform:

translateY(15px);

box-shadow:

0 10px 30px

rgba(0,0,0,.30);

transition:.3s;


}

.back-to-top.show{


opacity:1;

visibility:visible;

transform:

translateY(0);


}

.back-to-top:hover{


background:var(--gold-light);

color:#111111;


}

/* ==========================================
ACCESSIBILITY
========================================== */

.screen-reader-text{


position:absolute;

width:1px;

height:1px;

padding:0;

margin:-1px;

overflow:hidden;

clip:

rect(

0,

0,

0,

0

);

white-space:nowrap;

border:0;


}

.screen-reader-text:focus{


position:fixed;

top:15px;

left:15px;

z-index:9999;

width:auto;

height:auto;

padding:12px 18px;

margin:0;

background:var(--gold);

color:#111111;

clip:auto;

font-weight:700;


}

/* ==========================================
WORDPRESS ADMIN BAR
========================================== */

body.admin-bar .site-header{


top:32px;


}

@media(max-width:782px){


body.admin-bar .site-header{

	top:46px;

}


}



.archive-container {
    max-width: 1140px;
}



/* Category article grid */

.archive .row.g-4 {
    display: flex;
    flex-wrap: wrap;
}

.archive .row.g-4 > [class*="col-"] {
    padding: 12px;
}

@media (min-width: 992px) {

    .archive .col-lg-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

}

@media (min-width: 768px) and (max-width: 991px) {

    .archive .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

}

@media (max-width: 767px) {

    .archive .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

}