/* ----------------------------------------------------------------------------------------
* essbee-pages.css
* Overrides for the folder-URL pages only (/interior-designer-dumdum/, /blog/ and blog posts).
* Loaded only by those pages; every rule is scoped under body.essbee-page.
* ---------------------------------------------------------------------------------------- */

/************************************/
/*** 01. Page header (real <h1>)  ***/
/************************************/

body.essbee-page .page-header.pg-header::before {
	background: rgba(10, 10, 10, 0.62);
}

body.essbee-page .page-header.pg-header .page-header-box h1 {
	display: block;
	font-size: 54px;
	line-height: 1.15em;
	margin-top: 60px;
	margin-bottom: 20px;
	cursor: auto;
}

body.essbee-page .page-header.pg-header .page-header-box ol li.breadcrumb-item {
	font-size: 18px;
	text-transform: none;
}

body.essbee-page .page-header.pg-header .page-header-box ol li.breadcrumb-item.active {
	color: var(--accent-color);
}

/************************************/
/*** 02. Service page (Dumdum)    ***/
/************************************/

/* width/height attributes (for CLS) would otherwise override custom.css aspect-ratio */
body.essbee-page .service-feature-image img {
	height: auto;
}

body.essbee-page .db-hero .page-header-box {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

body.essbee-page .db-hero-text {
	margin-top: 30px;
}

body.essbee-page .db-hero-text p {
	color: #E6E6E6;
	margin-bottom: 18px;
}

body.essbee-page .db-hero-text .db-hero-lead {
	font-size: 19px;
	color: var(--white-color);
}

body.essbee-page .db-hero-text .db-btn-wrap {
	margin: 10px 0 18px;
}

body.essbee-page .db-small {
	font-size: 14px;
	color: #B8B8B8;
}

body.essbee-page .db-page .service-entry.db-section {
	margin-bottom: 70px;
}

body.essbee-page .db-page .service-entry h2 {
	font-size: 40px;
	line-height: 1.2em;
}

body.essbee-page .db-page .service-entry h3 {
	font-size: 22px;
	line-height: 1.3em;
	margin-bottom: 12px;
}

/* custom.css capitalises .service-entry list items — keep docx casing */
body.essbee-page .service-entry ul li {
	text-transform: none;
	font-weight: 400;
}

body.essbee-page .db-btn-wrap {
	margin-top: 30px;
}

body.essbee-page .db-trust {
	border: 1px solid var(--divider-color);
	border-left: 3px solid var(--accent-color);
	padding: 35px;
}

body.essbee-page .db-list-label {
	color: var(--white-color);
	margin-bottom: 15px !important;
}

body.essbee-page .db-two-lists {
	margin: 10px 0 30px;
	row-gap: 25px;
}

body.essbee-page .db-cards {
	row-gap: 24px;
	margin-top: 10px;
}

body.essbee-page .db-card {
	height: 100%;
	border: 1px solid var(--divider-color);
	padding: 28px;
	background: var(--secondery-color);
	transition: border-color 0.3s ease-in-out;
}

body.essbee-page .db-card:hover {
	border-color: var(--accent-color);
}

body.essbee-page .db-card p {
	margin-bottom: 0;
}

body.essbee-page .db-step h3 {
	color: var(--accent-color);
}

body.essbee-page .db-duration {
	margin-top: 25px;
	color: var(--white-color);
}

body.essbee-page .db-theme-rows p {
	margin-bottom: 12px;
}

body.essbee-page .db-theme-rows strong {
	color: var(--accent-color);
}

body.essbee-page .db-thumbs {
	row-gap: 20px;
	margin: 25px 0 30px;
}

body.essbee-page .db-thumb img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 0.75;
	object-fit: cover;
}

body.essbee-page .db-testimonial .db-quote {
	margin-bottom: 18px;
}

body.essbee-page .db-testimonial .db-quote strong {
	color: var(--white-color);
	font-weight: 600;
}

body.essbee-page .db-author {
	color: var(--accent-color);
	font-size: 15px;
}

body.essbee-page .db-author-name {
	font-weight: 600;
}

