/* ============================================================
   hb+a Architects — Master CSS Stylesheet
   Platform: WordPress
   Paste into: Appearance → Customize → Additional CSS
   Last updated: July 2026
   ============================================================ */


/* ── 1. GOOGLE FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600;700&family=Inter:wght@300;400;500;600&display=swap');


/* ── 2. BASE / BODY ── */
body {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.75;
  color: #1A1A1A;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ── 3. HEADINGS — mixed weight hierarchy (WDA-style) ── */

/* H1 — large bold red display (hero statements) */
h1,
.entry-title,
.page-title,
.wp-block-heading h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 5.5vw, 4.8rem);
  color: #C8102E;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-align: center;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* H2 — medium weight black subheading */
h2,
.wp-block-heading h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  color: #1A1A1A;
  line-height: 1.3;
  text-align: center;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.2rem;
}

/* H3 — small red section heading with bar above */
h3,
.wp-block-heading h3 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  color: #C8102E;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  margin-bottom: 0.6rem;
}

/* Short red bar above H3 */
h3::before,
.wp-block-heading h3::before {
  content: '';
  display: block;
  width: 30px;
  height: 2px;
  background: #C8102E;
  margin: 0 auto 0.75rem;
}

/* H4 — bold black label */
h4,
.wp-block-heading h4 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: #1A1A1A;
  letter-spacing: 0.02em;
}

/* Thin light heading for dark/colored sections */
.dark-section h2,
.has-background h2,
.wp-block-cover h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 3.5rem);
  color: #fff;
  line-height: 1.2;
  text-align: center;
}


/* ── 4. BODY TEXT — centered with comfortable reading width ── */
p,
.entry-content p,
.wp-block-paragraph,
article p {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  line-height: 1.75;
  color: #3A3A3A;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.25rem;
}

/* White text paragraphs on dark backgrounds */
.dark-section p,
.has-background p,
.wp-block-cover p {
  color: #fff;
  text-align: center;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}


/* ── 5. LINKS ── */
a {
  color: #C8102E;
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: #8C0B20;
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ── 6. BLOCKQUOTES / PULL QUOTES ── */
blockquote,
.wp-block-quote {
  border-left: 3px solid #C8102E;
  padding: 1rem 1.5rem;
  margin: 2.5rem auto;
  max-width: 680px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.25rem;
  color: #3A3A3A;
  line-height: 1.6;
}

blockquote cite,
.wp-block-quote cite {
  display: block;
  margin-top: 0.75rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #C8102E;
}


/* ── 7. NAVIGATION ── */
nav a,
.nav-menu a,
#primary-menu a,
.main-navigation a {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #1A1A1A !important;
  text-decoration: none;
  transition: color 0.2s ease;
}

nav a:hover,
.nav-menu a:hover,
#primary-menu a:hover,
.main-navigation a:hover,
nav a.current-menu-item {
  color: #C8102E !important;
  text-decoration: none;
}


/* ── 8. IMAGES — uniform sizing ── */

/* All images fill container and crop cleanly */
img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Project / portfolio thumbnails — 3:2 ratio */
.portfolio-item img,
.project-card img,
.wp-block-image img,
.entry-thumbnail img,
.post-thumbnail img {
  aspect-ratio: 3 / 2;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

/* Blog / press thumbnails — 16:9 */
.blog-post img,
.news-item img,
.wp-post-image {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
}

/* Team / bio portrait — square, face-safe crop */
.team-photo img,
.bio-portrait img,
.author-avatar img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
  border-radius: 2px;
}

/* Hero / banner — full bleed */
.hero img,
.wp-block-cover img,
.site-header img {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  object-position: center;
}


/* ── 9. PROJECT PORTFOLIO GRID ── */
.portfolio-grid,
.projects-grid,
.wp-block-query {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
  padding: 2rem 4vw;
  max-width: 1400px;
  margin: 0 auto;
}

.project-card,
.portfolio-item {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  background: #fff;
  transition: box-shadow 0.3s ease;
}

.project-card:hover,
.portfolio-item:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.project-card:hover img,
.portfolio-item:hover img {
  transform: scale(1.03);
  transition: transform 0.4s ease;
}

.project-card__meta,
.portfolio-item__meta {
  padding: 1.25rem 1.5rem 1.5rem;
}

/* Project typology tags */
.project-tag,
.tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #C8102E;
  border: 1px solid #C8102E;
  padding: 2px 8px;
  border-radius: 2px;
  margin-right: 0.4rem;
  margin-bottom: 0.5rem;
}

.project-card__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.35rem;
  font-weight: 400;
  margin: 0.4rem 0;
  color: #1A1A1A;
}

