/* ============================================================
   UNITE — COMPLETE SITE CSS
   This is the whole thing. Paste into WP Add Custom CSS global
   settings, replacing everything currently there.

   Supersedes unite_figure_styles.css, which was only the blog
   figure portion. Nothing needs to go in per-post CSS any more
   except a one-line banner aim override when an image wants it:

       .section-default-banner-header { --banner-focus: 30%; }

   SECTIONS
     1.  Site chrome (logo, menus, process arrows, sticky nav)
     2.  Page-specific fixes (load more, homepage, newsletter)
     3.  Your Big Idea contact form
     4.  Misc (recaptcha, Kit badge)
     5.  Blog post body
     6.  Blog visual elements (epigraph, pull quote, callouts)
     7.  Blog editorial figures
     8.  Duotone
     9.  Mobile
     10. Header banner
     11. Blog CTA form
   ============================================================ */


/* ============================================================
   1. SITE CHROME
   ============================================================ */

/* SHRINK THE PADDING AROUND THE LOGO IN THE MENU. USING '!IMPORTANT' TO OVERRIDE THE SETTINGS ALREADY IN THE CSS */

.logo-wrapper{
  padding-top:10px !important;
  padding-bottom:10px !important;
}

/* USE CSS FILTERS TO DARKEN THE ARROWS ON THE 'OUR SIX STEP PROCESS' SECTION */

.process .item .tobotm {
  filter:contrast(.01);
  filter:brightness(.1);
}

.process .item .custom {
  filter:contrast(.01);
  filter:brightness(.1);
}


.banner {
    width: 100%;
    text-align: center;
    margin: 20px 0;
}

.banner img {
    width: 100%;
    height: auto;
}


/* Active state for menu items */
.menu-all-services .menu-item.current-menu-item a,
.menu-all-services .menu-item.current_page_item a,
.menu-all-services .menu-item.active a {
    color: gold; /* Active text color */
}

/* Additional CSS for positioning */
.sticky-right {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 200px; /* Adjust this value to set the distance from the top of the viewport */
    z-index: 1000; /* Ensure it's above other content if needed */
}

/* Ensure parent container has sufficient height */
.elementor-element-eb0d159 {
    min-height: 2000px; /* Example height, adjust as needed */
}


/* ============================================================
   2. PAGE-SPECIFIC FIXES
   ============================================================ */

/* FOR SOME REASON THERE ARE TWO 'LOAD MORE' BUTTONS ON THE 'OUR-WORK' PAGE. THIS HIDES THE BOTTOM ONE */

/* REGULAR FULL SIZE SITE */
body > div.content-wrapper > div.elementor.elementor-1309 > section > div > div > div > div > div > div > div > div.elementor-element.elementor-element-25e9f817.elementor-hidden-mobile.elementor-widget.elementor-widget-bauen-portfolio-grid > div > div > div:nth-child(4) {
  Display:none !important;
}

/* MOBILE SITE */
body > div.content-wrapper > div.elementor.elementor-1309 > section > div > div > div > div > div > div > div > div.elementor-element.elementor-element-4550000.elementor-hidden-desktop.elementor-hidden-tablet.elementor-widget.elementor-widget-bauen-portfolio-grid > div > div > div:nth-child(3){
  display:none !important;
}


/* MAKE THE BACKGROUND IMAGE ON THE 'UNITE IDEAS WITH PURPOSE' SECTION OF THE HOMEPAGE SCALE CORRECTLY */

body > div.content-wrapper > div > section.elementor-section.elementor-top-section.elementor-element.elementor-element-47a670a.elementor-section-full_width.elementor-section-height-default.elementor-section-height-default > div > div > div {
  background-size:cover;
}


/* CHANGE THE HOVER COLOR ON THE HOMEPAGE */

body > div.content-wrapper > div > section.elementor-section.elementor-top-section.elementor-element.elementor-element-8538dac.elementor-section-full_width.elementor-section-height-default.elementor-section-height-default > div > div > div > div > div > div > div > div > h2 > a:hover {
    color:#a68a5f;
}

