/* ==========================================================================
   IN-TERIA Custom Styles
   Multi-page upgrade: menu, single post, generic page, rich text
   ========================================================================== */


/* ==========================================================================
   Hamburger Menu Toggle
   ========================================================================== */

.menu-toggle {
  display: block;
  width: 21px;
  padding: 0;
  margin-bottom: 30px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 100;
  position: relative;
}

.menu-toggle__label {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  font-family: "Monument Grotesk", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  transition: color 300ms ease;
}

.past-hero .menu-toggle__label {
  color: #975230;
}

body.menu-open .menu-toggle__label {
  color: #975230;
}

.menu-toggle__bars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 21px;
  height: 30px;
}

.menu-toggle__bar {
  display: block;
  width: 21px;
  height: 2px;
  background-color: #fff;
  transition: transform 300ms ease, opacity 200ms ease, background-color 300ms ease;
}

/* Brown bars when past hero or on inner pages */
.past-hero .menu-toggle__bar {
  background-color: #975230;
}

/* X animation when menu is open */
body.menu-open .menu-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

body.menu-open .menu-toggle__bar:nth-child(2) {
  opacity: 0;
}

body.menu-open .menu-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Always brown when menu is open (overlay has grey bg) */
body.menu-open .menu-toggle__bar {
  background-color: #975230;
}

/* Logo turns brown when menu is open */
body.menu-open .header svg path {
  fill: #975230;
}


/* ==========================================================================
   Menu Overlay
   ========================================================================== */

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 98;
  background: rgba(235, 236, 236, 0.98);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 400ms ease, visibility 400ms ease;
}

.menu-overlay[hidden] {
  display: none;
}

body.menu-open .menu-overlay {
  opacity: 1;
  visibility: visible;
}

.menu-overlay__nav {
  text-align: center;
}

.menu-overlay__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-overlay__list li {
  margin-bottom: 0.3em;
}

.menu-overlay__list a {
  font-family: "Monument Grotesk", sans-serif;
  font-weight: 500;
  font-size: 40px;
  line-height: 1.2;
  color: #975230;
  text-decoration: none;
  text-transform: uppercase;
  transition: opacity 200ms ease;
}

.menu-overlay__list a:hover,
.menu-overlay__list a:focus {
  opacity: 0.6;
}

@media screen and (min-width: 1024px) {
  .menu-overlay__list a {
    font-size: 60px;
  }
}


/* ==========================================================================
   Header z-index fix (mobile)
   _global.scss sets .header z-index:0 below large breakpoint, which lets
   .hero-aside cover the hamburger button. Override to match large value.
   ========================================================================== */

.header {
  z-index: 99;
}

/* ==========================================================================
   Inner Page Helpers
   ========================================================================== */

/* Hide background image on inner pages.
   !important needed to override inline style="background-image:..." in header.php */
.single .site,
.page:not(.home) .site {
  background-image: none !important;
}

/* No hero gradient on inner pages */
.single .site::before,
.page:not(.home) .site::before {
  display: none;
}


/* ==========================================================================
   Single Post Template
   ========================================================================== */

.main--single {
  margin-top: 120px;
  padding-top: 60px;
}

.single-project__title {
  font-size: 14px;
  line-height: 17px;
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: 20px;
  color: #975230;
}

.single-project__info {
  font-size: 12px;
  line-height: 1.4;
  opacity: 0.7;
  margin-bottom: 30px;
  color: #975230;
}

.single-project__content {
  font-size: 14px;
  line-height: 17px;
  color: #975230;
}

.single-project__media img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 30px;
}

@media screen and (min-width: 1024px) {
  .single-project__media img {
    margin-bottom: 50px;
  }
}

/* Embed container (moved from inline style) */
.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
  max-width: 100%;
  height: auto;
  margin-bottom: 30px;
}

