/* ==========================================================================
   The Garden Restorers: brand styles for Divi 5
   Anything you set in a Divi module's own design settings still overrides
   these defaults. Utility classes (tgr-...) go in a section's or module's
   Advanced > CSS Class field.
   ========================================================================== */

/* ---------- Fonts (self-hosted, SIL Open Font Licence) ---------- */
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Josefin Sans"; src: url("../fonts/josefin-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Josefin Sans"; src: url("../fonts/josefin-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Josefin Sans"; src: url("../fonts/josefin-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- Brand tokens ---------- */
:root {
	--tgr-green: #23452B;   /* Downs Green: logo, headings, buttons */
	--tgr-green-dark: #1A3420;
	--tgr-moss: #4F7A4A;    /* links, hover, accents */
	--tgr-sage: #A9B89A;    /* borders, soft fills */
	--tgr-cream: #F3EBD7;   /* main background */
	--tgr-chalk: #FBF8F0;   /* cards, alternate sections */
	--tgr-soil: #5B4636;    /* body text */
	--tgr-cowslip: #D9A441; /* small highlights only */

	--tgr-font-heading: "Fraunces", Georgia, "Times New Roman", serif;
	--tgr-font-body: "Josefin Sans", "Helvetica Neue", Arial, sans-serif;

	--tgr-radius: 14px;
	--tgr-radius-pill: 999px;
	--tgr-shadow: 0 6px 24px rgba(35, 69, 43, 0.08);
}

/* ---------- Base ---------- */
html body {
	background-color: var(--tgr-cream);
	color: var(--tgr-soil);
	font-family: var(--tgr-font-body);
	font-size: 17px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

#page-container,
#et-main-area,
#main-content {
	background-color: var(--tgr-cream);
}

/* Sections with no background set in Divi take the brand cream instead of white. */
.et_pb_section:not(.et_pb_with_background) {
	background-color: var(--tgr-cream);
}

html body h1, html body h2, html body h3,
html body h4, html body h5, html body h6 {
	font-family: var(--tgr-font-heading);
	font-weight: 600;
	color: var(--tgr-green);
	line-height: 1.2;
	letter-spacing: -0.005em;
	padding-bottom: 0.4em;
}

html body h1 { font-size: clamp(2.3rem, 4.5vw, 3.6rem); }
html body h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
html body h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
html body h4 { font-size: 1.25rem; }

html body p { color: inherit; }

a { color: var(--tgr-moss); transition: color 0.2s ease; }
a:hover, a:focus { color: var(--tgr-green); }

::selection { background: var(--tgr-sage); color: var(--tgr-green-dark); }

:focus-visible {
	outline: 3px solid var(--tgr-cowslip);
	outline-offset: 3px;
}

/* ---------- Buttons ---------- */
body .et_pb_button,
body .et_pb_more_button,
body .et_pb_contact_submit,
body .et_pb_newsletter_button {
	background-color: var(--tgr-green);
	color: var(--tgr-cream);
	border: 2px solid var(--tgr-green);
	border-radius: var(--tgr-radius-pill);
	font-family: var(--tgr-font-body);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.85em 2em 0.75em;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

body .et_pb_button:hover,
body .et_pb_more_button:hover,
body .et_pb_contact_submit:hover,
body .et_pb_newsletter_button:hover {
	background-color: var(--tgr-moss);
	border-color: var(--tgr-moss);
	color: var(--tgr-chalk);
	padding: 0.85em 2em 0.75em; /* stop Divi's hover arrow shifting the button */
}

body .et_pb_button:after,
body .et_pb_more_button:after { display: none; }

/* Outline variant: add "tgr-btn-outline" to a Button module's CSS Class. */
body .tgr-btn-outline.et_pb_button,
body .tgr-btn-outline .et_pb_button {
	background-color: transparent;
	color: var(--tgr-green);
}
body .tgr-btn-outline.et_pb_button:hover,
body .tgr-btn-outline .et_pb_button:hover {
	background-color: var(--tgr-green);
	color: var(--tgr-cream);
}

/* ---------- Header and menus ---------- */
#main-header,
.et-l--header .et_pb_section:not(.et_pb_with_background) {
	background-color: var(--tgr-cream);
	box-shadow: none;
	border-bottom: 1px solid rgba(35, 69, 43, 0.12);
}

#top-menu li a,
.et_pb_menu .et-menu-nav > ul > li > a,
.et_mobile_menu li a {
	font-family: var(--tgr-font-body);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--tgr-green);
}

