/*
Theme Name: Mary-Ann Zykin 2026
Theme URI: https://maryannzykin.com
Version: 3.0.0
Description: A custom Beaver Builder Child Theme for Mary-Ann Zykin's personal website, circa June 2026.
Author: Zykin Design
Author URI: https://zykindesign.com
template: bb-theme
*/
/* ---------------------------------------------------
/** Fonts
--------------------------------------------------- */
@font-face {
  font-family: 'MZ Fixel';
  src: url("fonts/FixelText-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: auto; }
@font-face {
  font-family: 'MZ Fixel';
  src: url("fonts/FixelText-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: auto; }
@font-face {
  font-family: 'MZ Petrona';
  src: url("fonts/Petrona-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: auto; }
/* ---------------------------------------------------
/** Colors
--------------------------------------------------- */
/* ---------------------------------------------------
/** Responsive Breakpoints
--------------------------------------------------- */
/* ---------------------------------------------------
/** max-width Helper Function
--------------------------------------------------- */
.max-width-600 {
  max-width: 600px;
  width: 100%;
  margin-right: auto !important;
  margin-left: auto !important; }

.max-width-700 {
  max-width: 700px;
  width: 100%;
  margin-right: auto !important;
  margin-left: auto !important; }

.max-width-800 {
  max-width: 800px;
  width: 100%;
  margin-right: auto !important;
  margin-left: auto !important; }

.max-width-900 {
  max-width: 900px;
  width: 100%;
  margin-right: auto !important;
  margin-left: auto !important; }

.max-width-1000 {
  max-width: 1000px;
  width: 100%;
  margin-right: auto !important;
  margin-left: auto !important; }

.max-width-1100 {
  max-width: 1100px;
  width: 100%;
  margin-right: auto !important;
  margin-left: auto !important; }

.max-width-1200 {
  max-width: 1200px;
  width: 100%;
  margin-right: auto !important;
  margin-left: auto !important; }

.max-width-1300 {
  max-width: 1300px;
  width: 100%;
  margin-right: auto !important;
  margin-left: auto !important; }

.max-width-1400 {
  max-width: 1400px;
  width: 100%;
  margin-right: auto !important;
  margin-left: auto !important; }

.max-width-left {
  margin-left: 0 !important; }

.max-width-right {
  margin-right: 0 !important; }

.fl-col[class*="max-width-"] {
  max-width: unset; }
  .fl-col[class*="max-width-"] .fl-col-content {
    margin-left: auto;
    margin-right: auto; }

/* ---------------------------------------------------
/** Spacing Helper Functions
--------------------------------------------------- */
.mb-0 {
  margin-bottom: 0 !important; }

.mb-xs {
  margin-bottom: 0.5em !important; }

.mb-s {
  margin-bottom: 1em !important; }

.mb-m {
  margin-bottom: 1.125rem !important; }

.mb-l {
  margin-bottom: 1.5rem !important; }

.mb-xl {
  margin-bottom: 2rem !important; }

/* ---------------------------------------------------
/** Lists
--------------------------------------------------- */
.no-bullets {
  list-style: none;
  padding-left: 0; }
  .no-bullets li {
    font-size: clamp(1rem, 1.3125vw, 1.3125rem);
    line-height: 166.67%;
    margin-bottom: 1rem;
    padding: 0; }

ul li, ol li {
  margin-bottom: 0.75em; }

/* ---------------------------------------------------
/** Objects and Layout
--------------------------------------------------- */
.fixed {
  position: sticky !important;
  top: 60px; }

.fl-row-full-height img[class*="wp-image-"] {
  max-height: 100vh !important; }

.image-max-height-unset img[class*="wp-image-"] {
  max-height: unset !important; }

.fl-builder-shape-layer {
  z-index: 2; }

.z-index-fix {
  z-index: 99;
  position: relative; }

#gallery-1 .gallery-item {
  margin-bottom: 0.5em; }
  #gallery-1 .gallery-item img {
    border: none;
    padding-right: 1em; }

.pp-modal-content-inner p {
  color: white;
  font-family: 'MZ Fixel', sans-serif; }

.img-multiply img {
  mix-blend-mode: multiply; }

/* ---------------------------------------------------
/** Buttons
--------------------------------------------------- */
.fl-builder-content a.fl-button,
.facetwp-load-more {
  padding: 1.25em 2em; }

button.fl-menu-mobile-close {
  line-height: 1;
  width: 2.75em;
  margin-bottom: 20px; }

.nav-button {
  background-color: #DE7222;
  border-radius: 3px;
  text-align: center;
  transition: all 0.2s ease;
  margin-left: 20px !important; }
  .nav-button:hover, .nav-button:active, .nav-button:focus {
    background-color: #d16410; }
    .nav-button:hover .menu-item-text, .nav-button:active .menu-item-text, .nav-button:focus .menu-item-text {
      color: white !important; }
  .nav-button a {
    padding: 20px 25px !important;
    color: white !important;
    font-weight: 700;
    text-align: center; }
  .nav-button.current-menu-item a {
    color: white !important; }

/* ---------------------------------------------------
/** Typography
--------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  line-height: 105%;
  letter-spacing: -0.03em;
  font-family: 'MZ Petrona', sans-serif; }

.eyebrow h2,
.eyebrow h3 {
  font-family: 'MZ Fixel', sans-serif; }

h1,
.text-xxxl {
  font-size: clamp(4rem, 6vw, 8rem); }

.text-xxl {
  font-size: clamp(3rem, 5vw, 6rem); }

h2,
.text-xl,
.text-xl .fl-button *,
.text-xl .fl-button i {
  font-size: clamp(2.5rem, 4vw, 4.5rem); }

h3,
.text-l,
.text-l .fl-button *,
.text-l .fl-button i,
.text-l p {
  font-size: clamp(2rem, 3vw, 3.5rem);
  font-weight: 700; }

h4 {
  font-weight: 700; }

h4,
.text-m,
p,
.listing-content ul,
.listing-content ol,
#post-content li,
.eyebrow {
  font-size: clamp(1.25rem, 1.5vw, 1.5rem); }

h5,
.text-s,
.text-s p {
  font-size: clamp(1.125rem, 1.25vw, 1.25rem); }

h6,
.text-xs,
.text-xs p {
  font-size: 1rem; }

.text-xxs {
  font-size: 0.875rem; }

.eyebrow,
.caps {
  text-transform: uppercase;
  letter-spacing: 0.1em; }

.fw-bold {
  font-weight: 700; }

.fw-normal {
  font-weight: normal !important; }

a:hover {
  transition: all 0.2s ease;
  text-decoration: none; }

p {
  margin-bottom: 1em;
  line-height: 167%; }

/* ---------------------------------------------------
/** Post & Project Grids
--------------------------------------------------- */
.zd-post-tags {
  margin-bottom: 1em; }

.zd-project-grid,
.zd-blog-grid {
  background: transparent;
  border: unset; }

.zd-post-image,
.zd-blog-grid {
  margin-bottom: 2em; }
  .zd-post-image img,
  .zd-blog-grid img {
    border-radius: 20px; }

.zd-project-grid .zd-post-meta {
  padding: 0 1em; }

/* ---------------------------------------------------
/** Forms
--------------------------------------------------- */
.with_frm_style .vertical_radio .frm_checkbox label,
.with_frm_style .vertical_radio .frm_radio label {
  line-height: 1.8; }

.frm_error_style,
.frm_message {
  margin-bottom: 0.5rem;
  text-align: center;
  color: #111 !important; }

.with_frm_style .frm_error_style,
.with_frm_style .frm_message,
.frm_success_style {
  padding: 30px !important; }

.frm_button_submit {
  padding: 20px 30px;
  border: none;
  font-size: clamp(1rem, 1.3125vw, 1.3125rem);
  border: 0;
  font-weight: 400 !important;
  text-transform: uppercase;
  box-shadow: unset;
  border-radius: 30px;
  transition: all ease 0.2s; }
  .frm_button_submit:hover {
    border: none;
    color: white; }

.cf-turnstile {
  text-align: center; }

.with_frm_style .frm_inside_container > input,
.with_frm_style .frm_inside_container > select,
.with_frm_style .frm_inside_container > textarea {
  border: 2px solid white !important; }

.frm_style_formidable-style.with_frm_style.frm_inline_top .frm_submit::before,
.frm_style_formidable-style.with_frm_style .frm_submit.frm_inline_submit::before {
  display: none !important; }

.frm_combo_inputs_container,
.frm_grid_container,
.frm_form_fields .frm_section_heading,
.frm_form_fields .frm_fields_container {
  grid-gap: 2.5% !important; }

/* ---------------------------------------------------
/** Responsive Styles
--------------------------------------------------- */
@media (min-width: 768px) {
  .columns-2 {
    columns: 2; } }
@media (min-width: 1024px) {
  .mobile {
    display: none !important; } }
@view-transition {
  navigation: auto; }

/*# sourceMappingURL=style.css.map */