/*
Theme Name: Barmotion 2026
Description: A standalone, from-scratch replacement for Porcelain (end of life). Not a child theme — it does not depend on Porcelain's functions, options framework, or templates. It re-registers the "portfolio" post type and taxonomy itself so the existing 14 bar pages keep working after switching themes. The homepage (front-page.php) is fully built out; other page types (page.php, single.php, index.php) are clean, functional fallbacks to be designed properly in a follow-up pass — see README.txt.
Author: Barmotion
Version: 0.1.0
Requires PHP: 7.4
*/

:root{
	--bg:          #0d1a1f;
	--bg-panel:    #12232a;
	--bg-panel-2:  #17303a;
	--accent:      #94c93f;
	--accent-dim:  #6d9930;
	--accent-soft: rgba(148,201,63,.14);
	--ink:         #eef1ea;
	--ink-muted:   #a7b6ae;
	--ink-faint:   #6f8079;
	--rule:        rgba(238,241,234,.10);
	--maxw:        1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
	margin:0;
	background:var(--bg);
	color:var(--ink-muted);
	font-family:'Open Sans',Helvetica,Arial,sans-serif;
	font-size:16px;
	line-height:1.7;
	-webkit-font-smoothing:antialiased;
}
h1,h2,h3{
	font-family:'Oswald','Open Sans',Helvetica,Arial,sans-serif;
	color:var(--ink);
	margin:0;
	text-wrap:balance;
}
a{ color:var(--accent); text-decoration:none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
	outline:2px solid var(--accent); outline-offset:3px;
}
img,svg{ display:block; max-width:100%; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:5%; padding-right:5%; }
.eyebrow{
	font-family:'Oswald',sans-serif; font-size:.72rem; letter-spacing:.22em;
	text-transform:uppercase; color:var(--accent); font-weight:600; display:block;
}
.btn{
	font-family:'Oswald',sans-serif; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase;
	font-weight:600; padding:14px 26px; border-radius:2px; display:inline-flex; align-items:center; gap:8px;
	transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
	border:1px solid transparent; cursor:pointer;
}
.btn-primary{ background:var(--accent); color:#0d1a1f; }
.btn-primary:hover{ background:#a8dc55; transform:translateY(-1px); }
.btn-ghost{ border-color:var(--rule); color:var(--ink-muted); background:none; }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }

/* ---- site chrome ---- */
.site-nav{
	display:flex; align-items:center; justify-content:space-between;
	padding:22px 5%; border-bottom:1px solid var(--rule);
	position:relative; z-index:20;
}
.site-nav .logo img{ height:34px; width:auto; display:block; }
.nav-menu{ list-style:none; display:flex; gap:28px; margin:0; padding:0; }
.nav-menu a{
	font-family:'Oswald',sans-serif; font-size:.78rem; letter-spacing:.08em;
	text-transform:uppercase; color:var(--ink-muted);
}
.nav-menu a:hover{ color:var(--accent); }
.nav-toggle{ display:none; background:none; border:0; color:var(--ink); font-size:1.4rem; cursor:pointer; }

.site-footer{
	padding:28px 5%; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
	font-size:.78rem; color:var(--ink-faint); border-top:1px solid var(--rule);
}
.site-footer a{ color:var(--ink-faint); }
.site-footer a:hover{ color:var(--accent); }
.footer-ticker{ background:var(--accent); color:var(--bg); padding:14px 0; overflow:hidden; white-space:nowrap; }
.footer-ticker .ticker-track span{ color:var(--bg); font-weight:600; }
.ticker{
	border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
	background:var(--bg-panel); overflow:hidden; white-space:nowrap; padding:16px 0;
}
.ticker-track{ display:inline-flex; gap:36px; animation:bm-scroll 32s linear infinite; }
@media (prefers-reduced-motion: reduce){ .ticker-track{ animation:none; } }
@keyframes bm-scroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.ticker-track span{
	font-family:'Oswald',sans-serif; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
	color:var(--ink-faint); display:inline-flex; align-items:center; gap:36px;
}
.ticker-track span em{ color:var(--accent); font-style:normal; }

/* ---- hero ---- */
.hero{
	display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center;
	padding:clamp(48px,7vw,88px) 5% clamp(48px,6vw,72px);
}
.hero h1{ font-size:clamp(2.3rem,5vw,3.6rem); line-height:1.06; font-weight:300; }
.hero h1 b{ font-weight:700; color:var(--ink); }
.hero .eyebrow{ margin-bottom:16px; }
.hero p.sub{ margin-top:20px; max-width:52ch; font-size:1.02rem; }
.hero-cta{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }
.hero-art{
	aspect-ratio:4/3; border-radius:4px;
	background:
		radial-gradient(circle at 30% 25%, var(--accent-soft), transparent 60%),
		linear-gradient(155deg, var(--bg-panel-2), var(--bg-panel));
	border:1px solid var(--rule);
	display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
}
.hero-art img{ width:100%; height:100%; object-fit:cover; }
.rating-badge{
	position:absolute; left:16px; bottom:16px; background:var(--bg); border:1px solid var(--rule);
	border-radius:4px; padding:12px 16px; display:flex; flex-direction:column; gap:4px;
	box-shadow:0 12px 28px -14px rgba(0,0,0,.6);
}
.rating-badge .stars{ color:var(--accent); font-size:.85rem; letter-spacing:.1em; }
.rating-badge .score{ font-family:'Oswald',sans-serif; font-size:.82rem; color:var(--ink); }

/* ---- trusted / stats ---- */
.trusted{ padding:clamp(48px,6vw,72px) 5%; text-align:center; }
.trusted h2{ font-size:clamp(1.3rem,2.6vw,1.7rem); font-weight:300; max-width:34ch; margin:0 auto; }
.trusted h2 b{ font-weight:700; }
.logo-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px; }
.logo-chip{
	width:112px; height:64px; border:1px dashed var(--rule); border-radius:3px;
	display:flex; align-items:center; justify-content:center;
	font-family:'Oswald',sans-serif; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
	color:var(--ink-faint);
}
.stat-row{
	display:flex; flex-wrap:wrap; justify-content:center; gap:1px; background:var(--rule);
	border:1px solid var(--rule); border-radius:4px; overflow:hidden; margin-top:40px;
}
.stat{ flex:1 1 200px; background:var(--bg); padding:24px 20px; text-align:center; }
.stat .n{ font-family:'Oswald',sans-serif; font-weight:700; font-size:1.7rem; color:var(--accent); display:block; }
.stat .l{ font-size:.82rem; color:var(--ink-faint); margin-top:4px; }

