/*

  ████████╗██╗  ██╗███████╗███╗   ███╗██╗███████╗
  ╚══██╔══╝██║  ██║██╔════╝████╗ ████║██║██╔════╝
     ██║   ███████║█████╗  ██╔████╔██║██║███████╗
     ██║   ██╔══██║██╔══╝  ██║╚██╔╝██║██║╚════██║
     ██║   ██║  ██║███████╗██║ ╚═╝ ██║██║███████║
     ╚═╝   ╚═╝  ╚═╝╚══════╝╚═╝     ╚═╝╚═╝╚══════╝

              L A W   C H A M B E R S

  Theme Name: Themis Law
  Theme URI: https://www.pomegranite.co.za/
  Version: 1.0.2
  Template: Divi
  Author: Pomegranite
  Author URI: https://www.pomegranite.co.za/
  Description: Divi Child Theme
  Text Domain: themis-law
*/



/* ==========================================================================
   Themis Law Chambers – global styles (Divi 4)
   Requires the Adobe Fonts kit in Theme Options > Integration > <head>.
   ========================================================================== */

:root {
	--th-navy: #0C406A;
	--th-ink: #2A241C;
	--th-gold: #9C7A3F;
	--th-cream: #F2E9D6;
	--th-line: #E5DCC8;
	--th-font: "brandon-grotesque", "Brandon Grotesque", "Jost", Arial, sans-serif;
}

/* ---------- Typography ---------- */
body,
input, textarea, select, button,
.et_pb_module,
.et_pb_button,
#et-top-navigation,
.et-menu,
.et_mobile_menu {
	font-family: var(--th-font) !important;
}

body {
	color: var(--th-ink);
	font-size: 18px;
	line-height: 1.6;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}

/* Body copy in content modules – Figma: Regular 24 / 32 */
.et_pb_text p,
.et_pb_text li {
	font-size: clamp(18px, 1.67vw, 24px);
	line-height: 1.34;
}

h1, h2, h3, h4, h5, h6,
.et_pb_module h1, .et_pb_module h2, .et_pb_module h3,
.et_pb_module h4, .et_pb_module h5, .et_pb_module h6 {
	font-family: var(--th-font) !important;
	color: var(--th-navy);
	font-weight: 300;
	line-height: 1.1;
	padding-bottom: 0.4em;
}

/* Section headings – Figma: Light 48, 5% tracking, uppercase */
h1, h2 { text-transform: uppercase; letter-spacing: 0.05em; }
h1, h2 { font-size: clamp(32px, 3.34vw, 48px); }
h3 { font-size: clamp(22px, 1.95vw, 28px); font-weight: 700; line-height: 1.43; }
h4 { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.4; }

/* Hero title – Figma: Medium 48, 10% tracking */
.th-hero-title h1 {
	font-weight: 500;
	font-size: clamp(32px, 3.34vw, 48px);
	letter-spacing: 0.1em;
	line-height: 1;
}

/* Sub-heading ("ADDING LEGAL VALUE") – Figma: Light 36, 5% tracking */
.th-subhead, .th-subhead p, .et_pb_text .th-subhead {
	color: var(--th-navy);
	font-weight: 300;
	font-size: clamp(22px, 2.5vw, 36px) !important;
	letter-spacing: 0.05em;
	line-height: 1.2 !important;
	text-transform: uppercase;
}

/* Lead text ("Practical legal advice…") – Figma: Light 40 / 48 */
.th-lead p, .et_pb_text.th-lead p {
	font-weight: 300;
	font-size: clamp(26px, 2.78vw, 40px);
	line-height: 1.2;
	color: var(--th-ink);
}

strong, b { font-weight: 700; }

a { color: var(--th-navy); }
a:hover { color: var(--th-gold); }
.et_pb_text a:not(.et_pb_button) {
	text-decoration: underline;
	text-decoration-color: var(--th-gold);
	text-underline-offset: 4px;
}

/* ---------- Buttons ----------
   Divi buttons get the mockup style automatically.
   Add class th-btn-light for the white version (on navy backgrounds). */
