/*
 Theme Name: GeneratePress Child
 Template: generatepress
*/

/* Base tokens */
:root {
  --bg: #ffffff;
  --text: #0f172a;
  --muted:#6b7280;
  --primary:#3A5A40;   /* oc-grove primary */
  --accent: #F4A261;   /* oc-grove accent */
  --neutral:#F0EFEB;   /* oc-grove neutral */
  --cta-text:#0f172a;
}

/* Theme variants */
body[data-theme="oc-grove"] {
  --primary:#3A5A40; --accent:#F4A261; --neutral:#F0EFEB;
}
body[data-theme="tech-coast"] {
  --primary:#1F2937; --accent:#60A5FA; --neutral:#F3F4F6;
}
body[data-theme="concrete-bloom"] {
  --primary:#3D405B; --accent:#E07A5F; --neutral:#F4F1DE;
}

h1 {
	font-weight: bold;
}

/* General Modifications */
cite {
  font-size: 0.75em;
  opacity: 0.75;
}

.padAround20 {
  padding: 20px;
}

.wp-block-pullquote {
  padding: 1em 0;
}

.moreDetailsSection {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}

.no-break { white-space: nowrap; }

/* optional: adjust spacing after the span */
.hpHeroHeadline br,
.no-break + *::before { content:" ";}


/* NOT YET class -- START*/
/* Base class */
.notYet {
  position: relative;
  color: var(--muted) !important;     /* dim text */
  cursor: not-allowed !important;
}

/* Overlay effect */
.notYet::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(180,180,180,0.2);  /* white overlay at 20% */
  border-radius: inherit;             /* respect rounded buttons */
  z-index: 2;                         /* above background but below text */
}

/* Make sure text stays visible above overlay */
.notYet > * {
  position: relative;
  z-index: 3;
}
/* NOT YET -- END*/

/* Utility mappings */
body { background:var(--bg); color:var(--text); }
a.btn, .btn { background:var(--accent); color:var(--cta-text); padding:.8rem 1.2rem; /*border-radius:.75rem;*/ display:inline-block; text-align: center;}
.section-neutral { background:var(--neutral); }
.text-primary { color:var(--primary); }
.centerButton {margin-left:auto; margin-right:auto;}
a.ctaLink {font-size:1.2em;font-weight:bold;}

/*Special Hero stuff - START*/
.hpHero {
  display: grid;
  position: relative;
  height: auto;
  /* Fallback for older browsers */
  min-height: calc(90svh - var(--header-h, 64px));

  padding-top: calc(var(--header-h) + 16px);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 56px);

  justify-content: center;  /* center horizontally */
  align-items: center;      /* center vertically (optional) */
  align-content: center;
}

/* Safer minimum when the WP admin bar is present */
.admin-bar .hpHero {
  min-height: calc(90svh - var(--header-h, 64px) - var(--adminbar-h, 0px));
}

/* Prefer dynamic viewport units on modern mobile */
@supports (height: 100dvh){
  .hpHero{
    min-height: calc(90dvh - var(--header-h, 64px));
  }
  .admin-bar .hpHero{
    min-height: calc(90dvh - var(--header-h, 64px) - var(--adminbar-h, 0px));
  }
}

