/*
 Theme Name:   Divi Child - Giles Farnaby
 Theme URI:    https://www.elegantthemes.com/gallery/divi/
 Description:  Child theme of Divi for Giles Farnaby Music School, Burton upon Trent. Follows the school's Brand and Website Guidelines.
 Author:       Gail
 Template:     Divi
 Version:      1.2.0
 Text Domain:  divi-child-gfms
*/

/* ==========================================================================
   1. SELF-HOSTED FONTS (Cinzel + Lato, SIL Open Font Licence)
   Hosted in /fonts so no visitor IP addresses are sent to Google.
   Mention this in the privacy policy. Also turn off any Google Fonts
   loading in Divi so the fonts aren't fetched twice.
   ========================================================================== */
@font-face {
	font-family: "Cinzel";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/cinzel-latin-400-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Cinzel";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("fonts/cinzel-latin-500-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Lato";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/lato-latin-400-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Lato";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/lato-latin-700-normal.woff2") format("woff2");
}

/* ==========================================================================
   2. BRAND VARIABLES
   Contrast: gold on charcoal 6.75, cream on charcoal 12.21,
   charcoal on gold 6.75, charcoal on cream 12.21, dark gold on cream 4.67.
   Plain gold on cream is 1.81:1 - decoration only (borders, dividers, icons).
   ========================================================================== */
:root {
	--gfms-gold:      #E0AD55;
	--gfms-charcoal:  #2C2D2F;
	--gfms-cream:     #F5F1E6;
	--gfms-dark-gold: #8E641A;   /* headings and links on cream */
	--gfms-gold-hover:#C99A44;   /* primary button hover; charcoal text 5.38:1 */
	--gfms-white:     #FFFFFF;
	--gfms-rule:      rgba(44, 45, 47, 0.15);

	--gfms-font-heading: "Cinzel", Georgia, "Times New Roman", serif;
	--gfms-font-body:    "Lato", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* ==========================================================================
   3. BASE: page, body text, headings (sizes per the guidelines)
   Divi's Theme Customizer can override these. If something doesn't change,
   clear Divi's static CSS cache and check Divi > Theme Customizer > Typography.
   ========================================================================== */
body,
#page-container {
	background-color: var(--gfms-cream);
}

body,
#main-content,
.et_pb_text,
.et_pb_module p {
	font-family: var(--gfms-font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.6;
	color: var(--gfms-charcoal);
}

/* Cinzel: page titles (H1) and section headings (H2) */
#main-content h1,
#main-content h2,
.et_pb_module h1,
.et_pb_module h2 {
	font-family: var(--gfms-font-heading);
	font-weight: 500;
	letter-spacing: 0.5px;
	line-height: 1.2;
	color: var(--gfms-dark-gold);          /* on cream */
}
#main-content h1, .et_pb_module h1 { font-size: 36px; }
#main-content h2, .et_pb_module h2 { font-size: 28px; }

/* Lato bold: sub-headings (H3) */
#main-content h3,
.et_pb_module h3 {
	font-family: var(--gfms-font-body);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.3;
	color: var(--gfms-charcoal);
}

small, figcaption, .wp-caption-text, .et_pb_image_caption {
	font-size: 14px;
}

/* Links in body text on cream: dark gold, underlined */
.et_pb_text a,
.entry-content p a,
#main-content p a {
	color: var(--gfms-dark-gold);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.et_pb_text a:hover,
.entry-content p a:hover,
#main-content p a:hover {
	color: var(--gfms-charcoal);
}

/* ==========================================================================
   4. DARK SECTIONS
   Add class gfms-dark to a Divi section (Advanced > CSS Class) for
   charcoal sections. Text flips to cream; headings and links to gold.
   ========================================================================== */
.gfms-dark,
.gfms-dark.et_pb_section {
	background-color: var(--gfms-charcoal);
}
.gfms-dark,
.gfms-dark p,
.gfms-dark .et_pb_text {
	color: var(--gfms-cream);
}
.gfms-dark h1,
.gfms-dark h2,
.gfms-dark .et_pb_module h1,
.gfms-dark .et_pb_module h2 {
	color: var(--gfms-gold);
}
.gfms-dark h3,
.gfms-dark .et_pb_module h3 {
	color: var(--gfms-cream);
}
.gfms-dark .et_pb_text a,
.gfms-dark p a {
	color: var(--gfms-gold);
}
.gfms-dark .et_pb_text a:hover,
.gfms-dark p a:hover {
	color: var(--gfms-cream);
}

/* Cream section (explicit) */
.gfms-cream,
.gfms-cream.et_pb_section {
	background-color: var(--gfms-cream);
}

/* ==========================================================================
   5. BUTTONS
   Primary: gold fill, charcoal Lato bold text.
   Secondary: add class gfms-btn-secondary to the Button module.
   Charcoal border/text on cream; gold border/text on dark.
   ========================================================================== */
