/*
 * services.css
 * Styles for the Services page template (page-services.php).
 *
 * Compiled from:
 *   frontend-nextjs/src/assets/scss/components/_detail_content.scss
 *   frontend-nextjs/src/components/BlogCta/_blog_cta.scss  (full version — blog.css has simplified subset)
 *   frontend-nextjs/src/components/sections/SubscribeCta/_subscribe_cta.scss
 *
 * Color tokens (from _variables.scss):
 *   $primary          = #e78125
 *   $secondary        = #19263a
 *   $white            = #ffffff
 *   $color_shark      = #232528
 *   $color_big_stone  = #19263a
 *   $color_blue_zodiac= #152c58
 *   $color_botticelli = #d0e9ee
 *   $color_nile_blue  = #173055
 *   $color_raven      = #7b7c7e
 *   $color_silver2    = #cccccc
 *   $color_gray       = #838383
 *   $color_fantasy    = #f9f5f2
 *   $font-secondary   = "DM Serif Display"
 *
 * Generated by Claude Code Phase 2B — Developer review required
 * Load order: enqueued after blog.css (depends on bootstrap + gharpedia-main)
 */

/* ============================================================
   PAGE TITLE
   Source: ServicesPage / ClientPage — <h1 className="h1 page-title text-center pb-5 pt-5">
   ============================================================ */

.page-title {
	font-family: "DM Serif Display", Georgia, serif;
	color: #19263a;
	    font-size: 42px;
    line-height: 115%;
    font-weight: 400;
	margin-bottom: 0;
}

/* ============================================================
   DETAIL PAGE CONTENT WRAPPER
   Source: _detail_content.scss → .detail-page-content
   Full fidelity conversion (blog.css has a simplified subset).
   ============================================================ */

.detail-page-content {
	padding-bottom: 25px;
}

@media (max-width: 767px) {
	.detail-page-content {
		padding-bottom: 0;
	}
	.page-title {
    font-size: 28px;
}
}

.detail-page-content .detail-subscribe {
	padding: 0;
}

@media (max-width: 767px) {
	.detail-page-content .detail-subscribe {
		padding: 40px 0 0;
	}
}

.detail-page-content .detail-subscribe .subscribe-banner {
	padding: 0;
}

@media (max-width: 767px) {
	.detail-page-content .detail-subscribe .subscribe-banner .subscribe-banner-box {
		border-radius: 0;
	}
}

.detail-page-content .detail-subscribe .blog-cta-wrap {
	padding-bottom: 0;
}

/* ============================================================
   CONTENT BLOCK — rich typography
   Source: _detail_content.scss → .content-block
   Overrides the simplified version in blog.css with full SCSS fidelity.
   blog.css sets: max-width:860px, margin:40px auto 0, font-size:16px — all overridden here.
   ============================================================ */

.content-block {
	font-size: 18px;
	line-height: 182%;
	padding-bottom: 80px;
	/* Override blog.css simplified block-level constraints — original SCSS has no max-width here */
	max-width: none;
	margin-top: 0;
}

@media (max-width: 767px) {
	.content-block {
		font-size: 14px;
		padding-bottom: 24px;
	}
}

.content-block:last-child {
	padding-bottom: 0;
}

.content-block h2,
.content-block .h1-new {
	font-size: 42px;
	color: #19263a;
	font-family: "DM Serif Display", Georgia, serif;
	/* Override blog.css font-weight:700 — DM Serif Display has no bold variant */
	font-weight: normal;
	padding-bottom: 17px;
	max-width: 818px;
	margin: 0 auto;
}

@media (max-width: 767px) {
	.content-block h2,
	.content-block .h1-new {
		font-size: 22px;
	}
}

.content-block h2 a,
.content-block .h1-new a {
	color: #e78125;
	font-weight: 600;
}

.content-block h2 a:hover,
.content-block .h1-new a:hover {
	text-decoration: underline;
}

