/* =========================================================================
   BARDOWN Excavating theme
   Design tokens, layout, and components derived from the Figma file
   "bardown_web_sept2026" (node 6051:157).
   ========================================================================= */

/* ---- Tokens ------------------------------------------------------------ */
:root {
  --main-dark: #032A23;
  --main: #024137;
  --main-deep: #02382F; /* Figma "Section 2 - Marketing" background */
  --main-lighter: #476E68;
  --main-subtle: #E0E8E7;
  --cream: #EEE9DF;
  --accent: #FBAD23;
  --accent-soft: #FFB162;
  --white: #FFFFFF;

  --font-display: "new-science", "Arial Narrow", Arial, sans-serif;
  --font-body: "new-science", Arial, sans-serif;

  --container-width: 1180px;
  --gutter: 24px;

  --radius-notch: 17px; /* size of the clipped corner on buttons/cards */
}

/* ---- Reset / base -------------------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  color: var(--main);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; width: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 1em; text-transform: uppercase; }
p { margin: 0 0 1em; }
/* Figma divider rule. Scoped to #pagewrap (like .btn) so Concrete's own
   edit-mode UI keeps its default <hr> styling. */
#pagewrap hr {
  height: 0;
  margin: 24px 0;
  border: 0;
  border-top: 3px solid var(--accent-soft); /* #FFB162 */
  opacity: 1;
}
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ---- Type scale ---------------------------------------------------------*/
.h-display-1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 64px;
  line-height: 1.2;
  text-transform: uppercase;
  margin: 0 0 20px;
}
.h-display-2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 50px;
  line-height: 1.2;
  text-transform: uppercase;
  margin: 0 0 16px;
}
.hero__inner .h-display-2 { margin-bottom: 1em; }
.h-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.55;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 8px;
}
.u-nav-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 3.25px;
  text-transform: uppercase;
}

/* ---- Buttons --------------------------------------------------------------
   Shared "notched corner" button (CTAs across header, hero, sections, footer).
   The notch is a beveled bottom-right corner, drawn with the corner-shape
   property so it scales cleanly at any size.

   Scoped to #pagewrap: Concrete's own Dashboard/edit-mode UI also uses a bare
   `.btn` class (Bootstrap), and since edit mode renders inline (not in an
   iframe), unscoped rules here would restyle the CMS interface itself.
---------------------------------------------------------------------------- */
#pagewrap .btn {
  --notch: var(--radius-notch);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  margin: 3px 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  border: 2px solid var(--accent);
  corner-shape: bevel;
  border-radius: 0 0 var(--notch) 0;
  cursor: pointer;
  background: transparent;
  text-shadow: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
#pagewrap .section--dark .form-actions .btn { color: var(--cream)!important; }
#pagewrap .section--dark .ccm-block-express-form input,
#pagewrap .section--dark .ccm-block-express-form textarea{ 
	font-family: var(--font-body);
    font-weight: 400;
	color: var(--cream)!important; }

#pagewrap .btn:hover { opacity: 0.88; }
#pagewrap .btn:active { transform: translateY(1px); }
#pagewrap .btn::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f061"; /* fa-arrow-right */
  font-size: 11px;
  line-height: 1;
  display: inline-block;
  transform: rotate(-45deg);
}
#pagewrap .btn--solid {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--main-dark);
}
#pagewrap .btn--outline {
  background: transparent;
  border-color: var(--accent);
  color: var(--cream);
}
#pagewrap .btn--outline.btn--on-light { color: var(--main); }
#pagewrap .btn--block { width: 100%; justify-content: center; }

/* ---- Rich text color styles (Styles menu: Yellow/Brown/Gold Text) --------*/
#pagewrap .c-yellow { color: #FBAD23; }
#pagewrap .c-brown { color: #A35139; }
#pagewrap .c-gold { color: #FFB162; }