/* ---- statement ---- */
.statement{ background:var(--bg-panel); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:clamp(56px,8vw,96px) 5%; }
.statement-in{ max-width:820px; margin:0 auto; text-align:center; }
.statement h2{ font-size:clamp(1.6rem,3.6vw,2.4rem); font-weight:300; }
.statement h2 b{ font-weight:700; color:var(--accent); }
.statement p{ margin-top:22px; max-width:60ch; margin-left:auto; margin-right:auto; }
.statement .hero-cta{ justify-content:center; margin-top:32px; }

/* ---- grids ---- */
.section-head{ display:flex; align-items:baseline; justify-content:space-between; padding:0 5%; margin-bottom:22px; gap:20px; flex-wrap:wrap; }
.section-head h2{ font-size:clamp(1.3rem,2.4vw,1.7rem); }
.work-grid{ display:grid; grid-template-columns:repeat(6,1fr); grid-template-rows:repeat(2,130px); gap:6px; padding:0 5% 20px; }
.work-grid .cell{ position:relative; border-radius:2px; overflow:hidden; display:flex; align-items:flex-end; background-size:cover; background-position:center; }
.work-grid .cell span{ font-family:'Oswald',sans-serif; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(238,241,234,.6); padding:8px 10px; }
.work-grid .cell:nth-child(1){ grid-column:span 2; grid-row:span 2; }
.work-grid .cell:nth-child(6){ grid-column:span 2; }
.work-more{ text-align:center; padding:0 0 clamp(56px,7vw,84px); font-family:'Oswald',sans-serif; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; }

.events{ padding:0 5% clamp(56px,7vw,84px); }
.event-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.event-card{ position:relative; aspect-ratio:3/4; border-radius:3px; overflow:hidden; display:flex; align-items:flex-end; padding:20px; background-size:cover; background-position:center; }
.event-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.72), transparent 55%); }
.event-card span{ position:relative; z-index:1; font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase; color:var(--ink); font-size:1rem; line-height:1.25; }

