/*!
Theme Name: BHA Studio 2026
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: bha-studio-2026
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

BHA Studio 2026 is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* ACCESSIBLITY */
.offscreen {
	position: absolute;
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip-path: inset(1px 1px 1px 1px);
	clip-path: inset(1px, 1px, 1px, 1px);
}

.skip-to-content.offscreen:focus {
	position: relative;
	display: inline-block;
	height: auto;
	width: auto;
	padding: 0.625em 1.25em;
	background-color: #002e5e;
	color: #fff;
	overflow: visible;
	clip-path: none;
	text-decoration: none;
}

html {
	font-size: 16px;
	padding:12px;
}

body {
	width: 100%;
	overflow-x: hidden !important;
	background-color:#2b2a2b;
	color:#A3A1A2;
	padding:12px;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
}
span {
	font-family: 'Roboto', sans-serif;
}
.bha-project-title {
	font-size: 1.5rem;
	font-weight: 300;
}

/* TYPOGRAPHY */

h1, h2, h3, h4, h5 {
	font-family: 'Roboto Condensed', sans-serif;

}
p, li, a {
}
p {
}
a {
	font-weight: 400;
}

.light {
	font-weight: 300 !important;
}
.h-auto {
	min-height: auto !important;
}
.bold {
	font-weight: 700 !important;
}
strong {
	font-weight: 600 !important;
}

.centered {
	text-align: center;
}
.white {
	color: white;
	z-index: 1000;
}
.no-bullets {
	list-style: none;
	padding-left: 0;
}

.site-main {
	min-height: 80vh;
}

/* GUTENBERG EDITOR COLORS */

.has-red-background-color {
	background-color: #D64C32;
}

.has-red-color {
	color: #D64C32;
}

.has-orange-background-color {
	background-color: #cb6015;
}
.orange {
	color: #cb6015;
}

.has-orange-color {
	color: #cb6015;
}

.has-gray-background-color {
	background-color: #A6B3BB;
}

.has-gray-color {
	color: #A6B3BB;
}

/* IMAGES */
.object-fit-contain, .object-fit-contain img {
	object-fit: contain;
	font-family: 'object-fit:contain';
}

