/* ==========================================================================
   FTP Brewing Co. — design system
   Neobrutalist craft-beer theme on Picostrap5. Ported from the design mockup.
   Palette: cream #FFFBED · ink #16130E · green #55BE58/#2E8B3C ·
            yellow #F5B833 · red #E8462E · panel #F4EBD6
   ========================================================================== */

:root {
	--ftp-cream: #FFFBED;
	--ftp-ink:   #16130E;
	--ftp-green: #55BE58;
	--ftp-green-d: #2E8B3C;
	--ftp-yellow: #F5B833;
	--ftp-red:   #E8462E;
	--ftp-panel: #F4EBD6;
}

/* ---- Base (scoped to our body flag so wp-admin is untouched) --------------- */
body.ftp {
	background: var(--ftp-cream);
	color: var(--ftp-ink);
	font-family: 'Archivo', system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
body.ftp img { display: block; max-width: 100%; }
body.ftp ::selection { background: var(--ftp-yellow); color: var(--ftp-ink); }

/* Full-bleed main — bypass any Bootstrap container gutters. */
#ftp-main.ftp-page {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}
/* Links are never underlined in the mock — Bootstrap's reboot underlines all
   <a>, and the nav/footer sit OUTSIDE .ftp-page, so reset the whole chrome. */
.ftp-nav a,
.ftp-nav a:hover,
.ftp-footer a,
.ftp-footer a:hover,
.ftp-page a,
.ftp-page a:hover { text-decoration: none; }
.ftp-page a { color: var(--ftp-green-d); }
.ftp-page a:hover { color: var(--ftp-red); }

/* Shared logo badge (nav + footer). */
.ftp-badge {
	display: grid; place-items: center;
	width: 46px; height: 46px;
	background: var(--ftp-green);
	border: 3px solid var(--ftp-ink);
	border-radius: 12px;
	box-shadow: 3px 3px 0 var(--ftp-ink);
	font-family: 'Archivo Black', sans-serif;
	font-size: 17px; letter-spacing: -1px; color: var(--ftp-ink);
	transform: rotate(-4deg);
}
.ftp-badge--onDark { width: 44px; height: 44px; font-size: 16px; border-color: var(--ftp-cream); box-shadow: none; }

/* ---- Sticky nav ----------------------------------------------------------- */
.ftp-nav {
	position: sticky; top: 0; z-index: 50;
	background: var(--ftp-cream);
	border-bottom: 3px solid var(--ftp-ink);
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 16px;
	padding: 14px clamp(18px, 4vw, 52px);
}
.ftp-nav__brand { display: flex; align-items: center; gap: 12px; color: var(--ftp-ink); }
.ftp-nav__wordmark { display: flex; flex-direction: column; line-height: 1; }
.ftp-nav__name { font-family: 'Archivo Black', sans-serif; font-size: 16px; letter-spacing: .5px; }
.ftp-nav__tag  { font-size: 10px; letter-spacing: 2.5px; color: var(--ftp-green-d); font-weight: 700; }
.ftp-nav__links {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: clamp(14px, 2.4vw, 34px);
	font-family: 'Archivo Black', sans-serif; font-size: 13px; letter-spacing: 1px;
}
.ftp-nav__links a { color: var(--ftp-ink); }
.ftp-nav__links a:hover { color: var(--ftp-red); }
.ftp-nav__cta {
	color: var(--ftp-cream) !important;
	background: var(--ftp-ink);
	padding: 11px 20px; border-radius: 999px;
	box-shadow: 3px 3px 0 var(--ftp-green);
}

/* ---- Footer --------------------------------------------------------------- */
.ftp-footer {
	background: var(--ftp-ink); color: var(--ftp-cream);
	border-top: 3px solid var(--ftp-ink);
	padding: clamp(48px, 7vw, 80px) clamp(18px, 5vw, 64px) 0;
}
.ftp-footer__top { max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; }
.ftp-footer__brand { flex: 1 1 280px; max-width: 360px; }
.ftp-footer__brandrow { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ftp-footer__name { font-family: 'Archivo Black', sans-serif; font-size: 18px; }
.ftp-footer__blurb { font-size: .95rem; line-height: 1.6; font-weight: 500; opacity: .85; }
.ftp-footer__cols { display: flex; flex-wrap: wrap; gap: 48px; }
.ftp-footer__col { display: flex; flex-direction: column; gap: 9px; font-size: .95rem; font-weight: 500; }
.ftp-footer__head { font-family: 'Archivo Black', sans-serif; font-size: 12px; letter-spacing: 1.5px; color: var(--ftp-yellow); margin-bottom: 5px; }
.ftp-footer__col a { color: var(--ftp-cream); }
.ftp-footer__col a:hover { color: var(--ftp-yellow); }
.ftp-footer__stripe { display: flex; height: 22px; margin-top: 44px; }
.ftp-footer__stripe > div { flex: 1; background: repeating-linear-gradient(90deg, var(--ftp-cream) 0 22px, var(--ftp-ink) 22px 44px); }
.ftp-footer__legal { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; padding: 20px 0; font-size: .8rem; font-weight: 600; letter-spacing: .5px; opacity: .7; }

/* ---- Card hover (mockup used a JS style-hover attr; do it in CSS) ---------- */
.ftp-brewcard { transition: transform .18s ease, box-shadow .18s ease; }
.ftp-brewcard:hover { transform: translate(-5px, -5px); box-shadow: 11px 11px 0 var(--ftp-ink); }

/* ---- Scroll-reveal (JS toggles .is-in) ------------------------------------ */
.ftp-page [data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.ftp-page [data-reveal].is-in { opacity: 1; transform: none; }

/* ---- Keyframes ------------------------------------------------------------ */
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-16px) rotate(1.2deg); } }
@keyframes bubble { 0% { transform: translateY(0) scale(.5); opacity: 0; } 12% { opacity: .85; } 100% { transform: translateY(-340px) scale(1.1); opacity: 0; } }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes wobble { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes pop { 0% { transform: scale(0) rotate(-14deg); } 70% { transform: scale(1.14) rotate(5deg); } 100% { transform: scale(1) rotate(-5deg); } }
@keyframes cuebounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
@keyframes pinbob { 0%,100% { transform: translate(-50%,-100%) translateY(0); } 50% { transform: translate(-50%,-100%) translateY(-12px); } }

@media (prefers-reduced-motion: reduce) {
	.ftp-page [data-reveal] { opacity: 1 !important; transform: none !important; }
	.ftp-page * { animation: none !important; }
}

/* ---- WooCommerce shop pages — light on-brand pass ------------------------- */
body.ftp.woocommerce-page,
body.ftp.woocommerce {
	padding: clamp(30px, 5vw, 60px) clamp(18px, 5vw, 64px);
}
body.ftp .woocommerce ul.products li.product a img,
body.ftp .woocommerce-page ul.products li.product a img { border: 3px solid var(--ftp-ink); border-radius: 14px; }
body.ftp .woocommerce span.price,
body.ftp .woocommerce-Price-amount { font-family: 'Archivo Black', sans-serif; }
body.ftp .woocommerce a.button,
body.ftp .woocommerce button.button,
body.ftp .woocommerce #respond input#submit,
body.ftp .woocommerce input.button {
	font-family: 'Archivo Black', sans-serif;
	background: var(--ftp-ink); color: var(--ftp-cream);
	border: 3px solid var(--ftp-ink); border-radius: 999px;
	box-shadow: 3px 3px 0 var(--ftp-green);
}
body.ftp .woocommerce a.button:hover,
body.ftp .woocommerce button.button:hover { background: var(--ftp-red); box-shadow: 3px 3px 0 var(--ftp-ink); }