body .et_pb_button,
body .et_pb_button:hover {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	min-height: 48px;
	padding: 8px 12px 8px 24px !important;
	background: var(--th-navy) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 0 !important;
	font-size: clamp(17px, 1.53vw, 22px) !important;
	font-weight: 400 !important;
	letter-spacing: 0;
	line-height: 1.3 !important;
	transition: background-color .2s ease, color .2s ease;
}
body .et_pb_button::after {
	content: "" !important;
	position: static !important;
	opacity: 1 !important;
	margin: 0 !important;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C406A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 18px no-repeat;
	transition: transform .2s ease;
}
body .et_pb_button:hover { background: var(--th-gold) !important; color: #fff !important; }
body .et_pb_button:hover::after { transform: translateX(3px); }
body .et_pb_button:focus-visible { outline: 3px solid var(--th-gold); outline-offset: 3px; }

body .th-btn-light .et_pb_button,
body .et_pb_button.th-btn-light {
	background: #fff !important;
	color: var(--th-navy) !important;
}
body .th-btn-light .et_pb_button::after,
body .et_pb_button.th-btn-light::after {
	background-color: var(--th-navy);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
body .th-btn-light .et_pb_button:hover,
body .et_pb_button.th-btn-light:hover {
	background: var(--th-gold) !important;
	color: #fff !important;
}

/* Text link style ("READ MORE") – add class th-link to a Text module */
.th-link a {
	color: var(--th-navy) !important;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: underline !important;
	text-decoration-color: var(--th-gold) !important;
	text-underline-offset: 6px;
}

/* ---------- Header ---------- */
.th-header { border-bottom: 1px solid transparent; }
.th-header-row { display: flex; align-items: center; padding: 18px 0 !important; }
.th-header-row .et_pb_column { margin-bottom: 0 !important; }
.th-logo { margin-bottom: 0 !important; max-width: 130px; }
.th-logo img { width: 100%; height: auto; }

.th-header-nav { display: flex; align-items: center; justify-content: flex-end; gap: 28px; }
.th-header-nav .th-menu { flex: 1 1 auto; margin-bottom: 0 !important; }
.th-header-nav .et_pb_button_module_wrapper { margin-bottom: 0 !important; flex: 0 0 auto; }

.th-menu .et_pb_menu__menu { justify-content: flex-end; }
.th-menu .et-menu-nav > ul { justify-content: flex-end; }
.th-menu .et-menu > li { padding-left: 14px; padding-right: 14px; }
.th-menu .et-menu > li > a {
	padding-bottom: 6px !important;
	color: var(--th-navy) !important;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border-bottom: 2px solid transparent;
	transition: color .2s ease, border-color .2s ease;
}
.th-menu .et-menu > li > a:hover { opacity: 1; color: var(--th-gold) !important; }
.th-menu .et-menu > li.current-menu-item > a,
.th-menu .et-menu > li.current-menu-ancestor > a {
	color: var(--th-gold) !important;
	border-bottom-color: var(--th-gold);
}
.th-menu .sub-menu {
	border-top: 2px solid var(--th-gold) !important;
	box-shadow: 0 10px 30px rgba(12, 64, 106, .12);
}
.th-menu .sub-menu a { font-size: 16px; letter-spacing: 0.04em; text-transform: none; }

/* Hide the "Contact Us" menu item on desktop (button shows instead) */
@media (min-width: 981px) {
	.th-menu .menu-contact { display: none !important; }
}

/* ---------- Footer (matches mockup) ---------- */
.th-footer { border-top: 0; }
.th-footer-row {
	display: grid !important;
	grid-template-columns: 1.4fr 1fr 1.2fr 0.8fr;
	gap: 40px;
	align-items: start;
	padding: 72px 0 56px !important;
}
.th-footer-row .et_pb_column { width: auto !important; margin: 0 !important; float: none !important; }
.th-footer-logo { max-width: 140px; margin: 0 !important; }
.th-footer-logo img { width: 100%; height: auto; }
.th-footer-col h4 {
	color: var(--th-ink);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 6px 0 22px;
	padding: 0;
}
.th-footer-col.et_pb_text p { font-size: 17px; line-height: 1.65; color: var(--th-ink); padding: 0; }
.th-footer-col a { color: var(--th-ink) !important; text-decoration: none !important; }
.th-footer-col a[href^="mailto"] { color: var(--th-navy) !important; text-decoration: underline !important; text-underline-offset: 3px; }
.th-footer-col a:hover { color: var(--th-gold) !important; }

.th-social { list-style: none; margin: 0; padding: 0 !important; display: flex; gap: 10px; }
.th-social li { list-style: none; margin: 0; padding: 0; }
.th-social a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; border-radius: 50%;
	background: var(--th-navy); color: #fff !important;
	transition: background-color .2s ease;
}
.th-social a:hover { background: var(--th-gold); color: #fff !important; }

.th-bottom { border-top: 0; }
.th-bottom-row {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	border-top: 1px solid var(--th-navy);
	padding: 24px 0 40px !important;
}
.th-bottom-row .et_pb_column { width: auto !important; margin: 0 !important; float: none !important; }
.th-copyright.et_pb_text p { font-size: 16px; line-height: 1.4; color: var(--th-ink); padding: 0; }
.th-copyright a { color: var(--th-ink) !important; text-decoration: underline; text-decoration-color: var(--th-gold); text-underline-offset: 3px; }
.th-legal-menu { margin-bottom: 0 !important; }
.th-legal-menu .et_pb_menu__menu, .th-legal-menu .et-menu-nav > ul { justify-content: flex-end; }
.th-legal-menu .et-menu > li { padding: 0; display: flex; align-items: center; }
.th-legal-menu .et-menu > li + li::before { content: "|"; color: var(--th-ink); padding: 0 8px; font-size: 12px; }
.th-legal-menu .et-menu > li > a {
	padding: 0 !important;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--th-ink) !important;
}
.th-legal-menu .et-menu > li > a:hover { color: var(--th-gold) !important; opacity: 1; }
/* Show the legal menu as a plain list on mobile (no hamburger) */
.th-legal-menu .et_mobile_nav_menu { display: none !important; }
.th-legal-menu .et_pb_menu__menu { display: flex !important; }

/* ---------- Mobile ---------- */
@media (max-width: 980px) {
	.th-header-nav { gap: 12px; }
	.th-header-btn { display: none !important; }
	.th-logo { max-width: 80px; }
	.th-footer-row { grid-template-columns: 1fr 1fr; gap: 32px; padding: 48px 0 32px !important; }
	.th-footer-row .et_pb_column:first-child { grid-column: 1 / -1; }
	.th-bottom-row { flex-direction: column; align-items: flex-start; gap: 12px; }
	.th-legal-menu .et_pb_menu__menu, .th-legal-menu .et-menu-nav > ul { justify-content: flex-start; flex-wrap: wrap; row-gap: 6px; }
}

@media (max-width: 479px) {
	.th-footer-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}

/* ==========================================================================
   Themis – reusable section styles (homepage + inner pages)
   Append to the child theme style.css, below the global styles.
   Needs these files in the child theme:  /images/pattern-tile-navy.svg,
   /images/pattern-tile-white.svg, /images/wreath-branch.svg
   ========================================================================== */

/* ---------- Spacing helpers (add to a Section's CSS class) ---------- */
.th-pad { padding: 72px 0 !important; }
.th-pad-bottom { padding: 0 0 96px !important; }
.th-pad .et_pb_row, .th-pad-bottom .et_pb_row { width: 90%; max-width: 1240px; padding: 0 !important; }

/* ---------- Patterns (add to a Row or Column) ---------- */
.th-pattern-cream {
	background-color: var(--th-cream) !important;
	background-image: url("images/pattern-tile-navy.svg");
	background-size: 270px auto;
	background-repeat: repeat;
	background-blend-mode: normal;
	position: relative;
}
.th-pattern-cream::before { /* soften the navy lines on cream */
	content: ""; position: absolute; inset: 0; background: rgba(242, 233, 214, .9); pointer-events: none;
}
.th-pattern-cream > * { position: relative; z-index: 1; }

.th-pattern-white { position: relative; }
.th-pattern-white::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: url("images/pattern-tile-white.svg") repeat;
	background-size: 270px auto;
	opacity: .08;
}
.th-pattern-white > * { position: relative; z-index: 1; }