.object-fit-cover, .object-fit-cover img {
	object-fit: cover;
	font-family: 'object-fit:cover';
}
.height-auto img, .height-auto {
	height: auto !important;
}
.wp-block-columns {
	gap:12px;
	margin-bottom:0px;
}
.careers-list {
	list-style: none;
	padding-left:0;

}
.form-control {
	border-radius:0;
	background:black;
	border:none;
}
label {
	width: 100%;
	color:#B0726B;
	text-transform: lowercase;
	font-weight:400;
}
.careers-list li {
	margin-bottom:12px;
}
.careers-list li:hover a {
	color: #D64C32;
	border-bottom:5px solid #D64C32;
}
.careers-list a {
	color: #A3A1A2;
	text-decoration: none;
}
/* ROLLOVER IMAGES */
.rollover-item-container {
	position: relative;
	margin-bottom:16px;
}
.rollover-item-container .wp-block-cover {
	padding:0;
}
.hover-caption p {
	margin-bottom:0;
}
.hover-caption{
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  cursor: pointer;
  transition: opacity .2s, visibility .2s, height .2s;
  background: rgba(87,87,87,.7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 24px;
  color: #bfbfbf;
  font-size: 22px;

  border-bottom: 0;            /* remove the static border */
}

/* the animated "border" */
body:not(.home) .hover-caption::after, body:not(.home) .hover-image::after,body:not(.home) .border-animation::after{
  content:"";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: #D64C32;

  transform: scaleX(0);
  transform-origin: center;
  transition: transform .4s ease;
}

/* trigger when the container is hovered */
.rollover-item-container:hover .hover-caption::after, .rollover-item-container:hover .hover-image::after, .rollover-item-container:hover .border-animation::after{
  transform: scaleX(1);
}

.rollover-item-container:hover .hover-caption {
	height:100px;
}
.hover-image {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	cursor: pointer;
	transition: all .3s;
}
.rollover-item-container:hover .hover-image, .rollover-item-container:hover .hover-caption {
	visibility: visible;
	opacity: 1;
}
.rollover-item-container:hover .rollover-title {
	left:32px;
}
:root {
	--rollover-title-width: 50px;
	--rollover-title-left-hover: 32px;
	--rollover-line-width: 5px;
}
main.site-main {
  position: relative;
}

body.home main.site-main::after{
  content:"";
  position:fixed;
  top: var(--rollover-line-top, 0px);
  left: var(--rollover-line-x, -9999px);
  width: 3px;
  height: var(--rollover-line-h, 0px);
  background:#D64C32;
  pointer-events:none;
  z-index:9999;

  transform: scaleY(0);
  transform-origin:top;
  transition: transform .4s ease;
}

body.home main.site-main.rollover-active::after{
  transform: scaleY(1);
}



/* 4. Keep your existing title animation */
.rollover-item-container:hover .rollover-title {
	left: 32px;
}
main.site-main.rollover-active::after {
	background-color: #D64C32;
}


.rollover-title {
	position: absolute;
	background:rgba(0,0,0,.5);
	left: 0px;
	bottom:0;
	padding:5px;
	z-index: 10000;
	transition: all .3s;
	height: 100%;
	min-height: 100%;
	display: flex;
  align-items: center;
  justify-content: center;
	width: var(--rollover-title-width);


}
.rollover-item-container .wp-block-cover__inner-container {
	min-height: inherit;
}
.rollover-title h2 {
	transform:rotate(-90deg);
	font-size: 2rem;
	letter-spacing:1px;
	font-weight: 300;
}
.top-image img {
	object-position: top center;
}
.small-gap {
	gap:12px;
}
.about-columns .wp-block-image {
	margin-bottom:0;
}

.hero-column {
	gap:6px;
	margin-bottom:12px !important;
}
.hero-right-column {
	padding-left:12px;
}
.single-projects h2 {
	font-family: 'Roboto';
	font-weight: 300;
}
.single-projects .hero-column figure {
	margin-bottom: 0;
}

.single-projects .wp-block-gallery .wp-block-image img {
	max-height: 400px;

}

/* HAMBURGER MENU */

:root{
  --bha-menu-ink: rgba(255,255,255,.92);
  --bha-menu-bg: rgba(10,10,10,.94);
  --bha-menu-accent: #D64C32;
  --bha-menu-radius: 26px;
}

/* ===== Toggle button ===== */
.bha-menu-toggle{
  position: fixed;
  top: 30px;
  right: 32px;
  z-index: 100001; /* above overlay reveal */
  appearance: none;
  border: 0;
  background: transparent;
  padding: 10px;
  cursor: pointer;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bha-menu-toggle:focus-visible{
  outline:2px solid rgba(255,255,255,.35);
  outline-offset:4px;
}

/* ===== Modern burger: 3 bars (top 2 equal, bottom half) ===== */
.bha-burger{
  position: relative;
  width: 34px;
  height: 24px;
  display: inline-block;
}

.bha-burger__bar{
  position: absolute;
  left: 0;
  height: 2px;
  background: var(--bha-menu-ink);
  border-radius: 999px;
  transition: transform .28s ease, top .28s ease, opacity .2s ease, width .28s ease;
  will-change: transform, top, width;
}

/* Top two same width */
.bha-burger__bar--top{
  top: 5px;
  width: 30px;
}

.bha-burger__bar--mid{
  top: 11px;
  width: 30px;
  opacity: .95;
}
/* Hide hamburger while menu is open */
body.bha-menu-open .bha-menu-toggle{
  opacity: 0;
  pointer-events: none;
  transform: scale(.9);
  transition: opacity .2s ease, transform .2s ease;
}


/* Bottom ~half width (aligned right for a cleaner “modern” look) */
.bha-burger__bar--bot{
  top: 17px;
  width: 15px;
  right: 0;
  opacity: .9;
}


/* ===== Overlay container ===== */
.bha-menu-overlay{
  position:fixed;
  inset:0;
  z-index:100000;
  pointer-events:none; /* enabled when open */
}

/* The expanding “from top-right” reveal layer */
.bha-menu-overlay::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--bha-menu-bg);

  /* Circle reveal from top-right */
  clip-path: circle(0px at calc(100% - 28px) 28px);
  transition: clip-path .55s cubic-bezier(.2,.8,.2,1);
}

/* Menu content (appears after reveal starts) */
.bha-menu-overlay__inner{
  position:relative;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center; /* center vertically */
  align-items:center;     /* center horizontally */
  padding:24px;
  color: var(--bha-menu-ink);
  opacity:0;
  transform: translateY(-8px);
  transition: opacity .28s ease .15s, transform .28s ease .15s;
}

.bha-menu-overlay__nav{
  width:100%;
  display:flex;
  justify-content:center;
}


/* Close button */
.bha-menu-close{
  appearance:none;
  border:0;
  background:rgba(255,255,255,.08);
  color:var(--bha-menu-ink);
  width:44px;
  height:44px;
  border-radius:16px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  line-height:1;
}

