/*
Theme Name:   Cultera Child — Emilio Vargas
Theme URI:    http://vargasfundationlocal.local
Description:  Child theme for the Emilio Vargas González memorial. Intentionally carries no design of its own: the site uses Cultera's own demo layouts and styling, filled with real material. This file exists only so future tweaks survive a parent update.
Author:       Estudio
Template:     cultera
Version:      0.3.0
Text Domain:  cultera-child
*/

/* Bug fix, not styling: #titles is sized for an image logo, so the theme's own
   text fallback breaks the site name across two clipped lines ("Emi / Var"). */
#titles { width: auto; max-width: none; height: auto; overflow: visible; }
#titles h1 { white-space: nowrap; line-height: 1.2; }

/* Language fix, not styling: the theme capitalises every word in the slider
   index, which turns Spanish articles and prepositions ("de", "en", "las")
   into spelling mistakes. */
.wrapper .dots_text_yes .owl-dot,
.wpm_eleslider .owl-dot span { text-transform: none; }

/* Bug fix, not styling: the slider hard-crops to 1800x850 and assumes you feed
   it images that wide. Ours top out at 1600, so WP emits crops of differing
   widths (1023 / 1536 / 1600) at a fixed 850 height. Stretched to one display
   width those become three different heights, and the carousel takes the
   tallest — leaving ~800px of black under the shorter slides. Pinning the item
   height and letting the photograph cover fixes it for any source size. */
.wpm_eleslider .owl-item { height: 82vh; min-height: 420px; }
.wpm_eleslider .owl-item .eleinside,
.wpm_eleslider .owl-item .eleinside > a { height: 100%; display: block; }
.wpm_eleslider .owl-item img.bg_image {
	height: 100%;
	width: 100%;
	max-width: 100%;
	object-fit: cover;
	object-position: center 35%;
	margin: 0;
}

/* Layout fix: the theme sets width:100% on every form input, so CF7's consent
   checkbox swallowed the whole row (404px) and left 44px for its own label,
   which then wrapped one word per line. The checkbox goes back to its natural
   size and the text takes the rest. */
.wpcf7 .wpcf7-acceptance .wpcf7-list-item { margin: 0; display: block; }
.wpcf7 .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: .55em;
	text-align: left;
}
.wpcf7 .wpcf7-acceptance label input[type="checkbox"] {
	width: auto;
	min-width: 0;
	flex: 0 0 auto;
	display: inline-block;
	margin: .3em 0 0 0;
}
.wpcf7 .wpcf7-acceptance .wpcf7-list-item-label {
	flex: 1 1 auto;
	min-width: 0;
	display: inline;
}
.wpcf7 .wpcf7-spinner { vertical-align: middle; }

/* The theme pins the submit button with `.wpcf7-submit.wpcf7-submit
   {width:70px !important}` — doubled class plus !important — which cropped the
   label to "Enviar mi ". Beaten at (0,3,0), and !important only because the
   parent used it first. */
.wpcf7 .wpcf7-submit.wpcf7-submit {
	width: auto !important;
	min-width: 0;
	max-width: none;
	white-space: nowrap;
	padding: .85em 1.6em;
	height: auto;
}

/* reCAPTCHA. The badge is hidden — Google allows that as long as the
   attribution shows instead, which functions.php prints under the submit
   button. Typed like the footer (Roboto 13/20, #545454) because that is what
   the theme already uses for fine print, not like body copy. */
.grecaptcha-badge { visibility: hidden; }

.wpcf7 .ev-recaptcha-note,
#respond .ev-recaptcha-note {
	margin: 1.1em 0 0;
	font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 12px;
	/* The parent italicises every paragraph inside a form
	   (cultera/style.css:1990); legal fine print is not an aside. */
	font-style: normal;
	line-height: 20px;
	color: #545454;
}
/* The links are left alone: the theme already styles body links (#a89886,
   underlined) at a higher specificity than anything sensible here, and the
   notice should read like the rest of the page, not like a special case. */

/* Comments (guestbook and blog entries). Same kind of fixes as for the CF7
   form above: layout bugs against concrete parent rules, no styling. */

/* Avatars are off (see ev_body_class_avatars in functions.php), so the 80px
   gutter the parent reserves for them (style.css:1024 and 1032) is empty
   space. Close it, and give replies the indent the gutter used to provide. */
.ev-no-avatars .commentlist li.comment { padding-left: 0; }
.ev-no-avatars ul.children li.comment:last-child { padding-left: 0 !important; }
.ev-no-avatars .commentlist .children { margin-left: 40px; }

/* The website field is gone, so the parent's three 31.3% columns
   (style.css:1169) would leave a hole on the right. Two columns instead. */
#respond .comment-form-author,
#respond .comment-form-email { width: 48.5%; }
#respond .comment-form-email { margin-right: 0 !important; }