/* ---- testimonial ---- */
.testimonial{ background:var(--bg-panel); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:clamp(56px,7vw,84px) 5%; }
.testimonial-in{ max-width:760px; margin:0 auto; text-align:center; }
.avatar{
	width:76px; height:76px; border-radius:50%; margin:0 auto 22px; background:var(--bg-panel-2);
	border:1px dashed var(--rule); display:flex; align-items:center; justify-content:center;
	font-family:'Oswald',sans-serif; color:var(--ink-faint); font-size:.7rem; text-align:center;
}
.testimonial blockquote{ margin:0; font-size:1.25rem; color:var(--ink); font-style:italic; font-weight:300; }
.testimonial cite{ display:block; margin-top:20px; font-style:normal; font-family:'Oswald',sans-serif; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }

/* ---- contact ---- */
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:50px; padding:clamp(56px,7vw,84px) 5%; }
.contact h2{ font-size:clamp(1.5rem,3vw,2.1rem); font-weight:300; margin-bottom:18px; }
.contact h2 b{ font-weight:700; }
.contact-detail{ margin-bottom:18px; font-size:.95rem; }
.contact-detail strong{ display:block; color:var(--ink); font-family:'Oswald',sans-serif; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:4px; }

/* ---- generic inner-page fallback (page.php / single.php / index.php) ---- */
.page-hero{ padding:56px 5% 28px; border-bottom:1px solid var(--rule); }
.page-hero h1{ font-size:clamp(1.9rem,4vw,2.6rem); }
.entry-content{ max-width:74ch; padding:44px 5% 80px; margin:0 auto; }
.entry-content img{ border-radius:3px; margin:20px 0; max-width:100%; height:auto; }
.entry-content h2{ font-size:1.5rem; margin-top:1.8em; margin-bottom:.6em; }
.entry-content h3{ font-size:1.2rem; margin-top:1.5em; margin-bottom:.5em; color:var(--ink); }
.entry-content h4{ font-size:1.05rem; color:var(--ink); line-height:1.6; }
.entry-content ul{ padding-left:1.2em; }
.entry-content li{ margin-bottom:.4em; }
.entry-content a{ text-decoration:underline; text-underline-offset:2px; }
/* full-width WPBakery pages (Who We Are, What We Do, Gallery all use
   Porcelain's template-full-custom.php — this theme doesn't have that
   file, so they fall back to this class with the width cap removed) */
.entry-content.is-full-width{ max-width:none; }

/* ---- WPBakery tabs/accordion (used on Who We Are) — keep the plugin's
   own tab-switching JS/CSS, just make sure text stays legible on our
   dark background regardless of the "color"/"shape" preset chosen in
   the editor. ---- */
.entry-content .vc_tta-panel-body,
.entry-content .vc_tta-panel-body p{ color:var(--ink-muted); }
.entry-content .vc_tta-color-green.vc_tta-style-classic .vc_tta-tab > a{ color:var(--ink); }

/* ---- "What We Do" bar grid (services-wrapper — Porcelain's own class
   names, kept as-is since that's what's already saved in the page
   content; this theme just needs to give them a layout). ---- */
.services-wrapper{
	display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px;
	list-style:none; padding:0; margin:20px 0;
}
.services-box{ display:block; }
.square-wrapper{
	position:relative; aspect-ratio:1/1; border-radius:3px; overflow:hidden;
}
.services-img{
	position:absolute; inset:0; background-size:cover; background-position:center;
	transition:transform .35s ease;
}
.square-wrapper:hover .services-img{ transform:scale(1.08); }
.services-content{
	position:absolute; inset:0; display:flex; align-items:flex-end; padding:16px;
	background:linear-gradient(0deg, rgba(0,0,0,.78), transparent 60%);
}
.sc-wraper h3{ margin:0; font-size:1rem; }
.sc-wraper h3 a{
	font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase;
	color:var(--ink); text-decoration:none; letter-spacing:.02em;
}
.sc-wraper h3 a:hover{ color:var(--accent); }

/* ---- Visual Form Builder Pro (Contact Us) — the plugin ships its own
   CSS assuming a light page background; these overrides just make the
   same form legible on our dark one. ---- */