.content-block h2.title-no {
	max-width: 660px;
	font-size: 38px;
	display: flex;
	justify-content: center;
	padding-bottom: 38px;
	color: #232528;
}

@media (max-width: 767px) {
	.content-block h2.title-no {
		font-size: 22px;
		padding-bottom: 24px;
	}
}

.content-block h2 span,
.content-block .h1-new span {
	color: #7b7c7e;
	text-align: center;
	flex-shrink: 0;
	margin-right: 10px;
}

.content-block h3 {
	font-size: 38px;
	line-height: 129%;
	color: #19263a;
	font-family: "DM Serif Display", Georgia, serif;
	/* Override blog.css font-weight:700 */
	font-weight: normal;
	padding-bottom: 17px;
	max-width: 818px;
	margin: 0 auto;
}

.content-block h3 a {
	color: #e78125;
	font-weight: 600;
}

.content-block h3 a:hover {
	text-decoration: underline;
}

.content-block h3 span {
	display: inline-block;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 16px;
	font-weight: 500;
	color: #7b7c7e;
	margin-left: 10px;
}

.content-block h3 span span {
	margin-left: 0;
	color: #19263a;
}

.content-block h3 span a {
	color: #19263a;
}

.content-block h3 span a:hover {
	color: #e78125;
}

.content-block h4 {
	font-size: 22px;
	line-height: 116%;
	color: #19263a;
	/* Override blog.css font-weight:700 — SCSS uses 500 for h4 */
	font-weight: 500;
	padding-bottom: 18px;
	max-width: 818px;
	margin: 0 auto;
	    font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}

@media (max-width: 767px) {
	.content-block h4 {
		font-size: 20px;
	}
}

.content-block h4 a {
	color: #e78125;
	font-weight: 600;
}

.content-block h4 a:hover {
	text-decoration: underline;
}

.content-block h5 {
	font-size: 20px;
	line-height: 116%;
	color: #19263a;
	font-weight: 500;
	padding-bottom: 18px;
	max-width: 818px;
	margin: 0 auto;
}

.content-block h5 a {
	color: #e78125;
	font-weight: 600;
}

.content-block h5 a:hover {
	text-decoration: underline;
}

.content-block h6 {
	font-size: 18px;
	line-height: 116%;
	color: #19263a;
	font-weight: 500;
	padding-bottom: 18px;
	max-width: 818px;
	margin: 0 auto;
}

.content-block h6 a {
	color: #e78125;
	font-weight: 600;
}

.content-block h6 a:hover {
	text-decoration: underline;
}

.content-block pre {
	max-width: 818px;
	margin: 0 auto 20px;
}

.content-block p {
	max-width: 818px;
	margin: 0 auto 40px;
	letter-spacing: 0.02em;
	    word-break: break-word;
}

@media (max-width: 767px) {
	.content-block p {
		margin-bottom: 24px;
	}
}

.content-block p > img {
	display: block;
	margin: 0 auto;
}

.content-block p a {
	color: #e78125;
	font-weight: 600;
}

.content-block p a:hover {
	text-decoration: underline;
}

.content-block p iframe {
	width: 100%;
	height: 80vh;
	max-height: 500px;
	border-radius: 5px;
}

.content-block blockquote {
	max-width: 493px;
	margin: 0 auto;
	font-family: "DM Serif Display", Georgia, serif;
	font-size: 24px;
	line-height: 128%;
	color: #173055;
	padding: 16px 0;
	margin-bottom: 40px;
}

@media (max-width: 767px) {
	.content-block blockquote {
		font-size: 18px;
		margin-bottom: 24px;
	}
}