/* MAKE THE BLOG POST NEWSLETTER WIDGET CENTER ITSELF */

#mlb2-17887756 > div > div {
    margin-left: -28px !important;
    margin-right: 40px !important;

}

/* CHANGING THE COLOR OF THE BORDER ON THE 'MESSAGE RECEIVED' RESPONSE FROM CONTACT FORMS */
.wpcf7 form.sent .wpcf7-response-output {
  border-color:#a68a5f !important;
}


/* ============================================================
   3. YOUR BIG IDEA CONTACT FORM
   These rules are global and reach every Contact Form 7 form on
   the site. The blog CTA form styling in section 11 is scoped to
   .post-content precisely so it does not disturb these.
   ============================================================ */

/* SETTING THE FONT */

.wpcf7-form h2 {
  font-family: 'Didact Gothic', sans-serif;
  font-size: 3rem;
  margin-top: 1em;
  margin-bottom: 0.25em;
  color:#A68A5F;

}

.wpcf7-response-output {
  font-family: 'Didact Gothic', sans-serif;
}

.wpcf7-form hr {
  margin-bottom: 1.5em;
  border: none;
  border-bottom: 2px solid #ccc;
}

/* Questions and field group titles */
.wpcf7-form p strong {
  display: block;
  margin-top: 1em;
  margin-bottom: 0.5em;
  font-size: 1.1rem;
  color: #28443E;
}

/* Checkbox lists in columns */
.wpcf7-checkbox {
  display: flex;
  flex-direction: column;
}

/* Checkbox labels */
.wpcf7-checkbox label,
.wpcf7-form label {
  display: flex;
  align-items: center;
  font-weight: 400;
  font-size: 1rem;
}

/* Text input fields next to checkboxes */
.wpcf7-form .wpcf7-text {
  max-width: 250px;
  padding: 0.4em 0.6em;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Submit button styling */
.wpcf7-submit {
  margin-top: 2em;
  color: #fff;
  padding: 0.75em 1.5em;
  border: none;
  font-size: 1rem;
  border-radius: 4px;
  cursor: pointer;
}

input[type="checkbox"]::before {
	border: 2px solid black;
}


/* Adjust the vertical alignment of the checkbox */
input[type="checkbox"] {
    vertical-align: middle; /* Aligns the checkbox to the middle of the text */
    position: relative;
    bottom: 4px; /* Fine-tune this value as needed */
}

/* CONTROLLING THE HORIZONTAL LINES */

.wpcf7-form hr {
    border: none; /* Removes the default border */
    border-top: 4px solid #A68A5F; /* Sets the top border with desired color */
    width:25%;
}


/* ============================================================
   4. MISC
   ============================================================ */

/* REMOVING THE ~RECAPTCHA~ LOGO FROM GOOGLE */

.grecaptcha-badge{
  display:none !important;
}

/* WE USE 'KIT' FOR EMAIL MARKETING AND CAPTURING EMAILS ON SOME CONTACT FORMS */

.formkit-powered-by-convertkit {
  display: none !important;
}


/* ============================================================
   5. BLOG POST BODY
   ============================================================ */

/* Add breathing room between the header banner and post body text */
.post-content {
  padding-top: 48px;
}


/* Fix: Bauen theme sets display:inline-block on all anchors, breaking inline links in post body text */
.post-content a {
  display: inline !important;
  }


/* ============================================================
   6. BLOG VISUAL ELEMENTS
   ============================================================ */

/* Epigraph — sits before the first paragraph, below the title */
.unite-epigraph {
    padding-bottom: 1.4em;
    margin-bottom: 1.75em;
    border-bottom: 1px solid #BEBCBC;
}
.unite-epigraph blockquote {
    margin: 0 0 0.5em;
    padding: 0;
    font-family: Georgia, serif;
    font-size: 1.05em;
    font-style: italic;
    line-height: 1.65;
    color: #3F4040;
    border: none; /* override any theme blockquote styling */
    background: none;
}
.unite-epigraph cite {
    display: block;
    font-size: 0.84em;
    font-style: normal;
    color: #888;
    letter-spacing: 0.01em;
}
.unite-epigraph cite a {
    color: #AA9477;
    text-decoration: none;
    border-bottom: 1px solid #AA9477;
}
.unite-epigraph cite a:hover {
    color: #364541;
    border-bottom-color: #364541;
}


/* Pull quote — highlights one key sentence from the post */
.unite-pull-quote {
    border-left: 4px solid #AA9477;
    padding: 0.55em 1.25em;
    margin: 1.75em 0;
    border-radius: 0;
}
.unite-pull-quote p {
    font-size: 1.2em;
    line-height: 1.5;
    color: #364541;
    font-style: italic;
    margin: 0;
    font-family: Georgia, serif;
}


/* Callout box — a key insight worth isolating */
.unite-callout {
    background: #DAD7CB;
    border-left: 5px solid #364541;
    padding: 1.1em 1.4em;
    margin: 1.75em 0;
}
.unite-callout-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #364541 !important;
    margin: 0 0 0.45em !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}
