/*
 * contact.css — Contact (Get In Touch) page styles
 *
 * Generated by Claude Code Phase 2B — Developer review required
 *
 * Converted from:
 *   frontend-nextjs/src/views/pages/GetInTouchPage/_get-in-touch.scss
 *   frontend-nextjs/src/views/pages/BlogPage/Sections/SharePostDetail/_share-post-fixed.scss
 *   frontend-nextjs/src/components/BlogCta/_blog_cta.scss
 *   frontend-nextjs/src/components/QuickLinks/_quicklinks.scss
 *   frontend-nextjs/src/assets/scss/_base.scss  (.container-sm)
 *
 * SCSS variable values used:
 *   $primary           → #e78125
 *   $secondary         → #19263a
 *   $white             → #ffffff
 *   $color_nile_blue   → #173055
 *   $color_raven       → #7b7c7e
 *   $color_blue_zodiac → #152c58
 *   $color_bone2       → #e1cab8
 *   $color_shark       → #232528
 *   $font-secondary    → "DM Serif Display", -apple-system, BlinkMacSystemFont, sans-serif
 *
 * Dependencies already loaded globally (do NOT duplicate here):
 *   bootstrap.min.css — .row, .col-*, .container, .btn, .btn-primary, .btn-lg,
 *                       .text-center, .d-none, .d-md-block, .mx-auto, etc.
 *   main.css          — base resets, font tokens, global button styles
 */

/* =========================================================================
   0. SHARED UTILITY — .container-sm
   Source: frontend-nextjs/src/assets/scss/_base.scss
   Max-width container used on contact page title + form sections.
   Not yet in main.css — included here; move to main.css if reused globally.
   ========================================================================= */

.container-sm {
	max-width: 858px;
	padding-left: 20px;
	padding-right: 20px;
	margin: 0 auto;
}

/* =========================================================================
   1. PAGE TITLE SECTION (.faq-page-title)
   Source: frontend-nextjs/src/assets/scss/components/_faq-page.scss
   Reused on the contact page — same class as FAQ page hero heading area.
   ========================================================================= */

.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. CONTACT INFO SECTION (.contact-info-wrap)
   Source: frontend-nextjs/src/views/pages/GetInTouchPage/_get-in-touch.scss
   ========================================================================= */

.contact-info-wrap {
	padding-top: 12px;
	padding-bottom: 80px;
	border-bottom: 1px solid rgba(123, 124, 126, 0.2); /* rgba($color_raven, 0.2) */
}

@media (max-width: 767px) {
	.contact-info-wrap {
		padding-bottom: 48px;
	}
}

.contact-info-list {
	max-width: 498px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}

.contact-info-box {
	text-align: center;
}

.contact-info-box .icon {
	font-size: 32px;
	line-height: 1;
	color: #e78125; /* $primary */
	padding-bottom: 16px;
}

@media (max-width: 500px) {
	.contact-info-box .icon {
		font-size: 28px;
	}
}

.contact-info-box .icon svg {
	display: inline-block;
	vertical-align: middle;
	width: 1em;
	height: 1em;
}

.contact-info-box p {
	font-size: 16px;
	line-height: 150%;
	color: rgba(123, 124, 126, 0.78); /* rgba($color_raven, 0.78) */
	margin-bottom: 9px;
	font-weight: 500;
}

@media (max-width: 500px) {
	.contact-info-box p {
		font-size: 12px;
	}
}

.contact-info-box .link a {
	display: inline-block;
	font-size: 18px;
	line-height: 116%;
	font-weight: 500;
	color: #173055; /* $color_nile_blue */
	text-decoration: none;
	transition: color 0.3s ease-in-out;
}

@media (max-width: 500px) {
	.contact-info-box .link a {
		font-size: 14px;
	}
}

.contact-info-box .link a:hover {
	color: #e78125; /* $primary */
}

/* =========================================================================
   3. GET IN TOUCH FORM (.get-in-touch-form)
   Source: frontend-nextjs/src/views/pages/GetInTouchPage/_get-in-touch.scss
   ========================================================================= */

.get-in-touch-form {
	max-width: 606px;
	margin: 0 auto;
	padding-top: 72px;
	/* Extra bottom padding so the blog-cta-box (margin-top: -88px) overlaps cleanly */
	padding-bottom: 80px;
}