@media screen and (min-width: 1024px) {
  .embed-container {
    margin-bottom: 50px;
  }
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Post navigation */
.single-project__nav {
  border-top: 1px solid rgba(151, 82, 48, 0.2);
  padding: 60px 0;
  margin-top: 60px;
}

.single-project__nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.single-project__nav-next {
  text-align: right;
}

.single-project__nav a {
  font-size: 14px;
  line-height: 17px;
  font-weight: 500;
  text-transform: uppercase;
  color: #975230;
  text-decoration: none;
  transition: opacity 200ms ease;
}

.single-project__nav a:hover {
  opacity: 0.6;
}


/* ==========================================================================
   Generic Page Template
   ========================================================================== */

.main--page {
  margin-top: 120px;
  padding-top: 60px;
  min-height: 80vh;
}

.main--page .section-footer {
  margin-top: 240px;
}

@media screen and (min-width: 1024px) {
  .main--page .section-footer {
    margin-top: 360px;
  }
}

/* Page title — mirrors .section-about__title */
.page-content__title {
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 30px;
  color: #975230;
}

.page-content__title h1 {
  font-size: 14px;
  line-height: 17px;
  font-weight: 500;
  margin: 0;
}

@media screen and (min-width: 1024px) {
  .page-content__title {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    width: 0.9em;
    white-space: nowrap;
  }
}

/* Flexible content blocks — consistent spacing */
.block {
  margin-bottom: 80px;
  color: #975230;
}

@media screen and (min-width: 1024px) {
  .block {
    margin-bottom: 120px;
  }
}

/* Centred text */
.block-centred-text {
  font-size: 14px;
  line-height: 17px;
}

/* Two-column text */
.block-two-col-text {
  font-size: 14px;
  line-height: 17px;
}

/* Full-width image */
.block-full-width-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Image + text */
.block-image-text {
  font-size: 14px;
  line-height: 17px;
}

.block-image-text img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 30px;
}

@media screen and (min-width: 640px) {
  .block-image-text img {
    margin-bottom: 0;
  }
}


/* ==========================================================================
   Rich Text Styles (scoped to content areas)
   ========================================================================== */

/* Links */
.single-project__content a,
.page-content a,
.block-centred-text a,
.block-two-col-text a,
.block-image-text a,
.block-image-two-col a,
.block-heading-list a,
.block-service-section a {
  color: #975230;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 200ms ease;
}

.single-project__content a:hover,
.page-content a:hover,
.block-centred-text a:hover,
.block-two-col-text a:hover,
.block-image-text a:hover,
.block-image-two-col a:hover,
.block-heading-list a:hover,
.block-service-section a:hover {
  opacity: 0.6;
}

/* Heading hierarchy */
.single-project__content h2,
.page-content h2,
.block-centred-text h2,
.block-two-col-text h2,
.block-image-text h2,
.block-image-two-col h2,
.block-heading-list h2,
.block-service-section h2 {
  font-size: 20px;
  line-height: 24px;
  font-weight: 500;
  text-transform: uppercase;
  margin-top: 2em;
  margin-bottom: 0.5em;
}

