/*
Theme Name: Sanjula Life Coach
Author: Sanjula Manthe
Description: Block theme replica of sanjulalifecoach.com. Fully editable in the WordPress Site Editor and block editor. Activating the theme automatically creates the Home, About Me and Privacy pages, the navigation menu, and sets the homepage.
Version: 2.3.1
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sanjula-life-coach
*/

/* ---------------------------------------------------------------
   Custom styles on top of theme.json
--------------------------------------------------------------- */

/* Full-width sections flush to the screen edges (like the original site) */
.is-layout-constrained > :where(.alignfull) {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
	width: 100vw;
}

.wp-site-blocks {
	overflow-x: hidden;
}

/* No white gaps between sections (flush like the original site) */
.wp-site-blocks > * + *,
.wp-block-post-content > * + * {
	margin-block-start: 0;
}

main .wp-block-cover,
main .wp-block-group.alignfull {
	margin-top: 0;
	margin-bottom: 0;
}

@font-face {
	font-family: 'Museo-500';
	src: url('assets/fonts/Museo-500.ttf') format('truetype');
	font-weight: 400 700;
	font-display: swap;
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.has-museo-font-family {
	font-family: 'Museo-500', 'Rubik', sans-serif;
}

body {
	font-family: 'Rubik', sans-serif;
}

/* Buttons: rounded green pills like the original site */
.wp-block-button__link,
.wp-element-button {
	border-radius: 40px;
	padding: 14px 38px;
	font-family: 'Rubik', sans-serif;
	letter-spacing: 1px;
	font-weight: 500;
	transition: background-color .2s ease-in-out, color .2s ease-in-out;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
	background-color: #3d8510 !important;
	color: #ffffff !important;
}

/* Header */
.sanjula-header {
	position: sticky;
	top: 0;
	z-index: 100;
}

.sanjula-header .wp-block-navigation a {
	color: #ffffff;
	font-family: 'Rubik', sans-serif;
	font-size: 15px;
	letter-spacing: 2px;
	font-weight: 500;
}

.sanjula-header .wp-block-navigation a:hover {
	color: #e5f3d8;
}

/* Testimonial / service cards */
.sanjula-card {
	border-radius: 8px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .12);
	height: 100%;
}

/* Contact + newsletter forms (HTML blocks) */
.sanjula-form input[type="text"],
.sanjula-form input[type="email"],
.sanjula-form input[type="tel"],
.sanjula-form textarea {
	width: 100%;
	padding: 14px 16px;
	margin-bottom: 14px;
	border: 1px solid #d8d8d8;
	border-radius: 4px;
	font-family: 'Abel', sans-serif;
	font-size: 17px;
	box-sizing: border-box;
	background: #fff;
}

.sanjula-form textarea {
	min-height: 140px;
	resize: vertical;
}

.sanjula-form .sanjula-submit {
	background: #4DA614;
	color: #fff;
	border: none;
	border-radius: 40px;
	padding: 14px 42px;
	font-family: 'Rubik', sans-serif;
	font-size: 15px;
	letter-spacing: 1px;
	cursor: pointer;
}

.sanjula-form .sanjula-submit:hover {
	background: #3d8510;
}

.sanjula-form-note {
	background: #e9f7dd;
	border: 1px solid #4DA614;
	border-radius: 6px;
	padding: 14px 18px;
	margin-bottom: 18px;
	font-family: 'Rubik', sans-serif;
}

/* Footer */
.sanjula-footer a {
	color: #cfe6bd;
}

.sanjula-footer a:hover {
	color: #ffffff;
}

/* Map / calendar embed responsiveness */
.sanjula-embed iframe {
	width: 100%;
	min-height: 480px;
	border: 0;
}

/* Cover blocks keep white text readable */
.wp-block-cover, .wp-block-cover-image {
	color: #ffffff;
}

/* Gutter so full-width sections never touch the screen edges */
main .wp-block-cover .wp-block-cover__inner-container,
.wp-block-group.alignfull > .is-layout-constrained {
	padding-left: 5vw;
	padding-right: 5vw;
}

/* Show the full photo in the "Why work with me" block instead of a cropped square */
/* Full, uncropped photos (server-side crop is disabled via Photon filters) */
.wp-block-media-text__media {
	position: relative !important;
	height: auto !important;
	align-self: center;
}

.wp-block-media-text__media img {
	position: static !important;
	display: block;
	width: 100%;
	height: auto !important;
	max-height: 480px;
	object-fit: contain;
	object-position: center;
	margin: 0 auto;
}

.wp-block-image img {
	height: auto;
	object-fit: contain;
	object-position: center;
}

/* Keep emoji in full colour (red butterfly etc.) */
img.emoji {
	display: inline-block;
	height: 1em;
	width: 1em;
	margin: 0 .05em 0 .1em;
	vertical-align: -0.1em;
}

@media (max-width: 781px) {
	.sanjula-header .wp-block-navigation__responsive-container-content a {
		color: #232323;
	}
}

/* WordPress.com / Jetpack contact form styling */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea,
.contact-form .grunion-field-wrap input,
.contact-form .grunion-field-wrap textarea {
	width: 100%;
	padding: 14px 16px;
	margin-bottom: 14px;
	border: 1px solid #d8d8d8;
	border-radius: 4px;
	font-family: 'Abel', sans-serif;
	font-size: 17px;
	box-sizing: border-box;
	background: #fff;
}

.contact-form {
	max-width: 640px;
	margin: 0 auto;
}

.contact-form .contact-submit .wp-block-button__link,
.contact-form input[type="submit"],
.contact-form button[type="submit"],
.contact-submit .wp-block-button__link {
	background: #4DA614 !important;
	color: #fff !important;
	border: none;
	border-radius: 40px;
	padding: 14px 42px;
	font-family: 'Rubik', sans-serif;
	font-size: 15px;
	letter-spacing: 1px;
	cursor: pointer;
}

.contact-form .contact-submit .wp-block-button__link:hover,
.contact-form input[type="submit"]:hover,
.contact-form button[type="submit"]:hover {
	background: #3d8510 !important;
}

/* Mobile navigation overlay: prevent blank white screen */
@media (max-width: 781px) {
	.wp-block-navigation__responsive-container.is-menu-open {
		background: #4DA614 !important;
		padding: 60px 30px 30px !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content a {
		color: #ffffff !important;
	}
	.wp-block-navigation__responsive-close,
	.wp-block-navigation__responsive-dialog,
	.wp-block-navigation__responsive-container-content {
		background: transparent !important;
	}
}