.content-block blockquote::before {
	content: "";
	background-image: url("data:image/svg+xml,%3Csvg width='19' height='14' viewBox='0 0 19 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.24523 14C2.96821 14 1.93279 13.5556 1.13896 12.6667C0.379655 11.7436 0 10.547 0 9.07692C0 7.16239 0.569482 5.38461 1.70845 3.74359C2.84741 2.06838 4.26249 0.820513 5.95368 0L6.2643 0.615383C5.53951 1.16239 4.901 1.86325 4.34877 2.71795C3.79655 3.57265 3.39964 4.63248 3.15804 5.89743L4.24523 6.15385C5.45322 6.42735 6.3851 6.94017 7.04087 7.69231C7.73115 8.41026 8.07629 9.28205 8.07629 10.3077C8.07629 11.4017 7.69664 12.2906 6.93733 12.9744C6.21253 13.6581 5.31517 14 4.24523 14ZM15.1689 14C13.8919 14 12.8565 13.5556 12.0627 12.6667C11.3034 11.7436 10.9237 10.547 10.9237 9.07692C10.9237 7.16239 11.4932 5.38461 12.6322 3.74359C13.7711 2.06838 15.1862 0.820513 16.8774 0L17.188 0.615383C16.4632 1.16239 15.8247 1.86325 15.2725 2.71795C14.7203 3.57265 14.3233 4.63248 14.0817 5.89743L15.1689 6.15385C16.3769 6.42735 17.3088 6.94017 17.9646 7.69231C18.6549 8.41026 19 9.28205 19 10.3077C19 11.4017 18.6203 12.2906 17.861 12.9744C17.1362 13.6581 16.2389 14 15.1689 14Z' fill='%23C7CCD8'/%3E%3C/svg%3E%0A");
	width: 19px;
	height: 14px;
	display: inline-block;
	margin-right: 10px;
	position: relative;
	top: -9px;
}

@media (max-width: 767px) {
	.content-block blockquote::before {
		width: 17px;
		line-height: 12px;
		background-size: contain;
		margin-right: 5px;
		top: -4px;
	}
}

.content-block blockquote::after {
	content: "";
	background-image: url("data:image/svg+xml,%3Csvg width='19' height='14' viewBox='0 0 19 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.7548 14C16.0318 14 17.0672 13.5556 17.861 12.6667C18.6203 11.7436 19 10.547 19 9.07692C19 7.16239 18.4305 5.38461 17.2916 3.74359C16.1526 2.06838 14.7375 0.820513 13.0463 0L12.7357 0.615383C13.4605 1.16239 14.099 1.86325 14.6512 2.71795C15.2035 3.57265 15.6004 4.63248 15.842 5.89743L14.7548 6.15385C13.5468 6.42735 12.6149 6.94017 11.9591 7.69231C11.2688 8.41026 10.9237 9.28205 10.9237 10.3077C10.9237 11.4017 11.3034 12.2906 12.0627 12.9744C12.7875 13.6581 13.6848 14 14.7548 14ZM3.83106 14C5.10808 14 6.14351 13.5556 6.93733 12.6667C7.69664 11.7436 8.07629 10.547 8.07629 9.07692C8.07629 7.16239 7.50681 5.38461 6.36785 3.74359C5.22888 2.06838 3.81381 0.820513 2.12262 0L1.81199 0.615383C2.53679 1.16239 3.17529 1.86325 3.72752 2.71795C4.27975 3.57265 4.67666 4.63248 4.91826 5.89743L3.83106 6.15385C2.62307 6.42735 1.69119 6.94017 1.03542 7.69231C0.34514 8.41026 0 9.28205 0 10.3077C0 11.4017 0.379656 12.2906 1.13897 12.9744C1.86376 13.6581 2.76113 14 3.83106 14Z' fill='%23C7CCD8'/%3E%3C/svg%3E%0A");
	width: 19px;
	height: 14px;
	display: inline-block;
	margin-left: 10px;
	position: relative;
	top: -7px;
}

@media (max-width: 767px) {
	.content-block blockquote::after {
		width: 17px;
		line-height: 12px;
		background-size: contain;
		margin-left: 5px;
		top: 0;
	}
}

.content-block figure {
	padding-bottom: 38px;
	margin: 0;
}

@media (max-width: 767px) {
	.content-block figure {
		padding-bottom: 24px;
	}
}

