/*
Theme Name:   MLT Attorneys Inc
Theme URI:    https://mltinc.co.za/
Description:  Child theme of GeneratePress for MLT Attorneys Inc — boutique family law firm, Kloof, KwaZulu-Natal.
Author:       MLT Attorneys Inc
Template:     generatepress
Version:      1.0.0
Text Domain:  mlt-attorneys-child
*/

.wp-block-group__inner-container { display: contents; }

:root { --accent: oklch(0.63 0.105 83); }

/* GeneratePress base-element resets tie in specificity with mlt-site.css's
   own base rules and load after it, so they were winning. Re-asserted here. */
body {
	background: var(--bg); color: var(--ink);
	font-family: var(--font-body); font-size: 17px; line-height: 1.65; font-weight: 400;
}
h1, h2, h3 {
	font-family: var(--font-display); font-weight: 500; line-height: 1.08;
	letter-spacing: -0.01em; margin: 0;
}
p { margin: 0; }
a { text-decoration: none; }

.site-header {
	position: sticky; top: 0; z-index: 60;
	background: oklch(0.965 0.008 75 / 0.82);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--line-2);
}
.nav-links > * { padding: 0; }
.menu-toggle {
	display: none; background: none; border: 0; cursor: pointer;
	padding: 8px; margin: 0; color: var(--ink); flex-grow: 0;
	line-height: normal; text-align: initial; text-transform: none;
}
@media (max-width: 940px) {
	.menu-toggle { display: inline-flex; }
}

.flagship-copy h2.sec-head { font-size: clamp(2rem, 3.8vw, 3.1rem); }
.flagship-copy p.lead { margin-top: 20px; }
.flagship-copy p.lead + p { margin-top: 16px; color: var(--ink-soft); }
.flagship-copy .wp-block-buttons { margin-top: 30px; }

.faq-aside h2.sec-head { font-size: clamp(2rem, 3.6vw, 2.8rem); }
.faq-aside p.lead { margin-top: 18px; }
.faq-aside .wp-block-buttons { margin-top: 26px; }

.faq-q:hover, .faq-q:focus, .faq-q:active { background: none; color: var(--ink); }

/* Section backgrounds carried in the source as inline styles, not classes.
   :has() distinguishes the "what we help with" / enquiry sections by their
   content since they share the generic .section class with everything else.
   The FAQ section's background can't be told apart from Home's plain FAQ
   the same way (identical markup shape), so it's targeted by page ID —
   Family Law=4, Divorce=5, Surrogacy=6, Litigation=7, Debt Collection=8,
   Correspondent=9 (confirmed against the live site's actual assigned IDs;
   if a page is ever deleted and recreated, its ID may change and this will
   need updating). */
.section:has(.covers-grid),
.section:has(.enquiry-grid) { background: var(--bg-2); border-block: 1px solid var(--line-2); }
.page-id-4 #faq, .page-id-5 #faq, .page-id-7 #faq, .page-id-8 #faq, .page-id-9 #faq {
	background: var(--bg-2); border-block: 1px solid var(--line-2);
}
.page-id-6 #faq { background: var(--bg); border-block: 1px solid var(--line-2); }

.contact-card .row { position: relative; }
.contact-card .row::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 3px;
	background-color: var(--accent);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}
.contact-card .row-phone::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'><path d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3-8.6A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.7a2 2 0 0 1-.5 2.1L8 9.6a16 16 0 0 0 6 6l1.1-1.1a2 2 0 0 1 2.1-.5c.9.3 1.8.5 2.7.6a2 2 0 0 1 1.7 2z'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'><path d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3-8.6A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.7a2 2 0 0 1-.5 2.1L8 9.6a16 16 0 0 0 6 6l1.1-1.1a2 2 0 0 1 2.1-.5c.9.3 1.8.5 2.7.6a2 2 0 0 1 1.7 2z'/></svg>");
}
.contact-card .row-email::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='m2 7 10 6 10-6'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='m2 7 10 6 10-6'/></svg>");
}
.contact-card .row-pin::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>");
}
.contact-card .row-clock::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg>");
}

