/*
Theme Name: BE Media Films
Theme URI: https://www.bemediafilms.com/
Author: BE Media Films / BlackEye Studio
Description: Fully editable recreation of bemediafilms.com. Every color, font, video link, image, and block of text is editable under Appearance > Customize. On activation the theme creates the Home, About, Work and Contact pages and the main menu automatically.
Version: 1.6.0
Requires at least: 5.8
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: bemedia-films
*/

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{position:relative;margin:0;background:var(--bemf-bg);color:var(--bemf-text);font-family:var(--bemf-body-font);font-size:var(--bemf-base-size);line-height:1.7;-webkit-font-smoothing:antialiased}
img,video,iframe{max-width:100%;height:auto;display:block}
a{color:var(--bemf-accent);text-decoration:none;transition:opacity .2s}
a:hover{opacity:.75}
a:focus-visible,button:focus-visible{outline:2px solid var(--bemf-accent);outline-offset:3px}
h1,h2,h3,h4{font-family:var(--bemf-heading-font);color:var(--bemf-heading);line-height:1.15;margin:0 0 .6em;font-weight:600}
h1{font-size:2.6em}h2{font-size:2em}h3{font-size:1.5em}
p{margin:0 0 1.2em}
.wrap{width:min(1120px,92%);margin-inline:auto}
.narrow{width:min(760px,92%);margin-inline:auto}

/* header */
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:var(--bemf-menu-gap,28px);align-items:center}
.main-nav a{color:var(--bemf-menu-color,var(--bemf-text));font-family:var(--bemf-heading-font);font-size:var(--bemf-menu-size,17px);padding:6px 0;border-bottom:2px solid transparent;display:inline-block}
.main-nav .current-menu-item>a,.main-nav a:hover{border-bottom-color:var(--bemf-accent);opacity:1}
/* mobile / tablet menu toggle button (shown at the breakpoint chosen in the Customizer) */
.nav-toggle{display:none;align-items:center;gap:.55em;background:var(--bemf-toggle-bg,transparent);border:1px solid currentColor;color:var(--bemf-toggle-color,var(--bemf-menu-color,var(--bemf-text)));padding:.5em .9em;font-family:var(--bemf-heading-font);font-size:var(--bemf-toggle-size,18px);line-height:1;cursor:pointer;border-radius:4px}
.nav-toggle__icon{position:relative;display:inline-block;width:1.25em;height:.95em;flex:none}
.nav-toggle__icon span{position:absolute;left:0;right:0;height:2px;background:currentColor;border-radius:2px;transition:transform .2s,opacity .2s,top .2s}
.nav-toggle__icon span:nth-child(1){top:0}
.nav-toggle__icon span:nth-child(2){top:calc(50% - 1px)}
.nav-toggle__icon span:nth-child(3){top:calc(100% - 2px)}
.nav-toggle.is-open .nav-toggle__icon span:nth-child(1){top:calc(50% - 1px);transform:rotate(45deg)}
.nav-toggle.is-open .nav-toggle__icon span:nth-child(2){opacity:0}
.nav-toggle.is-open .nav-toggle__icon span:nth-child(3){top:calc(50% - 1px);transform:rotate(-45deg)}
.nav-toggle.style-icon .nav-toggle__label{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}
.nav-toggle.style-text .nav-toggle__icon{display:none}

/* header banners (logo + menu, each adjustable) */
.bar{position:relative;box-sizing:border-box}
.bar-overlay{position:absolute;inset:0;pointer-events:none}
.bar .wrap{position:relative;display:flex;align-items:center;gap:24px;min-height:inherit}
.bar.is-wide .wrap{width:100%;max-width:none;padding-inline:4%;box-sizing:border-box}
.bar.align-left .wrap{justify-content:flex-start}
.bar.align-center .wrap{justify-content:center}
.bar.align-right .wrap{justify-content:flex-end}
.bar-menu.is-sticky{position:sticky;top:0;z-index:50}
.bar-logo{z-index:51}
.site-logo{display:inline-flex;align-items:center;font-family:var(--bemf-heading-font);font-weight:600;color:var(--bemf-heading);letter-spacing:.02em}
.site-logo img{display:block}
.bar-menu .social-links{margin-left:8px}

/* sections */
.section{padding:72px 0}
.section + .section{padding-top:0}
.section-title{margin-bottom:.5em}
.lead{font-size:1.15em;max-width:62ch}

/* hero */
.hero{position:relative;padding:110px 0 80px;background-size:cover;background-position:center}
.hero-overlay{position:absolute;inset:0}
.hero .wrap{position:relative}
.hero h1{font-size:clamp(2.2em,6vw,4em);max-width:14ch}
.hero .lead{margin-bottom:0}
.page-intro{padding:72px 0 40px}

