/*---------------------------------------------------------------------------------

 Theme Name:   Stuff by Brit
 Theme URI:    http://stuffbybrit.com
 Description:  Child theme for Stuff by Brit.
 Author:       Brit
 Author URI:   http://stuffbybrit.com
 Template:     Divi
 Version:      1.0.0
 License:      
 License URI:  

------------------------------ ADDITIONAL CSS HERE ------------------------------*/

/* ===================
   GENERAL INFORMATION 

	COLORS
	- 

	FONTS
	- 

	BUTTON STYLING
	- 	

	ROW STYLING
	padding-top: 3vw !important;
	padding-bottom: 3vw !important;

	SECTION STYLING

   =================== */

/* =============================
	FONT IMPORT
   ============================= */


/* =============================
	SITE WIDTH/LAYOUT SETTINGS
   ============================= */
body {
	background-color: #fff8f0 !important;
}

.et_pb_section_0_tb_body .et_pb_section {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding-top: 6vw !important;
	padding-bottom: 6vw !important;
}

.et_pb_row {
	width: 90% !important;
	max-width: 1920px !important;
	margin: 0 !important;
}

.fw-row {
	width: 100% !important;
	max-width: 100% !important;
}

.wp-block-spacer {
	height: 30px !important;
}

/* =============================
	FONT STYLING
   ============================= */
html {
	font-size: 100%;
}

body {
	font-size: 1rem !important;          /* 16px base */
	line-height: 1.6 !important;         /* comfy body copy */
	font-weight: 400;
	color: #222;
}

/* Paragraphs */
p {
	font-size: 1rem !important;          /* 16px */
	line-height: 1.6 !important;
	margin-bottom: 1.6rem;
	font-family: 'Sharp Sans Medium', Helvetica, Arial, Lucida, sans-serif !important;
}

/* Headings - shared styles */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
	font-weight: 550 !important;
	color: #222222;
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
	font-family: '1 Sharp Sans Semibold', Helvetica, Arial, Lucida, sans-serif !important;
}

/* Working heading scale */
h1, .h1 {
	font-size: 3.998rem !important;      /* ~64px */
	line-height: 1.1 !important;
	margin-bottom: 1.2rem;
	margin-top: 3.2rem;
}

h2, .h2 {
	font-size: 2.827rem !important;      /* ~45px */
	line-height: 1.15 !important;
	margin-bottom: 1.2rem;
	margin-top: 3.0rem;
}

h3, .h3 {
	font-size: 1.999rem !important;      /* ~32px */
	line-height: 1.2 !important;
	margin-bottom: 1.08rem;
	margin-top: 2.8rem;
}

h4, .h4 {
	font-size: 1.414rem !important;      /* ~22.6px */
	line-height: 1.25 !important;
	margin-bottom: 0.96rem;
	margin-top: 2.4rem;
}

h5, .h5 {
	font-size: 1.25rem !important;       /* ~20px */
	line-height: 1.3 !important;
	margin-bottom: 0.8rem;
	margin-top: 2.0rem;
}

h6, .h6 {
	font-size: 1.125rem !important;      /* ~18px */
	line-height: 1.3 !important;
	margin-bottom: 0.8rem;
	margin-top: 1.6rem;
}

/* Small and tiny text */
small {
	font-size: 0.875rem !important;      /* ~14px */
	line-height: 1.4 !important;
}

/* "Tiny" helper (labels, overlines, etc.) */
.tiny-text {
	font-size: 0.75rem !important;       /* ~12px */
	line-height: 1.3 !important;
	font-weight: 400;
	margin-bottom: 1.6rem;
	letter-spacing: 0.2em !important;
	text-transform: uppercase !important;
	font-family: 'Sharp Sans Medium', Helvetica, Arial, Lucida, sans-serif !important;
}

/* OPTIONAL: Display / hero heading classes using your original big scale */
.display-h1,
.hero-heading {
	font-size: 7.993rem !important;      /* ~128px */
	line-height: 1.05 !important;
}

.display-h2 {
	font-size: 5.653rem !important;      /* ~90px */
	line-height: 1.08 !important;
}

/*color highlights in text*/
.highlight-text {
    text-decoration: none;
    box-shadow: inset 0 -.5em 0 rgba(197, 200, 238, 1);
    color: inherit;
}

/* =============================
   RESPONSIVE HEADING SIZES
   ============================= */