@media (max-width: 767px) {
	.get-in-touch-form {
		padding-top: 48px;
		padding-bottom: 80px;
	}
}

/* "Write to Us" heading — React: <h2>Write to Us</h2> inside GetInTouchForm */
.get-in-touch-form h2,
.form-wrap > h2 {
	font-size: 34px;
	line-height: 129%;
	font-weight: 400;
	font-family: "DM Serif Display", -apple-system, BlinkMacSystemFont, sans-serif;
	color: #19263a; /* $secondary */
	padding-bottom: 32px;
	text-align: center;
}

@media (max-width: 767px) {
	.get-in-touch-form h2,
	.form-wrap > h2 {
		font-size: 28px;
	}
}

/* CTA wrapper — centres the Send button at max 234px */
.get-in-touch-form .cta {
	max-width: 234px;
	margin: 0 auto;
}

.get-in-touch-form .cta .btn {
	width: 100%;
	display: block;
	text-align: center;
}

/* ── Global .btn pill shape (React SCSS: @include border-radius(48px) on .btn)
   main.css currently sets .btn-primary { border-radius: 0.25rem } which is too square.
   Override here for the contact page; consider moving to main.css globally. */
.get-in-touch-form .btn,
.get-in-touch-form .gform_wrapper .gform_footer input[type="submit"] {
	border-radius: 48px;
}

/* .btn-lg sizing — React SCSS: padding: 21px 30px; font-size: 18px */
.get-in-touch-form .btn-lg {
	padding: 21px 30px;
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
}

@media (max-width: 767px) {
	.get-in-touch-form .btn-lg {
		padding: 16px 20px;
		font-size: 16px;
	}
}

/* Form fields — Bootstrap 5 .form-control is the base; these extend it */
.get-in-touch-form .form-group {
	margin-bottom: 1.25rem;
}

.get-in-touch-form .form-control {
	border: 1px solid #dee2e6;
	border-radius: 4px;
	padding: 0.5rem 0.75rem;
	font-size: 1rem;
}

.get-in-touch-form .form-control:focus {
	border-color: #e78125;
	box-shadow: 0 0 0 0.2rem rgba(231, 129, 37, 0.2);
	outline: none;
}

.get-in-touch-form .textarea-large {
	min-height: 180px;
	resize: vertical;
}

/* Form footer — centred submit button */
.get-in-touch-form .form-footer {
	padding-top: 1.5rem;
}

/* Inline validation error */
.get-in-touch-form .form-error {
	color: #dc3545;
	font-size: 0.875rem;
	margin-top: 0.25rem;
}

/* Global error banner (native form fallback) */
.gp-form-error-msg {
	margin-top: 0.75rem;
	font-size: 0.875rem;
	text-align: center;
}

/* =========================================================================
   SUCCESS POPUP MODAL (.success-modal.custom-modal)
   Source: frontend-nextjs/src/assets/scss/components/_modal.scss
   Mirrors React SuccessModal component (SuccessPopup/index.js)
   ========================================================================= */

.custom-modal.success-modal .modal-dialog {
	max-width: 453px;
}

.custom-modal.success-modal .success-modal-content {
	text-align: center;
	padding: 26px 0;
}

.custom-modal.success-modal .success-modal-content .img {
	max-width: 148px;
	margin: 0 auto;
	padding-bottom: 14px;
}

.custom-modal.success-modal .success-modal-content .img img {
	width: 100%;
	height: auto;
	display: block;
}

.custom-modal.success-modal .success-modal-content .txt p {
	font-size: 22px;
	line-height: 116%;
	color: #19263a;
	font-weight: 500;
	margin-bottom: 6px;
}

.custom-modal.success-modal .success-modal-content .txt h3 {
	font-size: 28px;
	line-height: 1.2;
	font-weight: 400;
	font-family: "DM Serif Display", -apple-system, BlinkMacSystemFont, sans-serif;
	color: #19263a;
	padding-bottom: 32px;
	margin-bottom: 0;
}

.custom-modal.success-modal .success-modal-content .cta .btn {
	border-radius: 48px;
	padding: 12px 40px;
	font-size: 16px;
	font-weight: 500;
}

