/* =========================================================
   WordPress-specific additions.

   assets/css/style.css is the original static build, kept byte-identical so the
   design stays exactly as designed. Everything WordPress needs on top of it —
   core markup classes, post content, and Elementor form styling — lives here.
   ========================================================= */

/* ---------------------------------------------------------
   Contact page: the Elementor form sits in the card the
   original hand-written .form used.
   --------------------------------------------------------- */
.contact-form-area {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: clamp(28px, 4vw, 48px);
}

/* The email-or-phone rule, stated before the fields it governs. */
.contact-hint {
	font-size: 13.5px;
	color: var(--muted, #6b7280);
	margin: 0 0 16px;
	padding-inline-start: 11px;
	border-inline-start: 2px solid var(--line);
}

.contact-hint.is-missing {
	border-inline-start-color: var(--brass);
	color: var(--ink);
}

/* Make Elementor's form widget inherit the site's field design. */
.contact-form-area .elementor-field-group > label,
.contact-form-area .elementor-field-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
	margin-bottom: 8px;
	font-family: var(--sans);
}

.contact-form-area .elementor-field-textual {
	font-family: var(--sans);
	font-size: 15.5px;
	border: 1px solid var(--line);
	border-radius: 3px;
	padding: 13px 15px;
	background: var(--paper);
	color: var(--text);
	direction: rtl;
	outline: none;
	transition: border-color .3s var(--ease), background .3s var(--ease);
}

.contact-form-area .elementor-field-textual:focus {
	border-color: var(--brass);
	background: #fff;
	box-shadow: none;
}

.contact-form-area textarea.elementor-field-textual {
	resize: vertical;
	min-height: 120px;
}

.contact-form-area .elementor-button[type="submit"] {
	width: 100%;
	justify-content: center;
}

.contact-form-area .elementor-message {
	margin-top: 16px;
	padding: 14px;
	border-radius: 3px;
	font-weight: 600;
	font-size: 15px;
	text-align: center;
}

.contact-form-area .elementor-message-success {
	background: #eef3ec;
	color: #2f5d34;
	border: 1px solid #cfe0cb;
}

.contact-form-area .elementor-message-danger {
	background: #fbeeee;
	color: #8a2b2b;
	border: 1px solid #e8cccc;
}

/* ---------------------------------------------------------
   Single article
   --------------------------------------------------------- */
.entry-content {
	max-width: 68ch;
	margin-inline: auto;
	font-size: 17.5px;
	line-height: 1.85;
	color: var(--text);
}

.entry-content > * + * {
	margin-top: 1.15em;
}

.entry-content h2 {
	font-family: var(--serif);
	font-size: clamp(24px, 2.6vw, 32px);
	color: var(--ink);
	margin-top: 1.8em;
}

.entry-content h3 {
	font-family: var(--serif);
	font-size: clamp(20px, 2vw, 25px);
	color: var(--ink);
	margin-top: 1.5em;
}

.entry-content a {
	color: var(--brass);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.entry-content ul,
.entry-content ol {
	padding-inline-start: 1.4em;
}

.entry-content ul li {
	list-style: disc;
	margin-bottom: .5em;
}

.entry-content ol li {
	list-style: decimal;
	margin-bottom: .5em;
}

.entry-content blockquote {
	border-inline-start: 3px solid var(--brass);
	padding-inline-start: 22px;
	font-family: var(--serif);
	font-size: 1.1em;
	color: var(--ink);
}

.entry-content img {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}

/* ---------------------------------------------------------
   Instagram feed.

   The original build embedded Behold, and style.css still carries a gap rule
   for [data-behold-id] that now matches nothing. These rules do the same job
   for the Instagram Feed plugin's markup, which renders server side.
   --------------------------------------------------------- */
.insta-embed #sb_instagram {
	padding: 0 !important;
}

.insta-embed #sb_instagram #sbi_images {
	gap: clamp(14px, 1.6vw, 22px);
	padding: 0 !important;
}

.insta-embed #sb_instagram .sbi_item {
	padding: 0 !important;
}

.insta-embed #sb_instagram .sbi_photo {
	border-radius: 3px;
	overflow: hidden;
}