/* Checkboxes: the parent pads every input like a text field (style.css:1239)
   and gives #respond inputs a right margin (style.css:1214). Natural size,
   text beside it, same as the CF7 acceptance box. clear:both because the two
   name/email columns above are floated. */
#respond .comment-form-consent,
#respond .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: .55em;
	clear: both;
	margin: 0 0 12px;
}
#respond input[type="checkbox"] {
	width: auto;
	min-width: 0;
	flex: 0 0 auto;
	padding: 0;
	margin: .35em 0 0 0;
}
#respond .comment-form-consent label,
#respond .comment-form-cookies-consent label { flex: 1 1 auto; min-width: 0; }

/* Message shown when reCAPTCHA rejected the comment (ev_comment_form_notice
   in functions.php). Same red the parent uses for required marks
   (style.css:1200). */
#respond .ev-comment-notice { color: #ff4b33; margin: 0 0 1em; }

/* Guestbook excerpt on the home page ([ev_guestbook] in functions.php). The
   list reuses the parent's comment markup; only the spacing around it is set,
   so the Elementor button below sits at the same distance as elsewhere. */
.ev-guestbook-home { margin: 0 0 30px; }
.ev-guestbook-home .commentlist { margin-top: 0 !important; }
.ev-guestbook-home .commentlist li:last-child { margin-bottom: 0; }

/* Archive prints on the home page are shown as bare photographs (ev_photo_only
   in functions.php). The parent dims every grid image to 70% so a white title
   can sit on it (style.css:551); with no title, the print goes back to full
   strength. */
.blogger .grid_item.ev-photo-only img,
.blogger .masonry_item.ev-photo-only img { opacity: 1; }

/* ===== Guestbook wall (ev_guestbook_wall in functions.php) =====
   The entries are the parent's own blog cards without their picture
   (.item/.item_inn/.p-border, .meta). What follows sets the column widths
   Masonry reads and the few sizes the parent leaves to the loop. */
.ev-guestbook { margin: 0 0 30px; }
/* Packed with Masonry like the parent's blog cards (js/guestbook-masonry.js);
   the widths below are what Masonry reads. Without the script the cards
   float in rows. */
.ev-guestbook .blogger {
	display: block;
	margin: 0 -20px;
	width: auto;
	overflow: visible;
}
.ev-guestbook .blogger > .item {
	float: left;
	width: 33.333%;
	margin: 0;
	padding: 0 20px 40px;
	box-sizing: border-box;
	position: relative;
}
@media (max-width: 1023px) { .ev-guestbook .blogger > .item { width: 50%; } }
@media (max-width: 640px) {
	.ev-guestbook .blogger > .item { width: 100%; }
}
/* The form on the full-width guestbook page would otherwise stretch across
   the whole screen; the parent shows it at column width on posts. */
.ev-guestbook-page #respond { max-width: 820px; }
.ev-guestbook .ev-gb-text p { margin: 0 0 14px; }
.ev-guestbook .ev-gb-text p:last-child { margin-bottom: 0; }
.ev-guestbook .meta { margin: 0; }
.ev-guestbook .meta a { color: inherit; text-decoration: none; }
.ev-guestbook .ev-guestbook-empty { margin: 0 0 20px; }