/* video */
.video-wrap{position:relative;aspect-ratio:16/9;background:#000;border-radius:4px;overflow:hidden}
.video-wrap iframe,.video-wrap video{position:absolute;inset:0;width:100%;height:100%;border:0}
.hero-video{margin-top:48px}
.video-grid{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:var(--gap,32px)}
.video-item .video-wrap{border-radius:0}
.video-item h3{font-size:1.15em;margin:14px 0 0}

/* about */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.split img{border-radius:4px;margin-inline:auto}

/* about: photo gallery + client logos (columns, size, position set in Customizer) */
.photo-grid{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:var(--gap,10px)}
.photo-grid img{width:100%;object-fit:cover;display:block}
.logo-grid{display:grid;grid-template-columns:repeat(var(--cols,6),minmax(0,1fr));gap:var(--gap,16px)}
.logo-grid figure{margin:0;background:var(--box,#fff);border-radius:4px;padding:14px;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.logo-grid img{object-fit:contain;opacity:var(--lo,1);transition:opacity .2s}
.logo-grid.hover-full figure:hover img{opacity:1}
@media (max-width:820px){.photo-grid{grid-template-columns:repeat(min(var(--cols,4),2),minmax(0,1fr))}.logo-grid{grid-template-columns:repeat(min(var(--cols,6),3),minmax(0,1fr))}}
@media (max-width:480px){.logo-grid{grid-template-columns:repeat(min(var(--cols,6),2),minmax(0,1fr))}}

/* contact */
.contact-row{margin-bottom:1.2em}
.contact-row h3{font-size:1em;margin:0 0 .15em;text-transform:uppercase;letter-spacing:.06em;opacity:.8}
.contact-row p{margin:0}
.contact-block{font-size:1.25em;line-height:1.6}
.contact-block strong{color:var(--bemf-heading)}

/* background image layer with color screen */
body{overflow-x:clip}
.bemf-bg-layer{position:absolute;inset:0;z-index:-1;background-repeat:no-repeat;pointer-events:none}
.bemf-bg-layer.is-fixed{position:fixed}
.bemf-bg-layer::after{content:"";position:absolute;inset:0;background:var(--ov,transparent);opacity:var(--ova,0)}

/* menu icons */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}
.bemf-mi{display:inline-flex;align-items:center;gap:.45em;vertical-align:middle}
.bemf-mi--right{flex-direction:row-reverse}
.bemf-mi--above{flex-direction:column;gap:.15em;text-align:center}
.bemf-mi--below{flex-direction:column-reverse;gap:.15em;text-align:center}
.bemf-mi__icon{display:inline-flex;align-items:center;justify-content:center;line-height:1;font-size:var(--bemf-mi-size,20px)}
.bemf-mi__icon svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bemf-mi__icon img{width:1em;height:1em;object-fit:contain}

/* header layout: menu position */

/* social icons */
.social-links{list-style:none;margin:0;padding:0;display:flex;gap:12px;flex-wrap:wrap}
.social-links.dir-column{flex-direction:column;gap:10px}
.social-links a{display:inline-flex;align-items:center;gap:.6em;color:var(--sc,var(--bemf-accent))}
.bemf-si{display:inline-flex;font-size:var(--si,26px);line-height:0}
.bemf-si svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.social-links.style-outline .bemf-si,.social-links.style-filled .bemf-si{padding:.38em;border-radius:50%;border:2px solid currentColor;box-sizing:content-box}
.social-links.style-filled .bemf-si{background:var(--sc,var(--bemf-accent));border-color:var(--sc,var(--bemf-accent))}
.social-links.style-filled .bemf-si svg{stroke:var(--bemf-bg)}
.social-links.mode-text .bemf-si{display:none}
.social-links.mode-icons .bemf-sl{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}

/* top banner bar */
.bemf-sitebanner-wrap{position:relative}
.bemf-sitebanner-wrap .bemf-banner{display:block}
.bemf-sitebanner-wrap .bemf-banner__inner{width:min(1120px,92%);margin-inline:auto}
.bemf-sitebanner-wrap .bemf-banner__title{display:inline;margin:0;font-family:var(--bemf-body-font);font-weight:600}
.bemf-sitebanner-wrap .bemf-banner__btn{margin:0 0 0 14px;padding:4px 14px}
.bemf-sitebanner-close{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:0;color:inherit;font-size:24px;line-height:1;cursor:pointer;opacity:.7;z-index:2}
.bemf-sitebanner-close:hover{opacity:1}

/* page content added in the block editor */
.entry-content::after{content:"";display:table;clear:both}
.entry-content{margin-top:32px}
.entry-content:empty{display:none}

/* footer */
.site-footer{background:var(--bemf-footer-bg);border-top:1px solid rgba(255,255,255,.08);padding:56px 0 28px;margin-top:40px}
.footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.footer-cols h3{font-size:1.2em}
.footer-cols p{margin:0 0 .4em}
.copyright{margin-top:44px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);font-size:.9em;opacity:.7}

@media (max-width:980px){.video-grid{grid-template-columns:repeat(min(var(--cols,2),2),minmax(0,1fr))}}
@media (max-width:560px){.video-grid{grid-template-columns:1fr}}
@media (max-width:820px){
    .split,.footer-cols{grid-template-columns:1fr}
  .section{padding:48px 0}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}