/* ===== Tokens ===== */
:root{
  --nav-h-desktop: 67px;
  --nav-h-mobile: 60px;
  --container-w: 960px;
  --brand-w: 120px;
  --primary: var(--color-primary, #1C1918);
}

/* ===== Nav base ===== */
.site-nav{
  position: fixed; inset: 0 0 auto 0;
  height: var(--nav-h-desktop);
  background: var(--primary);
  z-index: 100;
}
.site-nav__container{
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 8px 16px;
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
}
.site-nav__brand{ display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; }
.site-nav__logo{ width: var(--brand-w); height:auto; display:block; }

.site-nav__links{
  display:flex; list-style:none; margin:0; padding:0;
}
.site-nav__item{ margin-left:24px; }
.site-nav__link{
  color:#fff; text-decoration:none; font-size:16px; line-height:1;
  transition: opacity .25s ease;
}
.site-nav__link:hover{ opacity:.75; }

.site-nav__toggle{
  display:none;
  width:40px; height:40px; border:0; background:transparent; cursor:pointer;
}
.site-nav__toggle-bar{
  display:block; width:24px; height:2px; background:#fff; margin:3px auto;
}

.site-nav__drawer{
  position: fixed; top:0; right:-100%; height:100vh; width:min(360px, 80%);
  background: rgba(105, 105, 105, 0.5);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: 48px 20px 20px;
  transition: right .4s ease;
  z-index:150;
}
.site-nav__drawer--active{ right:0; }
.site-nav__drawer-list{ list-style:none; margin:0; padding:0; }
.site-nav__drawer-item{ margin:20px 0; }
.site-nav__drawer-link{
  color:var(--color-white); text-decoration:none; font-size:18px; display:block;
}

.site-nav__overlay{
  position: fixed; inset:0;
  background: rgba(0,0,0,.5);
  z-index:120;
}

.site-nav__link--active{ position:relative; }
.site-nav__link--active::after{
  content:""; position:absolute; left:0; right:0; bottom:-10px; height:2px; background:#fff;
}

/* ===== Responsive ===== */
@media (max-width: 768.98px){
  .site-nav{ height: var(--nav-h-mobile); }
  .site-nav__container{ padding: 5px 16px; }
  .site-nav__links{ display:none; }
  .site-nav__toggle{ display:inline-flex; flex-direction:column; align-items:center; justify-content:center; }
}

/* ===== Sections offset ===== */
section[id]{
  scroll-margin-top: var(--nav-h-desktop);
}
@media (max-width: 768.98px){
  section[id]{ scroll-margin-top: var(--nav-h-mobile); }
}

/*---------------------------------------------
# Sections General
---------------------------------------------*/

.post-share{
    display: flex;
    justify-content: center;
    margin: 16px 0;
}
.post-share a {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4px;
    padding: 0px 12px;
    color: var(--color-primary);
    background-color: var(--color-white);
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    overflow: hidden;
}
.post-share i {
    font-size: 24px;
    margin-right: 4px;
}

/*---------------------------------------------
# Footer
---------------------------------------------*/
#footer {
  background: var(--color-primary); 
  padding: 20px 0;
  color: var(--color-white);
}
#footer .container{
  max-width: 900px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  padding: 0 60px;
}
.copyright {
  letter-spacing: 0.05rem;
}
#footer i{
  font-size: 1.5rem;
}
#footer li a:hover{
  color: var(--color-black);
}
@media (max-width: 768px){
  #footer .container{
      flex-direction: column;
      padding: 0;
  }
  .copyright{
    margin-bottom: 20px;
  }
}
/*---------------------------------------------
# Back to top button
---------------------------------------------*/
.back-to-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: 15px;
    z-index: 998;
    background: #CA9553; 
    width: 40px;
    height: 40px;
    border-radius: 50px;
    transition: all 0.4s;
}
.back-to-top:hover {
    background: #A37242;
    color: white;
}
.back-to-top.active {
    visibility: visible;
    opacity: 1;
}
/*---------------------------------------------
# Disable aos animation delay on mobile devices
---------------------------------------------*/
@media screen and (max-width: 768px) {
    [data-aos-delay] {
      transition-delay: 0 !important;
    }
}