/* ---- Rich text typography styles (Styles menu) ---------------------------
   Figma "Text Hierarchy" font-family / font-weight / font-size, exposed as
   separate, combinable classes (rather than fixed heading styles) so editors
   can apply any mix to a rich text selection.
---------------------------------------------------------------------------- */
#pagewrap .ff-display { font-family: var(--font-display); }
#pagewrap .ff-body { font-family: var(--font-body); }
#pagewrap .fw-medium { font-weight: 500; }
#pagewrap .fw-bold { font-weight: 700;}
/* clamp(min, preferred-vw, max) — max never exceeds the Figma size (so text
   can't break out of the design on large viewports), min keeps it readable on
   small ones, and line-height: 1 keeps multi-size text from throwing off
   surrounding line spacing. */
#pagewrap .fs-64 { font-size: clamp(40px, 5.3vw, 64px); line-height: 1; }
#pagewrap .fs-50 { font-size: clamp(32px, 4.2vw, 50px); line-height: 1; }
#pagewrap .fs-23 { font-size: clamp(18px, 1.9vw, 23px); line-height: 1; }
#pagewrap .fs-18 { font-size: clamp(15px, 1.5vw, 18px); line-height: 1; text-transform: uppercase; }
#pagewrap .fs-17 { font-size: clamp(14px, 1.4vw, 17px); line-height: 1; }
#pagewrap .fs-13 { font-size: clamp(12px, 1.1vw, 13px); line-height: 1; }

#pagewrap section ul {
	margin: 8px 0 0 0 !important;
	padding: 0 !important;
	list-style: none;
	display: grid;
	gap: 5px;
}
#pagewrap section li {
	position: relative;
	padding: 3px 0 3px 18px !important;
	margin: 0 0 0 10px !important;
	font-size: 14px;
	line-height: 1.25 !important; 
	text-shadow: none;
}
#pagewrap section li::before{
	position: absolute !important;
    left: 0 !important;
    top: .65em !important;
    width: 5px !important;
    height: 5px !important;
    border-radius: 999px !important;
    background: var(--accent) !important;
    box-shadow: 0 0 0 2px var(--accent-soft) !important;
    content: "" !important;
    padding: 0 !important;
    margin: 0 !important;
}

#pagewrap .ccm-block-social-links ul.list-inline li { padding: 8px!important; margin: 0!important; }
#pagewrap .ccm-block-social-links ul.list-inline li:before { display: none; }
#pagewrap .ccm-block-social-links ul.list-inline li a { font-size: 2rem; }

/* ---- Header --------------------------------------------------------------*/
.site-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: var(--main);
}
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px var(--gutter);
  max-width: var(--container-width);
  margin: 0 auto;
}
.site-header__logo img { height: 60px; width: auto; }
.site-header__nav {
  display: flex;
  align-items: center;
  gap: 40px;
}
.site-header__nav-list {
  display: flex;
  align-items: center;
  gap: 40px;
}
/* The Autonav block renders <ul class="nav"><li><a>...</a></li>...</ul>, not
   plain <a> tags — flex the actual <ul> (its <li> children become the flex
   items) so the links sit inline instead of stacking as default list items. */
.site-header__nav-list .nav {
  display: flex;
  align-items: center;
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-header__nav-list a { color: var(--cream); }
.site-header__nav-list a:hover { color: var(--accent); }
.site-header__nav-list .nav-selected > a,
.site-header__nav-list .nav-path-selected > a { color: var(--accent); }

/* ---- Desktop nav dropdowns -------------------------------------------------
   Autonav nests child pages as a plain <ul> inside the parent <li>. Level 2
   drops below the top-level item; level 3+ flies out to the right. Opens on
   hover and on keyboard focus (:focus-within). The mobile panel is unaffected:
   bardown.js copies every link into it as a flat list. */
.site-header__nav-list .nav li { position: relative; }
.site-header__nav-list .nav > li { padding: 12px 0; } /* hover target reaches the dropdown */

/* Chevron on parents (:has for current browsers, .nav-dropdown from Autonav). */
.site-header__nav-list .nav > li:has(> ul) > a,
.site-header__nav-list .nav > li.nav-dropdown > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.site-header__nav-list .nav > li:has(> ul) > a::after,
.site-header__nav-list .nav > li.nav-dropdown > a::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}
.site-header__nav-list .nav > li:hover > a::after,
.site-header__nav-list .nav > li:focus-within > a::after {
  transform: translateY(1px) rotate(-135deg);
}