.project-card__outcome {
  font-size: 0.875rem;
  color: #5A5A5A;
  line-height: 1.55;
}


/* ── 10. SERVICES — card style ── */
.service-item,
.services-list li {
  padding: 1.5rem 1.75rem;
  border-top: 2px solid #C8102E;
  margin-bottom: 1.5rem;
  list-style: none;
}

.service-item h4,
.services-list li strong {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #C8102E;
  margin-bottom: 0.4rem;
}


/* ── 11. CREDENTIAL / BADGE ROW (bio page) ── */
.credential-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  margin: 2rem auto;
  max-width: 800px;
}

.credential-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  border: 1px solid #D8D0C8;
  border-radius: 2px;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1A1A1A;
  background: #F5F2EE;
}


/* ── 12. CONTACT ICONS — fix oversized blurry icons ── */
.contact-section img,
.contact-icons img,
.wp-block-image.contact-icon img {
  width: 48px !important;
  height: 48px !important;
  object-fit: contain;
  margin: 0 auto 0.75rem;
  display: block;
}

.contact-section p,
.contact-block p {
  text-align: center;
  font-size: 0.95rem;
  color: #5A5A5A;
  max-width: none;
  margin-top: 0;
}


/* ── 13. ADVOCACY / DARK SECTIONS ── */
.dark-section h2,
.dark-section h3,
.wp-block-cover h2,
.wp-block-cover h3,
[class*="has-"] h2,
[class*="has-"] h3 {
  text-align: center;
  width: 100%;
  color: #fff;
}


/* ── 14. SMOOTH SCROLL ── */
html {
  scroll-behavior: smooth;
}


/* ── 15. MOBILE RESPONSIVENESS ── */
@media (max-width: 768px) {
  body {
    font-size: 16px;
  }

  h1,
  .entry-title,
  .page-title {
    font-size: 2rem;
    padding: 0 1rem;
  }

  h2 {
    font-size: 1.4rem;
    padding: 0 1rem;
  }

  p,
  .entry-content p {
    padding: 0 1.25rem;
  }

  .portfolio-grid,
  .projects-grid {
    grid-template-columns: 1fr;
    padding: 1rem 1.25rem;
  }

  .credential-row {
    flex-direction: column;
    align-items: center;
  }

  blockquote,
  .wp-block-quote {
    margin: 1.5rem 1rem;
  }

  nav a,
  .main-navigation a {
    font-size: 0.8rem;
  }

  .contact-section img,
  .contact-icons img {
    width: 40px !important;
    height: 40px !important;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 1.75rem;
  }

  .portfolio-grid,
  .projects-grid {
    gap: 1.25rem;
  }
}
/* ── Fix CTA section alignment ── */

