/*
Theme Name: Hub Child - Dr. Roberto Guzmán
Theme URI: https://drrobertoguzman.com/
Description: Child theme de Hub para drrobertoguzman.com
Author: Dr. Roberto Guzmán
Template: hub
Version: 1.0.5
Text Domain: hub-child
*/

/*
 * Only rules that Hub / Elementor controls cannot express live here.
 * Colors and fonts come from the Elementor Kit globals.
 */

:root {
	--drg-logo-height: 85px;
	--drg-logo-height-mobile: 56px;
}

/* Header logo: the Figma box is 292x85 with object-fit: contain. */
#navbar .navbar-brand img,
.lqd-mobile-sec .navbar-brand img {
	width: auto;
	max-height: var(--drg-logo-height);
	object-fit: contain;
}

.lqd-mobile-sec .navbar-brand img {
	max-height: var(--drg-logo-height-mobile);
}

/*
 * Desktop header (Elementor template) vs. Hub mobile header.
 * Breakpoint = Elementor tablet breakpoint (1024px), same one Hub uses
 * for Elementor-based headers.
 */
@media (min-width: 1025px) {
	.main-header .lqd-mobile-sec {
		display: none;
	}
}

@media (max-width: 1024px) {
	.main-header > .elementor {
		display: none;
	}

	.main-header .lqd-mobile-sec {
		display: block;
	}
}

/* ---------------------------------------------------------------
 * Appointment form (Contact Form 7 "Solicitar cita", rendered by
 * the Hub "Liquid Contact Form 7" widget). Markup classes come from
 * the CF7 form template: .drg-form, .drg-field, .drg-i-*, .drg-full.
 * ------------------------------------------------------------- */
.drg-cf7 {
	--drg-field-h: 50px;
	--drg-field-border: #1e1e1e;
	--drg-field-text: #1e1e1e;
	--drg-pink: #fc74b2;
	--drg-blue: #004da7;
	--drg-light: #e1ebfa;
}

.drg-cf7 .drg-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.drg-cf7 .drg-form > p {
	position: relative;
	margin: 0;
}

.drg-cf7 .drg-full {
	grid-column: 1 / -1;
}

.elementor-element.drg-cf7 .wpcf7-form .drg-field input,
.elementor-element.drg-cf7 .wpcf7-form .drg-field select,
.elementor-element.drg-cf7 .wpcf7-form .drg-field textarea {
	width: 100%;
	height: var(--drg-field-h);
	margin: 0;
	padding: 14px 24px 14px 50px;
	border: 1px solid var(--drg-field-border);
	border-radius: 999px;
	background-color: transparent;
	color: var(--drg-field-text);
	font-size: 16px;
	line-height: 22px;
	box-shadow: none;
	opacity: 1;
	transition: border-color var(--duration-fast, 150ms) ease;
}

.elementor-element.drg-cf7 .wpcf7-form .drg-field input::placeholder,
.elementor-element.drg-cf7 .wpcf7-form .drg-field textarea::placeholder {
	color: var(--drg-field-text);
	opacity: 1;
}

.elementor-element.drg-cf7 .wpcf7-form .drg-field input:focus,
.elementor-element.drg-cf7 .wpcf7-form .drg-field select:focus,
.elementor-element.drg-cf7 .wpcf7-form .drg-field textarea:focus {
	border-color: var(--drg-pink);
	outline: 2px solid rgba(252, 116, 178, 0.35);
	outline-offset: 2px;
}

.elementor-element.drg-cf7 .wpcf7-form .drg-textarea textarea {
	height: 126px;
	border-radius: 15px !important; /* Hub forces 0 !important on .lqd-contact-form textarea */
	resize: vertical;
}

/* Field icons (18px, pink line icons from the Figma export). */
.elementor-element.drg-cf7 .wpcf7-form .drg-field::before {
	content: "";
	position: absolute;
	top: 16px;
	left: 22px;
	z-index: 1;
	width: 18px;
	height: 18px;
	background: center / contain no-repeat;
	pointer-events: none;
}