.pa-card { position: relative; }
.pa-card::after {
	content: "";
	position: absolute; right: -30px; bottom: -30px;
	width: 180px; height: 180px;
	background-image: url("https://mlt.mediaholic.marketing/wp-content/uploads/2026/07/mlt-mark-white.png");
	background-size: contain; background-repeat: no-repeat;
	opacity: 0; transition: opacity .4s ease; pointer-events: none;
}
.pa-card:hover::after { opacity: 0.08; }
.pa-group-cards .pa-card::after { width: 150px; height: 150px; right: -24px; bottom: -24px; }
.pa-group-cards .pa-card:hover::after { opacity: 0.07; }

.section.contact { position: relative; overflow: hidden; }
.section.contact::before {
	content: "";
	position: absolute; right: -60px; top: 50%; transform: translateY(-50%);
	width: 420px; height: 420px;
	background-image: url("https://mlt.mediaholic.marketing/wp-content/uploads/2026/07/mlt-mark-white.png");
	background-size: contain; background-repeat: no-repeat;
	opacity: 0.06; pointer-events: none; z-index: 1;
}
.section.contact .contact-grid { position: relative; z-index: 2; }

.hero { position: relative; }
.hero::before {
	content: "";
	position: absolute; top: -8%; right: -4%; width: 360px; height: 360px;
	opacity: 0.05; pointer-events: none; z-index: 0;
	background-image: url("https://mlt.mediaholic.marketing/wp-content/uploads/2026/07/mlt-mark.png");
	background-size: contain; background-repeat: no-repeat;
}
.page-hero-with-mark { position: relative; }
.page-hero-with-mark::before {
	content: "";
	position: absolute; top: 50%; right: -3%; transform: translateY(-50%);
	width: 340px; height: 340px; opacity: 0.06; pointer-events: none; z-index: 0;
	background-image: url("https://mlt.mediaholic.marketing/wp-content/uploads/2026/07/mlt-mark.png");
	background-size: contain; background-repeat: no-repeat;
}

.page-hero-figure .wp-block-image,
.pa-group-photo .wp-block-image,
.flagship-media .photo .wp-block-image,
.team-card .avatar .wp-block-image { width: 100%; height: 100%; margin: 0; }
.page-hero-figure .wp-block-image img,
.pa-group-photo .wp-block-image img,
.flagship-media .photo .wp-block-image img,
.team-card .avatar .wp-block-image img { width: 100%; height: 100%; object-fit: cover; }
.photo-band .wp-block-image { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; z-index: 1; }
.photo-band .wp-block-image img { width: 100%; height: 100%; object-fit: cover; }