.unite-callout p {
    font-size: 0.97em;
    line-height: 1.65;
    color: #3F4040;
    margin: 0;
}


/* Source callout — replaces the inline external citation */
.unite-source-callout {
    border: 1px solid #BEBCBC;
    border-left: 5px solid #AA9477;
    padding: 1.1em 1.4em;
    margin: 1.75em 0;
    background: #faf9f7;
}
.unite-source-tag {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #AA9477;
    margin: 0 0 0.55em;
}
.unite-source-callout blockquote {
    margin: 0 0 0.65em;
    padding: 0;
    font-size: 0.97em;
    line-height: 1.65;
    font-style: italic;
    color: #3F4040;
    font-family: Georgia, serif;
    border: none;
    background: none;
}
.unite-source-callout cite {
    font-size: 0.82em;
    font-style: normal;
    color: #888;
}
.unite-source-callout cite a {
    color: #364541;
    text-decoration: none;
    border-bottom: 1px solid #364541;
    display: inline !important; /* override Bauen theme inline-block on anchors */
}
.unite-source-callout cite a:hover {
    color: #AA9477;
    border-bottom-color: #AA9477;
}


/* Stat callout — for trends posts with a strong central data point */
.unite-stat {
    display: flex;
    align-items: center;
    gap: 1.5em;
    border-top: 1px solid #BEBCBC;
    border-bottom: 1px solid #BEBCBC;
    padding: 1.1em 0;
    margin: 1.75em 0;
}
.unite-stat-num {
    font-size: 2.8em;
    font-weight: 700;
    color: #AA9477;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
}
.unite-stat-desc {
    font-size: 0.95em;
    line-height: 1.55;
    color: #3F4040;
}


/* Worth asking — FAQ section before the closing CTA */
.unite-worth-asking {
    background: #f5f4f0;
    border-top: 3px solid #AA9477;
    border-bottom: 1px solid #BEBCBC;
    padding: 1.75em 2em 1.5em;
    margin: 2.5em 0;
}
.unite-worth-asking > h2:first-child {
    margin-top: 0;
    padding-top: 0;
    color: #364541;
}
.unite-worth-asking h3 {
    font-size: 0.97em;
    font-weight: 700;
    color: #364541;
    letter-spacing: 0.01em;
    line-height: 1.4;
    margin: 1.5em 0 0.4em;
    border: none;
}
.unite-worth-asking h3:first-of-type {
    margin-top: 1em;
}
.unite-worth-asking p {
    font-size: 0.95em;
    line-height: 1.65;
    color: #3F4040;
    margin: 0 0 0.5em;
}