.bha-menu-close:focus-visible{
  outline:2px solid rgba(255,255,255,.35);
  outline-offset:4px;
}

/* Nav list */
.bha-menu-overlay__nav{
  margin-top:22px;
}

.bha-overlay-menu{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.bha-overlay-menu a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:12px;
  color:var(--bha-menu-ink);
  text-decoration:none;
  font-size:clamp(24px, 3.2vw, 44px);
  letter-spacing:.2px;
  padding:10px 12px;
  border-radius: var(--bha-menu-radius);
  transition: background .2s ease, transform .2s ease;
}


/* Ensure the link can anchor the line */
.bha-overlay-menu a{
  position: relative;
  display: inline-flex;
  justify-content: center;
  text-align: center !important;
  padding: 10px 12px;

}

/* Red line: starts from center and expands outward */
.bha-overlay-menu a::before{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:6px;              /* adjust to taste */
  height:3px;              /* thickness */
  background: var(--bha-menu-accent, #D64C32);

  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s ease;
  border-radius: 999px;
}

/* Trigger */
.bha-overlay-menu a:hover::before,
.bha-overlay-menu a:focus-visible::before{
  transform: scaleX(1);
}

.bha-overlay-menu a:hover{
  background: transparent;
  transform: none;
}

.bha-overlay-menu a:focus-visible{
  outline:2px solid rgba(255,255,255,.35);
  outline-offset:3px;
}

/* ===== OPEN STATE ===== */
body.bha-menu-open .bha-menu-overlay{
  pointer-events:auto;
}

body.bha-menu-open .bha-menu-overlay::before{
  /* large enough to cover any viewport */
  clip-path: circle(150vmax at calc(100% - 28px) 28px);
}

body.bha-menu-open .bha-menu-overlay__inner{
  opacity:1;
  transform: translateY(0);
}
.bha-menu-overlay__top{
  position:absolute;
  top:40px;
  right:50px;
  width:auto;
  margin:0;
}


/* Burger -> X */
/* Burger -> X (hide bottom short bar) */
body.bha-menu-open .bha-burger__bar--top{
  top: 11px;
  transform: rotate(-45deg);
  width: 30px;
}

body.bha-menu-open .bha-burger__bar--mid{
  top: 11px;
  transform: rotate(45deg);
  width: 30px;
  opacity: 1;
}

body.bha-menu-open .bha-burger__bar--bot{
  opacity: 0;
  transform: scaleX(.7);
}


/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .bha-menu-overlay::before,
  .bha-menu-overlay__inner,
  .bha-burger__bar,
  .bha-burger__notch{
    transition:none !important;
  }
}


/* SINGLE PROJECTS */
.hover-feature-image img {
	width:100%;
	height:auto;
}

.hero-left-column figure, .hero-left-column img {
	height:100%;
}

 .hero-left-column img {
 	object-fit: cover;
 }
/* NAVIGATION */
.site-header {
	-webkit-transition: .35s ease-in-out;
	-moz-transition: .35s ease-in-out;
	-o-transition: .35s ease-in-out;
	transition: .35s ease-in-out;
	z-index: 1000;
	-webkit-transition: .35s ease-in-out;
	-moz-transition: .35s ease-in-out;
	-o-transition: .35s ease-in-out;
	transition: .35s ease-in-out;
	width: calc(100% - 46px) !important;
	background-color:#323031;
	position: fixed;


}
.site-branding img {
	width: 150px;
	height: auto;
	-webkit-transition: .35s ease-in-out;
	-moz-transition: .35s ease-in-out;
	-o-transition: .35s ease-in-out;
	transition: .35s ease-in-out;
}
.site-branding {
	margin-left:16px;
}

/* FOOTER */
.site-footer {
	min-height: 100px;
	position: relative;
	z-index: 9999;
}
.site-footer h3, .site-footer a, .site-footer p, .site-footer li {
	color: #A3A1A2;
	font-weight: 400;
}
.site-footer h3 {
	font-size: 1.2rem;
	margin-bottom: 1rem;
}

.site-footer ul {
	list-style: none;
	padding-left:0;
	display: block !important;
}
.site-footer li {
	margin-bottom: .5rem;
}

@media only screen and (min-width: 1400px) {
	.home .wp-block-cover {
		min-height:400px !important;
	}
	
	
}
@media only screen and (min-width: 1600px) {
	.home .wp-block-cover {
		min-height:500px !important;
	}
	
	
}
@media only screen and (max-width: 768px) {
	html {
		font-size: 15px;
	}
	.hero-right-column img {
		display: none;
	}

}

@media only screen and (max-width: 480px) {
	html {
		font-size: 14px;
	}
}