.et_pb_button,
.et_pb_module .et_pb_button,
.et_pb_contact_submit,
input[type="submit"],
button[type="submit"] {
	background-color: var(--gfms-gold);
	color: var(--gfms-charcoal) !important;
	border: 2px solid var(--gfms-gold);
	border-radius: 4px;
	font-family: var(--gfms-font-body);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.3;
	padding: 12px 24px;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.et_pb_button:hover,
.et_pb_module .et_pb_button:hover,
.et_pb_contact_submit:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
	background-color: var(--gfms-gold-hover);
	border-color: var(--gfms-gold-hover);
	color: var(--gfms-charcoal) !important;
	padding: 12px 24px;      /* stop Divi shifting the button on hover */
}
.et_pb_button:after,
.et_pb_button:before { display: none !important; }   /* no Divi hover arrow */

/* Secondary: on cream */
.gfms-btn-secondary .et_pb_button,
.gfms-btn-secondary.et_pb_button {
	background-color: transparent;
	border-color: var(--gfms-charcoal);
	color: var(--gfms-charcoal) !important;
}
.gfms-btn-secondary .et_pb_button:hover,
.gfms-btn-secondary.et_pb_button:hover {
	background-color: var(--gfms-gold);
	border-color: var(--gfms-gold);
	color: var(--gfms-charcoal) !important;
}
/* Secondary: on dark */
.gfms-dark .gfms-btn-secondary .et_pb_button,
.gfms-dark .gfms-btn-secondary.et_pb_button {
	background-color: transparent;
	border-color: var(--gfms-gold);
	color: var(--gfms-gold) !important;
}
.gfms-dark .gfms-btn-secondary .et_pb_button:hover,
.gfms-dark .gfms-btn-secondary.et_pb_button:hover {
	background-color: var(--gfms-gold);
	color: var(--gfms-charcoal) !important;
}

/* ==========================================================================
   6. FORMS (Divi Contact Form module)
   ========================================================================== */
.et_pb_contact_form_container label,
.et_pb_contact p label {
	font-family: var(--gfms-font-body);
	font-weight: 700;
	color: var(--gfms-charcoal);
}
.et_pb_contact_form input[type="text"],
.et_pb_contact_form input[type="email"],
.et_pb_contact_form input[type="tel"],
.et_pb_contact_form textarea,
.et_pb_contact_form select,
.et_pb_contact p input,
.et_pb_contact p textarea {
	background-color: var(--gfms-white);
	color: var(--gfms-charcoal);
	border: 1px solid var(--gfms-charcoal);
	border-radius: 4px;
	padding: 12px 14px;
	font-family: var(--gfms-font-body);
	font-size: 16px;
}
.et_pb_contact_form ::placeholder { color: #5a5b5e; opacity: 1; }
.gfms-dark .et_pb_contact_form_container label { color: var(--gfms-cream); }

/* ==========================================================================
   7. FOCUS STATES (keyboard users)
   Charcoal ring on cream/white, gold ring on charcoal. Both pass 3:1.
   ========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.et_pb_button:focus-visible {
	outline: 3px solid var(--gfms-charcoal);
	outline-offset: 3px;
}
.gfms-dark a:focus-visible,
.gfms-dark button:focus-visible,
.gfms-dark .et_pb_button:focus-visible,
#main-header a:focus-visible,
#main-footer a:focus-visible,
#footer-bottom a:focus-visible {
	outline-color: var(--gfms-gold);
}

/* ==========================================================================
   8. HEADER AND MENU
   Charcoal header, gold Cinzel menu text (6.75:1). Logo: gold version on
   charcoal, at least 180px wide (set in Divi > Theme Customizer > Header).
   ========================================================================== */
#main-header,
#main-header.et-fixed-header,
#et-top-navigation {
	background-color: var(--gfms-charcoal);
	box-shadow: none;
}
#top-menu li a,
.et_pb_menu .et-menu > li > a {
	font-family: var(--gfms-font-heading);
	font-weight: 500;
	font-size: 15px;
	letter-spacing: 0.5px;
	color: var(--gfms-gold);
	opacity: 1;
}
#top-menu li a:hover,
#top-menu li:hover > a,
#top-menu li.current-menu-item > a,
#top-menu li.current-menu-ancestor > a,
.et_pb_menu .et-menu > li > a:hover {
	color: var(--gfms-gold);
	opacity: 1;
	box-shadow: inset 0 -2px 0 var(--gfms-gold);   /* gold underline, no colour change */
}
#top-menu li.current-menu-item > a { color: var(--gfms-cream); }
.mobile_menu_bar:before,
.et_pb_menu .mobile_nav .mobile_menu_bar:before { color: var(--gfms-gold); }

/* ==========================================================================
   9. TUITION DROPDOWN (standard Divi dropdown, restyled - no mega-menu)
   Cream panel, thin border, gold accent bars left and right, charcoal text.
   Selectors are Divi 4 classic; check them if the site is on Divi 5.
   ========================================================================== */
