/*
 * faq.css
 * Converted from:
 *   frontend-nextjs/src/views/pages/FaqPage/_faq-page.scss
 *   frontend-nextjs/src/views/pages/FaqPage/Sections/FaqBlock/  (FaqList + FaqBlock)
 *   frontend-nextjs/src/views/pages/FaqPage/Sections/SolutionCta/_solutioncta.scss
 *   frontend-nextjs/src/assets/scss/components/_faq.scss
 *   frontend-nextjs/src/views/pages/home/_quicklinks.scss
 *   frontend-nextjs/src/components/BlogCta/_blog_cta.scss  (shared .blog-cta-* styles)
 * Generated by Claude Code Phase 2B — Developer review required
 *
 * Variable substitutions (from _variables.scss):
 *   $primary         → #e78125
 *   $secondary       → #19263a
 *   $white           → #ffffff
 *   $color_shark     → #232528
 *   $color_fantasy   → #f9f5f2
 *   $color_raven     → #7b7c7e
 *   $color_bone2     → #e1cab8
 *   $font-secondary  → "DM Serif Display", Georgia, serif
 *
 * Note: Bootstrap 5 base accordion styles come from
 *   assets/vendor/bootstrap/bootstrap.min.css (loaded globally).
 *   This file only contains project-specific overrides.
 */

/* ==========================================================================
   1. FAQ page — hero title block
   Source: _faq-page.scss → .faq-page-title
   ========================================================================== */

.faq-page-title {
	padding: 60px 0;
	text-align: center;
		
}

@media (max-width: 767px) {
	.faq-page-title {
		padding: 30px 0 48px;
	}
}

.faq-page-title h1 {
	padding-bottom: 20px;
	    font-size: 42px;
    line-height: 115%;
    font-weight: 400;
	margin-bottom: 0;
}

.faq-page-title p {
	font-size: 18px;
	line-height: 182%;
	letter-spacing: 0.02em;
	color: #7b7c7e;
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.faq-page-title p {
		font-size: 14px;
	}
	.faq-page-title h1{
		font-size: 28px;
	}
}

/* ==========================================================================
   2. FAQ list wrapper
   Source: _faq-page.scss → .faq-list-wrap
   ========================================================================== */

.faq-list-wrap {
	padding-bottom: 33px;
}

@media (max-width: 767px) {
	.faq-list-wrap {
		padding-bottom: 10px;
	}
}

.faq-list-wrap .faq-block {
	padding-bottom: 48px;
}

@media (max-width: 767px) {
	.faq-list-wrap .faq-block {
		padding-bottom: 10px;
	}
}

.faq-list-wrap .faq-block-title {
	font-size: 28px;
	line-height: 116%;
	font-weight: 500;
	color: #232528;
	padding-bottom: 16px;
	margin-bottom: 32px;
	border-bottom: 1px solid rgba(123, 124, 126, 0.2);
}

@media (max-width: 767px) {
	.faq-list-wrap .faq-block-title {
		font-size: 20px;
		font-weight: 600;
		margin-bottom: 20px;
	}
}

/* ==========================================================================
   3. FAQ accordion — overrides on top of Bootstrap 5 accordion
   Source: frontend-nextjs/src/assets/scss/components/_faq.scss
   ========================================================================== */

.faq-block .accordion-button {
	box-shadow: none !important;
	font-size: 18px;
	line-height: 140%;
	color: #19263a;
	padding-top: 0;
	padding-left: 0;
	padding-right: 0;
	padding-bottom: 24px;
	border-bottom: 1px solid #e5e5e5;
	background: transparent;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	font-family: "Inter";
}

@media (max-width: 767px) {
	.faq-block .accordion-button {
		font-size: 14px;
		font-weight: 500;
	}
}

.faq-block .accordion-button:focus {
	border-color: #e5e5e5;
}

/* Plus icon (collapsed state) */
.faq-block .accordion-button::after {
	background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.87091 8.5V14.5H8.87091V8.5H15.001V6.5H8.87091V0.5H6.87091V6.5H0.742188V8.5H6.87091Z' fill='%23E78125'/%3E%3C/svg%3E");
	background-position: center center;
	background-size: 15px 15px;
	/* Prevent Bootstrap's default rotation transform */
	transform: none !important;
	-webkit-transform: none !important;
}

