/*
Theme Name: Go Africa Ollie Child
Theme URI: 
Author: LightSpeedWP
Author URI: 
Description: A child theme of the Ollie theme for GoAfrica.nl
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: ollie
Text Domain: goafrica-ollie-child
Tags: 
*/

/* ========================================================================== */

/* Slider Buttons & Bars                                                      */

/* ========================================================================== */

/* Slider Buttons */

/* Position arrows vertically centered */
.lsx-to-slider .slick-arrow {
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	z-index: 2;
}

/* Left & right anchors */
.lsx-to-slider .slick-prev {
	left: -4rem !important;
}

.lsx-to-slider .slick-next {
	right: -4rem !important;
	transform: translateY(-50%) rotate(180deg) !important;
}

/* Remove default arrows */
.lsx-to-slider .slick-arrow::before {
	content: none !important;
}

/* Keep icon + sizing overrides */
.lsx-to-slider .slick-prev,
.lsx-to-slider .slick-next {
	width: 54px !important;
	height: 54px !important;
	background: url('./assets/icons/slider-button-default.svg') no-repeat center/contain !important;
	border: none !important;
	margin: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-image 0.2s ease;
}

/* Hover + focus states */
.lsx-to-slider .slick-prev:hover,
.lsx-to-slider .slick-prev:focus-visible,
.lsx-to-slider .slick-next:hover,
.lsx-to-slider .slick-next:focus-visible {
	background-image: url('./assets/icons/slider-button-hover.svg') !important;
}

/* Slider dots */
.lsx-to-slider .slick-dots {
	position: static !important;
	left: auto !important;
	right: auto !important;
	transform: none !important;
	width: max-content !important;
	margin: var(--wp--preset--spacing--30) auto 0 !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: var(--wp--preset--spacing--20) !important;
	list-style: none !important;
}

/* @media (min-width: 782px) {
	.lsx-to-slider .slick-dots {
		display: none !important;
	}
} */

.lsx-to-slider .slick-dots li {
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	list-style: none;
}

.lsx-to-slider .slick-dots li button::before {
	content: none !important;
}

.lsx-to-slider .slick-dots li button {
	width: 12px !important;
	height: 12px !important;
	margin: 0 !important;
	padding: 0 !important;
	display: block;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--wp--preset--color--primary-accent) !important;
	cursor: pointer;
	overflow: hidden;
	text-indent: -9999px;
	transition: width 0.2s ease, background-color 0.2s ease;
}

.lsx-to-slider .slick-dots li.slick-active button,
.lsx-to-slider .slick-dots li button:hover,
.lsx-to-slider .slick-dots li button:focus-visible {
	width: 32px !important;
	background: var(--wp--preset--color--primary) !important;
}

.lsx-to-slider .slick-dots li button:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}


/* ========================================================================== */

/* Expanding Header Search             										  */

/* ========================================================================== */

/* Expanding overlay input pattern */
.is-style-header-search {
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
}

/* Style the button as an icon button */
.is-style-header-search .wp-block-search__button {
	height: 100%;
	align-items: center;
	display: flex;
	box-sizing: border-box;
	background: transparent;
	color: currentColor;
	transition: none;
	border: none;
}

/* Remove any default hover background */
.is-style-header-search .wp-block-search__button:hover,
.is-style-header-search .wp-block-search__button:focus-visible {
	background: transparent;
	color: currentColor;
	outline: none;
}

/* Icon size */
.is-style-header-search .search-icon {
	width: 32px;
	height: 32px;
	display: block;
	transform: scaleX(-1);
}