.elementor-element.drg-cf7 .wpcf7-form .drg-i-user::before { background-image: url("/wp-content/uploads/2026/11/form-icon-user.svg"); }
.elementor-element.drg-cf7 .wpcf7-form .drg-i-mail::before { background-image: url("/wp-content/uploads/2026/11/form-icon-mail.svg"); }
.elementor-element.drg-cf7 .wpcf7-form .drg-i-phone::before { background-image: url("/wp-content/uploads/2026/11/form-icon-phone.svg"); }
.elementor-element.drg-cf7 .wpcf7-form .drg-i-calendar::before { background-image: url("/wp-content/uploads/2026/11/form-icon-calendar.svg"); }
.elementor-element.drg-cf7 .wpcf7-form .drg-i-gender::before { background-image: url("/wp-content/uploads/2026/11/form-icon-gender.svg"); }
.elementor-element.drg-cf7 .wpcf7-form .drg-i-consulta::before { background-image: url("/wp-content/uploads/2026/11/form-icon-consulta.svg"); }
.elementor-element.drg-cf7 .wpcf7-form .drg-i-comment::before { background-image: url("/wp-content/uploads/2026/11/form-icon-comment.svg"); }

/* Selects: custom chevron, same look as text fields. */
.elementor-element.drg-cf7 .wpcf7-form .drg-select select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 52px;
	background: transparent url("/wp-content/uploads/2026/11/form-icon-chevron-down.svg") right 18px center / 24px no-repeat;
	cursor: pointer;
}

/* Hub replaces <select> with a jQuery UI selectmenu button. */
.elementor-element.drg-cf7 .wpcf7-form .drg-select .ui-selectmenu-button {
	display: flex;
	align-items: center;
	width: 100%;
	height: var(--drg-field-h);
	padding: 14px 52px 14px 50px;
	border: 1px solid var(--drg-field-border);
	border-radius: 999px;
	background: transparent url("/wp-content/uploads/2026/11/form-icon-chevron-down.svg") right 18px center / 24px no-repeat;
	color: var(--drg-field-text);
	font-size: 16px;
	line-height: 22px;
}

.elementor-element.drg-cf7 .wpcf7-form .drg-select .ui-selectmenu-button .ui-icon {
	display: none;
}

.elementor-element.drg-cf7 .wpcf7-form .drg-acceptance {
	font-size: 14px;
	line-height: 20px;
	color: var(--drg-field-text);
}

.elementor-element.drg-cf7 .wpcf7-form .drg-acceptance a {
	color: var(--drg-blue);
	text-decoration: underline;
}

.elementor-element.drg-cf7 .wpcf7-form .drg-submit input[type="submit"] {
	width: 100%;
	height: 48px;
	padding: 0 32px;
	border: 0;
	border-radius: 999px;
	background: var(--drg-pink);
	color: var(--drg-light);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 1.2px;
	line-height: 14px;
	cursor: pointer;
	transition: background-color var(--duration-normal, 300ms) ease;
}

.elementor-element.drg-cf7 .wpcf7-form .drg-submit input[type="submit"]:hover,
.elementor-element.drg-cf7 .wpcf7-form .drg-submit input[type="submit"]:focus-visible {
	background: var(--drg-blue);
}

.drg-cf7 .wpcf7-not-valid-tip {
	padding: 4px 0 0 24px;
	font-size: 13px;
}

.elementor-element.drg-cf7 .wpcf7-form .drg-submit .wpcf7-spinner {
	position: absolute;
	right: 12px;
	top: 12px;
}

@media (max-width: 767px) {
	.drg-cf7 .drg-form {
		grid-template-columns: 1fr;
	}
}

/* Padecimientos: caption box spans the card with a 10px inset. */
.drg-pad-caption.e-con {
	right: 10px;
	left: 10px;
	width: auto;
	max-width: none;
}

/* Anchored sections: leave room for the sticky navbar. */
[id="inicio"],
[id="sobre-mi"],
[id="servicios"],
[id="padecimientos"],
[id="opiniones"],
[id="contacto"] {
	scroll-margin-top: var(--drg-logo-height);
}