/* ------------------------------------------------------------------
   Flexible page builder — new blocks only.
   Everything else reuses cb.css (.col, .cushion, .black-btn, .caption).
   ------------------------------------------------------------------ */

/* Display headings.
   Anton, matching the face embedded in the spec PDF and the theme's other
   display headings (h2.fixed-large in cb.css). Sizes come off the PDF: the
   large heading caps measure ~90pt on its 1280pt-wide page. */
h2.fc-heading-large {
  font-family: 'Anton', sans-serif;
  font-weight: normal;
  text-transform: uppercase;
  font-size: clamp(32px, 6.53vw, 140px);
  line-height: 0.92;
  letter-spacing: 0.01em;
  margin: 2rem 0;
}

/* Medium heading */
h3.fc-heading-medium {
  font-family: 'Anton', sans-serif;
  font-weight: normal;
  text-transform: uppercase;
  font-size: clamp(18px, 2.2vw, 48px);
  line-height: 1;
  letter-spacing: 0.02em;
  margin: 1.5rem 0;
}

/* ------------------------------------------------------------------
   Text block sizes.
   The builder's "Text size" select emits these classes on .cushion; the
   ratios come off the annotated PDF (large 1.49x / small 0.70x measured
   against the medium setting). "Default" is left unclassed and keeps
   cb.css's .text-block p rule, which is the same as medium.
   ------------------------------------------------------------------ */
.text-block .cushion.large-text p {
  font-size: 28px;
  line-height: 1.25;
}

.text-block .cushion.medium-text p {
  font-size: 1.5rem;
  line-height: 1.35;
}

.text-block .cushion.small-text p {
  font-size: 1.05rem;
  line-height: 1.45;
}

/* Text blocks carry .responsive-video on the cushion so oEmbeds inside the
   wysiwyg stay fluid, but that class also caps width at 1024px in cb.css —
   which stops copy stretching across the column on anything wider than about
   1365px. Keep the class, drop the cap on this template. */
body.page-template-flexible-page-template .text-block .cushion.responsive-video {
  max-width: none;
}

/* cb.css sets .text-block p { text-align: left } after .center-align p, so a
   centred text block ends up with its copy hard left inside a centred cushion.
   Win it back — the cushion is already centred by .center-align. */
.text-block.center-align .cushion p {
  text-align: center;
}

/* Rules run the full width of the container in the design, not inset by the
   cushion's padding the way copy and images are. Vertical padding goes too, so
   the spacing around the rule is set by its own margin and the column's rather
   than three sources stacking up. */
.rule-block .cushion {
  padding: 0;
}

/* Match the rest of the site's top spacing. Other templates wrap their intro in
   .page-introduction > .cushion (2.5rem) plus the title's own 0.5rem margin,
   putting first copy ~42px below the header. Our first block gives 28px from the
   cushion alone, so 1rem here makes up the difference. */
body.page-template-flexible-page-template .main-area {
  padding-top: 1rem;
}

/* Links inside a text block.
   Base treatment applies to any link the editor types, so a plain hyperlink is
   never left unstyled; p.tb-link adds the design's uppercase CTA treatment and
   is applied from the "CTA link" entry in the editor's Formats menu. */
.text-block .cushion a {
  color: #262628;
  border-bottom: 1px solid #262628;
  text-decoration: none;
}

.text-block .cushion a:hover {
  border-bottom-color: transparent;
}

/* "Paragraph styling within text block for CTA" — the arrow link that closes
   a text block, e.g. "→ View our Dundee work". */
.text-block .cushion p.tb-link {
  margin-top: 2rem;
}

/* Bold, no rule beneath — the CTA in the design reads as emphasis rather than a
   link. Size is pinned in px at the client's request: the theme sets its 10px on
   body rather than html, so rem here follows the browser's own root size (14px
   in some, 16px in a stock install) and would not hold a fixed 13px. */
.text-block .cushion p.tb-link a {
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.125rem;
  text-transform: uppercase;
  color: #262628;
  border-bottom: none;
  padding-bottom: 0;
}

/* Dividing rule */
hr.dividing-rule {
  border: none;
  border-top: 1px solid #262628;
  margin: 0;
  width: 100%;
}

/* The rule sits tighter to the surrounding content than a normal block: the
   design has roughly 50px of air either side at a 1440 viewport, where the
   default column margin plus the cushion gives about twice that. */
.col.rule-block {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

hr.dividing-rule.thick {
  border-top-width: 3px;
}

/* CTA paragraph — full-width black bar variant */
p.para-with-button.cta-bar {
  margin: 3rem 0;
}

.black-btn.full-bar {
  display: block;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}

/* Page title above the content.
   The PDF sets this centred in the body copy face rather than the grey
   letterspaced caps .cat-heading gives it everywhere else, so it is restyled
   here rather than in cb.css to leave other templates alone. */
body.page-template-flexible-page-template .main-area > .cushion > h4.cat-heading {
  font-family: 'Bau', sans-serif;
  font-weight: bold;
  font-size: 1.5rem;
  letter-spacing: 0;
  text-transform: none;
  color: #262628;
  text-align: center;
  margin: 0;
}

/* The vertical rule at the 75%/25% boundary is drawn by the theme's own
   #animate-line (cb.css), which site.js grows to 100vh on window load. Do not
   add a border to aside.fixed-bar for it — that lands on the same pixel column
   and reads as a doubled or thicker line. */

/* "Full width" images and galleries — edge to edge, no cushion padding.
   Distinct from 100%, which is the full content column but keeps its margins. */
.col.column-100.bleed,
.col.column-100.bleed .cushion {
  padding-left: 0;
  padding-right: 0;
  max-width: 100%;
}

/* Google map */
.bh-map {
  width: 100%;
  height: 480px;
  background: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bh-map-notice {
  font-size: 1.1rem;
  color: #7c7c7c;
  text-align: center;
  margin: 0;
  padding: 0 2rem;
}

@media only screen and (max-width: 1024px) {
  .bh-map { height: 320px; }
  .text-block .cushion.large-text p { font-size: 22px; }
}

@media only screen and (max-width: 640px) {
  .col.rule-block { margin-top: 1rem; margin-bottom: 1rem; }
  .text-block .cushion.large-text p { font-size: 19px; }
  .text-block .cushion.small-text p { font-size: 1.1rem; }
}