/* Collapsed state */
.is-style-header-search .wp-block-search__input {
	position: absolute;
	right: 100%;
	top: 50%;
	transform: translateY(-50%);
	width: 0;
	min-width: 0;
	opacity: 0;
	pointer-events: none;
	border-radius: var(--wp--preset--border-radius--sm);
	transition:
		width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.2s,
		padding 0.2s;
	background: var(--wp--preset--color--base, #fff);
	padding: 8px;
	z-index: 25;
	box-shadow: var(--wp--preset--shadow--small-dark);
}

/* Expanded state */
.is-style-header-search .wp-block-search__input:not(.wp-block-search__searchfield-hidden) {
	width: 600px;
	min-width: 240px;
	opacity: 1;
	pointer-events: auto;
	padding: 10px 20px;
}

/* Hidden state (for screen readers) */
.is-style-header-search .wp-block-search__searchfield-hidden {
	width: 0 !important;
	min-width: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
	padding: 8px 0 !important;
}

/* Responsive adjustments */
@media (max-width: 960px) {
	.is-style-header-search .wp-block-search__input:not(.wp-block-search__searchfield-hidden) {
		width: 360px;
	}
}

/* Further adjustments for very small screens */
@media (max-width: 600px) {
	.is-style-header-search .wp-block-search__input:not(.wp-block-search__searchfield-hidden) {
		width: 260px;
	}
}

/* ========================================================================== */

/* Navigation                                        */

/* ========================================================================== */

/* === Footer Navigation: Base & Hover === */
.is-style-footer-nav .wp-block-navigation__container {
	color: var(--wp--preset--color--base);
}

/* Footer navigation block: font-weight 500, contrast color, brand-dark hover */
.is-style-footer-nav .wp-block-navigation__container,
.footer-nav .wp-block-navigation-item__content {
	font-weight: 500;
	color: var(--wp--preset--color--base);
}

.is-style-footer-nav .wp-block-navigation-item__content:hover,
.is-style-footer-nav .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--primary-alt);
	text-decoration: none;
}

/* === Header Navigation: Base & Hover === */
.is-style-header-nav .wp-block-navigation__container {
	color: var(--wp--preset--color--main);
}

/* Header navigation block: font-weight 500, contrast color, brand-dark hover */
.is-style-header-nav .wp-block-navigation__container,
.is-style-header-nav .wp-block-navigation-item__content {
	font-weight: 600;
	color: var(--wp--preset--color--main);
}

.is-style-header-nav .wp-block-navigation-item__content:hover,
.is-style-header-nav .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--primary-alt-accent);
	text-decoration: none;
}

.is-style-header-nav .current-menu-item>.wp-block-navigation-item__content,
.is-style-header-nav .current-menu-ancestor>.wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary-alt);
	text-decoration: none !important;
	cursor: default;
}

body .wp-block-group.lsx-accommodation-info > div,
body .wp-block-group.lsx-tour-info > div{
	flex-wrap: nowrap;
}

body .wp-block-group.lsx-accommodation-info>div>*,
body .wp-block-group.lsx-tour-info>div>* {
    max-width: 96%;
}

/* ========================================================================== */

/* LSX Included/Not Included Lists                                           */

/* ========================================================================== */

/* Markup comes from goafrica_child_render_meta_lists() in functions.php. The */

/* icons are CSS masks rather than inline SVG, so they scale with the list's   */

/* font size and take their colour from the custom properties below.          */

.lsx-meta-list {
	--lsx-meta-list-icon-size: 1.25em;
	--lsx-meta-list-icon-gap: 0.625em;
	list-style: none;
	margin-block-end: 0;

	/* Beats Ollie's `ul:where(:not([class*="wp-block"]))` padding reset. */
	padding-inline-start: 0;
}

.lsx-meta-list li {
	display: flex;
	align-items: flex-start;
	gap: var(--lsx-meta-list-icon-gap);
	margin-block-end: 0.5em;
}

.lsx-meta-list li:last-child {
	margin-block-end: 0;
}