/* Panel */
.site-header__nav-list .nav li > ul {
  position: absolute;
  top: 100%;
  left: -20px;
  z-index: 110;
  display: block;
  min-width: 240px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--main-dark);
  border-top: 3px solid var(--accent);
  --notch: var(--radius-notch);
  corner-shape: bevel;
  border-radius: 0 0 var(--notch) 0;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
.site-header__nav-list .nav li:hover > ul,
.site-header__nav-list .nav li:focus-within > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}
.site-header__nav-list .nav li > ul a {
  display: block;
  padding: 15px 20px;
  font-size: 12px;
  letter-spacing: 2px;
  line-height: 1.3;
  white-space: nowrap;
  transition: all 0.15s ease, color 0.15s ease;
}
.site-header__nav-list .nav li > ul a:hover,
.site-header__nav-list .nav li > ul a:focus-visible {
  background: var(--main);
  color: var(--accent);
}

/* Level 3+: fly out to the right of the level-2 item. */
.site-header__nav-list .nav li > ul li > ul {
  top: -13px; /* panel padding + top border, so the first rows line up */
  left: 100%;
  transform: translateX(8px);
}
.site-header__nav-list .nav li > ul li:hover > ul,
.site-header__nav-list .nav li > ul li:focus-within > ul {
  transform: translateX(0);
}
.site-header__nav-list .nav li > ul li:has(> ul) > a::after,
.site-header__nav-list .nav li > ul li.nav-dropdown > a::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-50%) rotate(-45deg);
}
.site-header__nav-list .nav li > ul li:has(> ul) > a,
.site-header__nav-list .nav li > ul li.nav-dropdown > a { padding-right: 40px; }
.site-header__ctas {
  display: flex;
  align-items: center;
  gap: 12px;
}
.site-header__toggle {
  display: none;
  background: none;
  border: 0;
  width: 32px;
  height: 24px;
  position: relative;
  cursor: pointer;
  padding: 0;
}
.site-header__toggle span,
.site-header__toggle::before,
.site-header__toggle::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--cream);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.site-header__toggle::before { top: 0; }
.site-header__toggle span { top: 11px; }
.site-header__toggle::after { bottom: 0; }
.site-header__toggle[aria-expanded="true"]::before { transform: translateY(11px) rotate(45deg); }
.site-header__toggle[aria-expanded="true"]::after { transform: translateY(-11px) rotate(-45deg); }
.site-header__toggle[aria-expanded="true"] span { opacity: 0; }

