/*
Theme Name: Friendly Foes
Theme URI: https://friendlyfoes.ph
Author: Friendly Foes
Description: Lightweight portfolio theme for Friendly Foes. Fixed left sidebar, edge-to-edge responsive square grid, and film page templates. Reads existing Hyper-X portfolio projects (royal_portfolio) without migration.
Version: 1.3.2
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: friendlyfoes
*/

/* ---------- Tokens (overridden from the Customizer) ---------- */
:root {
	--ff-accent: #ef6f8e;
	--ff-topbar: #2c3e37;
	--ff-text: #7a7a7a;
	--ff-ink: #222;
	--ff-bg: #fff;
	--ff-sidebar-w: 210px;
	--ff-topbar-h: 8px;
	--ff-font: "Roboto", Arial, "Helvetica Neue", Helvetica, sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--ff-bg);
	color: var(--ff-ink);
	font-family: var(--ff-font);
	font-size: 16px;
	line-height: 1.7;
	font-weight: 300;
}
img, video, iframe { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--ff-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { color: var(--ff-ink); font-weight: 500; line-height: 1.25; letter-spacing: .04em; }
:focus-visible { outline: 2px solid var(--ff-accent); outline-offset: 2px; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link:focus {
	position: fixed !important; top: 12px; left: 12px; width: auto; height: auto; clip: auto;
	z-index: 1000; background: #fff; color: var(--ff-ink); padding: 8px 14px;
}

/* ---------- Top bar ---------- */
.ff-topbar {
	position: fixed; top: 0; left: 0; right: 0; height: var(--ff-topbar-h);
	background: var(--ff-topbar); z-index: 60;
}
.admin-bar .ff-topbar { top: 32px; }

/* ---------- Header / sidebar (mobile first: top bar) ---------- */
.ff-sidebar {
	position: relative;
	padding: calc(var(--ff-topbar-h) + 4px) 20px 16px;
	text-align: center;
	background: var(--ff-bg);
	z-index: 50;
}
.ff-menu-toggle {
	display: block; margin: 4px auto 10px; padding: 6px 12px;
	background: none; border: 0; cursor: pointer; color: var(--ff-text);
}
.ff-menu-toggle svg { width: 18px; height: 18px; transition: transform .25s; }
.ff-nav-open .ff-menu-toggle svg { transform: rotate(180deg); }
.ff-brand { display: inline-block; }
.ff-brand img, .ff-brand .custom-logo { width: 96px; height: auto; margin: 0 auto; }
.ff-brand .ff-site-title {
	font-size: 15px; letter-spacing: .3em; text-transform: uppercase; color: var(--ff-ink); font-weight: 500;
}

.ff-nav { display: none; padding-top: 14px; }
.ff-nav-open .ff-nav { display: block; }
.ff-nav ul { list-style: none; margin: 0; padding: 0; }
.ff-nav a {
	display: inline-block; padding: 5px 0;
	color: var(--ff-text); font-size: 12px; font-weight: 500;
	letter-spacing: .24em; text-transform: uppercase; white-space: nowrap;
}
.ff-nav a:hover { color: var(--ff-accent); text-decoration: none; }
.ff-nav .current-menu-item > a,
.ff-nav .current_page_item > a,
.ff-nav .current-menu-ancestor > a,
.ff-nav .current-menu-parent > a { color: var(--ff-accent); }
.ff-nav .sub-menu a { font-size: 11px; letter-spacing: .25em; padding: 3px 0; }
.ff-nav .sub-menu { padding: 0 0 6px; }

/* ---------- Main ---------- */
.ff-main { min-height: 60vh; }

/* ---------- Desktop: fixed left sidebar ---------- */
@media (min-width: 1200px) {
	.ff-sidebar {
		position: fixed; top: 0; bottom: 0; left: 0;
		width: var(--ff-sidebar-w);
		padding: calc(var(--ff-topbar-h) + 22px) 12px 30px 30px;
		text-align: left;
		overflow-y: auto;
	}
	.admin-bar .ff-sidebar { top: 32px; }
	.ff-menu-toggle { display: none; }
	.ff-brand img, .ff-brand .custom-logo { width: 98px; margin: 0; }
	.ff-nav { display: block; padding-top: 22px; }
	.ff-nav li { line-height: 1.5; }
	.ff-nav a { padding: 4px 0; }
	/* Dropdown: indented, opens on hover/focus or when inside it */
	.ff-nav .sub-menu { display: none; padding: 2px 0 6px 14px; }
	.ff-nav li:hover > .sub-menu,
	.ff-nav li:focus-within > .sub-menu,
	.ff-nav .current-menu-item > .sub-menu,
	.ff-nav .current-menu-ancestor > .sub-menu { display: block; }
	.ff-main { margin-left: var(--ff-sidebar-w); padding-top: var(--ff-topbar-h); }
	.ff-footer { margin-left: var(--ff-sidebar-w); }
}

/* ---------- Portfolio grid ---------- */
.ff-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
}
@media (min-width: 768px)  { .ff-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .ff-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1440px) { .ff-grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1600px) { .ff-grid { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 2400px) { .ff-grid { grid-template-columns: repeat(8, 1fr); } }

.ff-tile {
	position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden;
	background: #eee; color: var(--ff-ink);
}
.ff-tile img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .5s ease;
}
.ff-tile__info {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	padding: 16px; text-align: center;
	background: rgba(255,255,255,.92);
	opacity: 0; transition: opacity .25s ease;
}
.ff-tile__title {
	margin: 0; font-size: 13px; font-weight: 500; letter-spacing: .25em; text-transform: uppercase;
}
.ff-tile__cats { margin-top: 6px; font-size: 11px; letter-spacing: .1em; color: var(--ff-accent); }
.ff-tile:hover, .ff-tile:focus-visible { text-decoration: none; }
.ff-tile:hover .ff-tile__info, .ff-tile:focus-visible .ff-tile__info { opacity: 1; }
.ff-tile:hover img, .ff-tile:focus-visible img { transform: scale(1.04); }
.ff-tile__placeholder {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	font-size: 12px; letter-spacing: .25em; text-transform: uppercase; color: var(--ff-text);
}
@media (hover: none) { .ff-tile__info { display: none; } }

/* Filters (optional) */
.ff-filters {
	display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: center;
	padding: 14px 20px; margin: 0; list-style: none;
}
.ff-filters a {
	color: var(--ff-text); font-size: 11px; font-weight: 500; letter-spacing: .25em; text-transform: uppercase;
}
.ff-filters .is-active a, .ff-filters a:hover { color: var(--ff-accent); text-decoration: none; }
.ff-filters .count { opacity: .6; margin-left: 4px; }

/* Load more */
.ff-loadmore-wrap { text-align: center; padding: 34px 20px 50px; }
.ff-loadmore {
	display: inline-block; padding: 12px 28px; border: 1px solid #ddd;
	color: var(--ff-text); font-size: 11px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase;
}
.ff-loadmore:hover { border-color: var(--ff-accent); color: var(--ff-accent); text-decoration: none; }
.ff-loadmore.is-loading { opacity: .5; pointer-events: none; }
/* Infinite scroll: the button becomes a quiet "Loading…" note */
.ff-loadmore-wrap.ff-auto { padding: 24px 20px 40px; }
.ff-loadmore-wrap.ff-auto .ff-loadmore { border: 0; visibility: hidden; }
.ff-loadmore-wrap.ff-auto .ff-loadmore.is-loading { visibility: visible; opacity: .6; }

/* ---------- Content (pages, projects, posts) ---------- */
.ff-content { max-width: 1140px; margin: 0 auto; padding: 40px 24px 70px; }
.ff-content--wide { max-width: none; padding: 0 0 70px; }
.ff-content--wide > .ff-entry > *:not(.alignfull):not(.vc_row):not(.wpb-content-wrapper) { max-width: 1140px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }
.ff-entry-title { margin: 0 0 6px; font-size: 26px; text-transform: uppercase; letter-spacing: .12em; }
.ff-entry-meta { margin: 0 0 28px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ff-text); }
.ff-entry-meta a { color: var(--ff-accent); }
.ff-entry > *:first-child { margin-top: 0; }
.ff-entry p { margin: 0 0 1.2em; }
.ff-entry iframe[src*="youtube"], .ff-entry iframe[src*="youtu.be"], .ff-entry iframe[src*="vimeo"] {
	display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; margin: 0 0 24px;
}
.ff-entry .alignwide { max-width: 1400px; }
.ff-entry .alignfull { width: 100%; max-width: none; }
.ff-entry figure { margin: 0 0 24px; }
.ff-entry figcaption { font-size: 13px; color: var(--ff-text); margin-top: 6px; }
.ff-entry .wp-block-button__link { border-radius: 0; letter-spacing: .2em; text-transform: uppercase; font-size: 12px; font-weight: 500; }

/* Project nav */
.ff-project-nav {
	display: flex; justify-content: space-between; align-items: center; gap: 16px;
	border-top: 1px solid #eee; margin-top: 50px; padding-top: 24px;
	font-size: 11px; font-weight: 500; letter-spacing: .25em; text-transform: uppercase;
}
.ff-project-nav a { color: var(--ff-text); }
.ff-project-nav a:hover { color: var(--ff-accent); text-decoration: none; }
.ff-share { margin-top: 18px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ff-text); }
.ff-share a { margin-left: 12px; color: var(--ff-text); }

/* ---------- Footer ---------- */
.ff-footer {
	padding: 26px 24px 40px; text-align: center;
	font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ff-text);
}
.ff-footer a { color: var(--ff-text); }

/* ---------- 404 ---------- */
.ff-404 { text-align: center; padding: 100px 24px; }