/* =========================================================
   Managed Footer Builder — PopQuest Theme (Fonts + Dark)
   Headers: PQFRANKLIN (self-hosted)
   Body: Inter (system fallback unless you upload Inter woff2)
   NOTE: Only Franklin Heavy Italic file was provided, so headings
         are set to italic to ensure mobile uses the embedded face.
   ========================================================= */

@font-face{
  font-family: 'PQFRANKLIN';
  src:
    url('assets/fonts/pqfranklin.woff') format('woff'),
    url('assets/fonts/pqfranklin.ttf') format('truetype');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

/* Some browsers require a matching 'normal' style to select the face.
   Map the same file as normal, too (will still render italic-ish if the font is italic). */
@font-face{
  font-family: 'PQFRANKLIN';
  src:
    url('assets/fonts/pqfranklin.woff') format('woff'),
    url('assets/fonts/pqfranklin.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

.mfb-footer{
	background: #000;
	color: #fff;
	margin-top: 48px;
	font-family: 'InterVar','Inter', Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}

.mfb-footer .mfb-wrap{
	max-width: 1200px;
	margin: 0 auto;
	padding: 48px 20px 18px;
}

.mfb-top{
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 36px;
	align-items: start;
}

.mfb-brand{
	display: grid;
	gap: 10px;
	align-content: start;
}

.mfb-logo img{
	max-width: 180px;
	height: auto;
	display: block;
}


.mfb-brand-name{
	font-style: italic;

	font-family: 'PQFRANKLIN', 'InterVar','Inter', sans-serif;
	font-size: 26px;
	font-weight: 800;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	font-style: normal;
}

/* Force headings inside footer */
.mfb-footer h1,
.mfb-footer h2,
.mfb-footer h3,
.mfb-footer h4,
.mfb-footer h5,
.mfb-footer .mfb-col-title,
.mfb-footer .mfb-brand-name{
	font-style: italic;

	font-family: 'PQFRANKLIN', 'InterVar','Inter', sans-serif !important;
	font-weight: 800 !important;
	font-style: italic !important;
}


/* Ensure headings match available PQFRANKLIN face */
.mfb-footer h1,
.mfb-footer h2,
.mfb-footer h3,
.mfb-footer h4,
.mfb-footer h5,
.mfb-footer .mfb-col-title,
.mfb-footer .mfb-brand-name{
	font-style: italic;

	font-style: italic !important;
}

/* Force body text inside footer */
.mfb-footer,
.mfb-footer p,
.mfb-footer li,
.mfb-footer a,
.mfb-footer span,
.mfb-footer div{
	font-family: 'InterVar','Inter', Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}

.mfb-brand-tagline{
	opacity: 0.85;
	font-size: 14px;
	line-height: 1.5;
}

.mfb-grid{
	display: grid;
	grid-template-columns: repeat(3, minmax(160px, 1fr));
	gap: 28px;
}

.mfb-col-title{
	font-style: normal;

	font-family: 'PQFRANKLIN', 'InterVar','Inter', sans-serif;
	font-size: 14px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.95;
	margin: 0 0 12px;
}

.mfb-list{
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 10px;
}

.mfb-brand-list{
	margin-top: 10px;
}

.mfb-link{
	color: #fff;
	text-decoration: none;
	opacity: 0.92;
}

.mfb-link:hover{
	opacity: 1;
	text-decoration: underline;
}

.mfb-text{
	opacity: 0.88;
}

/* Shortcode normalization */
.mfb-shortcode{
	opacity: 0.98;
}
.mfb-shortcode a{
	color: #fff;
	text-decoration: none;
	opacity: 0.92;
}
.mfb-shortcode a:hover{
	opacity: 1;
	text-decoration: underline;
}
.mfb-shortcode ul,
.mfb-shortcode ol{
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 10px;
}
.mfb-shortcode li{
	margin: 0;
}

.mfb-shortcode h1,
.mfb-shortcode h2,
.mfb-shortcode h3,
.mfb-shortcode h4,
.mfb-shortcode h5{
	font-family: 'PQFRANKLIN', 'InterVar','Inter', sans-serif;
	font-size: 14px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.95;
	margin: 0 0 12px;
}

.mfb-bottom{
	border-top: 1px solid rgba(255,255,255,0.12);
	margin-top: 34px;
	padding-top: 14px;
}

.mfb-bottom-inner{
	font-size: 12px;
	opacity: 0.8;
}

@media (max-width: 980px){
	.mfb-top{
		grid-template-columns: 1fr;
	}
	.mfb-grid{
		grid-template-columns: repeat(2, minmax(160px, 1fr));
	}
}

@media (max-width: 560px){
	.mfb-wrap{ padding-left: 16px; padding-right: 16px; }
	.mfb-grid{
		grid-template-columns: 1fr;
	}
}


/* =========================================================
   POPQUEST FINAL FOOTER ALIGNMENT
   Footer sits outside .pq-app layout.
   Sidebar width: 260px
   Content max width: 900px
   ========================================================= */

.mfb-footer{
  background:#000;
  color:#fff;
  width:100vw;
  margin-left:calc(50% - 50vw);
}

.mfb-footer .mfb-wrap{
  max-width:1160px; /* 900 content + 260 sidebar */
  margin:0 auto;
  padding-left:260px;
  padding-right:24px;
  box-sizing:border-box;
}

@media (max-width: 980px){
  .mfb-footer .mfb-wrap{
    max-width:900px;
    padding-left:16px;
    padding-right:16px;
  }
}



/* ==================================================
   PopQuest layout alignment (sidebar-aware)
   - Footer is rendered after .pq-app, so we offset it
     to start at the same left edge as the main content.
   - JS sets --pq-sidebar-offset dynamically.
   ================================================== */
:root{ --pq-sidebar-offset: 0px; }

/* Desktop/sidebar layout */
@media (min-width: 981px){
  body .mfb-footer{
    margin-left: var(--pq-sidebar-offset, 0px);
    width: calc(100% - var(--pq-sidebar-offset, 0px));
  }
}

/* Safety: never offset on mobile/tablet */
@media (max-width: 980px){
  body .mfb-footer{ margin-left: 0 !important; width: 100% !important; }
}