/* The plugin's own follow button competes with the site's buttons. */
.insta-embed #sb_instagram .sbi_follow_btn a {
	font-family: var(--sans);
	border-radius: 3px;
}

/* ---------------------------------------------------------
   Press coverage card — visually distinguished from the firm's
   own writing by the publication name in place of a category.
   --------------------------------------------------------- */
.article-external .a-cat {
	background: var(--brass);
	color: #fff;
	padding: 3px 9px;
	border-radius: 2px;
}

/* ---------------------------------------------------------
   Legal links row, above the copyright line in the footer.
   --------------------------------------------------------- */
.footer-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	padding-top: 22px;
	font-size: 13.5px;
}

.footer-legal a {
	color: rgba(255, 255, 255, 0.55);
	transition: color .3s var(--ease);
}

.footer-legal a:hover {
	color: var(--brass-2);
}

/* Separate the legal row from the copyright line below it. */
.footer-legal + .footer-bottom {
	border-top: 1px solid var(--line-dark);
	margin-top: 22px;
}

/* ---------------------------------------------------------
   Featured image on a single article.

   Source images are inconsistent — square logos, 3:2 stock photos — so a plain
   width:100% renders some of them several screens tall. A fixed wide ratio with
   object-fit crops them all to the same restrained band, and keeps the image
   available for Open Graph and schema.org without dominating the article.
   --------------------------------------------------------- */
.lk-post-image {
	margin: 0 0 clamp(32px, 4vw, 56px);
	max-width: 900px;
	margin-inline: auto;
	border-radius: 4px;
	overflow: hidden;
}

.lk-post-image img {
	display: block;
	width: 100%;
	aspect-ratio: 21 / 9;
	object-fit: cover;
	object-position: center;
}

@media (max-width: 760px) {
	.lk-post-image img { aspect-ratio: 16 / 9; }
}

/* ---------------------------------------------------------
   Article summary box. Placed first in the post so both readers
   and answer engines get the takeaways without scrolling.
   --------------------------------------------------------- */
.entry-content .lk-summary {
	background: var(--paper-2);
	border-inline-start: 3px solid var(--brass);
	border-radius: 4px;
	padding: clamp(22px, 3vw, 32px);
	margin-bottom: 2.4em;
}

.entry-content .lk-summary-title {
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--brass);
	font-family: var(--sans);
	font-weight: 600;
	margin-bottom: 14px;
}

.entry-content .lk-summary ul {
	padding-inline-start: 1.2em;
	margin: 0;
}

.entry-content .lk-summary li {
	list-style: disc;
	font-size: 16px;
	line-height: 1.7;
	margin-bottom: .55em;
}

.entry-content .lk-summary li:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------
   FAQ block
   --------------------------------------------------------- */
.entry-content .lk-faq {
	border-top: 1px solid var(--line);
	margin-top: 1.4em;
}

.entry-content .lk-faq h3 {
	font-family: var(--sans);
	font-size: 18px;
	font-weight: 600;
	color: var(--ink);
	margin-top: 1.6em;
	margin-bottom: .5em;
}

.entry-content .lk-faq p {
	margin-top: 0;
	font-size: 16.5px;
}

/* ---------------------------------------------------------
   WordPress core markup
   --------------------------------------------------------- */
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin-inline: auto; }
.alignwide, .alignfull { max-width: none; }

.wp-caption { max-width: 100%; }
.wp-caption-text,
.wp-element-caption {
	font-size: 13.5px;
	color: var(--muted, #6b7280);
	text-align: center;
	margin-top: 8px;
}

.sticky .article { border-color: var(--brass); }

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
}

/* WordPress admin bar sits over the fixed header otherwise. */
body.admin-bar .header { top: 32px; }

@media screen and (max-width: 782px) {
	body.admin-bar .header { top: 46px; }
}

/* ---------------------------------------------------------
   Pagination on the articles archive
   --------------------------------------------------------- */
.lk-pagination {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: clamp(40px, 5vw, 64px);
}

.lk-pagination .page-numbers {
	min-width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--line);
	border-radius: 3px;
	font-family: var(--sans);
	font-size: 15px;
	color: var(--text);
	transition: border-color .3s var(--ease), color .3s var(--ease);
}

