/*
Theme Name: Kaya Coaching
Theme URI: https://pennylamont.com/themes/kaya-coaching/
Description: A feminine, boho Divi 5 child theme for coaches, therapists and course creators. Warm greige neutrals with a clay accent, Cormorant Garamond display over Belleza running text, ghost buttons, hairline rules and arch-framed imagery. Seven demo pages, a Theme Builder header and footer, global colours, design variables and module presets included.
Author: PennyLamont
Author URI: https://pennylamont.com/
Template: Divi
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kaya-coaching
Tags: two-columns, custom-menu, featured-images, translation-ready, blog
*/

/* -------------------------------------------------------------------------
   Where the styling lives

   Almost everything in this theme is styled in Divi itself: global colours,
   design variables, global fonts and global module presets. That is what keeps
   the design editable in the Visual Builder for the buyer.

   Only rules Divi's module options genuinely cannot express belong in this
   file. Keep it short, keep it commented, and never move module styling here.
   ---------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   1. Header call-to-action

   The last item in the primary menu carries the class kaya-menu-cta, set in
   Appearance > Menus, and renders as a ghost button rather than a plain link.
   Divi's Menu module has no button slot and a second column cannot be aligned
   reliably in the Theme Builder, so this is the one part of the header that
   cannot be done with module options.

   Every colour below is one of Divi's own global colour variables, so a buyer
   who changes the palette under Divi > Theme Options gets a matching button
   without editing any CSS. The hex after each comma is only a fallback for the
   moment before Divi's variables load.

   To turn the button back into an ordinary menu item, remove the kaya-menu-cta
   class from the menu item - no CSS change needed.
   ---------------------------------------------------------------------- */

.et_pb_menu .et-menu > li.kaya-menu-cta {
	margin-left: 16px;
	/* Divi stretches every menu item to the full height of the bar. The button
	   should sit centred in that band rather than filling it. */
	align-self: center;
	align-items: center;
}

.et_pb_menu .et-menu > li.kaya-menu-cta > a {
	/*
	 * Inside the Visual Builder, Divi scopes its menu rules behind the #et-boc
	 * ID, and an ID outranks any class selector - so on the builder canvas its
	 * padding, display and line-height win and the button renders full height.
	 * These three are forced so the button looks the same in the builder as it
	 * does on the front end, which matters for whoever buys the theme. Every
	 * other property below wins on its own and is left alone.
	 */
	display: inline-block !important;
	padding: 12px 26px !important;
	line-height: 1.2 !important;
	border: 1px solid var(--gcid-secondary-color, #C3B7A8);
	border-radius: 0;
	color: var(--gcid-heading-color, #3B3733);
	opacity: 1;
	transition:
		background-color 0.3s ease-in-out,
		border-color 0.3s ease-in-out,
		color 0.3s ease-in-out;
}

/* Divi draws an underline bar under menu links on hover; the button does not
   want one. */
.et_pb_menu .et-menu > li.kaya-menu-cta > a::before {
	display: none;
}

/* The header button deliberately has no hover arrow - the Button modules in
   the page content do, but the nav is meant to stay quiet. Divi's underline
   bar is drawn with ::after, so it is switched off here alongside ::before. */
.et_pb_menu .et-menu > li.kaya-menu-cta > a::after {
	display: none;
}

.et_pb_menu .et-menu > li.kaya-menu-cta > a:hover {
	background-color: var(--gcid-body-color, #5A544C);
	border-color: var(--gcid-body-color, #5A544C);
	color: var(--gcid-8ff7d452-34a8-49f3-aef6-e5cdf0514c38, #FFFDFA);
	opacity: 1;
}

/* Keyboard users get the same affordance as mouse users. */
.et_pb_menu .et-menu > li.kaya-menu-cta > a:focus-visible {
	outline: 1px solid var(--gcid-link-color, #B07A60);
	outline-offset: 3px;
}

/* In the mobile panel the items are stacked full-width rows, so the button is
   inset rather than stretched edge to edge. */
.et_pb_menu .et_mobile_menu li.kaya-menu-cta > a {
	display: inline-block;
	margin: 12px 0 14px;
	padding: 12px 26px;
	border: 1px solid var(--gcid-secondary-color, #C3B7A8);
	border-radius: 0;
}

.et_pb_menu .et_mobile_menu li.kaya-menu-cta {
	border-bottom: none;
}


/* -----------------------------------------------------------------------------
 * Minimum readable type (kaya-minimum-type)
 *
 * The theme's floor for running text is 18px. Two places set a smaller size in
 * Divi's own CSS and expose no module control to change it, so they are lifted
 * here rather than left below the floor. Everything else is set in Divi.
 * -------------------------------------------------------------------------- */

/* Email Optin: the small print under the form. Divi ships it at 14px and the
   module has no font group for it - only its text content is editable. */
.et_pb_newsletter_footer,
.et_pb_newsletter_footer p {
	font-size: 18px;
	line-height: 1.6em;
}



/* -----------------------------------------------------------------------------
 * Blog "Read More" link (kaya-read-more)
 *
 * The Blog module offers only an on/off switch for this link - no styling group -
 * so it is matched to the Arrow Link button preset here: hairline underline,
 * clay on hover, and the same hover arrow. Its typography comes from the Blog
 * module's own font settings, and its colours from the global palette, so both
 * still follow whatever a buyer changes in Divi.
 * -------------------------------------------------------------------------- */

.et_pb_post .more-link {
	position: relative;
	/* Divi scopes its blog link rules behind #page-container, which outranks a
	   class selector, so these two properties need the override. */
	display: inline-flex !important;
	align-items: center;
	line-height: 1.2;
	padding-bottom: 7px;
	border-bottom: 1px solid var(--gcid-secondary-color, #C3B7A8);
	transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.et_pb_post .more-link:hover {
	border-bottom-color: var(--gcid-link-color, #B07A60);
}

/* The glyph is positioned absolutely, exactly as Divi does it on .et_pb_button,
   so the link does not change width on hover and the underline stays put.
   Only opacity animates - the same as the buttons. */
.et_pb_post .more-link::after {
	content: "\24";
	font-family: ETmodules;
	/* Same 10px as the button labels, so the glyph matches Divi's exactly. */
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	line-height: 12px;
	color: var(--gcid-link-color, #B07A60);
	position: absolute;
	left: 100%;
	top: 0;
	margin-left: 3px;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}

.et_pb_post .more-link:hover::after {
	opacity: 1;
}

.et_pb_post .more-link:focus-visible {
	outline: 1px solid var(--gcid-link-color, #B07A60);
	outline-offset: 3px;
}