/*
Theme Name: Morocco Mon Travels
Theme URI: https://www.moroccomontravels.com/
Description: Custom theme for Morocco Mon Travels (tours, treks, day trips, transfers). Bilingual EN/FR with Polylang, legacy .html URLs preserved for SEO.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.3
Text Domain: mmt
*/

/* Theme overrides. The original template styles live in assets/css/tevily.css. */

/* Floating social buttons (from the legacy footer module). */
.mmt-float {
	position: fixed;
	left: 1.5%;
	width: 50px;
	height: 50px;
	border-radius: 50px;
	color: #fff;
	font-size: 26px;
	line-height: 50px;
	text-align: center;
	box-shadow: 2px 2px 3px #999;
	z-index: 100;
}
.mmt-float:hover,
.mmt-float:focus { color: #fff; }
.mmt-float--whatsapp { bottom: 20px; background-color: #25d366; }
.mmt-float--tripadvisor { bottom: 88px; background-color: #34e0a1; }
.mmt-float--facebook { bottom: 156px; background-color: #3578e5; }
.mmt-float--instagram { bottom: 224px; background-color: #cd486b; }

/* Language switcher flags in the top bar. */
.main-header__top-right-social .mmt-lang img { width: 22px; height: auto; vertical-align: middle; }
.main-header__top-right-social .mmt-lang.is-current img { outline: 2px solid #fff; outline-offset: 1px; }

/* Home hero picture. */
.img-picture-slider img { width: 100%; height: auto; display: block; }

/* Cards: keep equal heights without the fixed inline heights of the legacy markup. */
.popular-tours__content { min-height: 260px; }
.popular-tours-two .popular-tours__single { margin-bottom: 30px; }
/* height: auto is required, otherwise the width/height attributes of smaller thumbnails (e.g. 600x387) win over aspect-ratio. */
.popular-tours__img img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; display: block; }
.news-one__img img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; display: block; }

/* Call to action buttons on detail pages. */
.mmt-cta {
	display: block;
	padding: 12px 10px;
	margin: 0 0 25px;
	background-color: #ee3b24;
	color: #fff;
	text-align: center;
	font-weight: 700;
	border-radius: 4px;
}
/* a.mmt-cta + !important: the links of the rich content area would otherwise turn the text blue. */
a.mmt-cta,
a.mmt-cta:visited { color: #fff !important; text-decoration: none; }
a.mmt-cta:hover,
a.mmt-cta:focus { background-color: #c62f1b; color: #fff !important; text-decoration: underline; }

/* Rich text coming from the legacy editor. */
.mmt-content img { max-width: 100%; height: auto; }
.mmt-content table { width: 100%; }
.mmt-content h2 { font-size: 28px; margin: 25px 0 15px; }
.mmt-content h3 { font-size: 22px; margin: 20px 0 10px; }
.mmt-content ul { padding-left: 20px; margin-bottom: 20px; }
.mmt-content ul li { list-style: disc; }

/* Listing intro text (SEO content shown below the cards). */
.mmt-listing-intro { padding: 20px 0 90px; }

/* Booking / contact forms. */
.mmt-form { background-color: #ddd; padding: 25px; }
.mmt-form .form-group { margin-bottom: 15px; }
.mmt-form label { display: block; margin-bottom: 5px; }
.mmt-form .mmt-hp { position: absolute; left: -9999px; }
.mmt-notice { padding: 15px 20px; margin-bottom: 25px; border-radius: 4px; }
.mmt-notice--ok { background: #e6f6ea; color: #1d6b32; }
.mmt-notice--error { background: #fde8e6; color: #9b1c0f; }

/* Pagination. */
.mmt-pagination { display: flex; justify-content: center; gap: 8px; padding-bottom: 90px; }
.mmt-pagination .page-numbers { display: inline-block; min-width: 42px; padding: 8px 12px; border-radius: 4px; background: #f5f5f5; text-align: center; }
.mmt-pagination .page-numbers.current { background: #ee3b24; color: #fff; }

/* Screen-reader text (accessibility). */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }