/*------------------------------------------------------------------------------------- 
Theme Name: Kidsa Child Theme
Theme URI:		 https://gramentheme.com/wp/kidsa/
Description:	 Kidsa - Kindergarten School WordPress Theme
Author:			 Gramentheme
Author URI:		 https://gramentheme.com/
Template:		 kidsa
Version:		 1.0.0
Text Domain:	 kidsa-child-theme
-------------------------------------------------------------------------------------*/
/*
    Please Add your custom styles here
*/

/* =====================================================================
   KIDSPOT — Article typography
   Scope: single blog post content only (.blog-single-content-wrap).
   Elementor-built pages are untouched.
   ===================================================================== */

.blog-single-content-wrap .entry-content {
	--kp-accent:      #2f6a48; /* deepened sage, WCAG AA on white */
	--kp-accent-soft: #7fb894;
	--kp-ink:         #33403a;
	--kp-ink-soft:    #5d6b64;

	font-size: 17px;
	line-height: 1.8;
	color: var(--kp-ink);
}

/* ---------- Paragraphs ---------- */
.blog-single-content-wrap .entry-content p {
	margin: 0 0 1.35em;
	font-size: 17px;
	line-height: 1.8;
	color: var(--kp-ink);
}

/* Opening paragraph reads as a lead */
.blog-single-content-wrap .entry-content > p:first-of-type {
	font-size: 19px;
	line-height: 1.75;
	color: #2b3833;
}

/* ---------- Headings ---------- */
.blog-single-content-wrap .entry-content h2 {
	position: relative;
	margin: 2.4em 0 .7em;
	padding-left: 16px;
	font-size: 28px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--kp-accent);
}

.blog-single-content-wrap .entry-content h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: .18em;
	bottom: .18em;
	width: 5px;
	border-radius: 3px;
	background: var(--kp-accent-soft);
}

.blog-single-content-wrap .entry-content h3 {
	margin: 1.9em 0 .5em;
	font-size: 20px;
	line-height: 1.4;
	font-weight: 700;
	color: #24503a;
}

.blog-single-content-wrap .entry-content h2:first-child,
.blog-single-content-wrap .entry-content h3:first-child {
	margin-top: 0;
}

/* ---------- Lists ----------
   The parent theme sets list-style:none globally for its menus, which
   also strips markers from article lists. Rather than fight that, draw
   the markers explicitly. .post-meta is the theme's own meta row and is
   deliberately excluded.                                              */
.blog-single-content-wrap .entry-content ul:not(.post-meta),
.blog-single-content-wrap .entry-content ol {
	margin: 0 0 1.5em;
	padding-left: 0;
	list-style: none;
}

.blog-single-content-wrap .entry-content ul:not(.post-meta) li {
	position: relative;
	padding-left: 1.75em;
	margin-bottom: .55em;
	line-height: 1.75;
}

.blog-single-content-wrap .entry-content ul:not(.post-meta) li::before {
	content: "";
	position: absolute;
	left: .35em;
	top: .72em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--kp-accent-soft);
}

.blog-single-content-wrap .entry-content ol {
	counter-reset: kp-item;
}

.blog-single-content-wrap .entry-content ol li {
	position: relative;
	padding-left: 1.9em;
	margin-bottom: .55em;
	line-height: 1.75;
	counter-increment: kp-item;
}

.blog-single-content-wrap .entry-content ol li::before {
	content: counter(kp-item) ".";
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
	color: var(--kp-accent);
}

/* ---------- Links ---------- */
.blog-single-content-wrap .entry-content p a,
.blog-single-content-wrap .entry-content li a {
	color: var(--kp-accent);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--kp-accent-soft);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: color .18s ease, text-decoration-color .18s ease;
}

.blog-single-content-wrap .entry-content p a:hover,
.blog-single-content-wrap .entry-content p a:focus,
.blog-single-content-wrap .entry-content li a:hover,
.blog-single-content-wrap .entry-content li a:focus {
	color: #1f4d33;
	text-decoration-color: #1f4d33;
}

/* ---------- Inline emphasis ---------- */
.blog-single-content-wrap .entry-content p em {
	font-style: italic;
	color: var(--kp-ink-soft);
}

.blog-single-content-wrap .entry-content strong {
	font-weight: 700;
	color: #24503a;
}

