@charset "UTF-8";

/*
Theme Name: Tuntu Theme
Theme URI:
Author: @NKatsigazi
Author URI: https://wordpress.org/
Description: Tuntu safaris Uganda Theme.
Text Domain: tuntu
*/

/* ==========================================================================
   DESIGN TOKENS
   Palette pulled from the approved homepage design: deep safari green,
   warm gold accent, cream/olive section backgrounds. Serif display face
   for headlines, clean grotesk for body/UI, a wide-tracked small-caps
   treatment for eyebrow labels (this is the site's signature type move —
   used consistently for every section label: "CHOOSE YOUR ADVENTURE",
   "ICONIC DESTINATIONS", "STORIES THAT INSPIRE", etc).
   ========================================================================== */
:root {
	/* Color */
	--tuntu-green-900: #16220f;   /* header / footer / darkest bg */
	--tuntu-green-800: #1f2e17;
	--tuntu-green-700: #2c4022;   /* dark section bg */
	--tuntu-gold-500:  #c9973a;   /* primary accent / buttons */
	--tuntu-gold-400:  #dbb35f;
	--tuntu-gold-100:  #f4e6c6;
	--tuntu-cream-100: #f7f3e9;   /* light section bg */
	--tuntu-olive-100: #eae5d3;   /* alt section bg */
	--tuntu-ink-900:   #1c1f16;   /* body copy on light */
	--tuntu-ink-600:   #55594c;
	--tuntu-paper:     #ffffff;

	/* Type */
	--tuntu-font-display: "Antonio", "Playfair Display", Georgia, serif;
	--tuntu-font-body: "Poppins", "Jost", "Inter", -apple-system, sans-serif;

	/* Rhythm */
	--tuntu-radius-sm: 4px;
	--tuntu-radius-md: 10px;
	--tuntu-radius-lg: 22px;
	--tuntu-section-pad: clamp(56px, 8vw, 120px);
	--tuntu-container: 1380px;
	--tuntu-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

body.tuntu-theme {
	font-family: var(--tuntu-font-body);
	color: var(--tuntu-ink-900);
	background: var(--tuntu-paper);
	margin: 0;
	font-weight: 300;
    font-size: 16px;
    line-height: 28px;
    color: rgb(0 0 0 / 59%);
}

.tuntu-theme h1,
.tuntu-theme h2,
.tuntu-theme h3,
.tuntu-theme .tuntu-heading {
	font-family: 'Antonio';
    text-transform: uppercase;
    font-weight: 900 !important;
	line-height: 1.08;
	letter-spacing: -0.01em;
	color: var(--tuntu-ink-900);
	margin: 0;
}

.tuntu-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--tuntu-font-body);
	font-size: 14px !important;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--tuntu-gold-500) !important;
	margin-bottom: 14px;
}
.tuntu-eyebrow::before {
	content: "";
	width: 26px;
	height: 1px;
	background: var(--tuntu-gold-500);
	display: inline-block;
}

.tuntu-container {
	max-width: var(--tuntu-container);
	padding-inline: clamp(20px, 5vw, 48px);
	width: 100%;
	margin: auto;
}
@media (max-width: 767px) {

	.tuntu-container{
		max-width: calc(100% - 20px);
		padding-inline: 0;
	}

}