/* Tablet (max-width: 980px) */
@media all and (max-width: 980px) {

  h1, .h1 {
    font-size: 2.75rem !important;     /* was 3rem — now ~44px */
    line-height: 1.1 !important;
    margin-top: 2.2rem;
    margin-bottom: 1rem;
  }

  h2, .h2 {
    font-size: 2rem !important;        /* was 2.25rem — now ~32px */
    line-height: 1.15 !important;
    margin-top: 2rem;
    margin-bottom: 0.9rem;
  }

  h3, .h3 {
    font-size: 1.6rem !important;      /* was 1.75rem — now ~25.6px */
    line-height: 1.2 !important;
    margin-top: 1.8rem;
    margin-bottom: 0.85rem;
  }

  h4, .h4 {
    font-size: 1.25rem !important;     /* staying ~20px for tablet */
    line-height: 1.25 !important;
    margin-top: 1.6rem;
    margin-bottom: 0.75rem;
  }

  h5, .h5 {
    font-size: 1.125rem !important;    /* ~18px */
    line-height: 1.3 !important;
    margin-top: 1.4rem;
    margin-bottom: 0.65rem;
  }

  h6, .h6 {
    font-size: 1rem !important;        /* 16px */
    line-height: 1.3 !important;
    margin-top: 1.2rem;
    margin-bottom: 0.5rem;
  }
}


/* Mobile (max-width: 767px) — unchanged */
@media all and (max-width: 767px) {

  h1, .h1 {
    font-size: 2.25rem !important;     /* ~36px */
    line-height: 1.15 !important;
    margin-top: 2rem;
    margin-bottom: 0.9rem;
  }

  h2, .h2 {
    font-size: 1.875rem !important;     /* ~30px */
    line-height: 1.2 !important;
    margin-top: 1.8rem;
    margin-bottom: 0.8rem;
  }

  h3, .h3 {
    font-size: 1.5rem !important;      /* ~24px */
    line-height: 1.25 !important;
    margin-top: 1.6rem;
    margin-bottom: 0.7rem;
  }

  h4, .h4 {
    font-size: 1.25rem !important;     /* ~20px */
    line-height: 1.3 !important;
    margin-top: 1.4rem;
    margin-bottom: 0.6rem;
  }

  h5, .h5 {
    font-size: 1.125rem !important;    /* ~18px */
    line-height: 1.3 !important;
    margin-top: 1.2rem;
    margin-bottom: 0.5rem;
  }

  h6, .h6 {
    font-size: 1rem !important;        /* 16px */
    line-height: 1.3 !important;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
  }
}


/* =============================
	ACCENT / SCRIPT HEADING
   ============================= */

/* Accent heading that pairs with main Sharp Sans titles */
.accent-heading {
	font-family: 'Your Accent Font Name', 'Sharp Sans Medium', Helvetica, Arial, sans-serif;
	font-size: 1.25rem;        /* tweak as needed; ~20px */
	line-height: 1.1;          /* tight so it hugs the title */
	font-weight: 400;          /* scripts often look better lighter */
	letter-spacing: 0.08em;    /* gives it that label/tag feel */
	text-transform: none;      /* or 'uppercase' if you switch to a serif instead of script */
	display: block;
	margin-bottom: 0.25rem;    /* space between accent and main heading */
}

/* If you still want a *slight* angle, keep it subtle */
.accent-heading--angled {
	display: inline-block;
	transform: rotate(-3deg);
}

/* If you're currently using .tiny-text for this, you can soften it: */
.tiny-text.accent-heading {
	font-size: 0.875rem !important;  /* slightly bigger than your old tiny */
	margin-bottom: 0.25rem !important;
}


/* =============================
	FOOTER MENU
   ============================= */
.ftr-menu .et_pb_menu_inner_container,
.ftr-menu .et_pb_menu__wrap,
.ftr-menu .et_pb_menu__menu,
.ftr-menu.et_pb_menu .et_pb_menu__menu > nav,
.ftr-menu.et_pb_menu .et_pb_menu__menu > nav > ul {
	display: block !important;
}

.ftr-menu a {
	position: relative;
}

.ftr-menu .et_mobile_nav_menu {
	display: none !important;
}

.ftr-menu a:before {
	content: '';
	background: #222222 !important;
	display: block;
	position: absolute;
	width: 10px;
	height: 1px;
	top: .5em;
	left: -20px;
	opacity: 0;
	transition: all .4s ease-in-out;
}

.ftr-menu a:hover:before {
	left: -10px;
	opacity: 1;
}

.ftr-menu a:hover {
	padding-left: 5px;
}

/* =============================
	TEXT MARQUEE
   ============================= */
.marquee {
	position: relative;
	display: flex;
	animation: text 14s linear infinite !important;
}

.track {
	font-size: 36px;
	white-space: nowrap;
	min-width: 100%;
	text-align: center;
	padding-top: .5vh;
	line-height: .9em;
	color: #191c19;
	font-family: 'Grand Slang', sans-serif;
}