/* Center the entire CTA section content */
.wp-block-cover,
.wp-block-cover__inner-container,
.wp-block-group.has-background,
.cta-section {
  text-align: center !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Center and constrain the paragraph so it doesn't wrap oddly */
.wp-block-cover p,
.wp-block-cover__inner-container p,
.cta-section p {
  text-align: center;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* Center headings in this section */
.wp-block-cover h2,
.wp-block-cover h3,
.wp-block-cover__inner-container h2,
.wp-block-cover__inner-container h3 {
  text-align: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Center the button */
.wp-block-cover .wp-block-buttons,
.wp-block-cover .wp-element-button,
.wp-block-cover a.wp-block-button__link {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
/* ── Press page — uniform image grid ── */

/* Lock all press/news thumbnails to the same height */
.press-page .wp-post-image,
.news-grid img,
.press-grid img,
.posts-grid img,
.wp-block-post-featured-image img,
.entry-thumbnail img,
.post-thumbnail img {
  width: 100%;
  height: 220px;        /* fixed height — all images same */
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Keep the card titles from shifting up/down */
.press-page .entry-title,
.press-page .wp-block-post-title,
.news-grid .post-title {
  font-size: 0.95rem;
  line-height: 1.45;
  text-align: center;
  margin-top: 0.85rem;
  padding: 0 0.5rem;
}

/* Even out row heights so captions align */
.press-page .wp-block-post,
.press-page article,
.news-grid-item {
  display: flex;
  flex-direction: column;
}

.press-page .wp-block-post-title,
.press-page .entry-title {
  flex: 1;  /* pushes all titles to the same baseline */
}
/* Logo-style images — don't crop, show the whole thing */
.press-page img[src*="logo"],
.press-page img[src*="archinect"],
.press-page img[src*="artx"] {
  object-fit: contain;
  background: #f5f5f5;
  padding: 1rem;
}
.wp-block-cover,
.wp-block-group.cta-section,
.cta-block {
  background-color: #F5F2EE !important;
  border-radius: 4px;
}

/* Switch text to dark since background is light */
.wp-block-cover h2,
.wp-block-cover h3,
.wp-block-cover p {
  color: #1A1A1A !important;
}
/* Center all content and fix button */
.wp-block-cover__inner-container {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 3rem 2rem;
}

.wp-block-cover p {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* Make the button stand out — white outlined style */
.wp-block-cover .wp-block-button__link {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
  padding: 0.75rem 2rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: background 0.2s ease, color 0.2s ease;
}

.wp-block-cover .wp-block-button__link:hover {
  background: #fff;
  color: #1A1A1A;
}
/* Hide the blurry contact icons */
.contact-section img,
.wp-block-image img[src*="phone"],
.wp-block-image img[src*="email"],
.wp-block-image img[src*="icon"],
.wp-block-image img[src*="mail"] {
  display: none !important;
}
/* Style the contact info text without icons */
.contact-section p,
.wp-block-column p {
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  color: #1A1A1A;
  text-align: center;
  letter-spacing: 0.02em;
  margin-bottom: 0.5rem;
}
/* Hide the existing copyright text */
.site-info,
.copyright,
footer .copyright-text {
  font-size: 0 !important;
  color: transparent !important;
}

/* Inject clean replacement text */
.site-info::after,
.copyright::after,
footer .copyright-text::after {
  content: '© Copyright 2026 HB+A Architects. All Rights Reserved.';
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  color: #8A8A8A;
  letter-spacing: 0.02em;
}
/* ── Hafsa Burt Bio Page — Clean Layout ── */

/* 1. Name + credential line above photo */
.bio-header,
.wp-block-post-author__name,
h1.bio-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: #1A1A1A;
  margin-bottom: 0.2rem;
  line-height: 1.2;
}

/* Keep "FAIA, LEED Fellow" red but rest of title black */
.bio-header strong,
.bio-credentials {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #C8102E;
  display: block;
  margin-bottom: 0.3rem;
}

/* 2. Constrain and clean up body text */
.bio-page .entry-content p,
.wp-block-post-author__bio p,
.bio-content p {
  font-family: 'Inter', sans-serif;
  font-size: 0.975rem;
  line-height: 1.8;
  color: #3A3A3A;
  max-width: 600px;
  margin-bottom: 1.25rem;
}

/* 3. Two-column layout — photo left, text right */
.bio-layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 3rem;
  align-items: start;
  max-width: 1100px;
  margin: 3rem auto;
  padding: 0 2rem;
}

/* 4. Photo — consistent crop */
.bio-layout img,
.bio-photo img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* 5. Hide the ugly Connect/LinkedIn widget box */
.wp-block-post-author__avatar,
.author-box,
.widget_wpulike,
.connect-widget,
.wp-block-social-links {
  display: none;
}

/* Replace with a clean minimal LinkedIn link */
.bio-linkedin-link {
  display: inline-block;
  margin-top: 1.5rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #C8102E;
  border-bottom: 1px solid #C8102E;
  padding-bottom: 2px;
  text-decoration: none;
}

.bio-linkedin-link:hover {
  color: #8C0B20;
  border-color: #8C0B20;
}

/* 6. Mobile — stack vertically */
@media (max-width: 768px) {
  .bio-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .bio-layout img {
    aspect-ratio: 4 / 3;
  }
}
/* ── /hafsaburt/ Advocacy section ── */

/* Target this page specifically */
.page-id-hafsaburt .wp-block-cover,
.page-id-hafsaburt .wp-block-group,
body.page-template-hafsaburt .wp-block-cover {
  background-color: #1A1A1A !important; /* charcoal instead of gray */
  border-radius: 4px;
}

/* Center ALL text inside this section */
.page-id-hafsaburt .wp-block-cover *,
.page-id-hafsaburt .wp-block-group * {
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
}

/* Constrain paragraph width so it doesn't stretch */
.page-id-hafsaburt .wp-block-cover p,
.page-id-hafsaburt .wp-block-group p {
  max-width: 600px;
  color: rgba(255,255,255,0.85);
  line-height: 1.8;
}

/* Heading style */
.page-id-hafsaburt .wp-block-cover h2,
.page-id-hafsaburt .wp-block-cover h3,
.page-id-hafsaburt .wp-block-group h2,
.page-id-hafsaburt .wp-block-group h3 {
  color: #fff;
  width: 100%;
  text-align: center !important;
}
/* Force center on every text element inside gray/dark blocks */
.wp-block-cover p,
.wp-block-cover h1,
.wp-block-cover h2,
.wp-block-cover h3,
.wp-block-cover h4,
.wp-block-cover__inner-container,
.wp-block-group p,
.wp-block-group h2,
.wp-block-group h3 {
  text-align: center !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* ── News/Press page — elongate images so full content shows ── */

/* Target the news grid thumbnails specifically */
.fusion-blog-layout-grid .fusion-post-thumbnail-rollover img,
.fusion-blog-layout-grid .fusion-post-thumbnail img,
.fusion-posts-container img,
.fusion-blog-grid img,
.post-thumbnail img,
.wp-post-image {
  height: 380px !important;      /* taller — was ~150px, now shows full image */
  width: 100% !important;
  object-fit: cover !important;
  object-position: top !important; /* anchors from top so text doesn't get cut */
  display: block !important;
}

/* Logo/badge style images — show whole image, no crop */
.fusion-blog-layout-grid .fusion-post-thumbnail img[src*="artx"],
.fusion-blog-layout-grid .fusion-post-thumbnail img[src*="archinect"],
.fusion-blog-layout-grid .fusion-post-thumbnail img[src*="healthcare"],
.fusion-blog-layout-grid .fusion-post-thumbnail img[src*="logo"] {
  object-fit: contain !important;
  object-position: center !important;
  background: #f5f5f5;
  padding: 1.5rem;
  height: 380px !important;
}
hb+a Architects: Architectural Practice with a Climate Focus
hb+a Architects is a California based studio where design ambition and climate responsibility go hand in hand. Led by Hafsa Burt, the practice delivers work that is clear, thoughtful, and grounded in real world constraints, while still pushing for lower carbon buildings and healthier spaces. From research and policy work to built projects across housing, public sector, and adaptive reuse, the firm approaches architecture as a practical way to improve both daily life and long term environmental outcomes.
Our Mission: Innovating for a Sustainable Tomorrow
At hb+a Architects, the mission is to pair strong design thinking with serious environmental responsibility. The studio focuses on work that is visually clear, highly functional, and climate conscious, aiming to deliver projects that improve daily life while strengthening the communities they serve.
hb+a Architects: Practice Shaped by Climate
hb+a Architects is a design studio built around the idea that architecture must respond directly to the climate crisis, not as an add on, but as core practice. The firm’s work treats carbon, material health, and long term resilience as design drivers, using each project as a chance to lower environmental impact while improving overall quality of life for building users.​​

/* News strip */
.hba-news-strip {
  display: flex;
  overflow-x: auto;
  gap: 3px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}

.hba-news-strip::-webkit-scrollbar { display: none; }

.hba-news-card {
  flex: 0 0 280px;
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
  display: block;
  text-decoration: none;
}

.hba-news-card img {
  width: 100%;
  height: 360px !important;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.4s ease;
}

.hba-news-card:hover img {
  transform: scale(1.04);
}

.hba-news-card__overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.25rem;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
}

.hba-news-card__tag {
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #C8102E;
  margin: 0 0 0.4rem;
}

.hba-news-card__title {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: #fff;
  line-height: 1.35;
  margin: 0;
}

.hba-news-strip-wrap {
  padding: 0 0 2rem;
  overflow: hidden;
}

.hba-news-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #8A8A8A;
  text-align: center;
  margin: 0 0 1rem;
}
}
document.addEventListener('DOMContentLoaded', function() {
  var strip = document.querySelector('.fusion-blog-layout-grid .fusion-posts-container');
  if (!strip) return;
  var isDown = false, startX, scrollLeft;
  
  strip.addEventListener('mousedown', function(e) {
    isDown = true;
    strip.style.cursor = 'grabbing';
    startX = e.pageX - strip.offsetLeft;
    scrollLeft = strip.scrollLeft;
  });
  strip.addEventListener('mouseleave', function() {
    isDown = false;
    strip.style.cursor = 'grab';
  });
  strip.addEventListener('mouseup', function() {
    isDown = false;
    strip.style.cursor = 'grab';
  });
  strip.addEventListener('mousemove', function(e) {
    if (!isDown) return;
    e.preventDefault();
    var x = e.pageX - strip.offsetLeft;
    var walk = (x - startX) * 1.5;
    strip.scrollLeft = scrollLeft - walk;
  });
});

/* Hide original copyright line */
.fusion-copyright-content,
.fusion-footer-copyright-area,
.fusion-copyright-notice {
  display: none !important;
}
.fusion-footer-copyright-area p::after {
  content: '© Copyright 2026 HB+A Architects. All Rights Reserved.';
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #8A8A8A;
  line-height: 1.5;
}
/* Box Lab page (ID 36) — center intro text */
.page-id-36 .fusion-text-1 h6 {
  text-align: center;
}

.page-id-36 .fusion-text-1 p {
  text-align: center;
}