.tuntu-btn {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: var(--tuntu-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 16px 30px;
	border-radius: 999px;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	transition: transform 0.35s var(--tuntu-ease), background-color 0.35s var(--tuntu-ease), color 0.35s var(--tuntu-ease), border-color .35s var(--tuntu-ease), box-shadow .35s var(--tuntu-ease);
	border: 1px solid transparent;
	cursor: pointer;
}
.tuntu-btn svg { width: 14px; height: 14px; flex: none; }

/* Icon-badge variant — only applied when a widget uses render_premium_button() */
.tuntu-btn--icon-right { padding: 8px 8px 8px 26px; }
.tuntu-btn--icon-left  { padding: 8px 26px 8px 8px; flex-direction: row-reverse; }
.tuntu-btn__text { position: relative; z-index: 1; }
.tuntu-btn__icon {
	position: relative; z-index: 1; flex: none;
	width: 34px; height: 34px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	transition: transform .4s var(--tuntu-ease), background-color .35s var(--tuntu-ease);
}
.tuntu-btn__icon svg, .tuntu-btn__icon i { width: 14px; height: 14px; font-size: 14px; }
.tuntu-btn--icon-right:hover .tuntu-btn__icon { transform: translateX(3px); }
.tuntu-btn--icon-left:hover .tuntu-btn__icon { transform: translateX(-3px); }

/* Diagonal sheen sweep on hover — applies to every button, icon or not */
.tuntu-btn::before {
	content: "";
	position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
	transform: skewX(-20deg);
	transition: left .6s var(--tuntu-ease);
	z-index: 0;
	pointer-events: none;
}
.tuntu-btn:hover::before { left: 130%; }

.tuntu-btn--gold { background: var(--tuntu-gold-500); color: var(--tuntu-green-900); box-shadow: 0 8px 24px rgba(201,151,58,0.28); }
.tuntu-btn--gold .tuntu-btn__icon { background: rgba(22,34,15,0.14); }
.tuntu-btn--gold:hover { background: var(--tuntu-gold-400); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(201,151,58,0.4); }

.tuntu-btn--outline { background: transparent; color: var(--tuntu-paper); border-color: rgba(255,255,255,0.5); }
.tuntu-btn--outline .tuntu-btn__icon { background: rgba(255,255,255,0.12); }
.tuntu-btn--outline:hover { background: rgba(255,255,255,0.12); border-color: var(--tuntu-paper); transform: translateY(-2px); }

.tuntu-btn--outline-dark { background: transparent; color: var(--tuntu-ink-900); border-color: rgba(28,31,22,0.35); }
.tuntu-btn--outline-dark .tuntu-btn__icon { background: rgba(28,31,22,0.08); }
.tuntu-btn--outline-dark:hover { background: var(--tuntu-ink-900); color: var(--tuntu-paper); }
.tuntu-btn--outline-dark:hover .tuntu-btn__icon { background: rgba(255,255,255,0.14); }

/* Shared reveal-on-scroll hooks — GSAP (assets/js/tuntu-gsap.js) targets these
   classes/attributes. Inline "opacity:0" is intentionally NOT set here so
   the layout never breaks if JS fails to load; JS sets the initial state
   itself via gsap.set() before animating. */
.tuntu-anim,
[data-tuntu-anim] { will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
	.tuntu-anim, [data-tuntu-anim] { transition: none !important; animation: none !important; }
}



/* =========================================================================
   TUNTU CF7 FORMS — shared front-end styling
   Load this on any page that embeds one of the four Tuntu forms (Contact
   Us, Booking, Tour Booking, Page Enquiry). Uses the site's existing
   design tokens with hard-coded fallbacks so it still looks right even
   if loaded somewhere those variables aren't defined.
   ========================================================================= */

.tuntu-form { max-width: 640px; margin: auto; }

/* ---- Layout: rows + fields ---- */
.tuntu-form__row { display: flex; gap: 20px; margin-bottom: 0px; }
.tuntu-form__row:not(.tuntu-form__row--two) { flex-direction: column; }
@media (max-width: 560px) { .tuntu-form__row--two { flex-direction: column; } }

.tuntu-form__field { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.tuntu-form > .tuntu-form__field,
.tuntu-form > fieldset > .tuntu-form__field { margin-bottom: 0px; }

.tuntu-form__label { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--tuntu-ink-900, #1f241c); }
.tuntu-form__req { color: var(--tuntu-gold-500, #d29c13) !important; margin-left: 2px; display: inline-block !important; }
.tuntu-form__hint { font-size: 12.5px; color: var(--tuntu-ink-600, #6b6a5f); margin: 0; }

/* ---- Section grouping (fieldsets used for the radio toggle + conditional groups) ---- */
.tuntu-form fieldset { border: none; padding: 0; margin: 0 0 24px; }
.tuntu-form legend { padding: 0; font-family: var(--tuntu-font-display, Georgia, serif); font-size: 15px; color: var(--tuntu-ink-900, #1f241c); margin-bottom: 14px; width: 100%; }
.tuntu-form__group-box { background: var(--tuntu-cream-100, #f5f1e8); border-radius: var(--tuntu-radius-lg, 12px); padding: 22px; margin-bottom: 24px; }
.tuntu-form__group-box .tuntu-form__field:last-child { margin-bottom: 0; }

/* ---- Text / email / tel / number / date / select inputs ---- */
.tuntu-form .wpcf7-form-control-wrap { display: block; }
.tuntu-form__input,
.tuntu-form__textarea {
	width: 100% !important;
	padding: 13px 16px !important;
	border: 1.5px solid rgba(31,36,28,0.16) !important;
	border-radius: var(--tuntu-radius-md, 8px) !important;
	background: var(--tuntu-paper, #ffffff) !important;
	font-family: var(--tuntu-font-body, inherit) !important;
	font-size: 15px !important;
	color: var(--tuntu-ink-900, #1f241c) !important;
	transition: border-color .25s ease, box-shadow .25s ease !important;
	box-sizing: border-box !important;
	margin-bottom: 0 !important;
}
.tuntu-form__textarea { min-height: 130px; resize: vertical; }
.tuntu-form__input:focus,
.tuntu-form__textarea:focus {
	outline: none;
	border-color: var(--tuntu-gold-500, #d29c13);
	box-shadow: 0 0 0 3px rgba(210,156,19,0.18);
}
.tuntu-form__input::placeholder,
.tuntu-form__textarea::placeholder { color: rgba(31,36,28,0.38); }

/* Invalid state (CF7 adds wpcf7-not-valid to the control itself) */
.tuntu-form .wpcf7-not-valid { border-color: #c0392b !important; }
.tuntu-form .wpcf7-not-valid-tip { display: block; font-size: 12px; color: #c0392b; margin-top: 6px; }

/* ---- Checkbox / radio rendered as pill toggles (destinations list, Book/Enquire toggle) ---- */
.tuntu-form .wpcf7-form-control.wpcf7-checkbox,
.tuntu-form .wpcf7-form-control.wpcf7-radio { display: flex; flex-wrap: wrap; gap: 10px; }
.tuntu-form .wpcf7-list-item { margin: 0; position: relative; }
.tuntu-form .wpcf7-list-item label {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 18px; border-radius: 999px; border: 1.5px solid rgba(31,36,28,0.16);
	font-size: 13.5px; font-weight: 600; color: var(--tuntu-ink-900, #1f241c);
	cursor: pointer; transition: background-color .25s ease, border-color .25s ease, color .25s ease;
	background: var(--tuntu-paper, #ffffff);
}
.tuntu-form .wpcf7-list-item label:hover { border-color: var(--tuntu-gold-500, #d29c13); }
.tuntu-form .wpcf7-list-item input[type="checkbox"],
.tuntu-form .wpcf7-list-item input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.tuntu-form .wpcf7-list-item:has(input:checked) label {
	background: var(--tuntu-gold-500, #d29c13); border-color: var(--tuntu-gold-500, #d29c13); color: var(--tuntu-green-900, #1f241c);
}
.tuntu-form .wpcf7-list-item:has(input:focus-visible) label { outline: 2px solid var(--tuntu-gold-500, #d29c13); outline-offset: 2px; }

/* ---- Submit button ---- */
.tuntu-form__submit {
	display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important;
	padding: 15px 34px !important; border: none !important; border-radius: 999px !important;
	background: var(--tuntu-gold-500, #d29c13) !important; color: var(--tuntu-green-900, #1f241c) !important;
	font-size: 14px !important; font-weight: 700 !important; letter-spacing: .02em !important; text-transform: uppercase !important;
	cursor: pointer !important; transition: background-color .25s ease, color .25s ease !important; margin-top: 15px;
}
.tuntu-form__submit:hover { background: var(--tuntu-green-900, #1f241c); color: #ffffff; }
.tuntu-form__submit:disabled { opacity: .6; cursor: default; }
.tuntu-form .wpcf7-spinner { margin-left: 10px; vertical-align: middle; }

/* ---- Response message + status colouring (CF7 adds these classes to the <form> itself) ---- */
.wpcf7-form .wpcf7-response-output {
	margin: 20px 0 0; padding: 14px 18px; border-radius: var(--tuntu-radius-md, 8px);
	font-size: 13.5px; border: 1px solid transparent;
}
.wpcf7-form.sent .wpcf7-response-output { background: #eef6ee; border-color: #bfe3bf; color: #1e5c1e; }
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output { background: #fbeceb; border-color: #f0bdb8; color: #a3372c; }
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output { background: #fdf3e3; border-color: #f0d9a8; color: #8a6416; }