/**
 * @file template.css
 * @description
 * =============================================================================
 * Universal Website Template CSS
 * -----------------------------------------------------------------------------
 * - Sticky header
 * - Sidebar with 3-level menu (Level 2 indented, Level 3 muted box)
 * - Hero section
 * - Footer with newsletter & sitemap
 * - Mobile-first responsive
 * =============================================================================
 */

/* ---------------------- Root Variables ---------------------- */
:root {
  --k2-transition1: 0.3s ease;
  --k2-sidebar-width-mobile: 90vw;
  --k2-sidebar-width-desktop: 28vw;
  --k2-z-header: 1000;
  --k2-z-sidebar1: 3000;
  --k2-z-overlay1: 2500;
}

/* ---------------------- Global Reset ---------------------- */
/*
*,
*::before,
*::after { box-sizing: border-box; }

body1 {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background-color: var(--k2-primary-bg);
  color1: var(--k2-text-light);
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; transition: color var(--k2-transition); }
*/

/* ---------------------- Header ---------------------- */
header#site-header {
  position: sticky;
  top: 0;
  z-index: var(--k2-z-base);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 1rem;
  background-color: var(--k2-dark-bg);
  transition: background-color 0.4s ease, opacity 0.4s ease;
}

header#site-header.scrolled {
  /*background-color: rgba(8, 21, 29, 0.85);*/
  background-color1: rgba(255,255,255,0.05);
  backdrop-filter: blur(20px);
}

header#site-header .header-left { display: flex; align-items: center; gap: 0.75rem; }

header#site-header .menu-icon { font-size: 1.6rem; cursor: pointer; transition: color var(--k2-transition-default), transform 0.2s ease; }
header#site-header .menu-icon:hover { color: var(--k2-color-accent); transform: scale(1.1); }

header#site-header .logo { font-weight: 600; font-size: 1.1rem; }
header#site-header .logo:hover { color: var(--k2-color-accent); }

header#site-header .header-right .cta-btn {
  background: transparent; 
  border: 1px solid var(--k2-color-light);
  /*border: 1px solid currentColor;*/
  padding: 0.5rem 1rem; color: var(--k2-color-light); border-radius: 6px;
  transition: background var(--k2-transition-default), color var(--k2-transition-default);
}
header#site-header .header-right .cta-btn1:hover { background: var(--k2-color-accent); color: var(--k2-bg-dark-text); }
header#site-header .header-right .cta-btn1:hover { box-shadow: var(--k2-shadow-md); transform: translateY(-2px);transition: all 0.25s ease;}
header#site-header .header-right .cta-btn:hover { transform: scale(1.1);transition: all 0.25s ease;}

/* ---------------------- Sidebar ---------------------- */
#sidebar {
  position: fixed; top: 0; left: 0; height: 100%;
  width: var(--k2-sidebar-width-mobile); max-width: 420px;
  /*background-color: var(--k2-bg-dark);*/
  background-color:rgba(255,255,255,0.05);
  z-index: var(--k2-z-modal); /*var(--k2-z-sidebar);*/
  transform: translateX(-100%); transition: transform 0.4s ease;
  display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; padding: 1rem;
}
#sidebar.active { transform: translateX(0); }
.sidebar-header { display: flex; justify-content: space-between; align-items: center; }
.sidebar-header .logo { font-size: 1.25rem; color: var(--k2-color-accent); font-weight: 600; }
.close-icon { font-size: 2rem; cursor: pointer; background: none; border: none; color: var(--k2-color-light); transition: color var(--k2-transition-default);}
.close-icon:hover { color: var(--k2-color-accent); }