/* ── Gravity Forms overrides — match React Bootstrap form.control appearance ── */
.get-in-touch-form .gform_wrapper input[type="text"],
.get-in-touch-form .gform_wrapper input[type="email"],
.get-in-touch-form .gform_wrapper textarea {
	border: 1px solid #dee2e6 !important;
	border-radius: 4px !important;
	padding: 0.5rem 0.75rem !important;
	font-size: 1rem !important;
	width: 100% !important;
}

.get-in-touch-form .gform_wrapper input[type="text"]:focus,
.get-in-touch-form .gform_wrapper input[type="email"]:focus,
.get-in-touch-form .gform_wrapper textarea:focus {
	border-color: #e78125 !important;
	box-shadow: 0 0 0 0.2rem rgba(231, 129, 37, 0.2) !important;
	outline: none !important;
}

.get-in-touch-form .gform_wrapper .gfield_label {
    font-weight: 400 !important;
    margin-bottom: 0.375rem;
    font-size: 12px !important;
    line-height: 14px !important;
}

.get-in-touch-form .gform_wrapper .gfield_required {
    display: none !important;
}

/* GF submit button — centred pill matching React btn btn-lg btn-primary */
.get-in-touch-form .gform_wrapper .gform_footer {
	text-align: center;
	padding-top: 1.5rem;
	justify-content: center;
}