/* the card itself */
.ev-guestbook--cards .item_inn { border: 1px solid #efefef; padding: 32px 34px 28px; }
.ev-guestbook--cards .ev-gb-name { margin: 22px 0 2px; line-height: 1.2; }

/* replies: tucked under their entry behind a hairline */
.ev-guestbook .ev-gb-replies { margin: 18px 0 0; padding: 0 0 0 18px; border-left: 3px solid #efefef; }
.ev-guestbook .ev-gb-reply { margin: 0 0 14px; font-size: 92%; }
.ev-guestbook .ev-gb-reply:last-child { margin-bottom: 0; }
.ev-guestbook .ev-gb-reply-name { font-weight: 700; color: #000; }
.ev-guestbook .ev-gb-replylink { margin: 16px 0 0; }
.ev-guestbook .ev-gb-replylink a.comment-reply-link { display: inline-block; margin: 0 !important; }

/* ===== "Del archivo" slider on the home page (js/archive-slider.js) =====
   The archive grid widget carries the CSS class ev-archive-slider in
   Elementor and lists every print; the script turns it into a carousel of
   pages. Until it runs, or if it never does, the grid shows the first six
   prints, as it did before the slider. */
.ev-archive-slider .blogger > .item:nth-child(n+7) { display: none; }

/* Inside the carousel the cards are no longer children of .blogger, so the
   parent's `.blogger>.item` rules that space them (style.css:525,
   style-mobile.css:275 and 365) stop applying: same values, new selector. At
   (0,3,0) it also gets past the grid's column widths (`.layout_grid_3 .item`),
   which the page below takes over. */
.ev-archive-slider .owl-item .item {
	float: none;
	clear: none;
	width: auto;
	margin: 0;
	padding: 40px;
	overflow: hidden;
	position: relative;
}
/* One page: the grid's three columns (two below 885px), laid out as a CSS
   grid instead of the parent's floats and its every-third-card clear
   (style.css:560), which would break the two-column rows. */
.ev-archive-slider .ev-archive-page {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media screen and (max-width: 1155px) {
	.ev-archive-slider .owl-item .item { padding: 20px; }
}
@media screen and (max-width: 885px) {
	.ev-archive-slider .owl-item .item { padding: 10px; }
	.ev-archive-slider .ev-archive-page { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The parent dims every image inside an Owl carousel (style.css:1657-1659)
   for its own centred carousel. The prints stay at full strength, as on the
   rest of the home page. */
.ev-archive-slider .owl-item .grid_item img { opacity: 1; }

/* Page dots: the hero slider's (eleslider.css:56-61), in the text colour
   rather than white, because here they sit on the light section and not on
   a photograph. Centred with a transform so the ring and the dot share a
   middle whatever the box size. */
.ev-archive-slider .owl-dots { text-align: center; line-height: 0; margin: 0 0 30px; }
.ev-archive-slider .owl-dot {
	display: inline-block;
	position: relative;
	width: 17px;
	height: 17px;
	margin: 0 5px;
	cursor: pointer;
	opacity: .7;
}
.ev-archive-slider .owl-dot.active { opacity: 1; }
.ev-archive-slider .owl-dot:before,
.ev-archive-slider .owl-dot.active:after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
}
.ev-archive-slider .owl-dot:before { width: 6px; height: 6px; background: #303030; }
.ev-archive-slider .owl-dot.active:after { width: 16px; height: 16px; border: 2px solid #303030; }

/* The parent only shows its arrows while the pointer is over the carousel
   (style.css:1623-1629). Reached with the keyboard instead, an arrow shows
   the same way, and so does a dot's focus. */
.ev-archive-slider .owl-nav > div:focus-visible { opacity: 1; }
.ev-archive-slider .owl-nav .owl-prev:focus-visible { left: 25px; }
.ev-archive-slider .owl-nav .owl-next:focus-visible { right: 25px; }
.ev-archive-slider .owl-nav .owl-prev:focus-visible:before,
.ev-archive-slider .owl-nav .owl-next:focus-visible:before {
	font-family: 'Arial';
	font-size: 12px;
	letter-spacing: 100px;
	line-height: 1 !important;
}
.ev-archive-slider .owl-nav .owl-prev:focus-visible:before { content: "←"; }
.ev-archive-slider .owl-nav .owl-next:focus-visible:before { content: "→"; }
.ev-archive-slider .owl-dot:focus-visible { outline: 2px solid #303030; outline-offset: 2px; }


/* ===================================================================
   Mobile
   ===================================================================
   Cultera ships a mobile stylesheet and, until the enqueue order was
   corrected in functions.php, almost none of it applied: cultera/style.css
   was loading after cultera/style-mobile.css and winning every tie at equal
   specificity. With the order fixed the parent's own phone layout does most
   of the work. What follows is the remainder — the places where the theme,
   the slider plugin or Elementor keep a desktop measurement on a phone.

   Breakpoints match whoever is being corrected: 885px is eleslider's own,
   767px is Elementor's, 685px and 480px are near the parent's. */


/* --- Home slider -------------------------------------------------- */

/* eleslider lays the caption out as a column beside the photograph:
   `left:10%; width:45%` on a left-aligned slide, `left:50%` on a right one
   (eleslider.css:28-30). Its lowest breakpoint is 885px, so those
   percentages survive all the way down — 169px of caption on a 375px
   screen, three or four words to a line, over the middle of a face. On a
   phone there is no beside: the caption sits across the full width in the
   lower part of the frame, clear of the dots at bottom:60px. */
@media screen and (max-width: 885px) {
	.wpm_eleslider .eleslideinside,
	.wpm_eleslider .eleinside_Left .eleslideinside,
	.wpm_eleslider .eleinside_Right .eleslideinside {
		top: auto;
		bottom: 110px;
		left: 20px;
		right: 20px;
		width: auto;
		text-align: left;
	}
	/* 6vw (eleslider.css:129) is 53px at the top of this range and 22px at the
	   bottom, so the name shrinks with the phone — it is the first thing on
	   the page and the reason for it. A floor, not a cap: on a tablet the vw
	   figure is still the larger of the two and still wins. */
	.wpm_eleslider .eleslideinside h2 { font-size: max(30px, 6vw); }
	/* The subtitle carries an !important of its own (eleslider.css:131), which
	   is the only reason for the one here. */
	.wpm_eleslider .eleslideinside h4 { font-size: max(15px, 4vw) !important; }
}


/* --- Elementor display headings ----------------------------------- */

/* `elementor-size-xxl` is a flat 59px on a line-height of 1 at every width
   (widget-heading.min.css) and neither home page carries a mobile value, so
   MEMORIAS, LIBRO DE VISITAS and DEL ARCHIVO come out at 59px on a 375px
   screen. Elementor's stylesheets load after the child's, so this is won on
   specificity, not order: theirs is (0,3,0), the leading `.elementor` takes
   this to (0,4,0). */
@media screen and (max-width: 767px) {
	.elementor .elementor-widget-heading .elementor-heading-title.elementor-size-xxl {
		font-size: 34px;
		line-height: 1.08;
	}
	.elementor .elementor-widget-heading .elementor-heading-title.elementor-size-xl {
		font-size: 28px;
		line-height: 1.1;
	}
}


/* --- Back to top --------------------------------------------------- */

/* The parent stretches the 50px button into a full-width bar
   (style-mobile.css:505), which reads as a yellow band pinned across the
   bottom of every page, over the content. Back to a button. */
@media only screen and (max-width: 685px) {
	.scrollTo_top { right: 16px; width: 50px; }
}


/* --- Forms --------------------------------------------------------- */

/* Neither textarea is given a typeface — the parent styles their size and
   padding and stops there — so both fall back to the browser default,
   monospace. They are the two fields the site actually asks people to write
   in, and they are the only things on it set in a typewriter face. Not a
   mobile bug, but that is where it shows. */
#respond textarea,
.wpcf7-form p textarea {
	font-family: inherit;
}

#respond textarea {
	font-size: 16px;
}

/* Safari on iOS zooms the page in when a field under 16px takes focus, and
   does not zoom back out. The parent pins CF7 fields at 12px
   (style.css:1994) with !important, which is the only reason for the
   !important here. This matters now that the viewport no longer forbids
   scaling — see ev_viewport_allows_zoom in functions.php. */
@media screen and (max-width: 767px) {
	.wpcf7-form p input,
	.wpcf7-form p textarea { font-size: 16px !important; }

	#respond input,
	#respond textarea { font-size: 16px; }

	/* 11px italic (style.css:1990) covers both the field hints and the
	   consent sentence, which is the smallest type on the site and happens
	   to be the permission the visitor is giving. */
	.wpcf7-form p { font-size: 13px; }
	#respond label { font-size: 14px; }

	/* A 13px consent box is smaller than a fingertip. */
	.wpcf7 .wpcf7-acceptance label input[type="checkbox"],
	#respond input[type="checkbox"] { width: 20px; height: 20px; }
}

/* Name and email share a row at 48.5% each (see above). Below 480px that is
   two 143px fields, so they stack instead. */
@media screen and (max-width: 480px) {
	#respond .comment-form-author,
	#respond .comment-form-email { width: 100%; }
}


/* --- Touch targets -------------------------------------------------- */

/* These run from 18px to 31px tall, against the 44px both Apple's and
   Google's guidance ask for. None of them carries a border or an underline,
   so only the space around the words changes; the words do not. This one
   block reaches 1024px rather than 767px: a tablet is still a thumb, and
   1024px is where Elementor stops calling a screen one. Inline links inside a
   sentence are left alone — the fine print under the forms, the EcuRed
   credit — because padding them would break the line they sit in. */
@media screen and (max-width: 1024px) {
	#respond input.submit,
	.wpcf7 .wpcf7-submit.wpcf7-submit { min-height: 44px; }

	/* The page's own calls to action — "Su vida", "Deja tu comentario", "Leer
	   el testimonio" — are Elementor's `elementor-size-xs`: 12px type inside
	   10px of padding, a 32px target (frontend.min.css). Their stylesheet
	   loads after this one, so again this is won on specificity, (0,3,0)
	   against their (0,2,0). */
	.elementor .elementor-button.elementor-size-xs {
		padding-top: 16px;
		padding-bottom: 16px;
	}

	.meta_more a { display: inline-block; padding: 13px 0; }

	/* The archive slider's page dots are 17px; the drawn dot stays the same
	   size and centred, only the area that takes the tap grows. */
	.ev-archive-slider .owl-dot { width: 44px; height: 44px; margin: 0; }

	/* Matched against `#comments .reply a` (style.css:1095), so the class has
	   to be named to get past it. */
	#comments .reply a.comment-reply-link { padding: 16px 14px; }

	/* Likewise `#footer .bottom-menu li a` (style.css:1347) — the `li` counts,
	   so dropping it from the selector loses the tie. */
	#footer .bottom-menu li a,
	#footer .bottom-menu li:first-child a {
		display: inline-block;
		padding: 12px 14px 12px 0;
	}
}