.track a {
	color: inherit;
	text-decoration: none;
	position: relative;
}

@keyframes text {
	0%   { left: 0%; }
	25%  { left: -10%; }
	50%  { left: -20%; }
	75%  { left: -30%; }
	100% { left: -40%; }
}

#page-container {
	overflow-y: visible !important;
}

/* =============================
	TAB STYLING
   ============================= */
.fw-tabs .dg_at_content_wrapper {
	padding-left: 0 !important;
	padding-right: 0 !important;
	width: 100% !important;
}

.fw-tabs .dg_at_nav_container,
.fw-tabs .dg_at_nav_wrap {
	display: flex !important;
	flex-direction: row !important;
}

/* =============================
	PORTFOLIO IMAGE ASPECT RATIO
   ============================= */
/* 3:4 */
.portfolio-image-3-4 .et_portfolio_image {
	padding-top: 133.33%;
	display: block;
}

.portfolio-image-3-4 .et_portfolio_image img {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	object-fit: cover;
}

/* =============================
	REGULAR IMAGE ASPECT RATIO
   ============================= */
/* 1:1 */
.image-1-1 .et_pb_image_wrap {
	padding-top: 100%;
	display: block;
}

.image-1-1 .et_pb_image_wrap img {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	object-fit: cover;
}

/* 3:4 */
.image-3-4 .et_pb_image_wrap {
	padding-top: 133.33%;
	display: block;
}

.image-3-4 .et_pb_image_wrap img {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	object-fit: cover;
}

/* 2:3 */
.image-2-3 .et_pb_image_wrap {
	padding-top: 150%;
	display: block;
}

.image-2-3 .et_pb_image_wrap img {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	object-fit: cover;
}

/* =============================
	INLINE BUTTONS
   ============================= */
.btn-inline .et_pb_button_module_wrapper {
	display: inline-block;
	margin: auto;
	text-align: center !important;
}

/* =============================
	FULL-HEIGHT IMAGES (ALL VARIANTS)
   ============================= */
.fh-img,
.fh-img-column,
.full-height-image-column {
	height: 100%;
	object-fit: cover;
}

.fh-img .et_pb_image_wrap,
.fh-img-column .et_pb_image_wrap,
.full-height-image-column .et_pb_image_wrap {
	height: 100%;
}

.fh-img img,
.fh-img-column img,
.full-height-image-column img {
	object-fit: cover;
	height: 100% !important;
}

/* =============================
	3-COLUMN PORTFOLIO
   ============================= */
/* 4 to 3 Columns */
@media only screen and (min-width: 768px) {
	#three-column-grid .et_pb_grid_item {
		width: 30% !important;
		margin: 0 4% 1.5% 0 !important;
	}

	#three-column-grid .et_pb_grid_item:nth-child(3n) {
		margin-right: 0 !important;
	}

	#three-column-grid .et_pb_grid_item:nth-child(3n+1) {
		clear: left !important;
	}

	#three-column-grid .et_pb_grid_item:nth-child(4n+1) {
		clear: unset !important;
	}
}

/* =============================
	FILTERABLE PORTFOLIO STYLES
   ============================= */
.et_pb_filterable_portfolio .et_pb_portfolio_filters {
	margin: 0 -10px 2vh !important;
}

.et_pb_filterable_portfolio_0.et_pb_filterable_portfolio .et_pb_portfolio_filter {
	line-height: 1em;
}

.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
	border-radius: 50px !important;
	padding: 6px 10px 4px 10px !important;
	margin: 5px !important;
	border: 1.5px solid #2E4AFF;
	color: #2E4AFF !important;
	background-color: transparent;
}

.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover,
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a.active {
	background-color: #2E4AFF;
	color: #fff !important;
}

.et_pb_filterable_portfolio .et_pb_portfolio_filters li a.active:hover {
	background-color: #fff;
	color: #222 !important;
	border-color: #222;
}

.et_pb_filterable_portfolio .et_pb_portofolio_pagination {
	border-top: 0 !important;
}

@media all and (max-width: 980px) {
	.et_pb_column .et_pb_filterable_portfolio .et_pb_portfolio_filters li {
		display: flex;
		flex-direction: row !important;
		line-height: 1em !important;
		width: auto;
	}
}

/* =============================
	TITLE UNDERLINES
   ============================= */
.underline .et_pb_portfolio_item .et_pb_module_header a:hover {
	text-decoration: solid underline 2px !important;
	text-underline-offset: 3px !important;
	color: inherit !important;
}

.portfolio-title a:hover {
	text-decoration: solid underline 2px !important;
	text-underline-offset: 3px !important;
	color: inherit !important;
}