.content-block figure img {
	display: block;
	margin: 0 auto;
	border-radius: 10px;
}

.content-block figure figcaption {
	text-align: center;
	font-size: 12px;
	line-height: 150%;
	color: #838383;
	padding-top: 8px;
}

.content-block figure.columns-2 {
	display: flex;
	flex-wrap: wrap;
}

.content-block figure.columns-2 .wp-block-image {
	width: calc(50% - 24px);
	flex-grow: 1;
	margin: 12px;
	padding-bottom: 0;
}

.content-block figure.columns-2 .wp-block-image img {
	width: 100%;
}

@media (max-width: 767px) {
	.content-block figure.columns-2 .wp-block-image {
		width: 100%;
		margin: 0 0 12px;
	}
}

.content-block figure.columns-3 {
	display: flex;
	flex-wrap: wrap;
}

.content-block figure.columns-3 .wp-block-image {
	width: calc(33.33% - 24px);
	flex-grow: 1;
	margin: 12px;
	padding-bottom: 0;
}

.content-block figure.columns-3 .wp-block-image img {
	width: 100%;
}

@media (max-width: 767px) {
	.content-block figure.columns-3 .wp-block-image {
		width: 100%;
		margin: 0 0 12px;
	}
}

.content-block figure.wp-block-table {
	overflow: auto;
	max-width: 818px;
	margin: 0 auto;
	padding-bottom: 19px;
	margin-bottom: 19px;
}

.content-block figure.wp-block-table table {
	width: 100%;
}

@media (max-width: 767px) {
	.content-block figure.wp-block-table table {
		width: 700px;
	}
}

.content-block figure.wp-block-table td,
.content-block figure.wp-block-table th {
	padding: 0.5rem;
	border-bottom: 1px solid #d9d9d9;
	font-size: 16px;
}

.content-block figure.wp-block-table td a,
.content-block figure.wp-block-table th a {
	color: #e78125;
	font-weight: 600;
}

.content-block figure.wp-block-table td a:hover,
.content-block figure.wp-block-table th a:hover {
	text-decoration: underline;
}

.content-block figure.wp-block-table th {
	font-weight: 600;
	color: #232528;
	background: #f1f4f6;
	border: 0;
	white-space: nowrap;
}

.content-block figure.wp-block-embed .wp-block-embed__wrapper {
	position: relative;
	overflow: hidden;
}

.content-block figure.wp-block-embed .wp-block-embed__wrapper::before {
	content: "";
	display: block;
	padding-top: 56.25%;
}

.content-block figure.wp-block-embed .wp-block-embed__wrapper iframe {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 10px;
}

.content-block .aligncenter,
.content-block .has-text-align-center {
	text-align: center;
}

/* Override blog.css: text-decoration:underline on all links. Original SCSS only underlines on hover per element. */
.content-block a {
	text-decoration: none;
}

.content-block ol,
.content-block ul {
	max-width: 818px;
	margin: 0 auto;
	/* Override blog.css: padding-left:24px and margin-bottom:1.25em */
	list-style: none;
	padding: 0;
	margin-bottom: 0;
}

.content-block ol a,
.content-block ul a {
	color: #e78125;
	font-weight: 600;
}

.content-block ol a:hover,
.content-block ul a:hover {
	text-decoration: underline;
}

.content-block ol li,
.content-block ul li {
	padding-left: 38px;
	position: relative;
	line-height: 160%;
	padding-bottom: 9px;
	/* Override blog.css: margin-bottom:0.5em — original SCSS uses padding-bottom only */
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.content-block ol li,
	.content-block ul li {
		padding-left: 28px;
	}
}

.content-block ul li {
	padding-left: 25px;
}

.content-block ul li::before {
	content: "";
	width: 6px;
	height: 6px;
	background: #7b7c7e;
	border-radius: 8px;
	position: absolute;
	left: 0;
	top: 11px;
}

.content-block ol {
	counter-reset: gp-list-counter;
}

