@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

/* =========================================================
   LEE MEDIA FORGE
   FULL RESTORED CSS
   DESKTOP + MOBILE
========================================================= */


/* =========================================================
   1. REMOVE WORDPRESS THEME HEADER / FOOTER
========================================================= */

.site-header,
#masthead,
.main-navigation,
.navbar,
header.wp-block-template-part {
  display: none !important;
}

.site-footer,
#colophon,
footer.wp-block-template-part {
  display: none !important;
}


/* =========================================================
   2. GLOBAL RESET / WIDTH FIX
========================================================= */

html,
body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body *,
body *::before,
body *::after {
  box-sizing: border-box;
}

body .site-content,
body .wp-site-blocks,
.site-content,
.wp-site-blocks {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.wp-site-blocks > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* =========================================================
   3. REMOVE WORDPRESS CONTENT WIDTH RESTRICTIONS
========================================================= */

.wp-site-blocks {
  width: 100% !important;
  max-width: none !important;
}

.entry-content,
.wp-block-post-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* =========================================================
   4. WORK SAMPLES SECTION
========================================================= */

.work-video-section {
  background-color: #eef2f7 !important;
  padding: 70px 28px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

.work-video-section * {
  box-sizing: border-box;
}


/* =========================================================
   5. WORK SECTION HEADER
========================================================= */

.work-header {
  max-width: 1300px;
  margin: 0 auto 46px auto;
  text-align: left;
}

.work-eyebrow {
  font-size: 13px;
  letter-spacing: 2px;
  font-weight: 700;
  color: #2563eb;
  margin: 0 0 10px 0;
}

.work-title {
  font-size: 40px;
  line-height: 1.1;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 14px 0;
}

.work-subtext {
  font-size: 18px;
  color: #5b6b7f;
  line-height: 1.5;
  max-width: 760px;
  margin: 0;
}


/* =========================================================
   6. VIDEO GRID
========================================================= */

.work-video-grid {
  display: flex !important;
  gap: 36px;
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
  align-items: flex-start;
}

.video-item {
  flex: 1 1 0;
  width: 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}


/* =========================================================
   7. YOUTUBE EMBEDS
========================================================= */

.work-video-grid .wp-block-embed,
.work-video-grid .wp-block-embed__wrapper {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.work-video-grid iframe {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}


/* =========================================================
   8. VIDEO CAPTIONS
========================================================= */

.video-caption {
  margin: 14px 0 0 0 !important;
  padding: 0 !important;
  width: 100%;
  max-width: 95%;
  font-size: 18px;
  line-height: 1.5;
  color: #5b6b7f;
}


/* =========================================================
   9. TABLET
========================================================= */

@media (max-width: 1000px) {

  .work-video-section {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .work-video-grid {
    gap: 24px;
  }

  .work-title {
    font-size: 36px;
  }
}


/* =========================================================
   10. MOBILE
========================================================= */

@media (max-width: 768px) {

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  .wp-block-navigation__responsive-container-open,
  .wp-block-navigation__responsive-container-close {
    display: none !important;
  }

  .lmf-header-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    overflow: visible !important;
  }

  .lmf-logo {
    width: auto !important;
    height: 70px !important;
    max-width: 230px !important;
    object-fit: contain !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .lmf-nav {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 15px !important;
    overflow: visible !important;
  }

  .lmf-nav a {
    display: inline-block !important;
    white-space: nowrap !important;
  }

  .wp-site-blocks,
  .site-content,
  .entry-content,
  .wp-block-post-content,
  main {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }

  #top {
    width: 100% !important;
    max-width: 100% !important;
    padding: 58px 20px 54px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: visible !important;
  }

  #top > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 38px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;
  }

  #top > div > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }

  #top h1 {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 42px !important;
    line-height: 1.06 !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  #top p {
    width: 100% !important;
    max-width: 100% !important;
  }

  #top img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  #top a {
    max-width: 100%;
  }

  .work-video-section {
    width: 100% !important;
    max-width: 100% !important;
    padding: 48px 20px 56px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: visible !important;
  }

  .work-header {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 32px 0 !important;
  }

  .work-eyebrow {
    font-size: 12px;
  }

  .work-title {
    font-size: 32px;
    line-height: 1.15;
  }

  .work-subtext {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 17px;
  }

  .work-video-grid {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .video-item {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }

  .work-video-grid .wp-block-embed,
  .work-video-grid .wp-block-embed__wrapper,
  .work-video-grid iframe {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .work-video-grid iframe {
    height: auto !important;
    aspect-ratio: 16 / 9;
  }

  .video-caption {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 12px !important;
    font-size: 17px;
    line-height: 1.5;
  }
}


/* =========================================================
   11. SMALL PHONES
========================================================= */

@media (max-width: 480px) {

  .lmf-header-inner {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .lmf-logo {
    height: 64px !important;
    max-width: 210px !important;
  }

  .lmf-nav {
    gap: 10px 14px !important;
    font-size: 14px !important;
  }

  #top {
    padding: 48px 18px !important;
  }

  #top h1 {
    font-size: 37px !important;
    line-height: 1.08 !important;
  }

  .work-video-section {
    padding: 42px 18px 50px !important;
  }

  .work-title {
    font-size: 30px;
  }
}


/* ==================================================
   WORK PAGE YOUTUBE VIDEO SIZE FIX
   Desktop and Mobile
================================================== */

.page-id-199 .wp-block-embed,
.page-id-199 .wp-block-embed__wrapper,
.page-id-199 .embed-youtube {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.page-id-199 iframe.youtube-player,
.page-id-199 .wp-block-embed iframe {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  border: 0 !important;
}

.page-id-199 {
  overflow-x: hidden !important;
}


/* ==================================================
   WORK PAGE TYPOGRAPHY FIX
================================================== */

.page-id-199 h1 {
  font-size: clamp(40px, 4.5vw, 56px) !important;
  line-height: 1.08 !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

.page-id-199 h2 {
  font-size: clamp(30px, 3vw, 40px) !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
}

.page-id-199 p {
  font-size: 18px !important;
  line-height: 1.6 !important;
}

.page-id-199 h3 {
  font-size: 23px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

.page-id-199 div:has(> figure.wp-block-embed) h3 {
  font-size: 22px !important;
  line-height: 1.2 !important;
}

.page-id-199 div:has(> figure.wp-block-embed) p {
  font-size: 16px !important;
  line-height: 1.55 !important;
}

@media (max-width: 700px) {

  .page-id-199 h1 {
    font-size: 38px !important;
    line-height: 1.1 !important;
  }

  .page-id-199 h2 {
    font-size: 30px !important;
    line-height: 1.18 !important;
  }

  .page-id-199 h3,
  .page-id-199 div:has(> figure.wp-block-embed) h3 {
    font-size: 21px !important;
    line-height: 1.25 !important;
  }

  .page-id-199 p,
  .page-id-199 div:has(> figure.wp-block-embed) p {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }
}


/* ==================================================
   LEE MEDIA FORGE FONT SYSTEM
   Headings: Manrope
   Body, navigation and buttons: Inter
================================================== */

html,
body,
body p,
body li,
body a,
body button,
body input,
body textarea,
body select,
.lmf-nav,
.lmf-nav a,
.work-eyebrow,
.video-caption {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
.work-title {
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body h1 {
  font-weight: 800 !important;
}

body h2,
body h3,
body h4,
body h5,
body h6 {
  font-weight: 700 !important;
}

body p,
body li {
  font-weight: 400;
}

.lmf-nav,
.lmf-nav a,
.work-eyebrow {
  font-weight: 700 !important;
}