#top-menu li a:hover,
#top-menu li.current-menu-item > a,
.et_pb_menu .et-menu-nav > ul > li > a:hover,
.et_pb_menu .et-menu-nav > ul > li.current-menu-item > a {
	color: var(--tgr-moss);
	opacity: 1;
}

.nav li ul,
.et_mobile_menu {
	background-color: var(--tgr-chalk);
	border-top: 3px solid var(--tgr-green);
}

.mobile_menu_bar:before { color: var(--tgr-green); }

/* ---------- Footer ---------- */
#main-footer,
.et-l--footer .et_pb_section:not(.et_pb_with_background) {
	background-color: var(--tgr-green);
	color: var(--tgr-cream);
}

#main-footer h1, #main-footer h2, #main-footer h3, #main-footer h4,
.et-l--footer h1, .et-l--footer h2, .et-l--footer h3, .et-l--footer h4 {
	color: var(--tgr-cream);
}

#main-footer a, .et-l--footer a { color: var(--tgr-sage); }
#main-footer a:hover, .et-l--footer a:hover { color: var(--tgr-chalk); }

#footer-bottom { background-color: var(--tgr-green-dark); }
#footer-info, #footer-info a { color: var(--tgr-sage); }

/* ---------- Forms ---------- */
body input[type="text"],
body input[type="email"],
body input[type="tel"],
body input[type="number"],
body textarea,
body select,
body .et_pb_contact_form .input,
body .et_pb_contact_field input,
body .et_pb_contact_field textarea {
	background-color: var(--tgr-chalk);
	border: 1px solid var(--tgr-sage);
	border-radius: 10px;
	color: var(--tgr-soil);
	font-family: var(--tgr-font-body);
	font-size: 16px;
	padding: 14px 16px;
}

body .et_pb_contact_form .input:focus,
body input:focus,
body textarea:focus {
	border-color: var(--tgr-green);
	outline: none;
	box-shadow: 0 0 0 3px rgba(79, 122, 74, 0.2);
}

body .et_pb_contact_form .input::placeholder { color: rgba(91, 70, 54, 0.6); }

/* ==========================================================================
   Utility classes: add to Advanced > CSS Class in Divi
   ========================================================================== */

/* Section backgrounds */
.et_pb_section.tgr-bg-green { background-color: var(--tgr-green); color: var(--tgr-cream); }
.et_pb_section.tgr-bg-green h1, .et_pb_section.tgr-bg-green h2,
.et_pb_section.tgr-bg-green h3, .et_pb_section.tgr-bg-green h4 { color: var(--tgr-cream); }
.et_pb_section.tgr-bg-green a:not(.et_pb_button) { color: var(--tgr-sage); }
.et_pb_section.tgr-bg-green .et_pb_button { background-color: var(--tgr-cream); border-color: var(--tgr-cream); color: var(--tgr-green); }
.et_pb_section.tgr-bg-green .et_pb_button:hover { background-color: var(--tgr-sage); border-color: var(--tgr-sage); color: var(--tgr-green-dark); }

.et_pb_section.tgr-bg-cream { background-color: var(--tgr-cream); }
.et_pb_section.tgr-bg-chalk { background-color: var(--tgr-chalk); }
.et_pb_section.tgr-bg-sage  { background-color: #E3E8DA; }

/* Small uppercase label above a heading */
.tgr-eyebrow,
.tgr-eyebrow p {
	font-family: var(--tgr-font-body);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--tgr-moss);
	padding-bottom: 6px;
}

/* Large intro paragraph */
.tgr-lead, .tgr-lead p {
	font-family: var(--tgr-font-heading);
	font-size: clamp(1.15rem, 1.8vw, 1.4rem);
	line-height: 1.55;
	color: var(--tgr-green);
}