/* The animated background layer */
.hpHero::before {
  content:"";
  position:absolute;
  inset:-20%;
  background: radial-gradient(circle at 50% 80%, rgb(from var(--accent) r g b / 0.35), transparent);
  animation: ripple 5s ease-in-out infinite alternate;
  z-index: 0;               /* behind the content wrapper */
  pointer-events: none;     /* never block clicks */
  /* add a clip without forcing the whole hero to overflow:hidden */
  -webkit-mask: radial-gradient(closest-side, #000 98%, #0000 100%);
          mask: radial-gradient(closest-side, #000 98%, #0000 100%);
}

/* Make sure any ripple bg sits behind and never blocks clicks */
.hpHero > *{ position:relative; z-index:1; }

/* Optional: ensure section below doesn't crash into hero */
.hpHero{ margin-bottom: 0; }
.hpHero + .hpSection,
.hpHero + section {margin-top:0;}

/* Your actual hero content goes above the ripple */
.hpHeroContent {
  position: relative;
  z-index: 1;
}

/* existing animation */
@keyframes ripple {
  0% { transform: scale(1); opacity:.6; }
  100% { transform: scale(1.15); opacity:.9; }
}

.hpHeroHeadline {
	color: black;
	text-align: center;
}

.hpHeroHeadline b,
.hpHeroHeadline strong {
	color: var(--accent);
}

.hpHeroSubhead {
    font-size: 1.25em;
    text-transform: uppercase;
    width: 75%;
    display: block;
    margin: 0 auto 0 auto;
}

/* mimic <strong> styling for highlighted words */
.hpHeroHighlight {
  font-weight: 700;                  /* same as strong/bold */
  color: var(--accent);              /* pulls from your oc-grove accent */
  text-decoration: none;             /* keep it clean */
}

/* optional – subtle transition if you hover or animate the hero */
.hpHeroHighlight:hover {
  filter: brightness(1.1);
}

/* optional – make sure it's accessible even on dark hero variants */
.hpSectionDark .hpHeroHighlight {
  color: var(--accent);
}

.hero-text-card {
  display: inline-block;       /* shrink to content instead of 100% */
  margin: 0 auto;              /* center horizontally */
  padding: 2rem;               /* give breathing room */
  background: rgba(255,255,255,0.9);  /* card background */
  border-radius: 8px;          /* optional rounded corners */
  max-width: 800px;            /* keeps it from being too wide */
  text-align: center;          /* keep text centered */
}

/* button wrapping for Hero CTAs */
.hpHero .btn-row {
	margin-top: clamp(16px, 4vh, 48px);
}

.btn-row{
  display:flex; gap:12px; flex-wrap:wrap;
  justify-content:center;
}
@media (max-width: 480px){
  .btn-row{ flex-direction:column; }
}

/*Special Hero stuff - END*/

/*p5js Hero Stuff ------------ START*/
.hero-has-canvas { 
  position: relative; 
  overflow: hidden; 
}

.hero-has-canvas #p5-holder {
  position: absolute;
  inset: 0;              /* fill the hero */
  z-index: 0;            /* behind everything else */
  pointer-events: none;  /* don’t block clicks */
}

.hero-has-canvas > *:not(#p5-holder) {
  position: relative;
  z-index: 1;            /* text/buttons sit on top */
}

#p5-holder canvas {
  display: block;
  width: 100%;
  height: 100%;
}
/*p5js Hero Stuff ------------ END*/

/*Custom HomePage Classes - START*/
.hpSection {
	margin: 0px auto 0px auto;
	padding: 50px 10vw;
/* 	border-radius: 5px; --doesnt make sense with 0 top/bottom margin*/
}
.hpSectionDark {
	background-color: var(--primary);
	color: #f3f3f3;
}
.hpSectionLight {
	background-color: var(--neutral);
}

.hpSubhead {
	font-size: 1.25em;
}

.hpButtonFullWidth {
	width:100%;
	text-align: center;
	justify-content: center;
}


.hpCard {
	display: flex;
	color: black;
	flex-direction: column;
	justify-content: space-between;
}

.hpWhoWeWorkWithCard{
	background-color:var(--neutral);
	border: 4px solid var(--accent);
}

.hpWeOfferCard{
	background-color:var(--neutral);
	border: 4px solid var(--accent);
}

.cardDark {
	color: #f3f3f3;
}

.cardFloatBottom{
	text-align-last:center;
	margin-top:auto;
	margin-bottom: 0px;
}

.cardFloatBottom p{
	margin-bottom: 0px;
}

.halfSeparator {
	width: 50%;
	margin-left: auto;
	margin-right: auto;
}