.entry-content .vfbp-form{ max-width:640px; }
.entry-content .vfb-form-group{ margin-bottom:18px; }
.entry-content .vfb-control-label{
	font-family:'Oswald',sans-serif; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
	color:var(--ink-muted); display:block; margin-bottom:6px; text-decoration:none;
}
.entry-content .vfb-required-asterisk{ color:var(--accent); }
.entry-content .vfb-form-control{
	width:100%; background:var(--bg-panel); border:1px solid var(--rule); border-radius:2px;
	color:var(--ink); padding:11px 13px; font-family:'Open Sans',sans-serif; font-size:.95rem;
}
.entry-content .vfb-form-control:focus{ border-color:var(--accent); outline:none; }
.entry-content .vfb-checkbox label{ color:var(--ink-muted); font-size:.92rem; display:flex; gap:8px; align-items:center; text-decoration:none; }
.entry-content .vfbp-form input[type="submit"],
.entry-content .vfbp-form button[type="submit"]{
	font-family:'Oswald',sans-serif; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
	padding:14px 26px; border-radius:2px; background:var(--accent); color:#0d1a1f; border:0; cursor:pointer;
}
.entry-content .vfbp-form input[type="submit"]:hover,
.entry-content .vfbp-form button[type="submit"]:hover{ background:#a8dc55; }

/* ---- single bar page (single-portfolio.php) ---- */
.bar-facts{
	display:flex; flex-wrap:wrap; gap:1px; background:var(--rule);
	margin:0 5%; border:1px solid var(--rule); border-radius:4px; overflow:hidden;
}
.bar-fact{ flex:1 1 200px; background:var(--bg-panel); padding:18px 22px; }
.bar-fact__k{ font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:6px; }
.bar-fact__v{ color:var(--ink); font-size:14px; }
.bar-fact__v a{ color:var(--ink); }
.bar-fact__v a:hover{ color:var(--accent); }

.bar-story{ display:grid; grid-template-columns:minmax(0,64ch) 1fr; gap:56px; padding:56px 5%; }
.bar-story__body p:first-of-type::first-letter{
	font-family:'Oswald',sans-serif; float:left; font-size:3.4em; line-height:.8;
	padding:.06em .07em 0 0; color:var(--accent); font-weight:700;
}
.bar-rail{ display:flex; flex-direction:column; gap:20px; }
.bar-rail__card{ background:var(--bg-panel); border:1px solid var(--rule); border-radius:4px; padding:22px; }
.bar-rail__card h3{ font-family:'Oswald',sans-serif; color:var(--ink); text-transform:uppercase; font-size:15px; margin:0 0 10px; }
.bar-rail__card p{ font-size:14px; margin:0 0 14px; }
.bar-rail__card .btn{ width:100%; justify-content:center; }

.bar-gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:0 5% 56px; }
.bar-gallery a{ display:block; aspect-ratio:1/1; overflow:hidden; border-radius:2px; }
.bar-gallery img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.bar-gallery a:hover img{ transform:scale(1.06); }

.bar-explore{ background:var(--bg-panel); padding:56px 5%; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.bar-explore__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-top:20px; }
.bar-chip{
	background:var(--bg); border:1px solid var(--rule); border-radius:3px; padding:16px 14px;
	display:flex; flex-direction:column; gap:8px; text-decoration:none;
	transition:border-color .15s ease, transform .15s ease;
}
.bar-chip:hover{ border-color:var(--accent); transform:translateY(-2px); }
.bar-chip__cat{ font-family:'Oswald',sans-serif; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); }
.bar-chip__name{ font-family:'Oswald',sans-serif; color:var(--ink); font-size:14px; font-weight:500; text-transform:uppercase; }

.bar-closer{ padding:72px 5%; text-align:center; }
.bar-closer p{ color:var(--ink-muted); max-width:52ch; margin:0 auto 26px; }
.bar-closer .hero-cta{ justify-content:center; }
.bar-closer__contact{ margin-top:24px; font-size:14px; color:var(--ink-faint); }
.bar-closer__contact a{ color:var(--ink-muted); }

@media (max-width:820px){
	.bar-story{ grid-template-columns:1fr; }
	.bar-gallery{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:900px){
	.nav-menu{ display:none; }
	.nav-menu.is-open{
		display:flex; flex-direction:column; gap:0; position:absolute; top:100%; left:0; right:0;
		background:var(--bg-panel); border-bottom:1px solid var(--rule); padding:8px 5% 16px; z-index:30;
	}
	.nav-menu.is-open li{ padding:10px 0; border-bottom:1px solid var(--rule); }
	.nav-menu.is-open li:last-child{ border-bottom:0; }
	.nav-toggle{ display:block; }
	.hero{ grid-template-columns:1fr; }
	.hero-art{ order:-1; max-width:340px; margin:0 auto; }
	.work-grid{ grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,110px); }
	.work-grid .cell:nth-child(6){ grid-column:span 1; }
	.event-cards{ grid-template-columns:repeat(2,1fr); }
	.contact{ grid-template-columns:1fr; }
	.rating-badge{ display:none; }
}