/* Cards: add to a Column, Blurb or Text module */
.tgr-card {
	background-color: var(--tgr-chalk);
	border: 1px solid rgba(169, 184, 154, 0.7);
	border-radius: var(--tgr-radius);
	box-shadow: var(--tgr-shadow);
	padding: 32px 28px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tgr-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(35, 69, 43, 0.12); }
.tgr-card .et_pb_main_blurb_image { margin-bottom: 18px; }
.tgr-card .et-pb-icon { color: var(--tgr-moss); }

/* Leaf-bullet list: add to a Text module containing a list */
.tgr-checklist ul { list-style: none; padding-left: 0; }
.tgr-checklist ul li {
	position: relative;
	padding: 0 0 10px 34px;
}
.tgr-checklist ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.25em;
	width: 20px;
	height: 20px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234F7A4A' d='M20 3C10 3 4 8 4 16c0 1.6.3 3 .8 4.2l1.6-1.6C9 14 12 11.5 16 10c-3.4 2.2-6.2 5.2-8.3 9.6C9 20.5 10.5 21 12 21c7 0 9-7 8-18z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Rolling South Downs line above or below a section */
.tgr-downs-top,
.tgr-downs-bottom { position: relative; }

.tgr-downs-top::before,
.tgr-downs-bottom::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 60px;
	pointer-events: none;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	z-index: 1;
}

/* Hills in Downs Green, sitting on top of the section */
.tgr-downs-top::before {
	top: -58px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath fill='%23A9B89A' d='M0 60V38C120 18 240 8 380 20s250 30 380 14S1000 0 1200 26v34z'/%3E%3Cpath fill='%2323452B' d='M0 60V46C160 30 300 26 460 40s300 16 440 2 220-18 300-6v18z'/%3E%3C/svg%3E");
}

/* Hills at the bottom of a section, in cream, to lead into a cream section below */
.tgr-downs-bottom::after {
	bottom: -1px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath fill='%23F3EBD7' d='M0 60V40C150 22 300 14 460 28s300 22 440 6 220-20 300-8v34z'/%3E%3C/svg%3E");
}

/* Before / after image pairs: add to a Row with two Image modules */
.tgr-before-after .et_pb_image { position: relative; }
.tgr-before-after .et_pb_image .et_pb_image_wrap { border-radius: var(--tgr-radius); overflow: hidden; }
.tgr-before-after .et_pb_column:first-child .et_pb_image::after,
.tgr-before-after .et_pb_column:last-child .et_pb_image::after {
	position: absolute;
	top: 14px;
	left: 14px;
	padding: 6px 14px 4px;
	border-radius: var(--tgr-radius-pill);
	font-family: var(--tgr-font-body);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}
.tgr-before-after .et_pb_column:first-child .et_pb_image::after { content: "Before"; background: var(--tgr-chalk); color: var(--tgr-green); }
.tgr-before-after .et_pb_column:last-child .et_pb_image::after { content: "After"; background: var(--tgr-green); color: var(--tgr-cream); }

/* Testimonial styling */
body .et_pb_testimonial {
	background-color: var(--tgr-chalk);
	border-radius: var(--tgr-radius);
	color: var(--tgr-soil);
}
body .et_pb_testimonial_description_inner { font-family: var(--tgr-font-heading); font-style: italic; font-size: 1.1rem; }
body .et_pb_testimonial_author { font-family: var(--tgr-font-body); color: var(--tgr-green); }

/* ---------- Mobile ---------- */
@media (max-width: 980px) {
	html body { font-size: 16px; }
	.tgr-card { padding: 26px 22px; }
	.tgr-downs-top::before, .tgr-downs-bottom::after { height: 36px; }
	.tgr-downs-top::before { top: -34px; }
}

/* ---------- Footer layout helpers ---------- */
.tgr-footer-links ul,
ul.tgr-footer-links { list-style: none; padding-left: 0; margin: 0; }
.tgr-footer-links li { padding: 0 0 8px; }
.tgr-bg-green .tgr-footer-links a { color: var(--tgr-cream); text-decoration: none; }
.tgr-bg-green .tgr-footer-links a:hover { color: var(--tgr-sage); }
.tgr-bg-green h4 { font-size: 1.05rem; letter-spacing: 0.02em; }