/* Mobile off-canvas panel (re-renders the Navigation global area + CTAs) */
.mobile-nav {
  position: fixed;
    inset: 0 0 0 auto;
    width: 75vw;
    background: var(--main-dark);
    padding: 125px 24px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 998;
    overflow-y: auto;
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav__close {
  align-self: flex-end;
  background: none;
  border: 0;
  color: var(--cream);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.mobile-nav__list { display: flex; flex-direction: column; gap: 20px; }
.mobile-nav__list a { color: var(--cream); font-size: 18px; }

/* Nested menu built by initMobileNavContent() in bardown.js:
   li.mobile-nav__item > .mobile-nav__row (link + optional toggle button)
                        > .mobile-nav__panel > ul.mobile-nav__submenu */
.mobile-nav__menu,
.mobile-nav__submenu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mobile-nav__menu > .mobile-nav__item {
  border-bottom: 1px solid rgba(238, 233, 223, 0.12);
}
.mobile-nav__menu > .mobile-nav__item:first-child {
  border-top: 1px solid rgba(238, 233, 223, 0.12);
}
.mobile-nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mobile-nav__row > a {
  flex: 1;
  padding: 14px;
  transition: color 0.15s ease;
}
.mobile-nav__row > a:hover,
.mobile-nav__item.is-current > .mobile-nav__row > a { color: var(--accent); }

/* Expand/collapse toggle: notched outline square with a chevron that flips
   when the submenu is open. */
.mobile-nav__toggle {
  --notch: 8px;
  flex: none;
  position: relative;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: 2px solid var(--accent);
  corner-shape: bevel;
  border-radius: 0 0 var(--notch) 0;
  color: var(--accent);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.mobile-nav__toggle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translate(-50%, -70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.mobile-nav__toggle:hover,
.mobile-nav__item.is-expanded > .mobile-nav__row > .mobile-nav__toggle {
  background: var(--accent);
  color: var(--main-dark);
}
.mobile-nav__item.is-expanded > .mobile-nav__row > .mobile-nav__toggle::before {
  transform: translate(-50%, -30%) rotate(-135deg);
}
.mobile-nav__toggle:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }

/* Submenu panel: animates to its natural height (grid 0fr → 1fr) and is
   hidden from keyboard/screen readers while collapsed. */
.mobile-nav__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.25s ease, visibility 0s linear 0.25s;
}
.mobile-nav__item.is-expanded > .mobile-nav__panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.25s ease, visibility 0s;
}
.mobile-nav__submenu {
  overflow: hidden;
  min-height: 0;
  margin-left: 2px;
  border-left: 2px solid var(--accent-soft);
}
.mobile-nav__item.is-expanded > .mobile-nav__panel > .mobile-nav__submenu {
  margin-bottom: 14px;
}
.mobile-nav__submenu .mobile-nav__row > a {
  padding: 9px 0 9px 18px;
  font-size: 15px;
  letter-spacing: 2px;
}
/* Level 3+: indent a little further inside the level-2 list. */
.mobile-nav__submenu .mobile-nav__submenu { margin-left: 18px; }
.mobile-nav__submenu .mobile-nav__toggle { width: 30px; height: 30px; }
.mobile-nav__ctas { display: flex; flex-direction: column; gap: 12px; }
.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(3, 42, 35, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 150;
}
.mobile-nav-backdrop.is-open { opacity: 1; pointer-events: auto; }

/* ---- Hero / Introduction ---------------------------------------------- */
.hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: flex-end;
  background-color: var(--main-dark);
  background-size: cover;
  background-position: center;
  color: var(--cream);
  overflow: hidden;
}
/* Bottom fade into Main green, sampled from the Figma banner_element_3
   layer (transparent to #024137 over the bottom ~20% of the hero). Sits
   beneath the ::after darkening overlay, matching the Figma layer order. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0; z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(2, 65, 55, 0.5) 0%,
    rgba(2, 65, 55, 0.5) 25%,
    rgba(2, 65, 55, 0.75) 70%,
    var(--main-deep) 95%
  );
  pointer-events: none;
}
/* Home page foreground overlays (dirt/grass PNGs), anchored bottom-right.
   They're anchored to the section (not background-attachment: fixed, which
   would pin them to the viewport's corner). Once the section passes the
   middle of the viewport, bardown.js pushes them down via --overlay-shift so
   they travel at half the scroll speed: slower than the page, faster than
   the near-fixed section background (--bg-shift). The shift is only ever
   downward, and the section clips what slides out the bottom. Unset (0) on
   touch / small screens / reduced motion, so the overlay just sits at the
   bottom-right. */