/* Minus icon (expanded state) */
.faq-block .accordion-button:not(.collapsed) {
	box-shadow: none;
	background: transparent;
	color: #19263a;
	padding-bottom: 12px;
	border-bottom-color: transparent;
}

.faq-block .accordion-button:not(.collapsed)::after {
	background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.001 8.5H0.742188V6.5H15.001V8.5Z' fill='%23E78125'/%3E%3C/svg%3E");
	background-position: center center;
	background-size: 15px 15px;
}

.faq-block .accordion-item {
	border: 0;
	margin-bottom: 15px;
}

/* .faq-block .accordion-item:last-child .accordion-button {
	border-bottom-color: transparent;
} */

.faq-block .accordion-body {
	background: #f9f5f2;
	padding: 24px 24px 10px;
	font-size: 16px;
	line-height: 172%;
	color: #232528;
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
}

@media (max-width: 767px) {
	.faq-block .accordion-body {
		padding: 24px 15px 10px;
		font-size: 14px;
	}
}

.faq-block .accordion-body p {
	margin-bottom: 14px;
}

.faq-block .accordion-body p a {
	color: #e78125;
	font-weight: 600;
}

/* ==========================================================================
   4. Solution CTA section
   Source: _solutioncta.scss → .solution-cta
   ========================================================================== */

.solution-cta {
	background-color: #19263a;
	/* TODO: Copy logo-icon-bg.png from frontend-nextjs/src/assets/images/logo-icon-bg.png
	         to wordpress/wp-content/themes/gharpedia-theme/assets/images/logo-icon-bg.png
	         then uncomment the background-image line below. */
	/* background-image: url(../images/logo-icon-bg.png); */
	background-position: bottom -10px right;
	background-repeat: no-repeat;
	padding: 69px 0;
}

@media (max-width: 767px) {
	.solution-cta {
		padding: 48px 0;
		background-size: 100px;
		background-position: bottom right;
	}
}