/* ---------- Hero ---------- */
.th-hero-row { display: flex; align-items: stretch; padding: 0 !important; }
.th-hero-row .et_pb_column { margin: 0 !important; }
.th-hero-text {
	display: flex; flex-direction: column; justify-content: center;
	padding: 64px 48px 64px max(5vw, calc((100vw - 1240px) / 2)) !important;
}
.th-hero-title h1 { letter-spacing: .08em; padding-bottom: 6px; }
.th-hero-title .th-subhead { margin-top: 0; }
.th-hero-text .th-lead { margin: 18px 0 36px !important; }
.th-hero-media .et_pb_image, .th-hero-img { margin: 0 !important; height: 100%; }
.th-hero-img .et_pb_image_wrap, .th-hero-img img { display: block; width: 100%; height: 100%; min-height: 620px; object-fit: cover; }

/* ---------- Intro band ---------- */
.th-intro-row { padding: 72px 8% 56px !important; }
.et_pb_text.th-intro-text p { font-weight: 300; font-size: clamp(24px, 2.78vw, 40px); line-height: 1.2; max-width: 920px; }
.th-intro-text strong { color: var(--th-ink); font-weight: 700; }

/* ---------- Services split ---------- */
.th-services-row { display: flex; align-items: center; padding: 24px 0 !important; }
.th-services-intro { padding-right: 56px; border-right: 1px solid var(--th-gold); }
.th-services-list { padding-left: 56px; }
.th-list { list-style: none !important; margin: 0; padding: 0 !important; }
.th-list li { position: relative; padding: 0 0 14px 22px !important; margin: 0; list-style: none; }
.th-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--th-navy); }
.th-list a { color: var(--th-ink) !important; text-decoration: none !important; }
.th-list a:hover { color: var(--th-navy) !important; text-decoration: underline !important; text-decoration-color: var(--th-gold) !important; }