.single-project__content h3,
.page-content h3,
.block-centred-text h3,
.block-two-col-text h3,
.block-image-text h3,
.block-image-two-col h3,
.block-heading-list h3,
.block-service-section h3 {
  font-size: 14px;
  line-height: 17px;
  font-weight: 500;
  text-transform: uppercase;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

/* Lists */
.single-project__content ul,
.page-content ul,
.block-centred-text ul,
.block-two-col-text ul,
.block-image-text ul,
.block-image-two-col ul,
.block-heading-list ul,
.block-service-section ul {
  list-style: disc;
  padding-left: 1.5em;
  margin-bottom: 1em;
}

.single-project__content ol,
.page-content ol,
.block-centred-text ol,
.block-two-col-text ol,
.block-image-text ol,
.block-image-two-col ol,
.block-heading-list ol,
.block-service-section ol {
  list-style: decimal;
  padding-left: 1.5em;
  margin-bottom: 1em;
}

/* Blockquotes */
.single-project__content blockquote,
.page-content blockquote,
.block-centred-text blockquote,
.block-two-col-text blockquote,
.block-image-text blockquote,
.block-image-two-col blockquote,
.block-heading-list blockquote,
.block-service-section blockquote {
  border-left: 2px solid #975230;
  padding-left: 1.5em;
  font-style: italic;
  margin: 1.5em 0;
}


/* ==========================================================================
   Page Hero Block
   ========================================================================== */

.block-page-hero {
  margin-bottom: 60px;
}

.block-page-hero__heading {
  font-size: 14px;
  line-height: 17px;
  font-weight: 500;
  text-transform: uppercase;
  color: #975230;
  margin: 0 0 20px;
}

.block-page-hero__subtitle {
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
  color: #975230;
  max-width: 640px;
}

@media screen and (min-width: 1024px) {
  .block-page-hero__subtitle {
    font-size: 40px;
    line-height: 1.2;
  }
}


/* ==========================================================================
   Image + Two Column Text Block
   Mirrors homepage .section-about pattern
   ========================================================================== */

.block-image-two-col {
  color: #975230;
  font-size: 14px;
  line-height: 17px;
}

.block-image-two-col__title {
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 30px;
}

.block-image-two-col__title h2 {
  font-size: 14px;
  line-height: 17px;
  font-weight: 500;
  margin: 0;
}

@media screen and (min-width: 1024px) {
  .block-image-two-col__title {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    width: 0.9em;
    white-space: nowrap;
  }
}

.block-image-two-col__image {
  margin-bottom: 30px;
}

@media screen and (min-width: 1024px) {
  .block-image-two-col__image {
    margin-bottom: 60px;
    margin-right: -50px;
  }
}

.block-image-two-col__image img {
  width: 100%;
  height: auto;
  display: block;
}

.block-image-two-col__text {
  margin-bottom: 30px;
}


/* ==========================================================================
   Heading + List Block
   Left heading / right content
   ========================================================================== */

.block-heading-list {
  color: #975230;
  font-size: 14px;
  line-height: 17px;
}

.block-heading-list__heading {
  font-size: 20px;
  line-height: 24px;
  font-weight: 500;
  text-transform: uppercase;
  margin: 0 0 15px;
}

.block-heading-list__intro {
  font-size: 14px;
  line-height: 17px;
  opacity: 0.7;
  margin-bottom: 20px;
}

@media screen and (max-width: 639px) {
  .block-heading-list__left {
    margin-bottom: 30px;
  }
}

.block-heading-list__right ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.block-heading-list__right ul li {
  padding: 12px 0;
  border-bottom: 1px solid rgba(151, 82, 48, 0.15);
}

.block-heading-list__right ul li:first-child {
  border-top: 1px solid rgba(151, 82, 48, 0.15);
}


/* ==========================================================================
   Service Section Block
   Asymmetric image + text, auto-alternating sides
   ========================================================================== */

.block.block-service-section {
  color: #975230;
  font-size: 14px;
  line-height: 17px;
  margin-bottom: 80px;
}

@media screen and (min-width: 1024px) {
  .block.block-service-section {
    margin-bottom: 120px;
  }
}

.block-service-section__heading {
  font-size: 20px;
  line-height: 24px;
  font-weight: 500;
  text-transform: uppercase;
  margin: 0 0 20px;
}

.block-service-section__body {
  font-size: 14px;
  line-height: 17px;
}

.block-service-section__body ul {
  list-style: disc;
  padding-left: 1.5em;
  margin-top: 1em;
  margin-bottom: 1em;
}

.block-service-section__body p {
  margin-bottom: 1em;
}

.block-service-section__image img {
  width: 100%;
  height: auto;
  display: block;
}

.block-service-section__image {
  margin-bottom: 30px;
}

@media screen and (min-width: 1024px) {
  .block-service-section__image {
    margin-bottom: 0;
  }

  .block-service-section__image--left {
    margin-left: -50px;
  }

  .block-service-section__image--right {
    margin-right: -50px;
  }

  .block-service-section__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
  }
}

@media screen and (max-width: 1023px) {
  .block-service-section__image-cell {
    order: -1;
  }
}


/* ==========================================================================
   Project Grid Block
   ========================================================================== */

.block-project-grid__title {
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 30px;
  color: #975230;
}

.block-project-grid__title h2 {
  font-size: 14px;
  line-height: 17px;
  font-weight: 500;
  margin: 0;
}

@media screen and (min-width: 1024px) {
  .block-project-grid__title {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    width: 0.9em;
    white-space: nowrap;
  }
}