body.essbee-page .db-rating {
	margin-top: 25px;
	color: var(--white-color);
}

body.essbee-page .db-rating i {
	color: var(--accent-color);
}

body.essbee-page .db-final-cta {
	border: 1px solid var(--accent-color);
	padding: 40px;
}

body.essbee-page .db-contact-line {
	margin-top: 25px;
}

body.essbee-page .db-contact-line a {
	color: var(--accent-color);
}

body.essbee-page .db-contact-line a:hover {
	color: var(--white-color);
}

/* FAQ accordion — custom.css styles it for a light background */
body.essbee-page .faq-accordion .accordion-item {
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--divider-color);
	border-radius: 0;
}

body.essbee-page .faq-accordion .accordion-header {
	margin: 0;
}

body.essbee-page .faq-accordion .accordion-header .accordion-button {
	position: relative;
	background: transparent;
	color: var(--white-color);
	box-shadow: none;
	padding: 0 35px 0 0;
	font-family: var(--accent-font);
	font-size: 20px;
	line-height: 1.35em;
}

body.essbee-page .faq-accordion .accordion-button:not(.collapsed) {
	color: #efc353;
	padding-bottom: 15px;
}

body.essbee-page .faq-accordion .accordion-item .accordion-button::after,
body.essbee-page .faq-accordion .accordion-item .accordion-button.collapsed::after {
	color: #efc353;
	background-image: none;
	width: auto;
	height: auto;
}

body.essbee-page .faq-accordion .accordion-body {
	padding: 0 35px 0 0;
}

body.essbee-page .faq-accordion .accordion-body p {
	color: #CCCCCC;
}

/* Locations sidebar (per structure doc screenshot). Title is an <h2> (keeps the outline H1 > H2),
   styled like the template's .service-catagery-list h3 */
body.essbee-page .service-catagery-list h2.db-widget-title {
	font-size: 20px;
	border-bottom: 1px solid var(--divider-color);
	padding-bottom: 20px;
	margin-bottom: 20px;
}
body.essbee-page .db-locations ul li a,
body.essbee-page .db-locations ul li .db-loc-item {
	text-transform: none;
}

body.essbee-page .db-locations ul li .db-loc-item {
	position: relative;
	display: block;
	font-weight: 500;
	color: var(--accent-color);
	padding-right: 25px;
	cursor: default;
}