.lk-pagination .page-numbers:hover,
.lk-pagination .page-numbers.current {
	border-color: var(--brass);
	color: var(--brass);
}

.lk-empty {
	text-align: center;
	color: var(--muted, #6b7280);
	font-size: 17px;
	padding: clamp(40px, 6vw, 80px) 0;
}

/* =========================================================
   Accessibility corrections
   ========================================================= */

/* ---------------------------------------------------------
   Gold on light backgrounds.

   --brass (#a9874e) reads at 3.16:1 on paper and 2.92:1 on paper-2, short of
   the 4.5:1 that WCAG 1.4.3 asks for. --brass-ink keeps the same hue (38°) and
   saturation, lowered only in lightness, and clears 4.5:1 on every light
   surface the site uses. Dark sections are untouched: they already override the
   colour to --brass-2, which reads 6.43:1 on navy.
   --------------------------------------------------------- */
:root {
	--brass-ink: #83693d;
}

.eyebrow,
.pg-num,
.partner .p-role,
.value .v-ix,
.manifesto .big b,
.article .a-cat,
.contact-details .cd .cd-k,
.contact-details .cd .ic,
.p-card .pc-num,
.p-card .pc-arrow,
.entry-content a,
.lk-summary-title {
	color: var(--brass-ink);
}

.article:hover h3,
.sub-item:hover h3,
.p-card:hover h3,
.social-row a:hover,
.lk-pagination .page-numbers:hover,
.lk-pagination .page-numbers.current {
	color: var(--brass-ink);
}

.lk-pagination .page-numbers:hover,
.lk-pagination .page-numbers.current {
	border-color: var(--brass-ink);
}

.entry-content .lk-summary {
	border-inline-start-color: var(--brass-ink);
}

/* ---------------------------------------------------------
   Keyboard focus (WCAG 2.4.7, 1.4.11).

   The original stylesheet styles :focus-visible on four components only,
   leaving everything else to the browser default — which is close to invisible
   on the navy sections. One ring, drawn in whichever gold contrasts with the
   surface beneath it.
   --------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--brass-ink);
	outline-offset: 3px;
	border-radius: 2px;
}

.hero :focus-visible,
.page-head :focus-visible,
.footer :focus-visible,
.drawer :focus-visible,
.cta-band :focus-visible,
.values-timeline :focus-visible,
.practice-interactive :focus-visible {
	outline-color: var(--brass-2);
}

/* The drawer sits above everything; an offset ring must not be clipped. */
.drawer a:focus-visible {
	outline-offset: -3px;
}

/* ---------------------------------------------------------
   Footer fine print (WCAG 1.4.3).

   40% white over #11202b measures 3.74:1 at 13px. 62% clears the threshold
   without making the small print compete with the links above it.
   --------------------------------------------------------- */
.footer-bottom {
	color: rgba(255, 255, 255, 0.62);
}

.footer-bottom .disc {
	color: rgba(255, 255, 255, 0.62);
}

/* ---------------------------------------------------------
   Footer section headings.

   These were <h4> under an <h2>, which skips a level (WCAG 1.3.1). They are now
   <h2>, so the two rules the original stylesheet attached to `.footer h4` are
   restated here for the new tag. Appearance is unchanged.
   --------------------------------------------------------- */
.footer h2 {
	color: #fff;
	font-family: var(--sans-bold, var(--sans));
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 600;
	margin-bottom: 18px;
}

/* ---------------------------------------------------------
   Contact details as links.

   The address, phone and email now render as mailto:/tel: anchors so a visitor
   on a phone can act on them. They should read as the surrounding text, not as
   default browser links, and pick up the same brass hover the rest of the site
   uses for interactive text.
   --------------------------------------------------------- */
.contact-details .cd .cd-v a {
	color: inherit;
	text-decoration: none;
	transition: color .3s var(--ease);
}

.contact-details .cd .cd-v a:hover,
.contact-details .cd .cd-v a:focus-visible {
	color: var(--brass-ink);
}

.footer .f-contact a {
	color: inherit;
	text-decoration: none;
	transition: color .3s var(--ease);
}

.footer .f-contact a:hover,
.footer .f-contact a:focus-visible {
	color: var(--brass-2);
}