/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/


/* ———— MIGHTYBIT BASE STYLES —————————————————————— */

:root {
  /* ── DEFAULTS ── */
  --ff-serif:    'Cormorant', serif;
  --ff-sans:     'Novacento Sans', sans-serif;
  font-family:   var(--ff-serif);
  font-size:     10px;
  font-style:    normal;
  font-weight:   500;
  color:         #2f2f2f;
  --vp-max:      1440px;
  --vp-min:      360px;
  --mwidth:      92%;  /* max mobile container width */

  /* ── FONT SIZE ── */
  --fs-x: clamp(1.18519rem, -0.16424vi + 1.24431rem, 1.00781rem);
  --fs-s: clamp(1.33333rem, -0.05879vi + 1.3545rem, 1.26984rem);
  --fs-b: clamp(1.5rem, 0.09259vi + 1.46667rem, 1.6rem);
  --fs-5: clamp(1.6875rem, 0.30417vi + 1.578rem, 2.016rem);
  --fs-4: clamp(1.89844rem, 0.59419vi + 1.68453rem, 2.54016rem);
  --fs-3: clamp(2.13574rem, 0.98598vi + 1.78079rem, 3.2006rem);
  --fs-2: clamp(2.40271rem, 1.5093vi + 1.85936rem, 4.03276rem);
  --fs-1: clamp(2.70305rem, 2.20206vi + 1.91031rem, 5.08128rem);

  /* COLOR PALETTE */
  --darkblue: #13294b;
  --brown: #674230;
  --tan: #ab9278;
  --lighttan: rgba(223, 216, 207, 1);
  --forest: #115e67;
  --lightforest: #4f868e;
  --ultralighttan: rgba(245,244,237,1);
  --black: #000000;
  --white: #ffffff;
}

body {
    margin: 0;
}

.mb_section {
  background-color: rgb(50 100 150 / 0.15);
  margin: 0;
  /* padding-top: 10rem; */
  padding-top: clamp(5rem, 3.333rem + 4.63vw, 10rem);
  /* padding-bottom: 10rem; */
  padding-bottom: clamp(5rem, 3.333rem + 4.63vw, 10rem);
}

.mb_container {
  display: block;
  max-width: min(var(--vp-max), var(--mwidth));
  margin-left: auto;
  margin-right: auto;
}

.mb_h1 { 
  font-size: var(--fs-1);
  font-weight: 400;
  letter-spacing: -3px;
}

.mb_h2 { 
  font-family: var(--ff-sans);
  text-transform: uppercase;
  font-style: normal;
  font-weight: 600;
  font-size: var(--fs-2);
  letter-spacing: -1px;
}

.mb_h3 { 
  font-size: var(--fs-3);
  letter-spacing: -1px;
}

.mb_h4 { 
  font-family: var(--ff-sans);
  text-transform: uppercase;
  font-weight: 600;
  font-size: var(--fs-4);
  letter-spacing: -1px;
}

.mb_p  { 
  font-size: var(--fs-b);
  line-height: var(--lh-b);
  line-height: 1.2;
}

.mb_h1, .mb_h2, .mb_h3, .mb_h4 {
  margin:0;
  padding:0;
  hyphens: manual;
}



/* ———— MIGHTYBIT RESPONSIVE GRIDS —————————————————————— */

.mb_grid_1_5 { /* desktop first */
    display: grid;
	grid-template: 1fr / repeat(5, 1fr); /* rows / columns */
    align-items: normal;
	@media (max-width: 992px) { grid-template: repeat(2, 1fr) / repeat(3, 1fr); }
	@media (max-width: 478px) { grid-template: repeat(5, 1fr) / 1fr; }
}

.mb_grid_1_4 { /* desktop first */
    display: grid;
	grid-template: 1fr / repeat(4, 1fr); /* rows / columns */
    align-items: normal;
	@media (max-width: 992px) { grid-template: repeat(2, 1fr) / repeat(2, 1fr); }
	@media (max-width: 478px) { grid-template: repeat(4, 1fr) / 1fr; }
}

.mb_grid_1_2 { /* desktop first */
    display: grid;
	grid-template: repeat(1, 1fr) / repeat(2, 1fr); /* rows / columns */
    align-items: normal;
	@media (max-width: 992px) { grid-template: repeat(2, 1fr) / repeat(1, 1fr); }
}

.mb_grid_2_3 { /* desktop first */
    display: grid;
	grid-template: repeat(2, 1fr) / repeat(3, 1fr); /* rows / columns */
    align-items: normal;
	@media (max-width: 992px) { grid-template: repeat(3, 1fr) / repeat(2, 1fr); }
	@media (max-width: 478px) { grid-template: repeat(6, 1fr) / 1fr; }
}