/*
Theme Name: Mazaheri
Theme URI: https://mazaheri.ca
Author: Mehrad Mazaheri
Author URI: https://mazaheri.ca
Description: Dark one-page portfolio theme built for Elementor (free version). Header, footer and sticky CTA are managed in the Customizer; all page content is built with Elementor using free widgets plus the bundled Marquee and Contact Form widgets. Import the included "Mazaheri Home" Elementor template to get the full design.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mazaheri
Tags: one-column, custom-menu, portfolio, dark
*/

/* ==========================================================
   Base
   ========================================================== */
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0;
  background: #000;
  color: #fff;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
::selection { background: #fff; color: #000; }
h1, h2, h3, h4, h5, h6 { color: #fff; }
a { color: #fff; }
img { max-width: 100%; height: auto; }
input::placeholder, textarea::placeholder { color: rgba(255,255,255,.35); }
body.mz-locked { overflow: hidden; }

@keyframes mz-mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Default Elementor text color inside this dark theme */
.elementor-widget-text-editor { color: rgba(255,255,255,.65); font-size: 17px; line-height: 1.6; }

/* ==========================================================
   Fixed navigation (theme header — Customizer)
   ========================================================== */
.mz-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 5vw;
  background: rgba(0,0,0,.72);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
body.admin-bar .mz-nav { top: 32px; }
.mz-logo { font-family: 'Archivo Black', sans-serif; font-size: 20px; letter-spacing: .06em; color: #fff; text-decoration: none; }
.mz-nav ul.mz-nav-links {
  display: flex; align-items: center; gap: 32px;
  list-style: none; margin: 0; padding: 0;
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
}
.mz-nav ul.mz-nav-links a { color: rgba(255,255,255,.7); text-decoration: none; transition: color .25s; }
.mz-nav ul.mz-nav-links a:hover { color: #fff; }
.mz-nav-right { display: flex; align-items: center; gap: 12px; }
.mz-btn-solid {
  display: inline-block; background: #fff; color: #000; text-decoration: none;
  font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 12px 22px; border-radius: 999px; transition: background .25s;
}
.mz-btn-solid:hover { background: rgba(255,255,255,.85); color: #000; }
.mz-burger {
  display: none; align-items: center; justify-content: center;
  width: 46px; height: 46px; background: transparent;
  border: 1px solid rgba(255,255,255,.35); border-radius: 999px;
  color: #fff; font-size: 18px; cursor: pointer; padding: 0;
}

/* Mobile fullscreen menu */
.mz-mobile-menu {
  position: fixed; inset: 0; z-index: 49;
  background: rgba(0,0,0,.96);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  display: none; flex-direction: column; justify-content: center; gap: 8px;
  padding: 0 8vw;
}
.mz-mobile-menu.is-open { display: flex; }
.mz-mobile-menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mz-mobile-menu ul a, .mz-mobile-menu .mz-mobile-cta {
  color: #fff; text-decoration: none; font-family: 'Archivo Black', sans-serif;
  text-transform: uppercase; font-size: clamp(34px, 9vw, 56px); padding: 10px 0;
  display: inline-block; transition: opacity .25s;
}
.mz-mobile-menu ul a:hover { opacity: .7; }
.mz-mobile-menu .mz-mobile-cta { color: transparent; -webkit-text-stroke: 1.5px #fff; }

/* ==========================================================
   Hero  (add class "mz-hero" to the Elementor section)
   ========================================================== */
.mz-hero { position: relative; overflow: hidden; background: #000; }
.mz-hero > .elementor-container {
  position: relative; z-index: 2;
  min-height: 100vh; align-items: flex-end;
  padding-bottom: 9vh; padding-top: 140px;
}
.mz-moon {
  position: absolute; z-index: 0;
  top: -34vw; left: 50%; margin-left: -32vw;
  width: 64vw; height: 64vw; border-radius: 50%;
  background: radial-gradient(circle at 38% 42%, #e6e6e6, #8a8a8a 48%, #2b2b2b 74%, #0a0a0a 92%);
  box-shadow: 0 0 140px rgba(255,255,255,.18), inset -40px -60px 120px rgba(0,0,0,.55);
  pointer-events: none;
}
.mz-hero-fade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 30%, #000 88%);
}

/* ==========================================================
   Typography utilities (Advanced → CSS Classes on widgets)
   ========================================================== */
.mz-eyebrow .elementor-heading-title {
  font-family: inherit; font-size: 13px; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(255,255,255,.6); font-weight: 400;
}
.mz-h1 .elementor-heading-title {
  font-family: 'Archivo Black', sans-serif; text-transform: uppercase;
  line-height: .92; font-size: clamp(38px, 10vw, 158px); letter-spacing: -.01em; color: #fff;
}
.mz-hero-line { overflow: hidden; }
.mz-outline .elementor-heading-title { color: transparent; -webkit-text-stroke: 2px #fff; }
.mz-big .elementor-heading-title {
  font-family: 'Archivo Black', sans-serif; text-transform: uppercase;
  font-size: clamp(44px, 5.5vw, 92px); line-height: .95; color: #fff;
}
.mz-h3 .elementor-heading-title {
  font-family: 'Archivo Black', sans-serif; text-transform: uppercase;
  font-size: clamp(30px, 3.4vw, 54px); color: #fff;
}
.mz-lead, .mz-lead p, p.mz-lead { font-size: 22px; line-height: 1.5; color: rgba(255,255,255,.9); }
.mz-note, p.mz-note { font-size: 14px; color: rgba(255,255,255,.55); margin: 0; }
.elementor-widget.mz-inline { display: inline-block; width: auto; vertical-align: middle; margin-right: 28px; }

/* ==========================================================
   Buttons & links
   ========================================================== */
.mz-btn .elementor-button {
  background: #fff; color: #000; border-radius: 999px;
  font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 18px 34px; transition: background .25s;
}
.mz-btn .elementor-button:hover { background: rgba(255,255,255,.85); color: #000; }

.mz-underline-links .elementor-icon-list-icon { display: none; }
.mz-underline-links a {
  color: #fff; text-decoration: none; font-size: 15px; letter-spacing: .08em;
  text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,.4);
  padding-bottom: 4px; transition: border-color .25s;
}
.mz-underline-links a:hover { border-bottom-color: #fff; }
.mz-underline-links .elementor-icon-list-text { font-size: 15px; }

.mz-links .elementor-icon-list-items { display: flex; gap: 28px; flex-wrap: wrap; }
.mz-links .elementor-icon-list-icon { display: none; }
.mz-links .elementor-icon-list-item a {
  color: rgba(255,255,255,.7); text-decoration: none;
  font-size: 14px; letter-spacing: .1em; text-transform: uppercase;
  padding-bottom: 4px; transition: color .25s;
}
.mz-links .elementor-icon-list-item:first-child a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.4); }
.mz-links .elementor-icon-list-item a:hover { color: #fff; border-bottom-color: #fff; }
.mz-links .elementor-icon-list-text { font-size: 14px; }

/* ==========================================================
   Tag pills (Icon List with class "mz-pills", or spans .mz-pill)
   ========================================================== */
.mz-pills .elementor-icon-list-items { display: flex; flex-wrap: wrap; gap: 12px; }
.mz-pills .elementor-icon-list-icon { display: none; }
.mz-pills .elementor-icon-list-item {
  border: 1px solid rgba(255,255,255,.25); border-radius: 999px;
  padding: 12px 24px; margin: 0;
}
.mz-pills .elementor-icon-list-text { font-size: 15px; color: rgba(255,255,255,.85); }
.mz-pills .elementor-icon-list-item:after { display: none; }
span.mz-pill {
  display: inline-block; border: 1px solid rgba(255,255,255,.25); border-radius: 999px;
  padding: 8px 16px; font-size: 13px; color: rgba(255,255,255,.8); margin: 0 8px 10px 0;
}

/* ==========================================================
   Sections (spacing utilities)
   ========================================================== */
.mz-sec > .elementor-container { padding-top: 140px; padding-bottom: 140px; }
.mz-sec-top > .elementor-container { padding-top: 140px; }
.mz-sec-bottom > .elementor-container { padding-bottom: 140px; }
.mz-border-top { border-top: 1px solid rgba(255,255,255,.12); }
.mz-border-bottom { border-bottom: 1px solid rgba(255,255,255,.12); }
.elementor-section.elementor-section-boxed > .elementor-container { max-width: 100%; }
.elementor-section > .elementor-container { padding-left: 5vw; padding-right: 5vw; }

/* ==========================================================
   Work rows
   ========================================================== */
.mz-work-row { border-top: 1px solid rgba(255,255,255,.12); }
.mz-work-row > .elementor-container { padding-top: 50px; padding-bottom: 50px; align-items: center; }
.mz-imgbox {
  background: rgba(255,255,255,.04); border-radius: 6px; height: 380px;
  display: flex; align-items: center; justify-content: center;
  padding: 40px; overflow: hidden; box-sizing: border-box;
}
.mz-imgbox .elementor-widget-container { display: contents; }
.mz-imgbox img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; }
.mz-gray img { filter: grayscale(1); }
.mz-intro-img img { width: 100%; max-width: 380px; border-radius: 8px; }

/* ==========================================================
   Accordions (Elementor free Accordion widget, class "mz-acc")
   ========================================================== */
.mz-acc .elementor-accordion-item {
  border: none !important;
  border-top: 1px solid rgba(255,255,255,.15) !important;
  background: transparent;
}
.mz-acc .elementor-accordion-item:last-child { border-bottom: 1px solid rgba(255,255,255,.15) !important; }
.mz-acc .elementor-tab-title {
  display: flex; align-items: baseline; gap: 20px;
  padding: 24px 0; cursor: pointer; background: transparent;
  transition: opacity .25s;
}
.mz-acc .elementor-tab-title:hover { opacity: .8; }
.mz-acc .elementor-accordion-icon { display: none !important; }
.mz-acc .elementor-tab-title .elementor-accordion-title,
.mz-acc .elementor-tab-title a {
  color: #fff; font-size: 19px; font-weight: 600; flex: 1; text-decoration: none;
}
.mz-acc .elementor-tab-title::after {
  content: '+'; margin-left: auto; font-size: 24px; line-height: 1;
  color: rgba(255,255,255,.6); transition: transform .4s ease; flex: none;
}
.mz-acc .elementor-tab-title.elementor-active::after { transform: rotate(45deg); }
.mz-acc .elementor-tab-content {
  border: none !important; padding: 0 0 26px !important;
  color: rgba(255,255,255,.6); font-size: 15px; line-height: 1.6; max-width: 820px;
}
.mz-acc .elementor-tab-content p { margin: 0 0 20px; }
.mz-acc .elementor-tab-content p:last-child { margin-bottom: 0; }

/* Large variant for Services */
.mz-acc-lg .elementor-tab-title { padding: 30px 0; align-items: baseline; gap: 28px; }
.mz-acc-lg .elementor-tab-title .elementor-accordion-title,
.mz-acc-lg .elementor-tab-title a {
  font-family: 'Archivo Black', sans-serif; text-transform: uppercase;
  font-size: clamp(24px, 2.6vw, 40px); font-weight: 400;
}
.mz-acc-lg .elementor-tab-title::after { font-size: 28px; }
.mz-acc-lg .elementor-tab-content { font-size: 16px; }
span.mz-acc-num {
  font-size: 14px; color: rgba(255,255,255,.4);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  margin-right: 18px; vertical-align: middle; -webkit-text-stroke: 0;
}

/* ==========================================================
   Marquee widget
   ========================================================== */
.mz-marquee {
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
  overflow: hidden; padding: 16px 0; white-space: nowrap;
}
.mz-marquee-track {
  display: inline-flex; gap: 56px;
  animation: mz-mq 26s linear infinite;
  font-family: 'Archivo Black', sans-serif; text-transform: uppercase;
  font-size: 15px; letter-spacing: .14em; color: rgba(255,255,255,.65);
}

/* ==========================================================
   Contact form widget
   ========================================================== */
.mz-form { display: flex; flex-direction: column; gap: 28px; }
.mz-form input[type="text"], .mz-form input[type="email"],
.mz-form input[type="url"], .mz-form textarea {
  background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,.3);
  color: #fff; font-size: 17px; padding: 14px 0; outline: none;
  font-family: inherit; border-radius: 0; width: 100%; box-sizing: border-box;
  transition: border-color .25s;
}
.mz-form input:focus, .mz-form textarea:focus { border-bottom-color: #fff; }
.mz-form textarea { resize: vertical; }
.mz-form button[type="submit"] {
  align-self: flex-start; background: #fff; color: #000; border: none; cursor: pointer;
  font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 18px 38px; border-radius: 999px; font-family: inherit; transition: background .25s;
}
.mz-form button[type="submit"]:hover { background: rgba(255,255,255,.85); }
.mz-form .mz-hp { position: absolute !important; left: -9999px !important; height: 0; overflow: hidden; }

/* ==========================================================
   Footer (theme footer — Customizer)
   ========================================================== */
.mz-footer { padding: 80px 5vw 40px; border-top: 1px solid rgba(255,255,255,.12); }
.mz-footer-big {
  margin: 0 0 60px; font-family: 'Archivo Black', sans-serif; text-transform: uppercase;
  font-size: clamp(32px, 9.5vw, 170px); line-height: .9; text-align: center;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.35);
}
.mz-footer-row {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 20px; font-size: 13px; color: rgba(255,255,255,.5);
}
.mz-footer-links { display: flex; gap: 26px; }
.mz-footer-links a {
  color: rgba(255,255,255,.5); text-decoration: none;
  letter-spacing: .1em; text-transform: uppercase; transition: color .25s;
}
.mz-footer-links a:hover { color: #fff; }

/* ==========================================================
   Sticky CTA
   ========================================================== */
.mz-sticky-cta {
  position: fixed; bottom: 24px; right: 24px; z-index: 60;
  display: flex; align-items: center; gap: 10px;
  background: #fff; color: #000; text-decoration: none;
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 14px 24px; border-radius: 999px;
  box-shadow: 0 6px 30px rgba(255,255,255,.15); transition: background .25s;
}
.mz-sticky-cta:hover { background: rgba(255,255,255,.85); color: #000; }

/* ==========================================================
   Blog / fallback content
   ========================================================== */
.mz-content { padding: 160px 5vw 80px; max-width: 860px; margin: 0 auto; }
.mz-content a { color: #fff; }
.mz-content article { margin-bottom: 60px; }

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 860px) {
  .mz-nav ul.mz-nav-links { display: none; }
  .mz-burger { display: flex; }
  .mz-sec > .elementor-container { padding-top: 72px; padding-bottom: 72px; }
  .mz-sec-top > .elementor-container { padding-top: 72px; }
  .mz-sec-bottom > .elementor-container { padding-bottom: 72px; }
  .mz-work-row > .elementor-container { padding-top: 36px; padding-bottom: 36px; }
  .mz-imgbox { height: 250px; }
  .mz-intro-img img { max-width: 220px; }
  .mz-sticky-cta { bottom: 16px; right: 16px; }
  .elementor-widget.mz-inline { display: block; margin-right: 0; }
}
@media (max-width: 782px) {
  body.admin-bar .mz-nav { top: 46px; }
}