/* ============================================================
   7. BLOG EDITORIAL FIGURES
   Five types. The point of having five is that you rotate between
   them: an article where every image is the same width is the thing
   that reads as an encyclopedia.

   These class names exist nowhere else on the site, so they do
   nothing until a post opts in.

   NOTE ON COMMENTS: usage examples deliberately avoid angle
   brackets. Raw HTML inside CSS comments gets eaten when this file
   is pasted through anything that interprets markup.
   ============================================================ */

/* BASE — shared by every figure type.
   No borders and no background anywhere. A visible frame around an
   image is the strongest "reference material" signal there is. */

.unite-figure,
.unite-figure-wide,
.unite-figure-full,
.unite-figure-pair,
.unite-figure-inset {
  /* Kill default browser figure margins so our own spacing controls rhythm. */
  margin-left: 0;
  margin-right: 0;
}

.unite-figure img,
.unite-figure-wide img,
.unite-figure-full img,
.unite-figure-pair img,
.unite-figure-inset img {
  display: block;
  width: 100%;
  height: auto;
  /* Square corners. Rounded corners on editorial photography read as UI, not print. */
  border-radius: 0;
}

/* Caption styling. Serif and slightly muted so it reads as an aside in the
   author's voice rather than a data label under a specimen. */
.unite-figure figcaption,
.unite-figure-wide figcaption,
.unite-figure-full figcaption,
.unite-figure-pair figcaption,
.unite-figure-inset figcaption {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.875rem;
  font-style: italic;
  line-height: 1.5;
  color: #6b6b66;
  margin-top: 0.75em;
}

/* Photo credits inside a caption. Smaller, upright, quieter than the caption
   itself, so attribution never competes with the sentence doing narrative work.
   Usage: inside a figcaption, wrap the credit in a span with class unite-credit. */
.unite-figure figcaption .unite-credit,
.unite-figure-wide figcaption .unite-credit,
.unite-figure-full figcaption .unite-credit,
.unite-figure-pair figcaption .unite-credit,
.unite-figure-inset figcaption .unite-credit {
  display: block;
  font-family: inherit;
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9a9a94;
  margin-top: 0.4em;
}


/* 1. STANDARD — sits at text column width.
   Use sparingly. Closest to the encyclopedic default, so it works best
   for diagrams and technical drawings where matching the text measure
   actually helps comprehension.
   Usage: class="unite-figure" */

.unite-figure {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}


/* 2. WIDE — breaks out past the text column on both sides but stops
   short of the viewport edge. The everyday workhorse.
   Usage: class="unite-figure-wide" */

.unite-figure-wide {
  /* Pull 7% of the container width out on each side. */
  width: 114%;
  margin-left: -7%;
  margin-right: -7%;
  margin-top: 3rem;
  margin-bottom: 3rem;
}

/* Keep the caption aligned to the text column rather than the widened image,
   so the prose margin stays visually unbroken down the page. */
.unite-figure-wide figcaption {
  padding-left: 6.15%;
  padding-right: 6.15%;
}


/* 3. FULL — edge to edge across the viewport.
   Reserve for one or two per post: the opening hero and the image at the
   biggest turn in the argument. Overusing it costs its impact.
   Usage: class="unite-figure-full" */

.unite-figure-full {
  width: 100vw;
  max-width: 100vw;
  /* Escape whatever container the post content sits in. */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 3.5rem;
  margin-bottom: 3.5rem;
}

/* Pull the caption back to a readable measure and center it under the band,
   otherwise it stretches the full screen width and becomes unreadable. */
.unite-figure-full figcaption {
  max-width: 44rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* Optional taller crop for hero images.
   Usage: class="unite-figure-full unite-figure-band" */
.unite-figure-band img {
  max-height: 32rem;
  object-fit: cover;
}


/* 4. PAIR — two images side by side that talk to each other.
   For genuine diptychs: before and after, first and last, drawing versus
   reality. Not for two unrelated images sharing space.
   Usage: a div with class="unite-figure-pair" containing two figure
   elements, each with its own img and figcaption. */

.unite-figure-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  width: 114%;
  margin-left: -7%;
  margin-right: -7%;
  margin-top: 3rem;
  margin-bottom: 3rem;
}