.tgr-footer-bottom {
	margin-top: 30px;
	padding-top: 22px;
	border-top: 1px solid rgba(243, 235, 215, 0.2);
	font-size: 14px;
	color: var(--tgr-sage);
}
.tgr-footer-bottom a { color: var(--tgr-sage); }

/* ---------- Header layout helpers ---------- */
.et_pb_section.tgr-header {
	background-color: var(--tgr-cream);
	border-bottom: 1px solid rgba(35, 69, 43, 0.12);
}
.tgr-wordmark,
.tgr-wordmark a {
	font-family: var(--tgr-font-heading);
	font-weight: 600;
	font-size: 24px;
	line-height: 1.1;
	color: var(--tgr-green);
	text-decoration: none;
	padding-bottom: 0;
}
.tgr-wordmark a:hover { color: var(--tgr-moss); }
.tgr-header .et_pb_menu .et_pb_menu__menu > nav > ul { justify-content: center; }
.tgr-header .et_pb_menu { background-color: transparent; }
.tgr-header .et_pb_button { padding: 0.7em 1.4em 0.6em; font-size: 13px; }
.tgr-header .et_pb_column:last-child { display: flex; justify-content: flex-end; }

@media (max-width: 767px) {
	.tgr-header .tgr-header-cta,
	.tgr-header .et_pb_column:last-child { display: none; }
	.tgr-wordmark, .tgr-wordmark a { font-size: 20px; }
}

/* ==========================================================================
   v1.0.3 fixes: Divi's default blue accent leaking into buttons, menus and
   the classic footer; white Menu module background in the header.
   ========================================================================== */
html body #page-container .et_pb_button,
html body .et-l .et_pb_button {
	color: var(--tgr-cream) !important;
	background-color: var(--tgr-green) !important;
	border-color: var(--tgr-green) !important;
}
html body #page-container .et_pb_button:hover,
html body .et-l .et_pb_button:hover {
	color: var(--tgr-chalk) !important;
	background-color: var(--tgr-moss) !important;
	border-color: var(--tgr-moss) !important;
}
html body #page-container .tgr-bg-green .et_pb_button,
html body .et-l .tgr-bg-green .et_pb_button {
	color: var(--tgr-green) !important;
	background-color: var(--tgr-cream) !important;
	border-color: var(--tgr-cream) !important;
}
html body #page-container .tgr-bg-green .et_pb_button:hover,
html body .et-l .tgr-bg-green .et_pb_button:hover {
	color: var(--tgr-green-dark) !important;
	background-color: var(--tgr-sage) !important;
	border-color: var(--tgr-sage) !important;
}
html body #page-container .tgr-btn-outline .et_pb_button,
html body #page-container .tgr-btn-outline.et_pb_button {
	background-color: transparent !important;
	color: var(--tgr-green) !important;
}

/* Header: menu sits on the cream bar, no white box */
.tgr-header .et_pb_menu,
.tgr-header .et_pb_menu .et_pb_menu_inner_container,
.tgr-header .et_pb_menu__wrap,
.tgr-header .et_pb_menu .et-menu-nav {
	background: transparent !important;
}
.tgr-header .et_pb_menu .et-menu > li > a { padding-top: 10px; padding-bottom: 10px; }
.tgr-wordmark a:focus:not(:focus-visible) { outline: none; }

/* Classic Divi footer (only shows where no Theme Builder footer is applied) */
#main-footer .footer-widget h4,
#main-footer .widget-title,
#main-footer .footer-widget h2 { color: var(--tgr-cream); }
#main-footer .footer-widget li:before { border-color: var(--tgr-sage); }
#main-footer .footer-widget a { color: var(--tgr-cream); }
.et-social-icon a { color: var(--tgr-sage); }

/* v1.0.4: keep button padding identical on hover (Divi adds extra padding for its hover arrow) */
html body #page-container .et_pb_button,
html body #page-container .et_pb_button:hover,
html body .et-l .et_pb_button,
html body .et-l .et_pb_button:hover {
	padding: 0.85em 2em 0.75em !important;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}