.solution-cta .container-sm {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

@media (max-width: 767px) {
	.solution-cta .container-sm {
		flex-wrap: wrap;
	}
}

.solution-cta .left {
	font-size: 14px;
	line-height: 147%;
	color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 767px) {
	.solution-cta .left {
		width: 100%;
		text-align: center;
	}
}

.solution-cta .left h2 {
	font-size: 36px;
	line-height: 1.3;
	font-weight: 400;
	font-family: "DM Serif Display", Georgia, serif;
	color: #ffffff;
	padding-bottom: 2px;
}

@media (max-width: 767px) {
	.solution-cta .left h2 {
		font-size: 28px;
	}
}

.solution-cta .left p {
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.solution-cta .right {
		text-align: center;
		width: 100%;
		max-width: 300px;
		margin: 0 auto;
		padding-top: 30px;
	}

	.solution-cta .right .btn {
		width: 100%;
		display: block;
	}
}

/* ==========================================================================
   5. Quick-link CTA wrapper + blog-cta overlap fix (FAQ page only)
   ========================================================================== */

/* The global .blog-cta-box has margin-top: -88px which is designed to pull
   the box up over a tall banner image on the homepage and blog pages.
   On the FAQ page the section directly above is the dark .solution-cta panel,
   so the negative margin causes the Gharpedia Exclusive box to visually cover
   the "Can't Find Solution?" section. Reset it to zero here so both sections
   stack cleanly without overlap. */
.faq-page-wrap .blog-cta-box {
	margin-top: 0;
}

/* Add breathing room between solution-cta and the blog-cta row. */
.faq-page-wrap .blog-cta-wrap {
	padding-top: 60px;
}

@media (max-width: 767px) {
	.faq-page-wrap .blog-cta-wrap {
		padding-top: 40px;
	}
}

/* ==========================================================================
   6. Quick links grid
   Source: frontend-nextjs/src/views/pages/home/_quicklinks.scss
   Note: On the FAQ page, QuickLinks always renders the 4-item variant
         (no slug === "material-buying-guide" conditional in PHP context).
   Grid fix: original React used className="row gap-24" which conflicted with
   Bootstrap's 25%-column system (gap is additive → total > 100% → wrap).
   Template now uses Bootstrap-native "row g-4" (1.5rem = 24px gap via
   --bs-gutter-x / --bs-gutter-y) so li padding-bottom is not needed.
   ========================================================================== */

.quick-links-wrap {
	padding-bottom: 100px;
}

@media (max-width: 767px) {
	.quick-links-wrap {
		padding-bottom: 32px;
	}
}

/* li padding-bottom removed: Bootstrap g-4 (--bs-gutter-y: 1.5rem) handles
   vertical spacing between wrapped rows at mobile (col-sm-6 / col-6). */

.quick-link-box {
	height: 100%;
	width: 100%;
	display: block;
	padding: 34px 10px;
	text-align: center;
	border: 1px solid #e1cab8;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
}

@media (max-width: 767px) {
	.quick-link-box {
		padding: 29px 10px;
	}
}

.quick-link-box:hover {
	background: rgba(231, 129, 37, 0.1);
}

.quick-link-box__icon {
	padding-bottom: 20px;
}

@media (max-width: 767px) {
	.quick-link-box__icon {
		padding-bottom: 12px;
	}

	.quick-link-box__icon svg {
		width: 32px;
		height: 32px;
	}

	.quick-link-box__icon img {
		width: 32px;
		height: 32px;
		margin: 0 auto;
	}
}

.quick-link-box__txt {
	font-size: 18px;
	line-height: 22px;
	font-weight: 500;
	color: #232528;
}

@media (max-width: 767px) {
	.quick-link-box__txt {
		font-size: 12px;
		line-height: 14px;
	}
}

/* ==========================================================================
   7. Blog CTA box — shared styles reused on FAQ page
   Source: frontend-nextjs/src/components/BlogCta/_blog_cta.scss
   Note: These classes are also in blog.css (for blog/category pages).
         Included here so faq.css is self-contained without requiring blog.css.
   ========================================================================== */

.blog-cta-wrap {
	position: relative;
	padding-bottom: 46px;
}

.blog-cta-box {
	background: #152c58;
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	margin-top: -88px;
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
}

@media (max-width: 767px) {
	.blog-cta-box {
		margin-top: -178px;
		box-shadow: 0px 4px 20px rgba(22, 60, 118, 0.1);
		-webkit-box-shadow: 0px 4px 20px rgba(22, 60, 118, 0.1);
		-moz-box-shadow: 0px 4px 20px rgba(22, 60, 118, 0.1);
	}
}

.blog-cta-box__left {
	width: 50%;
	padding-left: 60px;
	display: flex;
	align-items: center;
}

@media (max-width: 767px) {
	.blog-cta-box__left {
		width: 100%;
		padding: 45px 30px 20px;
	}
}

.blog-cta-box__right {
	width: 50%;
}

@media (max-width: 767px) {
	.blog-cta-box__right {
		width: 100%;
	}
}

.blog-cta-box__img {
	width: 100%;
	height: 100%;
	text-align: right;
}

@media (max-width: 767px) {
	.blog-cta-box__img {
		text-align: center;
	}
}

.blog-cta-box__img img {
	border-radius: 0 8px 8px 0;
	-webkit-border-radius: 0 8px 8px 0;
	-moz-border-radius: 0 8px 8px 0;
	margin-left: auto;
}

@media (max-width: 767px) {
	.blog-cta-box__img img {
		margin: 0 auto;
		width: 100%;
		border-radius: 0 0 8px 8px;
		-webkit-border-radius: 0 0 8px 8px;
		-moz-border-radius: 0 0 8px 8px;
	}
}

.blog-cta-box__content p {
	font-size: 14px;
	line-height: 147%;
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.blog-cta-box__content p {
		font-size: 12px;
	}
}

.blog-cta-box__content .cta {
	padding-top: 35px;
}

@media (max-width: 767px) {
	.blog-cta-box__content .cta {
		padding-top: 24px;
	}
}

.blog-cta-box__title {
	/* heading inside blog CTA uses .h1.text-white from Bootstrap utilities */
}

/* .gap-24 removed — quick-links.php now uses Bootstrap "row g-4" instead.
   "row g-4" sets --bs-gutter-x and --bs-gutter-y = 1.5rem (24 px) which
   works within Bootstrap's column system and avoids overflow at desktop. */