.page-template-home .hero::after,
.page-template-home .section--image::after {
  content: "";
  position: absolute;
  z-index: 0;
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: contain;
  transform: translate3d(0, var(--overlay-shift, 0px), 0);
  will-change: transform;
  pointer-events: none;
}
.page-template-home .hero::after {
  inset: 0 0 -100px 0;
  background-image: url("../images/bde-h1-overlay.png");
}
.page-template-home .section--image::after {
  inset: 0 0 -150px 0; right: 0; left: auto; width: 50%;
  background-image: url("../images/bde-h3-overlay.png");
}
.page-template-home .section--image { overflow: hidden; }

.hero--short { min-height: 20vh; }
.haswallpaper.hero--short { min-height: 75vh; }

.hero__inner {
  position: relative;
  z-index: 1;
  padding: 100px var(--gutter) 75px var(--gutter);
  width: 100%;
}
.hero__content { max-width: 75%; }
.hero__content p { text-shadow: 0 0 12px rgba(0,0,0,0.6); }
.hero--short .hero__content { max-width: 75%; }

/* ---- Section shells -----------------------------------------------------*/
.section { padding: 110px 0; }
.section--dark { background: var(--main-deep); color: var(--cream); }
.section--cream { background: var(--cream); color: var(--main); }
.section--white { background: var(--white); color: var(--main); }
.section--image {
  position: relative;
  background-size: cover;
  background-position: center;
  background-color: var(--main-dark);
  color: var(--cream);
}
.section--image::before {
  content: "";
  position: absolute;
  inset: 0; z-index: 1;
  background: var(--main-dark);
  opacity: 0.65;
}
.section--image > .container { position: relative; z-index: 1; }

/* ---- Parallax backgrounds (hero + Main-3) --------------------------------
   Desktop with a real pointer only: background-attachment: fixed is ignored
   or janky on iOS/Android, so touch and small screens keep normal scrolling
   backgrounds. On top of the fixed image, bardown.js drifts each image
   vertically via --bg-shift as the section scrolls through the viewport, and
   sets --bg-size so the image has enough extra height that the drift never
   exposes an edge (skipped for reduced motion, falling back to cover). */
@media (hover: hover) and (pointer: fine) and (min-width: 992px) {
  .hero,
.section--image
	{
    background-attachment: fixed;
    background-size: var(--bg-size, cover);
    background-position: center calc(20% + var(--bg-shift, 0px));
  }
}

/* ---- Main (services intro + cards) -------------------------------------*/
/* Figma: the image bleeds off the left edge of the viewport (x 0 → 681 on the
   1920 frame) while its right edge and the text column stay on the container
   grid. --main-bleed is the distance from the viewport edge to the
   container's content edge; the media pulls left by that much. */
.main-grid {
  --main-bleed: calc(max(0px, (100vw - var(--container-width)) / 2) + var(--gutter));
  display: grid;
  grid-template-columns: minmax(200px, 290px) 1fr;
  grid-template-areas:
    "media     body"
    "media     full"
    "secondary secondary";
  grid-template-rows: auto 1fr auto;
  column-gap: 100px;
  align-items: start;
}
.main-grid__media {
  grid-area: media;
  align-self: stretch;
  margin-left: calc(-1 * var(--main-bleed));
  margin-top: -25px;
}
.main-grid__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 600px;
}
.main-grid__body { grid-area: body; /*max-width: 680px;*/ }
/* Main-b: sits under the Main heading in the text column (the image spans
   both rows), with its copy flowing across two columns — Figma's two 355px
   text columns with a 36px gutter. */
.main-grid__body_full {
  grid-area: full;
  column-count: 2;
    column-gap: 40px;
}
/* Main-c: own row under the image + text, spanning the full container
   (only rendered in edit mode or when the area has blocks). */
.main-grid__body_secondary {
	grid-area: secondary;
	min-width: 0;
	padding: 75px 0 0 0;
	
}
/* No page_wallpaper1 image: home.php omits .main-grid__media, so the body
   spans the full container width. */