/* ---------- Images ---------- */
.blog-single-content-wrap .entry-content img {
	max-width: 100%;
	height: auto;
	border-radius: 14px;
	box-shadow: 0 8px 24px rgba(35, 63, 48, .12);
	margin: .6em 0 1.4em;
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {

	.blog-single-content-wrap .entry-content,
	.blog-single-content-wrap .entry-content p {
		font-size: 16px;
	}

	.blog-single-content-wrap .entry-content > p:first-of-type {
		font-size: 17px;
	}

	.blog-single-content-wrap .entry-content h2 {
		font-size: 23px;
		padding-left: 12px;
	}

	.blog-single-content-wrap .entry-content h3 {
		font-size: 18px;
	}
}


/* =====================================================================
   Decorative overlay hardening (Elementor)

   The layouts use ~22 absolutely-positioned decorative images per page
   at z-index:1. Their offsets are tuned for wide desktops, so between
   Elementor's tablet breakpoint (1025px) and roughly 1400px they drift
   on top of card text — e.g. the doodle landing on the team member
   names in the "Μαζί για την ανάπτυξη κάθε παιδιού" section.
   ===================================================================== */

/* 1. Decorative images must never intercept a click or tap. */
.elementor-absolute.elementor-widget-image {
	pointer-events: none;
}

/* 2. NOTE: an earlier version lifted heading/text/button widgets to
      position:relative;z-index:2 as belt-and-braces. That backfired —
      widgets share the same z-index, so a later heading in the DOM
      began painting over the "Κλείστε ραντεβού" button and made it
      unclickable. Hiding the colliding decorations (rule 3) and
      disabling their pointer events (rule 1) is sufficient on its own,
      so the blanket lift has been removed rather than patched. */

/* 3. In the band where the fixed offsets no longer match the layout,
      hide the desktop-only decorations outright. Decorations the design
      also shows on tablet/mobile are left alone. */
@media (min-width: 1025px) and (max-width: 1399.98px) {

	.elementor-absolute.elementor-widget-image.elementor-hidden-tablet.elementor-hidden-mobile {
		display: none !important;
	}
}

/* =====================================================================
   Team bio modal — session photo framing

   The session photos are tall portraits (1708x2560) shown in a wide,
   short letterbox, so only about a quarter of each is ever visible.
   The base rule uses height:45vh with object-position:center center,
   which means the visible window shrinks as the viewport gets shorter
   and always lands on the vertical middle of the photo. On low desktop
   resolutions that middle is chest height, so heads get cut off.

   Fixed by anchoring each photo where its subject actually is, and by
   stopping the box collapsing on short screens.

   NOTE: adding a new team member? Add a line here for their photo, or
   it falls back to the 35% default below. The modal reuses the same
   bio-img-* classes for everyone, so the filename is the only handle.
   ===================================================================== */

.bio-action-photo {
	/* 45vh alone collapses to ~290px on a 1366x768 laptop. */
	min-height: 320px !important;
	/* Safer default than dead centre: faces usually sit high in frame. */
	object-position: center 35% !important;
}

/* Σεβίνα Παναγιώτου — seated, face high in frame. */
.bio-action-photo[src*="sev2"] {
	object-position: center 28% !important;
}

/* Κλειώ Χατζηαράπη — shot from behind, subject low in frame. */
.bio-action-photo[src*="kleio3"] {
	object-position: center 62% !important;
}

/* 3b. The rainbow beside the FAQ on Σχετικά is a special case. It is
       anchored to the right edge of a full-width container, so it lands
       on the accordion answer at EVERY desktop width — measured as a
       full 240x234 overlap at 1474, 1674, 1894 and 2374px. Rule 3 only
       hides it below 1400, so above that it kept colliding.

       Moved up clear of the accordion instead of hidden, and opted back
       in below 1400 so it stays visible there too.

       Two things to know about this rule:
       - It adjusts `top`, not `transform`. The element runs the
         float-bob-y animation, which animates transform; overriding
         transform would freeze the bobbing.
       - The selector repeats rule 3's four classes because that rule is
         more specific, and !important alone would not beat it. */
@media (min-width: 1025px) {

	.elementor-absolute.elementor-widget-image.elementor-hidden-tablet.elementor-hidden-mobile.elementor-element-f7896e4 {
		display: block !important;
		top: -80px !important; /* was 200px; clears the FAQ by ~26px */
	}
}

/* =====================================================================
   Off-canvas (burger) menu — contact details

   The theme applies text-transform:capitalize to the contact list, which
   uppercases the first letter of every word. Harmless on the address,
   but it renders the email as "Info@kidspot.gr". The address is already
   correctly capitalised in the source and the phone is numeric, so
   clearing the transform on all three is safe.
   ===================================================================== */

.offcanvas__contact ul li .offcanvas__contact-text,
.offcanvas__contact ul li .offcanvas__contact-text a {
	text-transform: none !important;
}

/* 4. Long Greek compounds shouldn't be able to force horizontal
      overflow, which body{overflow-x:hidden} would silently clip. */
.elementor-heading-title,
.elementor-widget-text-editor,
.blog-single-content-wrap .entry-content {
	overflow-wrap: break-word;
}