/* =============================
	WAVY UNDERLINE
   ============================= */
.hover-wavy .et_pb_button:hover {
	text-decoration-line: underline !important;
	text-decoration-color: #000000 !important;
	text-decoration-style: wavy !important;
	text-underline-offset: 3px !important;
}

/* =============================
	COLUMN ORDER BASE
   ============================= */
.custom_row {
	display: flex;
	flex-wrap: wrap;
}

/* =============================
	COLUMN ORDER ON MOBILE
   ============================= */
@media all and (max-width: 767px) {
	.first-on-mobile {
		order: 1;
	}
	.second-on-mobile {
		order: 2;
	}
	.third-on-mobile {
		order: 3;
	}
	.fourth-on-mobile {
		order: 4;
	}

	.custom_row:last-child .et_pb_column:last-child {
		margin-bottom: 30px;
	}
}

/* =============================
	COLUMN ORDER ON TABLET
   ============================= */
@media all and (min-width: 768px) and (max-width: 980px) {
	.first-on-tablet {
		order: 1;
	}
	.second-on-tablet {
		order: 2;
	}
	.third-on-tablet {
		order: 3;
	}
	.fourth-on-tablet {
		order: 4;
	}

	.custom_row:last-child .et_pb_column:last-child {
		margin-bottom: 30px;
	}
}

/* =============================
	HOMEPAGE PORTFOLIO ASPECT RATIO
   ============================= */
/* portfolio image aspect ratio portrait 1:1 */
.outlined-portfolio .et_portfolio_image {
	padding-top: 100%;
	display: block;
}

.outlined-portfolio .et_portfolio_image img {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	object-fit: cover;
}


/* ==========================================
   THREE-IMAGE STRIP – DESKTOP + RESPONSIVE
   ========================================== */

.strip-row {
	display: flex;
	margin-left: -5px;    /* match these to the column padding below */
	margin-right: -5px;
	width: 100% !important;      /* override your global .et_pb_row width: 90% */
	max-width: 100% !important;
}

/* Make Divi columns behave as equal flex items */
.strip-row .et_pb_column {
	float: none !important;      /* cancel Divi's floats */
	flex: 1 1 0;                 /* 3 equal-width columns */
	padding-left: 5px;
	padding-right: 5px;
	margin: 0 !important;
}

/* Remove any weird spacing from the image modules themselves */
.strip-row .et_pb_image {
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Wrapper defines a fixed aspect ratio (controls height) */
.strip-row .et_pb_image_wrap {
	width: 100%;
	aspect-ratio: 16 / 9;        /* change to 3/2 or 4/3 if you want a taller band */
	overflow: hidden;
}

/* Image fills the wrapper and is cropped nicely */
.strip-row .et_pb_image_wrap img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

/* =============================
   RESPONSIVE – TABLET & MOBILE
   ============================= */

/* Stack the images vertically on tablet + mobile */
@media all and (max-width: 980px) {
	.strip-row {
		flex-direction: column;
		margin-left: 0;
		margin-right: 0;
	}

	.strip-row .et_pb_column {
		padding-left: 0;
		padding-right: 0;
		margin-bottom: 10px;
	}

	.strip-row .et_pb_column:last-child {
		margin-bottom: 0;
	}
}

/* =============================
   INLINE BUTTONS
   ============================= */
/* Column (or row) that contains buttons */
.inline-buttons {
    text-align: center;   /* center contents */
}

/* Place button modules next to each other */
.inline-buttons .et_pb_button_module_wrapper {
    display: inline-block;
    margin: 0 0.75rem 0.5rem;  /* horizontal + a little bottom spacing */
}

/* =============================
   3-COLUMN PORTFOLIO IMAGE STRIP
   ============================= */

.portfolio-strip {
  display: flex;
  width: 100%;
}

/* Equal-width columns with internal spacing */
.portfolio-strip .et_pb_column {
  flex: 1 1 0;
  padding-left: 6px;
  padding-right: 6px;
}

/* Remove outer gaps */
.portfolio-strip .et_pb_column:first-child {
  padding-left: 0;
}

.portfolio-strip .et_pb_column:last-child {
  padding-right: 0;
}

/* Force images to same size */
.portfolio-strip .et_pb_image_wrap {
  width: 100%;
  aspect-ratio: 4 / 3;   /* change this ratio if you want */
  overflow: hidden;
}

/* Crop images nicely */
.portfolio-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.no-bg { background-image: none !important; }

/* Make image fill the column vertically */
.hero-image,
.hero-image .et_pb_image_wrap {
  height: 100%;
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* this is the key */
  display: block;
}