html body #page-container .et_pb_button:after,
html body #page-container .et_pb_button:hover:after,
html body .et-l .et_pb_button:after,
html body .et-l .et_pb_button:hover:after {
	display: none !important;
	content: none !important;
}
html body #page-container .tgr-header .et_pb_button,
html body #page-container .tgr-header .et_pb_button:hover,
html body .et-l .tgr-header .et_pb_button,
html body .et-l .tgr-header .et_pb_button:hover {
	padding: 0.7em 1.4em 0.6em !important;
}

/* v1.0.5: button colour classes that override the section defaults.
   Add to the Button module's Advanced > CSS Class. */
html body #page-container .tgr-btn-dark.et_pb_button,
html body #page-container .tgr-btn-dark .et_pb_button,
html body #page-container .tgr-bg-green .tgr-btn-dark.et_pb_button,
html body #page-container .tgr-bg-green .tgr-btn-dark .et_pb_button,
html body .et-l .tgr-btn-dark.et_pb_button,
html body .et-l .tgr-btn-dark .et_pb_button {
	background-color: var(--tgr-green-dark) !important;
	border-color: var(--tgr-sage) !important;
	color: var(--tgr-cream) !important;
}
html body #page-container .tgr-btn-dark.et_pb_button:hover,
html body #page-container .tgr-btn-dark .et_pb_button:hover,
html body .et-l .tgr-btn-dark.et_pb_button:hover,
html body .et-l .tgr-btn-dark .et_pb_button:hover {
	background-color: var(--tgr-moss) !important;
	border-color: var(--tgr-moss) !important;
	color: var(--tgr-chalk) !important;
}
html body #page-container .tgr-btn-light.et_pb_button,
html body #page-container .tgr-btn-light .et_pb_button,
html body .et-l .tgr-btn-light.et_pb_button,
html body .et-l .tgr-btn-light .et_pb_button {
	background-color: var(--tgr-cream) !important;
	border-color: var(--tgr-cream) !important;
	color: var(--tgr-green) !important;
}
html body #page-container .tgr-btn-light.et_pb_button:hover,
html body #page-container .tgr-btn-light .et_pb_button:hover,
html body .et-l .tgr-btn-light.et_pb_button:hover,
html body .et-l .tgr-btn-light .et_pb_button:hover {
	background-color: var(--tgr-sage) !important;
	border-color: var(--tgr-sage) !important;
	color: var(--tgr-green-dark) !important;
}

/* ==========================================================================
   v1.0.6: South Downs hills redrawn.
   The front hill now takes the section's own background colour (so it works on
   green, brown or any colour) and overlaps the section by 2px, removing the
   thin seam lines. The sage ridge sits behind it.
   ========================================================================== */
.tgr-downs-top::before,
.tgr-downs-top::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -60px;
	height: 62px;
	pointer-events: none;
	background-image: none;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}
/* Front hill: same colour as the section */
.tgr-downs-top::before {
	background-color: inherit;
	z-index: 2;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 62' preserveAspectRatio='none'%3E%3Cpath d='M0 62V46C160 30 300 26 460 40s300 16 440 2 220-18 300-6v26z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 62' preserveAspectRatio='none'%3E%3Cpath d='M0 62V46C160 30 300 26 460 40s300 16 440 2 220-18 300-6v26z'/%3E%3C/svg%3E");
}
/* Back ridge in sage, ending well inside the front hill so no edge shows */
.tgr-downs-top::after {
	background-color: var(--tgr-sage);
	z-index: 1;
	bottom: auto;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 62' preserveAspectRatio='none'%3E%3Cpath d='M0 52V38C120 18 240 8 380 20s250 30 380 14S1000 0 1200 26v26z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 62' preserveAspectRatio='none'%3E%3Cpath d='M0 52V38C120 18 240 8 380 20s250 30 380 14S1000 0 1200 26v26z'/%3E%3C/svg%3E");
}
@media (max-width: 980px) {
	.tgr-downs-top::before,
	.tgr-downs-top::after { top: -36px; height: 38px; }
}
/* Note: tgr-downs-bottom can't be combined with tgr-downs-top on the same section. */