/*
Theme Name: Monk
Theme URI: https://github.com/chethanrt/themonk
Author: Impelsys
Description: Custom theme for the Monk WordPress site.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: monk
*/

@font-face {
  font-family: 'Sailec Bold';
  src: url('assets/fonts/Sailec-Bold.ttf') format('truetype');
  font-display: swap;
}

:root {
  --site-gold:       #FFC600;
  --site-yellow:     #FED719;
  --site-ink:        #02021B;
  --site-footer-ink: #03041B;
  --site-max:        1232px;
  --site-gutter:     16px;
  --site-font:       'Poppins', 'Sailec Bold', 'Helvetica Neue', Arial, sans-serif;
}

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

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  background: var(--site-ink);
}
.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 76px;
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 0 var(--site-gutter);
  box-sizing: border-box;
}
.site-logo {
  font-family: var(--site-font);
  font-weight: 700;
  font-size: 26px;
  color: #FFFFFF;
  letter-spacing: -0.5px;
  text-decoration: none;
}

/* Below 970px the nav is an off-canvas panel: fixed, sliding in from the
   left behind a scrim. Above it, the 970px breakpoint below flattens it
   back into an inline row. visibility (not display) does the hiding, so
   it still animates and keeps links out of the tab order while shut. */
.site-nav {
  position: fixed;
  top: 0;
  left: -100%;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  max-width: 350px;
  height: 100vh;
  height: 100dvh;
  padding: 76px 20px 28px;
  box-sizing: border-box;
  background: var(--site-ink);
  box-shadow: 0 15px 15px rgba(0, 0, 0, 0.18);
  overflow-y: auto;
  visibility: hidden;
  transition: left 0.3s ease, visibility 0s linear 0.3s;
}
.site-header.is-nav-open .site-nav {
  left: 0;
  visibility: visible;
  transition: left 0.3s ease;
}
.site-nav-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav-menu li { list-style: none; }
.site-nav-menu a {
  display: block;
  font-family: var(--site-font);
  font-weight: 500;
  font-size: 16px;
  color: #FFFFFF;
  text-decoration: none;
  padding: 12px 10px;
  border-radius: 5px;
}
.site-nav-menu a:hover { background: rgba(255, 255, 255, 0.08); }
.site-nav-menu .current-menu-item > a,
.site-nav-menu .current-menu-ancestor > a { font-weight: 700; color: var(--site-gold); }

.site-nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(2, 2, 27, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.site-header.is-nav-open .site-nav-scrim {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease;
}

.site-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-contact-btn {
  font-family: var(--site-font);
  font-weight: 700;
  font-size: 14px;
  color: #000000;
  background: var(--site-gold);
  border-radius: 5px;
  padding: 10px 16px;
  text-decoration: none;
  white-space: nowrap;
}
.site-contact-btn:hover { background: var(--site-yellow); }

/* Three bars from one span: the element is the middle one, the pseudo
   elements are the outer two. */
.site-nav-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #FFFFFF;
  cursor: pointer;
}
.site-nav-toggle-bars,
.site-nav-toggle-bars::before,
.site-nav-toggle-bars::after {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.site-nav-toggle-bars::before,
.site-nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 9px;
}
.site-nav-toggle-bars::before { top: 13px; }
.site-nav-toggle-bars::after  { top: 25px; }

.site-nav-close {
  position: absolute;
  top: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  cursor: pointer;
}
.site-nav-close:hover { background: rgba(255, 255, 255, 0.2); }
.site-nav-close svg { display: block; }

/* The open nav panel freezes the page behind it. */
html.site-nav-open { overflow: hidden; }
html.site-nav-open body { padding-right: var(--site-scrollbar, 0px); }
html.site-nav-open .site-header { padding-right: var(--site-scrollbar, 0px); }

@media (min-width: 970px) {
  .site-nav-toggle,
  .site-nav-close,
  .site-nav-scrim { display: none; }

  /* Back to an inline row — undo every off-canvas property above. */
  .site-nav {
    position: static;
    z-index: auto;
    flex-direction: row;
    gap: 28px;
    width: auto;
    max-width: none;
    height: auto;
    padding: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
    visibility: visible;
    transition: none;
  }
  .site-nav-menu { flex-direction: row; gap: 28px; }
  .site-nav-menu a { padding: 0; }
  .site-nav-menu a:hover { background: none; }
  .site-contact-btn { padding: 12px 22px; font-size: 15px; }
}

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

.site-footer { background: var(--site-footer-ink); }
.site-footer-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 28px var(--site-gutter);
  box-sizing: border-box;
}
.site-footer-brand {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.site-footer .site-logo { font-size: 22px; }
.site-footer-tag {
  font-family: var(--site-font);
  font-size: 15px;
  color: #FFFFFF;
}
.site-footer-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer-menu li { list-style: none; }
.site-footer-menu a {
  font-family: var(--site-font);
  font-size: 15px;
  color: #FFFFFF;
  text-decoration: none;
}
.site-footer-menu .current-menu-item > a { font-weight: 700; color: var(--site-yellow); }

@media (min-width: 1024px) {
  .site-footer-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 20px var(--site-gutter);
  }
}