.tile-emoji{
  font-size: 100px !important;  /* exact size */
  line-height: 1;               /* no extra vertical space */
  display: inline-flex;         /* easy centering */
  align-items: center;
  justify-content: center;
  width: 100px;                 /* optional: reserve space */
  height: 100px;                /* optional: reserve space */
}
/*Custom HomePage Classes - END*/

/*Custom BrokerPage Classes - START*/
.brokerHero2509 {
  position: relative;
  overflow: hidden;         /* keep the ripple neatly clipped */
  height: 65vh;
}

/* The animated background layer */
.brokerHero2509::before {
  content:"";
  position:absolute;
  inset:-20%;
  background: radial-gradient(circle at 50% 80%, rgb(from var(--primary) r g b / 0.35), transparent);
  animation: ripple 5s ease-in-out infinite alternate;
  z-index: 0;               /* behind the content wrapper */
  pointer-events: none;     /* never block clicks */
}

.brokerHeadline b,
.brokerHeadline strong {
	color: var(--primary);
}

.bulletCardTitle {}

.brokerOfferCard {
	background-color:var(--neutral);
	padding: 20px;
	border: 4px solid var(--accent);
}

.hpWeDeliverCard{
	background-color:var(--neutral);
	border: 4px solid var(--primary);
}


/*process diagram - START*/
:root{
  --arrow-color: #f59e0b;   /* OC orange */
  --arrow-stroke: 6px;       /* line thickness */
  --shaft-len: 22px;         /* vertical shaft length below card */
  --head-size: 14px;         /* size of the chevron head */
  --arrow-clear: 10px;       /* extra space between card and arrow */
  --card-gap: calc(var(--shaft-len) + var(--head-size) + var(--arrow-clear) + 12px);          /* space between cards (>= shaft + head) */
}

.processSteps{
  display: flex;
  flex-direction: column;     /* vertical flow */
  gap: var(--card-gap);
  align-items: stretch;
  overflow: visible;
}

.processStepBox{
  position: relative;
  background: #efefea;
  overflow: visible;
  isolation:isolate;
/*   border: 2px solid var(--accent); */
/*   border-radius: 8px; */
/*   padding: 16px 18px; */
}

/* shaft below the card */
.processStepBox::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(-1 * (var(--shaft-len) + var(--arrow-clear))); /* outside the card */
  transform: translateX(-50%);
  width: 0;
  height: var(--shaft-len);
  border-left: var(--arrow-stroke) solid var(--accent);
}

/* hollow arrowhead (chevron) below the shaft */
.processStepBox::before{
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(-1 * (var(--shaft-len) + var(--head-size) + var(--arrow-clear) - var(--arrow-stroke)));
  transform: translateX(-50%) rotate(45deg);
  width: var(--head-size);
  height: var(--head-size);
  background: transparent;
  border-right: var(--arrow-stroke) solid var(--accent);
  border-bottom: var(--arrow-stroke) solid var(--accent);
  /* tip alignment tweak */
  box-sizing: border-box;
}

/* hide connector on the last item */
.processStepBox:last-child::before,
.processStepBox:last-child::after{
  display: none;
}
/*process steps - END*/



/* footer - START*/
/*
.site-footer {
  background: var(--neutral);
  color: var(--text);
  padding: 3rem 1rem;
  font-size: 0.875rem;
}
.site-footer a {
  color: var(--primary);
  text-decoration: none;
}
.site-footer a:hover {
  color: var(--accent);
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: 1.5rem;
  text-align: center;
}
.footer-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.footer-contact {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.footer-logos {
  margin: 1rem 0;
  opacity: 0.7;
  font-style: italic;
}
.footer-copy {
  margin-top: 1rem;
  color: var(--muted);
}*/

.footer-widget-1, .footer-widget-2, .footer-widget-3 {
	border-left: 2px var(--accent) solid;
}

.footer-widget-1 {
/* 	width: 20%; */
	flex: 0 0 20%;	
}
/* footer -- END */