/* Menu Tree */
.sidebar-menu ul { list-style: none; padding-left: 0; margin: 1rem 0; }
.sidebar-menu li { padding: 0.9rem 0; }
.sidebar-menu a, .sidebar-menu summary {
  display: flex; align-items: center; gap: 0.6rem;
  color: var(--k2-text-light); cursor: pointer; transition: color var(--k2-transition-default);
}
.sidebar-menu a:hover, .sidebar-menu summary:hover { color: var(--k2-color-accent); text-decoration:none; }
.sidebar-menu i { font-size:1.9rem; width: 35px; text-align: center; }

/* Level 2: indent icon + text */

.sidebar-menu ul ul > li > a,
.sidebar-menu ul ul > li > details > summary { padding-left: 1.5rem; }

/* Level 3: muted box */
.sidebar-menu ul ul ul { background-color: rgba(255,255,255,0.05); margin: 0.4rem 0; padding: 0.5rem; border-radius: 6px; border: 1px solid rgba(255,255,255,0.08); list-style: none; }
.sidebar-menu summary::-webkit-details-marker { display: none; }
.sidebar-menu details[open] > summary { color: var(--k2-color-accent); }

/* ---------------------- Sidebar Menu Font ---------------------- */
/* Applies to all levels: 1st, 2nd, 3rd */
.sidebar-menu a,
.sidebar-menu summary {
  font-size: 1.1rem; /* increase this value as needed */
  line-height: 1.2;  /* optional: improves readability */
  color: rgba(255,255,255,0.5);
  /*text-transform: uppercase;*/
}

/* Sidebar Footer */
.sidebar-footer { margin-top: auto; text-align: center; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.1); }
.sidebar-social-icons a { font-size: 1.8rem; margin: 0 0.5rem; color: var(--k2-text-light); transition: color var(--k2-transition-default); }
.sidebar-social-icons a:hover { color: var(--k2-color-accent); }
.sidebar-subscribe { margin-top: 1rem; }
.sidebar-subscribe input[type="email"] { width: 90%; padding: 0.5rem; border-radius: 4px; border: 1px solid rgba(255,255,255,0.2); background-color: transparent; color: var(--k2-text-light); margin-bottom: 0.5rem; }
.sidebar-subscribe .subscribe-btn { background-color: var(--k2-color-accent); border: none; padding: 0.5rem 1rem; border-radius: 4px; color: var(--k2-bg-dark); cursor: pointer; transition: opacity var(--k2-transition-default); }
.sidebar-subscribe .subscribe-btn:hover { opacity: 0.8; }
.sidebar-footer p.copyright { font-size: 0.75rem; margin-top: 0.75rem; color: var(--k2-text-muted); }

/* Overlay */
#overlay { position: fixed; top:0; left:0; width:100%; height:100%; background-color: rgba(0,0,0,0.4); z-index: var(--k2-z-overlay); display:none; }

/* ---------------------- Hero ---------------------- */
.hero { height: 80vh; background: url('https://images.unsplash.com/photo-1605902711622-cfb43c443fb1?auto=format&fit=crop&w=1470&q=80') center/cover no-repeat; display:flex; justify-content:center; align-items:center; text-align:center; }
.hero-content h1 { font-size:2rem; margin-bottom:0.5rem; }
.hero-content p { font-size:1.1rem; }

/* ---------------------- Footer ---------------------- */
footer { background: var(--k2-bg-dark); color: var(--k2-text-light); padding: 2rem 1rem; text-align:center; }
.footer-grid { display:grid; grid-template-columns: 1fr; gap:1.5rem; margin-bottom:1rem; }
.footer-left, .footer-newsletter, .footer-sitemap { text-align:center; }
.footer-social a { margin:0 0.5rem; color: var(--k2-text-light); transition: color var(--k2-transition-default);}
.footer-social a:hover { color: var(--k2-color-accent); }
.footer-moveup { cursor:pointer; font-size:1.2rem; margin-bottom:0.5rem; }
@media(min-width:768px) { .footer-grid { grid-template-columns: repeat(3, 1fr); text-align:left; } .footer-left, .footer-newsletter, .footer-sitemap { text-align:left; } }