.main-grid--no-media {
  grid-template-columns: 1fr;
  grid-template-areas:
    "body"
    "full"
    "secondary";
}
.main-grid--no-media .main-grid__body { max-width: none; }
.main-grid__columns {
  columns: 2;
  column-gap: 40px;
  font-size: 17px;
}
.cta-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 48px;
  padding-top: 40px;
  border-top: 2px solid rgba(238, 233, 223, 0.25);
}
.cta-bar p {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 17px;
  max-width: 640px;
  margin: 0;
}

/* Service cards: see application/blocks/page_list/templates/cards/view.css
   (the Page List "Cards" custom template) */

/* ---- Projects gallery (Main-2) -----------------------------------------*/
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.gallery img { height: 100%; min-height: 280px; object-fit: cover; }
.main2-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

/* Numbered columns: see
   application/blocks/core_area_layout/templates/numbered_columns/view.css
   (the Area Layout "Numbered Columns" custom template) */

/* ---- Default Layout block ("Add Columns") ---------------------------------
   Concrete ships no front-end CSS for the core Layout/"Add Columns" block's
   default (no custom template) rendering — .ccm-layout-column-wrapper and
   .ccm-layout-column get no display or responsive behavior out of the box.
   Column widths themselves are injected separately by Concrete's own
   per-layout stylesheet (/ccm/system/css/layout/{id}); this just makes the
   row flex and stacks it to one column per row on mobile.
---------------------------------------------------------------------------- */
#pagewrap .ccm-layout-column-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
/* A float-grid era clearfix rule (div.ccm-layout-column-wrapper:before/:after
   { display: table; content: ""; }) generates extra anonymous flex items
   inside the wrapper once it's display: flex, throwing off row wrapping and
   the column-count quantity queries below. Neutralize it — #pagewrap + class
   outguns the plain element/pseudo selector, no !important needed. */
#pagewrap .ccm-layout-column-wrapper::before,
#pagewrap .ccm-layout-column-wrapper::after {
  content: none;
  display: none;
}
#pagewrap .ccm-layout-column-inner {
  width: 100%;
}

/* Desktop: auto width per column based on the TOTAL number of columns in the
   layout, ignoring whatever width Concrete's per-layout stylesheet assigned
   (hence !important) — 1 = full width, 2 or 4 = halves, 3/5/6 = thirds,
   7+ = quarters. Uses the "quantity query" pattern (:first-child +
   :nth-last-child) to count total siblings in pure CSS. */
@media (min-width: 992px) {
  #pagewrap .ccm-layout-column-wrapper > .ccm-layout-column:only-child {
    width: 100% !important;
  }

  #pagewrap .ccm-layout-column-wrapper > .ccm-layout-column:first-child:nth-last-child(2),
  #pagewrap .ccm-layout-column-wrapper > .ccm-layout-column:first-child:nth-last-child(2) ~ .ccm-layout-column,
  #pagewrap .ccm-layout-column-wrapper > .ccm-layout-column:first-child:nth-last-child(4),
  #pagewrap .ccm-layout-column-wrapper > .ccm-layout-column:first-child:nth-last-child(4) ~ .ccm-layout-column {
    width: calc(50% - 12px) !important;
  }

  #pagewrap .ccm-layout-column-wrapper > .ccm-layout-column:first-child:nth-last-child(3),
  #pagewrap .ccm-layout-column-wrapper > .ccm-layout-column:first-child:nth-last-child(3) ~ .ccm-layout-column,
  #pagewrap .ccm-layout-column-wrapper > .ccm-layout-column:first-child:nth-last-child(5),
  #pagewrap .ccm-layout-column-wrapper > .ccm-layout-column:first-child:nth-last-child(5) ~ .ccm-layout-column,
  #pagewrap .ccm-layout-column-wrapper > .ccm-layout-column:first-child:nth-last-child(6),
  #pagewrap .ccm-layout-column-wrapper > .ccm-layout-column:first-child:nth-last-child(6) ~ .ccm-layout-column {
    width: calc(33.333% - 16px) !important;
  }

  #pagewrap .ccm-layout-column-wrapper > .ccm-layout-column:first-child:nth-last-child(n+7),
  #pagewrap .ccm-layout-column-wrapper > .ccm-layout-column:first-child:nth-last-child(n+7) ~ .ccm-layout-column {
    width: calc(25% - 18px) !important;
  }
}