.wp-block-button.btn-primary > a.wp-element-button,
.wp-block-button.btn-ghost > a.wp-element-button,
.wp-block-button.btn-ondark > a.wp-element-button,
.wp-block-button.btn-outline-dark > a.wp-element-button {
	display: inline-flex; align-items: center; gap: 0.6em;
	width: auto; height: auto; box-sizing: border-box;
	font-family: var(--font-body); font-size: 0.85rem; font-weight: 600;
	letter-spacing: 0.04em; padding: 0.92em 1.5em;
	border: 1px solid transparent; border-radius: 100px; outline: none;
	white-space: nowrap; text-decoration: none;
	transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.wp-block-button.btn-primary > a.wp-element-button:focus,
.wp-block-button.btn-ghost > a.wp-element-button:focus,
.wp-block-button.btn-ondark > a.wp-element-button:focus,
.wp-block-button.btn-outline-dark > a.wp-element-button:focus { outline: none; }
.wp-block-buttons .wp-block-button.btn-primary,
.wp-block-buttons .wp-block-button.btn-ghost,
.wp-block-buttons .wp-block-button.btn-ondark,
.wp-block-buttons .wp-block-button.btn-outline-dark { width: auto;border-radius:100px;}
.wp-block-button.btn-primary > a.wp-element-button { background: var(--dark); color: var(--accent-on); }
.wp-block-button.btn-primary > a.wp-element-button:hover { background: var(--accent); color: var(--accent-on); }
.wp-block-button.btn-ghost > a.wp-element-button { background: transparent; color: var(--ink); border-color: var(--line); }
.wp-block-button.btn-ghost > a.wp-element-button:hover { border-color: var(--ink); }
.wp-block-button.btn-ondark > a.wp-element-button { background: var(--on-dark); color: var(--dark); }
.wp-block-button.btn-ondark > a.wp-element-button:hover { background: var(--accent); color: var(--accent-on); }
.wp-block-button.btn-outline-dark > a.wp-element-button { background: transparent; color: var(--on-dark); border-color: oklch(0.95 0.01 80 / 0.3); }
.wp-block-button.btn-outline-dark > a.wp-element-button:hover { border-color: var(--on-dark); }

.cover-item p.tlink,
.pa-card p.tlink,
.pa-group-cards .pa-card p.tlink,
.rel-card p.tlink {
	display: inline-flex; align-items: center; gap: 0.5em; white-space: nowrap;
	font-weight: 600; font-size: 0.9rem; letter-spacing: 0.02em;
	color: var(--accent-deep); border-bottom: 1px solid transparent;
	padding-bottom: 2px; flex: none;
	transition: border-color .25s, gap .25s;
}
.cover-item p.tlink:hover,
.pa-card p.tlink:hover,
.pa-group-cards .pa-card p.tlink:hover,
.rel-card p.tlink:hover { gap: 0.8em; border-color: var(--accent); }
.cover-item p.tlink { margin-top: 16px; }
.pa-card p.tlink { margin-top: 18px; }
.pa-group-cards .pa-card p.tlink { margin-top: 16px; }
.rel-card p.tlink { margin-top: 4px; }

.enquiry-card .wpcf7-form-control-wrap { display: block; margin: 5px 0 18px 0; }
.enquiry-card label { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; color: var(--ink); margin-bottom: 8px; }
.enquiry-card input[type="text"],
.enquiry-card input[type="email"],
.enquiry-card input[type="tel"],
.enquiry-card input[type="number"],
.enquiry-card textarea {
	width: 100%; font-family: inherit; font-size: 1rem; color: var(--ink);
	background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
	padding: 12px 14px; transition: border-color .2s, box-shadow .2s;
}
.enquiry-card textarea { min-height: 110px; resize: vertical; }
.enquiry-card input:focus,
.enquiry-card textarea:focus {
	outline: none; border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-tint);
}
.enquiry-card input::placeholder,
.enquiry-card textarea::placeholder { color: var(--ink-faint); }

.enquiry-card .wpcf7-radio { display: flex; gap: 10px; }
.enquiry-card .wpcf7-radio .wpcf7-list-item { margin: 0; flex: 1; }
.enquiry-card .wpcf7-radio label {
	display: flex; margin: 0; position: relative; cursor: pointer;
}
.enquiry-card .wpcf7-radio input[type="radio"] { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.enquiry-card .wpcf7-radio .wpcf7-list-item-label {
	display: flex; align-items: center; justify-content: center; width: 100%;
	padding: 11px 14px; font-size: 0.92rem; font-weight: 500;
	border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
	transition: border-color .2s, background .2s, color .2s;
}
.enquiry-card .wpcf7-radio label:hover .wpcf7-list-item-label { border-color: var(--ink-faint); }
.enquiry-card .wpcf7-radio input[type="radio"]:checked + .wpcf7-list-item-label {
	border-color: var(--accent); background: var(--accent-tint); color: var(--accent-deep); font-weight: 600;
}
.enquiry-card .wpcf7-radio input[type="radio"]:focus-visible + .wpcf7-list-item-label { box-shadow: 0 0 0 3px var(--accent-tint); }

.enquiry-card input[type="submit"] {
	margin-top: 28px; align-self: flex-start;
	display: inline-flex; align-items: center; gap: 0.6em;
	font-family: var(--font-body); font-size: 0.85rem; font-weight: 600;
	letter-spacing: 0.04em; padding: 0.92em 1.5em;
	border: 1px solid transparent; border-radius: 100px; cursor: pointer;
	background: var(--dark); color: var(--accent-on);
	transition: background .25s, color .25s;
}
.enquiry-card input[type="submit"]:hover { background: var(--accent); }
.enquiry-card .wpcf7-spinner { margin-left: 12px; }