.lsx-meta-list li::before {
	content: "";
	flex: 0 0 auto;
	width: var(--lsx-meta-list-icon-size);
	height: var(--lsx-meta-list-icon-size);

	/* Nudge the icon onto the optical centre of the first line of text. */
	margin-block-start: 0.125em;
	background-color: var(--lsx-meta-list-icon-color);
	-webkit-mask-image: var(--lsx-meta-list-icon);
	mask-image: var(--lsx-meta-list-icon);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.lsx-included-list {
	--lsx-meta-list-icon-color: var(--wp--preset--color--primary, #1f4b3b);
	--lsx-meta-list-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9 12.75 11.25 15 15 9.75'/%3E%3C/svg%3E");
}

.lsx-not_included-list {
	--lsx-meta-list-icon-color: var(--wp--preset--color--support-red, #b92a02);
	--lsx-meta-list-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.75 9.75 14.25 14.25M14.25 9.75 9.75 14.25'/%3E%3C/svg%3E");
}

/* Masked icons lose their colour in forced-colours mode. */
@media (forced-colors: active) {
	.lsx-meta-list li::before {
		background-color: CanvasText;
	}
}

/* ========================================================================== */

/* LSX Travel Information Cards                                               */

/* ========================================================================== */

/* Tour Operator pads the card wrapper, but on a destination page that wrapper
   is also the Slick slide, and the plugin's own
   `.lsx-to-slider.lsx-travel-information-wrapper .slick-slide { padding: 0
   !important }` strips it. Pad the inner content group instead, which the
   slider never touches, so no `!important` is needed. Scoped to `.slick-slide`
   so an un-slidered section keeps its own wrapper padding without doubling up. */

.lsx-to-slider.lsx-travel-information-wrapper .slick-slide.additional-info > .wp-block-group {
	padding: var(--wp--preset--spacing--small);
}

/* ========================================================================== */

/* Gravity Forms Required Field Indicator                                     */

/* ========================================================================== */

/* The Orbital theme sizes the asterisk next to each label with its own custom
   property, fixed at 12px, which reads as a stray speck beside a 16px label.
   Override the property rather than the rule: Gravity Forms keeps ownership of
   its `:where(:not(.gform-theme__disable))` selector, and the indicator tracks
   whatever size the label is rendered at. Scoped to `.gform_wrapper.gform-theme`
   so it outranks the framework's own single-class declaration without
   `!important`. The legend asterisk is left alone — it sits inside a sentence
   and should match that sentence's size. */

.gform_wrapper.gform-theme {
	--gf-ctrl-label-font-size-req: 1em;
}

/* ========================================================================== */

/* Tour Operator Enquiry Modal                                                */

/* ========================================================================== */

/* Tour Operator paints the modal panel with `.wp-block-hm-popup > *`, the
   dialog's positioning wrapper, and that is where the frame belongs. Putting it
   on a group inside the template part instead leaves the panel's own white
   background and 1.5rem of padding showing around the frame.
   Scoped to the enquiry modal; drop the ID from these three selectors to give
   every Tour Operator modal the same treatment. */

#to-modal-modal-enquiry {
	--goafrica-modal-border-width: 5px;
	--goafrica-modal-radius: var(--wp--preset--border-radius--md);
}

#to-modal-modal-enquiry > * {
	border: var(--goafrica-modal-border-width) solid var(--wp--preset--color--primary-accent);
	border-radius: var(--goafrica-modal-radius);
	background-color: var(--wp--preset--color--primary-alt-light);
}

/* The close button is absolutely positioned against the panel's padding box, so
   it already sits inside the border. Only its outer corner needs rounding to
   follow the frame. */

#to-modal-modal-enquiry .wp-block-hm-popup__close {
	border-radius: 0 calc(var(--goafrica-modal-radius) - var(--goafrica-modal-border-width)) 0 var(--wp--preset--border-radius--xs);
	background: var(--wp--preset--color--primary-alt-light);
	color: var(--wp--preset--color--primary);
}

#to-modal-modal-enquiry .wp-block-hm-popup__close:hover,
#to-modal-modal-enquiry .wp-block-hm-popup__close:focus-visible {
	color: var(--wp--preset--color--primary-alt);
}

/* ========================================================================== */

/* Gravity Forms Choice Inputs                                                */

/* ========================================================================== */

/* Ollie styles every input that is not a submit or a radio, which catches
   checkboxes and hands them `padding: .5em 1em`. That is what stretches the box
   into a rectangle, and it also widens the `minmax(var(--gf-ctrl-choice-size),
   max-content)` column Gravity Forms lays each choice out in, so the label is
   pushed off with it. Ollie's rule and Gravity Forms' both weigh 0-2-1 and
   Ollie loads later, so give the box back to Gravity Forms' own control token
   from a selector that outranks both. */

.gform_wrapper.gform-theme input[type="checkbox"] {
	inline-size: var(--gf-ctrl-choice-size, 22px);
	block-size: var(--gf-ctrl-choice-size, 22px);
	padding: 0;
	border-radius: var(--wp--preset--border-radius--xs);
	box-shadow: none;
}

/* ========================================================================== */

/* Gravity Forms Date Picker                                                  */

/* ========================================================================== */

/* Gravity Forms gives every control `--gf-local-width: 100%`, then overrides the
   date input back to `auto` for the multi-input date formats. The single-input
   datepicker inherits that override, and because `.ginput_container_date` is a
   flex row the input falls back to its 20-character intrinsic width instead of
   spanning the field. Put the control width back and stop it shrinking: the
   toggle button is `flex: none` with `translateX(-100%)`, so it needs to
   overflow the row to land in the padding the input reserves for it via
   `--gf-field-date-ctrl-padding-x-end`. */

.gform_wrapper.gform-theme .gfield--input-type-datepicker .ginput_container_date > input.datepicker {
	--gf-local-width: 100%;
	flex-shrink: 0;
}