#top-menu li ul,
.nav li ul,
.et_pb_menu .et-menu li ul {
	background-color: var(--gfms-cream);
	border: 1px solid var(--gfms-rule);
	border-top: 0;
	border-left: 4px solid var(--gfms-gold);
	border-right: 4px solid var(--gfms-gold);
	box-shadow: none;
	padding: 12px 0;
	width: 280px;
}
#top-menu li li a,
.nav li li a,
.et_pb_menu .et-menu li li a {
	font-family: var(--gfms-font-body);
	font-weight: 400;
	font-size: 16px;
	letter-spacing: 0;
	color: var(--gfms-charcoal);
	padding: 10px 22px;
	width: 100%;
	box-shadow: none;
}
#top-menu li li a:hover,
.nav li li a:hover,
.et_pb_menu .et-menu li li a:hover {
	background-color: var(--gfms-white);
	color: var(--gfms-charcoal);
	box-shadow: none;
}
/* Keyboard access: show the dropdown when a link inside has focus */
#top-menu li:focus-within > ul,
.nav li:focus-within > ul {
	visibility: visible;
	opacity: 1;
	display: block;
}

/* Make each dropdown item fill the whole panel width, so there are no dead strips */
#top-menu li li {
	width: 100%;
	padding: 0;
	margin: 0;
}
#top-menu li li a {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 40px 10px 22px;   /* right padding leaves room for the arrow */
}

/* Third-level flyout: sit directly beside the parent panel, lined up with the item */
#top-menu li li ul {
	left: calc(100% + 4px);   /* +4px clears the gold bar */
	top: -12px;               /* matches the panel's 12px top padding */
}

/* Each dropdown item fills the full panel width, so there are no dead strips */
.et_pb_menu .et-menu li li {
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}
.et_pb_menu .et-menu li li a {
	width: 100% !important;
	box-sizing: border-box;
	padding: 10px 40px 10px 22px !important;   /* right side leaves room for the arrow */
}

/* Third-level flyout: sits directly beside the panel, lined up with its item */
.et_pb_menu .et-menu li li ul {
	left: calc(100% + 4px) !important;
	top: -12px !important;
}

/* Third-level flyout: butt straight up against the parent panel */
.et_pb_menu .et-menu li li ul {
	left: 100% !important;
	top: -12px !important;
}

/* Invisible bridge, so the mouse can never fall through a gap */
.et_pb_menu .et-menu li li ul::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -10px;
	width: 10px;
}


/* ==========================================================================
   10. FOOTER  (charcoal, cream text, gold links)
   ========================================================================== */
#main-footer,
#footer-bottom {
	background-color: var(--gfms-charcoal);
	color: var(--gfms-cream);
}
#main-footer a,
#footer-bottom a { color: var(--gfms-gold); }
#main-footer a:hover,
#footer-bottom a:hover { color: var(--gfms-cream); }
#main-footer h4,
#main-footer .widget-title { color: var(--gfms-gold); font-family: var(--gfms-font-heading); }

/* Footer text: cream on charcoal, gold links */
.gfms-footer-text,
.gfms-footer-text p,
.gfms-footer-text .et_pb_text_inner {
	color: #F5F1E6 !important;
}
.gfms-footer-text a {
	color: #E0AD55 !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.gfms-footer-text a:hover {
	color: #F5F1E6 !important;
}

/* Smaller print: add alongside gfms-footer-text for your credit line */
.gfms-footer-small,
.gfms-footer-small p,
.gfms-footer-small .et_pb_text_inner {
	font-size: 14px !important;
	line-height: 1.5;
}

/* ==========================================================================
   11. TABLET (up to 980px) AND PHONE (up to 767px)
   ========================================================================== */
@media (max-width: 980px) {
	body, #main-content, .et_pb_text, .et_pb_module p { font-size: 17px; }
	#main-content h1, .et_pb_module h1 { font-size: 30px; }
	#main-content h2, .et_pb_module h2 { font-size: 24px; }
	#top-menu li a, .et_pb_menu .et-menu > li > a { font-size: 14px; }
	.et_pb_button { font-size: 15px; }

	/* Mobile menu drawer: charcoal, gold text, gold top bar, big tap targets */
	.et_mobile_menu {
		background-color: var(--gfms-charcoal);
		border-top: 4px solid var(--gfms-gold);
	}
	.et_mobile_menu li a {
		font-family: var(--gfms-font-heading);
		font-weight: 500;
		font-size: 15px;
		color: var(--gfms-gold);
		padding: 14px 5%;
		border-bottom: 1px solid rgba(224, 173, 85, 0.25);
	}
	.et_mobile_menu li li a {
		font-family: var(--gfms-font-body);
		font-size: 16px;
		color: var(--gfms-cream);
		padding-left: 10%;
	}
}
@media (max-width: 767px) {
	body, #main-content, .et_pb_text, .et_pb_module p { font-size: 16px; }
	#main-content h1, .et_pb_module h1 { font-size: 27px; }
	#main-content h2, .et_pb_module h2 { font-size: 23px; }
	#main-content h3, .et_pb_module h3 { font-size: 18px; }
	.et_pb_button { display: block; text-align: center; }
}

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