.content-block ol li {
	counter-increment: gp-list-counter;
}

.content-block ol li::before {
	content: counter(gp-list-counter) ".";
	position: absolute;
	left: 0;
	top: 0;
	color: #7b7c7e;
	font-weight: 500;
}

.content-block .wp-block-button__link {
	display: inline-block;
	font-size: 14px;
	line-height: 16px;
	font-weight: 500;
	padding: 13px 32px;
	background: #19263a;
	color: #ffffff;
	border-radius: 48px;
	transition: all 0.3s ease-in-out;
}

/* Gutenberg columns in content */
.content-block .wp-block-columns {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 -15px;
	gap: 0;
}

.content-block .wp-block-column {
	width: 33.33%;
	max-width: 320px;
	padding: 0 15px;
	margin-bottom: 30px;
}

@media (max-width: 767px) {
	.content-block .wp-block-column {
		width: 50%;
	}
}

@media (max-width: 500px) {
	.content-block .wp-block-column {
		width: 100%;
	}
}

.content-block .wp-block-column .wp-block-image {
	padding-bottom: 20px;
}

.content-block .wp-block-column .wp-block-image img {
	width: 100%;
}

/* ============================================================
   SERVICES PAGE SPECIFIC OVERRIDES
   Source: _detail_content.scss → .services-page-content
   Overrides the generic .wp-block-column sizing for the service cards layout.

   Gutenberg conflicts fixed here:
   1. wp-block-library sets flex-basis:0; flex-grow:1 at ≥782px — overridden with flex:0 0 40%
   2. wp-block-library sets flex-basis:100%!important globally (mobile stacks at 782px) —
      overridden with flex-basis:40%!important for 501px-781px range
   3. wp-block-library sets flex-wrap:nowrap!important at ≥782px — harmless (2 cols per row)
   ============================================================ */

.services-page-content .content-block .wp-block-columns {
	justify-content: center;
	/* Gutenberg sets flex-wrap:nowrap!important at ≥782px — fine for 2-column rows */
}

@media (max-width: 500px) {
	.services-page-content .content-block .wp-block-columns {
		margin-left: 0;
		margin-right: 0;
	}
}

.services-page-content .content-block .wp-block-column {
	/* flex:0 0 40% overrides Gutenberg's flex-basis:0; flex-grow:1 at ≥782px */
    width: 33.33%;
    max-width: 320px;
    padding: 0 15px;
    margin-bottom: 30px;
}

/* Gutenberg sets flex-basis:100%!important globally (stacks at 782px).
   We want cards side-by-side down to 501px, so override with !important for that range. */
@media (min-width: 501px) and (max-width: 781px) {
	.services-page-content .content-block .wp-block-column {
		flex-basis: 40% !important;
		flex-grow: 0;
	}
}