.get-in-touch-form .gform_wrapper .gform_footer input[type="submit"] {
	display: inline-block;
	background-color: #e78125 !important;
	border: 2px solid #e78125 !important;
	color: #ffffff !important;
	padding: 21px 30px !important;
	border-radius: 48px !important;
	font-size: 18px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	min-width: 234px;
	cursor: pointer;
	transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

@media (max-width: 767px) {
	.get-in-touch-form .gform_wrapper .gform_footer input[type="submit"] {
		padding: 16px 20px !important;
		font-size: 16px !important;
		min-width: 180px;
	}
}

.get-in-touch-form .gform_wrapper .gform_footer input[type="submit"]:hover {
	background-color: #c96d16 !important;
	border-color: #c96d16 !important;
}

/* =========================================================================
   4. STICKY SOCIAL SHARE SIDEBAR (.share-post-fixed)
   Source: frontend-nextjs/src/views/pages/BlogPage/Sections/SharePostDetail/_share-post-fixed.scss
   React: fixed left sidebar, slides in from left when scrollY >= 200
   ========================================================================= */

.share-post-fixed {
	position: fixed;
	left: 0;
	top: 150px;
	padding: 6px;
	z-index: 12;
	opacity: 0;
	visibility: hidden;
	transform: translate(-60px, 0);
	transition: all 0.3s ease-in-out;
}

.share-post-fixed.sticky-bar {
	opacity: 1;
	visibility: visible;
	transform: translate(0, 0);
}

@media (max-width: 1024px) {
	.share-post-fixed {
		top: auto;
		bottom: 0;
		width: 100%;
		padding: 0;
		transform: translate(0, 60px);
	}

	.share-post-fixed.sticky-bar {
		transform: translate(0, 0);
	}
}

.share-post-fixed .share {
	background: #173055; /* $color_nile_blue */
	border-radius: 4px;
	width: 69px;
	padding: 24px 6px;
	display: none;
}

@media (max-width: 1024px) {
	.share-post-fixed .share {
		width: 100%;
		border-radius: 0;
		padding: 10px 20px;
	}
}

.share-post-fixed .share ul {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 1024px) {
	.share-post-fixed .share ul {
		display: flex;
		align-items: center;
	}
}

.share-post-fixed .share ul li {
	margin-right: 0;
	margin-bottom: 16px;
	text-align: center;
}

@media (max-width: 1024px) {
	.share-post-fixed .share ul li {
		margin-bottom: 0;
		margin-right: 16px;
	}

	.share-post-fixed .share ul li:last-child {
		margin-right: 0;
	}
}

.share-post-fixed .share ul li:last-child {
	margin-bottom: 0;
}

.share-post-fixed .share ul li.social-share-title {
	font-size: 12px;
	font-weight: 600;
	color: #ffffff;
	opacity: 0.5;
	margin-bottom: 11px;
}

@media (max-width: 1024px) {
	.share-post-fixed .share ul li.social-share-title {
		margin-bottom: 0;
		margin-right: auto;
		opacity: 0.9;
		font-size: 16px;
		font-weight: 400;
	}
}

.share-post-fixed .share ul li .social-link {
	color: #ffffff;
	display: inline-block;
	font-size: 24px;
	text-decoration: none;
	transition: color 0.3s ease-in-out;
}

.share-post-fixed .share ul li .social-link:hover {
	color: #e78125; /* $primary */
}

.share-post-fixed .share ul li .social-link svg {
	display: block;
	width: 1em;
	height: 1em;
}

/* =========================================================================
   5. BLOG CTA BOX (.blog-cta-wrap / .blog-cta-box)
   Source: frontend-nextjs/src/components/BlogCta/_blog_cta.scss
   ========================================================================= */

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

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

@media (max-width: 767px) {
	.blog-cta-box {
		margin-top: -178px;
		box-shadow: 0 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;
	margin-left: auto;
}

@media (max-width: 767px) {
	.blog-cta-box__img img {
		margin: 0 auto;
		width: 100%;
		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;
	}
}

/* =========================================================================
   6. QUICK LINKS GRID (.quick-links-wrap / .quick-link-box)
   Source: frontend-nextjs/src/components/QuickLinks/_quicklinks.scss
   ========================================================================= */

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

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

.quick-links-wrap .quick-links-icon-list ul li {
	padding-bottom: 24px;
}

.quick-link-box {
	height: 100%;
	width: 100%;
	display: block;
	padding: 34px 10px;
	text-align: center;
	border: 1px solid #e1cab8; /* $color_bone2 */
	border-radius: 6px;
	text-decoration: none;
	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); /* rgba($primary, 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,
	.quick-link-box__icon img {
		width: 32px;
		height: 32px;
	}
}

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

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

/* =========================================================================
   7. QUICK LINK + CTA WRAPPER (.quick-link-cta-wrap)
   Shared wrapper div in React: <div className="quick-link-cta-wrap">
   NOTE: do NOT add overflow:hidden here — the blog-cta-box uses margin-top:-88px
   to lift visually into the section above. overflow:hidden would clip that lift.
   ========================================================================= */

.quick-link-cta-wrap {
	/* intentionally no overflow:hidden — allow blog-cta-box negative margin to lift */
	padding-top: 96px;
}
.page-id-197224 .gform_wrapper.gravity-theme .gfield textarea.large{
	height: 195px;
}

/* =========================================================================
   GF VALIDATION ERROR OVERRIDES — match React react-hook-form error display
   React: small red text below each field; no top banner; labels stay normal
   ========================================================================= */

/* Hide top "There was a problem with your submission" banner */
.page-id-197224 .gform_wrapper .gform_submission_error,
.page-id-197224 .gform_wrapper .validation_error,
.page-id-197224 .gform_wrapper .gform_validation_errors {
	display: none !important;
}

/* Remove GF's large red-bordered error box from invalid field wrappers */
.page-id-197224 .gform_wrapper.gravity-theme .gfield.gfield_error {
	background-color: transparent !important;
	border: none !important;
	padding: 0 !important;
	margin-bottom: 1.25rem !important;
}

/* Keep field labels their normal colour (GF turns them red by default) */
.page-id-197224 .gform_wrapper.gravity-theme .gfield_error .gfield_label,
.page-id-197224 .gform_wrapper.gravity-theme .gfield_error label {
	color: inherit !important;
}

/* Style per-field validation message to match React .form-error */
.page-id-197224 .gform_wrapper.gravity-theme .gfield_validation_message {
	background: none !important;
	border: none !important;
	padding: 0 !important;
	margin-top: 0.25rem !important;
	color: #dc3545 !important;
	font-size: 0.875rem !important;
	font-weight: 400 !important;
}

/* Keep red border on invalid inputs (React: .is-invalid border-color: #dc3545) */
.page-id-197224 .gform_wrapper.gravity-theme .gfield_error input,
.page-id-197224 .gform_wrapper.gravity-theme .gfield_error textarea {
	border-color: #dc3545 !important;
}