/* ---------- Cards (Firm / Careers) ---------- */
.th-card {
	background: #fff;
	box-shadow: 0 6px 30px rgba(12, 64, 106, .10);
	padding: 64px 56px 56px !important;
	position: relative;
	overflow: visible !important;
}
.th-card--left { max-width: 1020px !important; margin-left: max(5%, calc((100% - 1240px) / 2)) !important; margin-right: auto !important; }
.th-card--right { max-width: 1020px !important; margin-right: max(5%, calc((100% - 1240px) / 2)) !important; margin-left: auto !important; }
.th-card p { max-width: 760px; }

.th-wreath-right::after, .th-wreath-left::after {
	content: ""; position: absolute; top: 50%; width: 120px; height: 230px; pointer-events: none;
	background: url("images/wreath-branch.svg") center / contain no-repeat;
	opacity: .3;
}
.th-wreath-right::after { right: -90px; transform: translateY(-50%) scaleX(-1); }
.th-wreath-left::after  { left: -90px;  transform: translateY(-50%); opacity: .12; }

/* ---------- People (navy panel + photo) ---------- */
.th-people-row { display: flex; align-items: stretch; }
.th-people-row .et_pb_column { margin: 0 !important; }
.th-panel-navy { background: var(--th-navy); padding: 72px 56px 56px !important; }
.th-panel-navy h2, .th-panel-navy p { color: #fff !important; }
.th-panel-navy .et_pb_text p { font-weight: 300; font-size: clamp(22px, 2.22vw, 32px); line-height: 1.56; max-width: 560px; }
.th-people-img, .th-people-img .et_pb_image_wrap { margin: 0 !important; height: 100%; }
.th-people-img img { display: block; width: 100%; height: 100%; min-height: 440px; object-fit: cover; }

/* ---------- Insights (Divi Blog module as cards) ---------- */
.th-insights h2 { margin-bottom: 24px; }
.th-insights-grid .et_pb_ajax_pagination_container { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.th-insights-grid .et_pb_salvattore_content { display: contents !important; }
.th-insights-grid .et_pb_salvattore_content > .column { display: contents !important; }
.th-insights-grid .et_pb_post {
	width: auto !important; margin: 0 !important;
	display: flex; flex-direction: column;
	background: #fff; border: 0 !important;
	box-shadow: 0 6px 30px rgba(12, 64, 106, .10);
	padding: 32px 28px 28px !important;
}
.th-insights-grid .entry-title { font-size: clamp(22px, 1.95vw, 28px) !important; font-weight: 700; line-height: 1.43; text-transform: none; letter-spacing: 0; padding-bottom: 18px; }
.th-insights-grid .entry-title a { color: var(--th-navy); }
.th-insights-grid .post-content { display: flex; flex-direction: column; flex: 1; }
.th-insights-grid .post-content-inner, .th-insights-grid .post-content-inner p { font-size: 17px; line-height: 1.65; flex: 1; }
.th-insights-grid .more-link {
	margin-top: 24px; align-self: flex-start;
	color: var(--th-navy) !important; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	text-decoration: underline; text-decoration-color: var(--th-gold); text-underline-offset: 6px;
}
.th-insights .et_pb_button_module_wrapper { margin-top: 40px; }

/* ---------- CTA band ---------- */
.th-cta-row { display: flex; align-items: stretch; background: var(--th-navy); }
.th-cta-row .et_pb_column { margin: 0 !important; }
.th-cta-img, .th-cta-img .et_pb_image_wrap { margin: 0 !important; height: 100%; }
.th-cta-img img { display: block; width: 100%; height: 100%; min-height: 420px; object-fit: cover; }
.th-cta-panel { display: flex; flex-direction: column; justify-content: center; padding: 56px 64px !important; }
.th-cta-panel h2, .th-cta-panel p { color: #fff !important; }
.th-cta-panel h2 { font-weight: 300; font-size: clamp(36px, 4.44vw, 64px); line-height: 1.1; letter-spacing: 0.05em; }
.th-cta-panel .et_pb_text p { font-size: clamp(22px, 2.22vw, 32px); line-height: 1.15; margin-bottom: 32px; max-width: 420px; }

/* ---------- Tablet / mobile ---------- */
@media (max-width: 980px) {
	.th-pad { padding: 48px 0 !important; }
	.th-hero-row, .th-services-row, .th-people-row, .th-cta-row { flex-direction: column; }
	.th-hero-text { padding: 48px 5% !important; }
	.th-hero-img img { min-height: 360px; }
	.th-services-intro { padding-right: 0; border-right: 0; border-bottom: 1px solid var(--th-gold); padding-bottom: 28px; margin-bottom: 28px !important; }
	.th-services-list { padding-left: 0; }
	.th-card { padding: 40px 28px 32px !important; }
	.th-card--left, .th-card--right { margin-left: 5% !important; margin-right: 5% !important; width: 90% !important; }
	.th-wreath-right::after, .th-wreath-left::after { display: none; }
	.th-panel-navy { padding: 48px 28px 40px !important; }
	.th-people-img img { min-height: 320px; }
	.th-insights-grid .et_pb_ajax_pagination_container { grid-template-columns: 1fr; }
	.th-cta-img img { min-height: 260px; }
	.th-cta-panel { padding: 40px 28px !important; }
	.th-intro-row { padding: 40px 28px !important; }
}
@media (min-width: 768px) and (max-width: 980px) {
	.th-insights-grid .et_pb_ajax_pagination_container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.th-cta-img img { object-position: 25% center; }    /* keeps the reception logo in view */
.th-people-img img { object-position: 65% center; } /* keeps both faces in view */

.th-overlay {
	background-image:
		linear-gradient(90deg, rgba(12, 64, 106, 0.64) 26%, rgba(12, 64, 106, 0.064) 56%),
		url("/wp-content/uploads/2026/11/themis-law-chambers-reception.webp") !important;
	background-size: cover !important;
	background-position: center !important;
}