/* Below 500px: allow full-width stacking */
@media (max-width: 500px) {
	.services-page-content .content-block .wp-block-column {
		flex: 0 0 100%;
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
}

/* Empty column in last row (e.g. Arbitration row has one empty wp-block-column) */
.services-page-content .content-block .wp-block-column:empty {
	display: none;
}

/* Headings and paragraphs inside service cards: remove max-width centering constraint
   so text spans the full card width, not the blog-post 818px column width */
.services-page-content .content-block .wp-block-column h4,
.services-page-content .content-block .wp-block-column p {
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* ============================================================
   BLOG CTA BOX — BlogCta3 (relative-cta variant)
   Source: _blog_cta.scss → .blog-cta-wrap, .blog-cta-box, and modifiers
   Note: blog.css contains a simplified subset; this file adds full fidelity
   for the services page (no margin-top:-88px since .relative-cta overrides it).
   ============================================================ */

.detail-page-cta .blog-cta-wrap {
	padding-bottom: 0;
}

/* .relative-cta already handled in blog.css: margin-top: 0 */

/* ============================================================
   SUBSCRIBE BANNER — SubscribeCtaSmall
   Source: _subscribe_cta.scss → .subscribe-banner, .subscribe-banner--small,
           .subscribe-form, .subscribe-submit
   Not present in any other CSS file.
   ============================================================ */

.subscribe-banner .subscribe-banner-box {
	background: #d0e9ee;
	padding: 62px 0;
}

@media (max-width: 991px) {
	.subscribe-banner .subscribe-banner-box {
		padding: 40px 0;
	}
}

.subscribe-banner .subscribe-banner-box h3 {
	font-size: 36px;
	color: #19263a;
	font-family: "DM Serif Display", Georgia, serif;
	padding-bottom: 2px;
}

@media (max-width: 767px) {
	.subscribe-banner .subscribe-banner-box h3 {
		font-size: 18px;
		line-height: 24px;
	}
}

.subscribe-banner .subscribe-banner-box p {
	font-size: 14px;
	line-height: 147%;
	color: #19263a;
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.subscribe-banner .subscribe-banner-box p {
		font-size: 10px;
		line-height: 14px;
	}
}

/* Small variant */
.subscribe-banner--small {
	padding: 6px 0 26px;
}

@media (max-width: 991px) {
	.subscribe-banner--small {
		padding: 0;
	}
}

.subscribe-banner--small .subscribe-banner-box {
	padding: 21px 24px 21px 42px;
	border-radius: 4px;
	max-width: 990px;
	margin: 0 auto;
}

@media (max-width: 991px) {
	.subscribe-banner--small .subscribe-banner-box {
		padding: 40px 20px;
	}
}

.subscribe-banner--small .subscribe-banner-box h3 {
	font-size: 22px;
}

@media (max-width: 767px) {
	.subscribe-banner--small .subscribe-banner-box h3 {
		font-size: 18px;
	}
}

@media (max-width: 767px) {
	.subscribe-banner--small .subscribe-form {
		margin-top: 16px;
	}
}

@media (min-width: 991px) {
	.subscribe-banner--small .subscribe-form .form-control {
		height: 44px;
	}
}

.subscribe-banner--small .subscribe-form .subscribe-submit {
	right: 20px;
}

.subscribe-banner--small .subscribe-form .subscribe-submit svg {
	margin-left: 6px;
	width: 11px;
	height: 10px;
}

/* Subscribe form */
.subscribe-form {
	position: relative;
}

@media (max-width: 991px) {
	.subscribe-form {
		margin-top: 24px;
	}
}

.subscribe-form .form-control {
	height: 72px;
	border: 0;
	box-shadow: none;
	background: #ffffff;
	color: #232528;
	font-size: 16px;
	line-height: 19px;
	padding: 0 100px 0 21px;
	border-radius: 4px;
}

.subscribe-form .form-control::placeholder {
	color: rgba(35, 37, 40, 0.5);
}

.subscribe-form .form-control:focus {
	box-shadow: none;
	outline: none;
}

@media (max-width: 767px) {
	.subscribe-form .form-control {
		height: 56px;
		padding-left: 15px;
		font-size: 14px;
		line-height: 14px;
		padding-right: 90px;
	}
}

.subscribe-submit {
	position: absolute;
	right: 30px;
	top: 50%;
	margin-top: -20px;
	height: 40px;
	border: 0;
	display: flex;
	align-items: center;
	background: transparent;
	font-size: 16px;
	line-height: 20px;
	font-weight: 600;
	color: #e78125;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.subscribe-submit svg {
	margin-left: 17px;
}

.subscribe-submit:hover {
	color: #19263a;
}

@media (max-width: 767px) {
	.subscribe-submit {
		font-size: 14px;
		line-height: 17px;
	}

	.subscribe-submit svg {
		margin-left: 7px;
		width: 13px;
		height: 12px;
	}
}

/* Error message below small subscribe form — matches home page .gp-subscribe-error */
.subscribe-banner--small .gp-subscribe-error {
	font-size: 14px;
	line-height: 1.4;
	margin-top: 8px;
}