/* ---- Testimonial (Main-4) ----------------------------------------------*/
.testimonial {
  background: var(--white);
  padding: 48px;
  max-width: 560px;
  margin-left: auto;
}
.testimonial__author {
  font-weight: 700;
  margin-top: 16px;
}

/* ---- FAQ accordion (Main-5): styles live with the block override in
   application/blocks/accordion/view.css. ---------------------------------- */

/* ---- Footer --------------------------------------------------------------
   Figma (1920 frame, content edge at x 390):
   - CTA row: logo column (390 → 822), a 3px #FFB162 vertical divider at
     x 822 (196px tall), then the heading + buttons starting at x 878.
   - Bottom row: phone/email on the left, credits right-aligned to the
     content edge, ~105px below the CTA buttons. No rule between rows.
---------------------------------------------------------------------------- */
.site-footer { background: var(--main); color: var(--cream); }
.site-footer__cta {
  display: grid;
  grid-template-columns: 35% 1fr;
  align-items: center;
  padding-top: 70px;
  padding-bottom: 0;
}
.site-footer__cta-brand img {
  width: 100%;
  padding: 50px;
  height: auto;
}
.site-footer__cta .site-footer__content {
  margin: 0;
  min-height: 196px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 50px;
  border-left: 3px solid var(--accent-soft);
}
.site-footer__content > :last-child,
.site-footer__content p:last-child { margin-bottom: 0; }
.site-footer__cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.site-footer__bottom {
  padding-top: 105px;
  padding-bottom: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}
.site-footer__contact { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 18px; line-height: 1.55; }
.site-footer__contact p:last-child { margin-bottom: 0; }
.site-footer__contact a { white-space: nowrap; }
.site-footer__meta { text-align: right; color: var(--main-lighter); font-size: 17px; line-height: 1.5; }
.site-footer__social { display: inline-flex; margin-top: 16px; }
.site-footer__social img { width: 12px; height: auto; }

/* ---- Login form (/login) ---------------------------------------------------
   Concrete's core login page ships Bootstrap-class markup (.login-page,
   .concrete-login-form, .form-control, .btn-primary, etc.) with no Bootstrap
   CSS loaded on the front end, so it renders bare by default — this gives it
   the theme's own clean look.

   Note: Concrete's "Sign In"/"Cancel" buttons already carry a bare class="btn"
   alongside btn-primary/btn-secondary, so they already inherit the shared CTA
   look (notch, arrow, uppercase) from the #pagewrap .btn rule above — this
   just adds their fill colors. The password-visibility toggle and "Forgot
   Password" link are reset/restyled separately since the CTA look doesn't
   suit a small icon button or an inline text link.
---------------------------------------------------------------------------- */
#pagewrap .login-page { padding: 0; }
#pagewrap .login-page .col-12 { max-width: 480px; margin: 0 auto; }
#pagewrap .concrete-login-form {
  background: var(--cream);
  padding: 48px;
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
#pagewrap .concrete-login-form .row { display: block; margin: 0; }
#pagewrap .concrete-login-form .col-form-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--main);
  margin-bottom: 8px;
}
#pagewrap .concrete-login-form .form-control {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 16px;
  border: 2px solid var(--main-subtle);
  background: var(--white);
  color: var(--main);
}
#pagewrap .concrete-login-form .form-control:focus {
  outline: none;
  border-color: var(--accent);
}
#pagewrap .concrete-login-form .input-group { position: relative; display: flex; }
#pagewrap .concrete-login-form .input-group .form-control { flex: 1; padding-right: 48px; }
#pagewrap .concrete-login-form .form-check { display: flex; align-items: center; gap: 8px; }
#pagewrap .concrete-login-form .form-check-label { font-size: 15px; }