body.essbee-page .db-locations ul li .db-loc-item::before {
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	width: 18px;
	height: 18px;
	transform: translateY(-50%) rotate(-45deg);
	background-image: url('../images/arrow-accent.svg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

body.essbee-page .db-locations ul li.active a {
	color: var(--accent-color);
	font-weight: 700;
}

body.essbee-page .db-locations ul li:hover a {
	color: var(--white-color);
}

/************************************/
/*** 03. Blog post                ***/
/************************************/

body.essbee-page .pg-post-meta {
	color: #CFCFCF;
	font-size: 16px;
	margin: 18px 0 0;
}

body.essbee-page .pg-post-meta span {
	color: var(--accent-color);
}

body.essbee-page .page-single-post .post-content {
	max-width: 820px;
}

body.essbee-page .page-single-post .post-image img {
	width: 100%;
	height: auto;
}

body.essbee-page .page-single-post .post-entry {
	border-bottom: none;
}

body.essbee-page .page-single-post .post-entry p {
	font-size: 18px;
	line-height: 1.8em;
}

/* custom.css renders strong in --primary-color (black) — use white on the dark theme */
body.essbee-page .page-single-post .post-entry p strong,
body.essbee-page .page-single-post .post-entry li strong {
	color: var(--white-color);
	font-size: inherit;
	font-weight: 700;
}

body.essbee-page .page-single-post .post-entry h2 {
	font-size: 36px;
	margin: 45px 0 20px;
}

/* custom.css makes whole list items 500/600 weight — only docx bold runs stay bold */
body.essbee-page .page-single-post .post-entry ul li,
body.essbee-page .page-single-post .post-entry ol li {
	font-size: 18px;
	font-weight: 400;
	line-height: 1.75em;
	margin-bottom: 15px;
}

body.essbee-page .page-single-post .post-entry ul li::marker,
body.essbee-page .page-single-post .post-entry ol li::marker {
	color: var(--accent-color);
	font-weight: 700;
}

body.essbee-page .page-single-post .post-entry ol {
	padding-left: 22px;
}

/************************************/
/*** 04. Blog listing             ***/
/************************************/

body.essbee-page .pg-blog {
	padding: 100px 0 70px;
}

/* custom.css "Full-Image Overlay Cards" forces a 3:4 box, a dark gradient overlay and a transparent card
   (with !important) — these cards show the image, then the text below it */
body.essbee-page .pg-blog .post-item {
	border: 1px solid var(--divider-color) !important;
	background: var(--secondery-color) !important;
	padding: 0 0 28px;
}

body.essbee-page .pg-blog .post-featured-image {
	overflow: hidden;
	aspect-ratio: auto;
}

body.essbee-page .pg-blog .post-featured-image::after {
	display: none;
}

body.essbee-page .pg-blog .post-featured-image a {
	cursor: pointer;
}

body.essbee-page .pg-blog .post-featured-image img {
	aspect-ratio: 1 / 0.6;
	height: auto;
}

body.essbee-page .pg-blog .post-item-content,
body.essbee-page .pg-blog .post-item-btn {
	padding: 0 28px;
}

body.essbee-page .pg-blog .post-item-content h2 {
	font-size: 24px;
	line-height: 1.35em;
	margin-bottom: 15px;
}

body.essbee-page .pg-blog .post-item-content h2 a {
	color: var(--white-color);
}

body.essbee-page .pg-blog .post-item-content h2 a:hover {
	color: var(--accent-color);
}

body.essbee-page .pg-blog .pg-card-date {
	color: var(--accent-color);
	font-size: 14px;
	margin-bottom: 10px;
}

body.essbee-page .pg-blog .post-item-btn a {
	color: var(--accent-color);
}

body.essbee-page .pg-blog .post-item-btn a::after {
	background-image: url('../images/arrow-accent.svg');
}

/************************************/
/*** 05. Responsive               ***/
/************************************/

@media only screen and (max-width: 991px) {
	body.essbee-page .page-header.pg-header .page-header-box h1 {
		font-size: 40px;
	}

	body.essbee-page .db-page .service-entry h2 {
		font-size: 32px;
	}

	body.essbee-page .db-page .service-entry.db-section {
		margin-bottom: 50px;
	}

	body.essbee-page .pg-blog {
		padding: 50px 0 30px;
	}

	body.essbee-page .service-catagery-list h2.db-widget-title {
		padding-bottom: 15px;
		margin-bottom: 15px;
	}
}

@media only screen and (max-width: 767px) {
	body.essbee-page .page-header.pg-header .page-header-box h1 {
		font-size: 30px;
		margin-top: 40px;
	}

	body.essbee-page .page-header.pg-header .page-header-box ol li.breadcrumb-item {
		font-size: 15px;
	}

	body.essbee-page .db-page .service-entry h2 {
		font-size: 26px;
	}

	body.essbee-page .db-page .service-entry h3 {
		font-size: 20px;
	}

	body.essbee-page .db-trust,
	body.essbee-page .db-final-cta {
		padding: 24px;
	}

	body.essbee-page .db-card {
		padding: 22px;
	}

	body.essbee-page .db-hero-text .db-hero-lead {
		font-size: 17px;
	}

	body.essbee-page .faq-accordion .accordion-header .accordion-button {
		font-size: 18px;
	}

	body.essbee-page .page-single-post .post-entry h2 {
		font-size: 26px;
		margin-top: 35px;
	}

	body.essbee-page .page-single-post .post-entry p,
	body.essbee-page .page-single-post .post-entry ul li,
	body.essbee-page .page-single-post .post-entry ol li {
		font-size: 16px;
	}
}

/************************************/
/*** 06. Form honeypot (spam trap) ***/
/************************************/

body.essbee-page .hp-field {
	position: absolute !important;
	left: -10000px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}