/* A caption placed directly in the pair spans both columns and sits underneath. */
.unite-figure-pair figcaption {
  grid-column: 1 / -1;
  padding-left: 6.15%;
  padding-right: 6.15%;
  margin-top: 0.25em;
}

/* Per-image captions inside the nested figures stay in their own column. */
.unite-figure-pair > figure {
  margin: 0;
}

.unite-figure-pair > figure figcaption {
  grid-column: auto;
  padding-left: 0;
  padding-right: 0;
}


/* 5. INSET — small, offset to one side, text flows past it.
   The intimate detail shot. Use as a change of pace after a full-bleed
   image: a brass fitting, a plaque, a hand on a tool.
   Usage: class="unite-figure-inset" */

.unite-figure-inset {
  float: right;
  width: 42%;
  margin: 0.5rem 0 1.75rem 2.25rem;
}

/* Mirrored version when the composition faces the other way.
   Usage: class="unite-figure-inset unite-figure-inset-left" */
.unite-figure-inset-left {
  float: left;
  margin: 0.5rem 2.25rem 1.75rem 0;
}


/* ============================================================
   8. DUOTONE
   Unifies images from different sources and eras so a 1936
   photograph, a line diagram and a modern screenshot look like they
   were commissioned for the same article.

   How it works: the image is desaturated, then screen-blended over a
   solid brand colour. Shadows pick up the colour, highlights stay
   light. Change the background hex to retint.

   Usage: add unite-duotone alongside any figure class, for example
   class="unite-figure-full unite-duotone"
   ============================================================ */

.unite-duotone {
  /* UNITE sage. Swap this hex to change the tint. */
  background: #364541;
  /* Contains the blend to this figure. Without it the image can blend against
     whatever sits behind the figure instead of its own background. */
  isolation: isolate;
}

.unite-duotone img {
  filter: grayscale(100%) contrast(1.08);
  mix-blend-mode: screen;
}

/* Warmer alternative, closer to the sand tone in the CTA block.
   Usage: class="unite-figure-wide unite-duotone unite-duotone-warm" */
.unite-duotone-warm {
  background: #5a4a38;
}


/* ============================================================
   9. MOBILE
   Below 768px every figure collapses to a single full-width column.
   Side-by-side pairs and floated insets both stop working on a phone.
   ============================================================ */