/* Password show/hide toggle: a plain icon button, not a CTA */
#pagewrap .concrete-login-form .btn-outline-secondary {
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  width: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--main-lighter);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#pagewrap .concrete-login-form .btn-outline-secondary::after { content: none; }

/* Forgot Password: a plain text link (no bare .btn class, so it never had
   the CTA look to begin with) */
#pagewrap .concrete-login-form .btn-link {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--main-lighter);
  text-decoration: underline;
  padding: 0;
  border: 0;
  background: none;
}

/* Sign In / Cancel: fill in the CTA look already inherited from .btn */
#pagewrap .concrete-login-form .btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--main-dark);
  align-self: flex-start;
}
#pagewrap .concrete-login-form .btn-secondary {
  background: transparent;
  border-color: var(--main-subtle);
  color: var(--main);
  align-self: flex-start;
}

/* ---- Responsive ----------------------------------------------------------*/
@media (max-width: 991px) {
  .site-header__nav,
  .site-header__ctas { display: none; }
  .site-header__toggle { display: block; }
  .main-grid,
  .main2-grid { grid-template-columns: 1fr; }
  /* Stack: Main text, Main-b text (single column), then the image edge to edge. */
  .main-grid {
    grid-template-areas:
      "body"
      "full"
      "media"
      "secondary";
    grid-template-rows: auto;
  }
  .main-grid__body_full { columns: 1; }
  .main-grid--no-media {
    grid-template-areas:
      "body"
      "full"
      "secondary";
  }
  .main-grid__media {
    margin: 32px calc(-1 * var(--gutter)) 0;
  }
  .main-grid__media img { min-height: 260px; }
  .main-grid__columns { columns: 1; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  #pagewrap .ccm-layout-column-wrapper { flex-direction: column; }
  /* Overrides the width/spacing Concrete injects per-column via its own
     dynamically generated stylesheet (/ccm/system/css/layout/{id}). */
  #pagewrap .ccm-layout-column-wrapper > .ccm-layout-column {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #pagewrap .ccm-layout-column-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .testimonial { margin-left: 0; max-width: 100%; }
  .h-display-1 { font-size: 48px; }
  .h-display-2 { font-size: 34px; }
  .section { padding: 72px 0; }
	.section.section--dark { padding-top: 0; }
  /* Footer: stack logo over the CTA; the divider turns horizontal. */
  .site-footer__cta {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: 56px;
  }
  .site-footer__cta .site-footer__content {
    min-height: 0;
    padding-left: 0;
    padding-top: 32px;
    border-left: 0;
    border-top: 3px solid var(--accent-soft);
  }
  .site-footer__bottom { padding-top: 56px; padding-bottom: 48px; }
}

@media (max-width: 600px) {
  .gallery { grid-template-columns: 1fr; }
  .hero { min-height: 560px; 
	background-size: cover!important;
    background-position: center!important; }
	.hero::before {
		background: linear-gradient(to bottom, rgba(2, 65, 55, 0.75) 0%, rgba(2, 65, 55, 0.75) 25%, rgba(2, 65, 55, 0.75) 70%, var(--main-deep) 95%);
	}
	.hero__inner {  padding: 75px var(--gutter); }
	
	.hero--short { min-height: 20vh; }
	.haswallpaper.hero--short { min-height: 75vh; }
	 .haswallpaper .hero__inner {  padding: 125px  var(--gutter) 75px var(--gutter); }
	.hero--short .hero__content { max-width: 100%; }
  .h-display-1 { font-size: 36px; }
	.hero__content { max-width: 90%; }
  #pagewrap .login-page { padding: 48px 0 80px; }
  #pagewrap .concrete-login-form { padding: 28px; }
  .site-footer__meta { text-align: left; }
  /*.site-footer__cta { padding: 56px 0 40px; }*/
}