/*
Theme Name: Mom Makeover
Description: Child theme of Flatsome for mommakeover.gr (look of the 2022 picostrap5/LiveCanvas site).
Author: tsyn.dev
Template: flatsome
Version: 1.3.7
Text Domain: mommakeover
*/

/* ---- Design tokens (from the old picostrap5 bundle.css and Customizer CSS) ---- */
:root {
	--mm-pink: #e4357d;        /* primary */
	--mm-pink-dark: #b62a64;   /* link hover */
	--mm-dark: #444444;        /* secondary / "danger" text, button hover */
	--mm-footer: #303030;      /* footer band ("info") */
	--mm-blush: #f0dddf;       /* top bar ("warning") */
	--mm-grey: #f5f5f5;        /* light band ("success") */
	--mm-text: #212529;
	--mm-font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

body { font-family: var(--mm-font); font-size: 1rem; line-height: 1.5; color: var(--mm-text); }
h1, h2, h3, h4, h5, h6, .heading-font, .nav > li > a, .nav-dropdown > li > a, .alt-font { font-family: var(--mm-font); }
h1, h2, h3, h4, h5, h6 { color: inherit; letter-spacing: 0; }
a { color: var(--mm-pink); }
a:hover { color: var(--mm-pink-dark); }

/* ---- Top bar: social icons left, phone + e-mail right (desktop only) ---- */
#top-bar { font-weight: 700; }
#top-bar .html_topbar_left a + a { margin-left: .5rem; }
#top-bar .html_topbar_left img, #top-bar .mm-topbar-contact img { display: block; height: auto; }
.mm-topbar-social, .mm-topbar-contact { display: flex; align-items: center; }
.mm-topbar-contact span { display: flex; align-items: center; }
.mm-topbar-contact span + span { margin-left: 1.5rem; }
.mm-topbar-contact a { color: var(--mm-dark); font-size: .75rem; margin-left: .25rem; }
.mm-topbar-contact a:hover { color: var(--mm-pink); }

/* ---- Main navigation: black items, pink box on the current page ---- */
.header-main { box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15); }
.header-nav-main > li { margin: 0; }
.header-nav-main > li > a { color: #000; font-size: .9em; font-weight: 400; padding: 8px; letter-spacing: 0; }
.header-nav-main > li > a:hover, .header-nav-main > li.active > a { color: #000; }
/* as the old navwalker's .active: the current page, its menu parents/ancestors (ΥΠΗΡΕΣΙΕΣ on a procedure page) and BLOG on a post;
   not the language switcher, which Polylang also marks current-menu-parent */
.header:not(.transparent) .header-main .header-nav-main.nav > li:is(.current-menu-item, .current-menu-ancestor, .current-menu-parent, .current_page_parent):not(.pll-parent-menu-item) > a,
.off-canvas .nav-sidebar.nav > li:is(.current-menu-item, .current-menu-ancestor, .current-menu-parent, .current_page_parent):not(.pll-parent-menu-item) > a { background: var(--mm-pink); color: #fff; }
/* Bootstrap-style solid caret instead of Flatsome's chevron */
.header-nav-main > li.has-dropdown > a > .icon-angle-down { display: none; }
.header-nav-main > li.has-dropdown > a::after { content: ""; display: inline-block; margin-left: .255em; vertical-align: .255em;
	border-top: .3em solid; border-right: .3em solid transparent; border-left: .3em solid transparent; }
.nav-dropdown { font-size: .9em; }
.nav-dropdown > li > a, .nav-dropdown .nav-dropdown-col > ul > li > a { color: var(--mm-text); }
.nav-dropdown .nav-dropdown-col > a { color: var(--mm-pink); font-weight: 700; }
.nav-dropdown li.current-menu-item > a { color: var(--mm-pink); }

/* Mobile burger: Bootstrap-style toggler box, not Flatsome's circle */
.header-main .nav-icon .button.is-outline { border-radius: .25rem !important; /* beats Flatsome .circle */ border: 1px solid rgba(0, 0, 0, .1); color: rgba(0, 0, 0, .55);
	padding: .25rem .75rem; min-height: 0; line-height: 1; height: auto; width: auto; }
.header-main .nav-icon .button.is-outline .icon-menu { font-size: 1.6em; }
.header-main .nav-icon .button.is-outline:hover { background: none; color: rgba(0, 0, 0, .7); box-shadow: none; }

/* Mobile drawer: logo on top, black items */
.off-canvas:not(.off-canvas-center) .mfp-content { background: #fff; }
.mm-drawer-logo { text-align: center; padding: 20px 15px 10px; }
.mm-drawer-logo img { width: 146px; height: auto; }
.off-canvas .nav-sidebar > li > a { color: #000; font-size: .95em; font-weight: 400; text-transform: none; letter-spacing: 0; }
.off-canvas .nav-sidebar > li + li { border-top: 0; }
.off-canvas .nav-sidebar > li:is(.current-menu-item, .current-menu-ancestor, .current-menu-parent, .current_page_parent):not(.pll-parent-menu-item) > a { padding-left: 16px; }
.off-canvas .nav-sidebar .sub-menu a { color: var(--mm-text); }

/* ---- Certification badges slider (block mm-badges) ---- */
.mm-badges { padding: 3rem 0 1.5rem; }
.mm-badges .slider .flickity-slider > .row, .mm-badges .slider > .row { width: 100%; margin: 0 auto; max-width: 1200px; }
.mm-badges .flickity-slider > .row { top: 0; } /* rows as slides: pin them to the top of the viewport */
.mm-badges .slider:not(.flickity-enabled) > .row { display: flex; } /* Flatsome starts the slider when it scrolls into view */
.mm-badges .slider:not(.flickity-enabled) > .row ~ .row { display: none; }
.mm-badges .col { display: flex; align-items: center; justify-content: center; padding-bottom: 1rem; }
.mm-badges img { display: block; margin: 0 auto; padding: 0 1rem; }
.mm-badges .slider { margin-bottom: 3.5rem; }
/* Arrows always visible, side by side under the logos (as the old Bootstrap carousel) */
.mm-badges .flickity-prev-next-button { opacity: 1; transform: none; top: auto; bottom: -3.5rem; width: 2.5rem; height: 2.5rem; margin: 0; padding: 0; color: #212529; }
.mm-badges .flickity-prev-next-button.previous { left: calc(50% - 3.25rem); right: auto; }
.mm-badges .flickity-prev-next-button.next { right: calc(50% - 3.25rem); left: auto; }
.mm-badges .flickity-prev-next-button svg { color: #6c757d; opacity: .9; }

/* ---- Footer (block mm-footer) ---- */
.mm-footer { background: var(--mm-footer); color: #f8f9fa; padding: 3rem 0; font-size: .875rem; }
.mm-footer .row { max-width: 1200px; }
.mm-footer p { margin-bottom: 1rem; }
.mm-footer a { color: #f8f9fa; }
.mm-footer a:hover { color: var(--mm-pink); }
.mm-footer h4 { color: #fff; font-size: 1.05rem; font-weight: 700; margin-bottom: 1.5rem; }
.mm-footer .mm-footer-logo { margin-bottom: 1.5rem; }
.mm-footer .mm-footer-contact { max-width: 380px; }
.mm-footer .mm-footer-social { padding: .5rem 0; }
.mm-footer .mm-footer-social a + a { margin-left: .5rem; }
.mm-footer .mm-footer-social img { display: inline-block; vertical-align: middle; }
.mm-footer .mm-footer-services a { display: block; margin-bottom: 1.5rem; text-transform: uppercase; }
.mm-footer .mm-footer-privacy { padding: .5rem 0; font-size: 1rem; }
.mm-footer .mm-footer-privacy a { color: var(--mm-pink); }
/* ---- Contact forms (Fluent Forms «Footer EL/EN» in the footer, «Contact EL/EN» on the contact pages): the look of
   the WPForms forms they replace: hidden labels, square white inputs, 20px between fields, small GDPR line, pink button ---- */
:is(.mm-footer, .mm-contact) .fluentform .ff-el-group { margin: 0; padding: 10px 0; }
:is(.mm-footer, .mm-contact) .fluentform .ff-el-form-control { font-family: inherit; height: 38px; padding: 6px 10px; border: 1px solid #ccc; border-radius: 2px; background: #fff; color: #333; font-size: 1rem; line-height: 1.3; box-shadow: none; }
:is(.mm-footer, .mm-contact) .fluentform textarea.ff-el-form-control { height: 120px; min-height: 0; resize: vertical; }
:is(.mm-footer, .mm-contact) .fluentform .ff-el-form-control::placeholder { color: #777; opacity: 1; }
:is(.mm-footer, .mm-contact) .fluentform .ff-el-form-control:focus { border-color: #999; outline: none; box-shadow: none; }
:is(.mm-footer, .mm-contact) .fluentform .ff-el-group:has(.ff-el-tc) { padding: 10px 0; }
:is(.mm-footer, .mm-contact) .fluentform .ff-el-tc { margin: 0; }
:is(.mm-footer, .mm-contact) .fluentform .ff-el-tc label.ff_tc_label { display: block; font-size: 12px; font-weight: 400; line-height: 2; text-transform: none; }
:is(.mm-footer, .mm-contact) .fluentform .ff-el-tc label.ff_tc_label > span, :is(.mm-footer, .mm-contact) .fluentform .ff-el-tc label.ff_tc_label > div { display: inline; width: auto; padding: 0 !important; }
:is(.mm-footer, .mm-contact) .fluentform .ff_tc_checkbox input { width: 14px; height: 14px; margin: 0 10px 0 3px; vertical-align: -2px; }
:is(.mm-footer, .mm-contact) .fluentform .ff_t_c a { color: var(--mm-pink); }
:is(.mm-footer, .mm-contact) .fluentform .ff_submit_btn_wrapper { padding: 9px 0 0; }
:is(.mm-footer, .mm-contact) .fluentform .ff-btn-submit { background: var(--mm-pink); color: #fff; border: 0; border-radius: .25rem; font-weight: 400; font-size: 1rem; line-height: 1.5; min-height: 0; margin: 0; padding: 10px 15px; text-transform: uppercase; letter-spacing: 0; box-shadow: none; opacity: 1; }
:is(.mm-footer, .mm-contact) .fluentform .ff-btn-submit:hover, :is(.mm-footer, .mm-contact) .fluentform .ff-btn-submit:focus { background: var(--mm-dark); color: #fff; opacity: 1; }
:is(.mm-footer, .mm-contact) .fluentform .error, :is(.mm-footer, .mm-contact) .fluentform .text-danger { font-size: 12px; margin-top: 4px; }
:is(.mm-footer, .mm-contact) .ff-message-success { border: 0; box-shadow: none; padding: 0; margin: 0; }
.mm-footer .fluentform .ff-el-tc label.ff_tc_label, .mm-footer .ff-message-success { color: #f8f9fa; }
.mm-footer .fluentform .ff-el-tc label.ff_tc_label { line-height: 1.75; }
.mm-contact .fluentform .ff-el-tc label.ff_tc_label, .mm-contact .ff-message-success { color: #000; }
.mm-footer .fluentform .error, .mm-footer .fluentform .text-danger { color: #ff8fb8; }

/* ---- Before/after + cost teaser (blocks mm-results-teaser-el / -en) ---- */
.mm-results-teaser { display: grid; grid-template-columns: 1fr 1fr; padding-top: 1.5rem; }
.mm-results-teaser > div { text-align: center; padding: 4.5rem 1rem; background-size: cover; background-position: center; }
.mm-results-teaser .mm-teaser-results { background-image: url(/wp-content/uploads/2022/01/prinmeta-2.webp); }
.mm-results-teaser .mm-teaser-cost { background-image: url(/wp-content/uploads/2022/01/kostos.webp); }
.mm-results-teaser h3 { color: #f8f9fa; font-weight: 700; font-size: calc(1.375rem + 1.5vw); line-height: 1.2; margin: 0 0 4.5rem; }
.mm-btn { display: inline-block; background: var(--mm-pink); color: #fff; font-weight: 700; font-size: calc(1.275rem + .3vw); line-height: 1.5; padding: .5rem; border-radius: .25rem; transition: all .8s; }
.mm-btn:hover { background: var(--mm-dark); color: #fff; }
@media (min-width: 1200px) {
	.mm-results-teaser h3 { font-size: 2.5rem; }
	.mm-btn { font-size: 1.5rem; }
}
@media (max-width: 767px) {
	.mm-results-teaser { grid-template-columns: 1fr; }
}

/* ---- Gallery pages and results hubs (scripts/pages-galleries.php) ---- */
/* the old title band: py-4 grey strip, bold uppercase h4 indented ps-4 inside the container */
/* full-bleed like the old page (Flatsome's default template keeps pages inside the 1200px container) */
.mm-gallery-title { background: #f5f5f5; width: 100vw; margin-left: calc(50% - 50vw); }
body:has(.mm-gallery-title) { overflow-x: clip; }
.mm-gallery-title .section-content { padding: 24px 0; }
.mm-gallery-title .col, .mm-gallery-title .col-inner, .mm-gallery-title .text { padding-bottom: 0; margin-bottom: 0; }
.mm-gallery-title .section-content > .row { max-width: 1200px; margin-left: auto; margin-right: auto; }
.page-wrapper:has(.mm-gallery-title) { padding-top: 0; padding-bottom: 0; }
.mm-gallery-body .section-content { padding-bottom: 0; }
.mm-gallery-body .col { padding-bottom: 0; }
.mm-gallery-body .mm-cases { margin-bottom: 0; }
.mm-gallery-title__h { margin: 0; padding-left: 21px; font-size: 1.5rem; font-weight: 700; line-height: 1.2; text-transform: uppercase; color: var(--mm-text); }
.mm-hub-tile .img { margin-bottom: 0; }
.mm-hub-tile__title { margin: 1rem 0; font-size: 1.25rem; font-weight: 700; line-height: 1.2; text-align: center; }
.mm-hub-tile__title a { color: var(--mm-text); text-decoration: none; }
.mm-hub-tile__title a:hover { color: var(--mm-text); }

/* ---- Phones ---- */
@media (max-width: 849px) {
	.mm-footer .col { padding-bottom: 1.5rem; }
}
@media (max-width: 549px) {
	.mm-badges .slider-wrapper .flickity-prev-next-button { display: block; }
}