@media (max-width: 767px) {

  .unite-figure-wide,
  .unite-figure-pair {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .unite-figure-wide figcaption,
  .unite-figure-pair figcaption {
    padding-left: 0;
    padding-right: 0;
  }

  /* Stack the diptych. */
  .unite-figure-pair {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  /* Insets stop floating and become normal full-width figures. */
  .unite-figure-inset,
  .unite-figure-inset-left {
    float: none;
    width: 100%;
    margin: 2.25rem 0;
  }

  /* Full-bleed stays full-bleed but tightens its vertical spacing. */
  .unite-figure-full {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
  }

  .unite-figure-band img {
    max-height: 20rem;
  }
}


/* ============================================================
   10. HEADER BANNER
   ============================================================ */

/* Variable DEFAULTS sit on the bare class on purpose. Low specificity
   (0,1,0) means a per-post rule written as
       .section-default-banner-header { --banner-focus: 30%; }
   wins on source order without needing !important or extra selectors. */
.section-default-banner-header {
    /* VERTICAL AIM for the header image. Override per post.
       0%   = image top flush with banner top   (you see the TOP of the photo)
       50%  = centred (default)
       100% = image bottom flush with banner bottom (you see the BOTTOM)

       LOWER number moves the visible window UP the photo.
       HIGHER number moves it DOWN.

       Rough starting points:
       25-35%  subject sits high in frame, e.g. a face, a high horizon
       50%     no strong subject, or a centred composition
       60-75%  subject sits low, e.g. foreground detail, ground-level work */
    --banner-focus: 50%;

    /* Banner height. Also overridable per post if a photo wants more room. */
    --banner-height: 500px;
}

/* The layout is SCOPED TO BLOG POSTS.
   /numbers/, /ask-a-video/ and /database/ also use this theme class but do
   not currently get the fixed-height cover treatment, and should not start. */
body.single-post .section-default-banner-header {
    position: relative;      /* Containing block for absolutely positioned children. */
    overflow: hidden;        /* Keeps the image from spilling out of the section. */
    height: var(--banner-height);
    background-position: center var(--banner-focus) !important;
    background-size: cover;  /* Scale to fill, cropping the overflow. */
    background-repeat: no-repeat;
}

/* Phones crop much harder because the box stays tall while the width
   collapses, so a shorter banner usually reads better. */
@media (max-width: 767px) {
    .section-default-banner-header {
        --banner-height: 320px;
    }
}


/* ============================================================
   11. BLOG CTA FORM
   Contact Form 7, UNITE brand styling.

   SCOPED TO .post-content DELIBERATELY. Contact Form 7 appears on 25+
   pages across this site, including /your-big-idea/ with its own
   hand-built form styling in section 3. Unscoped, `.wpcf7
   input[type="text"]` (0,2,1) outranks `.wpcf7-form .wpcf7-text`
   (0,2,0) and `.wpcf7-submit` (0,1,0) and would silently restyle every
   form on the site. Only blog posts carry .post-content.
   ============================================================ */

.post-content .wpcf7 input[type="text"],
.post-content .wpcf7 input[type="email"],
.post-content .wpcf7 textarea {
    width: 100%;
    /* Section 3 caps text inputs at 250px for the Big Idea form. That rule
       still reaches blog CTA inputs, so release the cap here. */
    max-width: none;
    padding: 12px 16px;
    border: 1px solid #BEBCBC;
    border-radius: 2px;
    font-size: 15px;
    color: #3F4040;
    background: #ffffff;
    box-sizing: border-box;
    margin-bottom: 8px;
    font-family: inherit;
    transition: border-color 0.2s;
}

.post-content .wpcf7 input[type="text"]:focus,
.post-content .wpcf7 input[type="email"]:focus,
.post-content .wpcf7 textarea:focus {
    outline: none;
    border-color: #364541;
}

.post-content .wpcf7 textarea {
    min-height: 140px;
    resize: vertical;
}

.post-content .wpcf7 input[type="submit"] {
    background: #364541;
    color: #ffffff;
    border: none;
    padding: 14px 32px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 2px;
    margin-top: 8px;
    transition: background 0.2s;
}

.post-content .wpcf7 input[type="submit"]:hover {
    background: #AA9477;
}



/* ------------------------------------------------------------
   CONTACT FORM: question labels and selects
   The CF7 rules in section 11 cover text, email and textarea but NOT
   select, so the project-type dropdown rendered as a bare underlined
   control next to boxed fields.
   ------------------------------------------------------------ */

/* Question sitting above a field that has no placeholder of its own.
   Used by the project-type dropdown and the message box. */
.post-content .wpcf7 .unite-field-label {
    margin: 1.4em 0 0.45em;
    font-size: 15px;
    font-weight: 600;
    color: #3F4040;
}

.post-content .wpcf7 select {
    width: 100%;
    max-width: none;
    padding: 12px 16px;
    border: 1px solid #BEBCBC;
    border-radius: 2px;
    font-size: 15px;
    color: #3F4040;
    background: #ffffff;
    box-sizing: border-box;
    margin-bottom: 8px;
    font-family: inherit;
    transition: border-color 0.2s;
}

.post-content .wpcf7 select:focus {
    outline: none;
    border-color: #364541;
}