/* Makathanee Resort – layout refresh v1 (2026-11-09)
   Loaded after css/kickstart.css, style.css and custom.css; only overrides.
   New visible changes need a new file name (CSS is cached one month). */

:root {
	--mk-green: #217b4d;
	--mk-green-dark: #175c39;
	--mk-mint: #73c6a1;
	--mk-mint-soft: #eef7f2;
	--mk-gold: #9f824e;
	--mk-text: #3f4a44;
	--mk-muted: #6f7a74;
	--mk-orange: #e07b26;
	--mk-orange-dark: #c0651a;
	--mk-line: #e3ebe6;
	--mk-cream: #f7faf8;
	--mk-radius: 10px;
	--mk-shadow: 0 6px 24px rgba(23, 92, 57, .10);
}

/* ---------- base ---------- */
html { overflow-x: clip; }
body {
	color: var(--mk-text); background: var(--mk-cream);
	font: 400 15px/1.7 'open_sansregular', 'Open Sans', Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}
strong, b { color: inherit; font-family: 'open_sansbold', 'Open Sans', Arial, sans-serif; font-weight: normal; }
p { margin: 0 0 1em; }
a { color: var(--mk-green); }
a:hover { color: var(--mk-orange); }
hr { border: 0; border-top: 1px solid var(--mk-line); margin: 24px 0; }
img { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 { font-family: 'open_sansregular', 'Open Sans', Arial, sans-serif; color: var(--mk-gold); line-height: 1.3; }
h3 { font-size: 26px; margin: 6px 0 12px; }
h4 { font-size: 22px; color: var(--mk-green); margin: 26px 0 10px; }
h5 { font-size: 18px; color: var(--mk-green); }
h6 { font-size: 17px; color: var(--mk-gold); margin: 12px 0 8px; }
.dashed-border { border-bottom: 1px solid var(--mk-line); max-width: none; padding-bottom: 8px; }

#page-container { background: none; }
.grid { max-width: 1100px; }

/* ---------- header ---------- */
#header {
	position: sticky; top: 0; z-index: 900;
	padding: 0; margin: 0; max-width: none; width: 100%;
	background: #fff; border-top: 4px solid var(--mk-green);
	box-shadow: 0 2px 14px rgba(23, 92, 57, .10);
	font-family: 'open_sansregular', 'Open Sans', Arial, sans-serif;
}
.hdr-inner { max-width: 1100px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; gap: 24px; box-sizing: border-box; }
.hdr-brand { flex: 0 0 auto; line-height: 0; }
.hdr-brand img { width: 140px; height: auto; }
.hdr-right { flex: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 0; }
.hdr-contact { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 18px; font-size: 13.5px; }
.hdr-contact a { color: var(--mk-muted); text-decoration: none; white-space: nowrap; }
.hdr-contact a:hover { color: var(--mk-green); }
.hdr-contact i { color: var(--mk-mint); margin-right: 4px; }
.hdr-contact a.lang { border: 1px solid var(--mk-line); border-radius: 999px; padding: 0 10px; color: var(--mk-green); }

#header ul.menu { background: none; border: 0; box-shadow: none; margin: 0; }
#header ul.menu > li { border: 0; background: none; }
#header ul.menu > li > a {
	color: var(--mk-green); font-size: 15px; padding: 10px 11px 12px; background: none; text-shadow: none;
	border-bottom: 3px solid transparent; white-space: nowrap;
}
#header ul.menu > li:hover > a, #header ul.menu > li > a:hover, #header ul.menu > li.current > a { color: var(--mk-orange); border-bottom-color: var(--mk-orange); background: none; }
#header ul.menu li ul { background: #fff; border: 0; border-radius: 8px; box-shadow: var(--mk-shadow); padding: 6px 0; min-width: 230px; z-index: 950; }
#header ul.menu li ul li { border: 0; background: none; }
#header ul.menu li ul li a { color: var(--mk-text); font-size: 14.5px; padding: 9px 16px; background: none; }
#header ul.menu li ul li a:hover { background: var(--mk-mint-soft); color: var(--mk-green); }
#header ul.menu li.has-menu span.arrow { border-color: var(--mk-green) transparent transparent transparent; right: 0 !important; top: 47% !important; }
#header ul.menu li.has-menu > a { padding-right: 18px; }

/* ---------- hero (home) ---------- */
#slider { position: relative; }
#slider .bx-wrapper, #slider .bx-viewport { margin: 0; }
#slider .bx-wrapper img { width: 100%; max-height: 560px; object-fit: cover; }
#slider .slider-text h2 { font-family: 'open_sansbold', 'Open Sans', Arial, sans-serif !important; text-shadow: 0 2px 14px rgba(0, 0, 0, .55) !important; }

/* page headline band */
#headline {
	max-height: none; padding: 34px 16px; margin: 0;
	background: var(--mk-green) url(../img/headline-bg2.jpg) center / cover no-repeat;
	position: relative;
}
#headline::before { content: ""; position: absolute; inset: 0; background: rgba(23, 92, 57, .55); }
#headline .grid { position: relative; padding: 0; }
#headline h2 { color: #fff; font-size: 30px; margin: 0; font-family: 'open_sansbold', 'Open Sans', Arial, sans-serif; text-shadow: 0 2px 10px rgba(0, 0, 0, .25); }

/* ---------- content card ---------- */
#page-container > .grid.clearfix {
	background: #fff; border-radius: var(--mk-radius); box-shadow: var(--mk-shadow);
	margin: 28px auto 28px; padding: 32px 30px 26px; box-sizing: border-box;
}
#slider + .grid.clearfix { margin-top: -40px !important; position: relative; z-index: 5; }
.readmore-js-toggle { color: var(--mk-green); font-weight: 600; font-size: 14px; padding: 6px 0; text-shadow: none; }

/* room cards on the home page */
.room-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 6px 0 10px; }
.room-card { display: flex; flex-direction: column; border-radius: var(--mk-radius); overflow: hidden; background: #fff; box-shadow: var(--mk-shadow); transition: transform .2s ease, box-shadow .2s ease; }
.room-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(23, 92, 57, .16); }
.room-card > a.photo { line-height: 0; }
.room-card img { width: 100%; aspect-ratio: 280 / 170; object-fit: cover; }
.room-card h6 { margin: 14px 16px 4px; font-size: 17px; }
.room-card h6 a { color: inherit; text-decoration: none; }
.room-card .button { align-self: flex-start; margin: 8px 16px 18px; }

/* room pages: gallery + side menu */
.gallery { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.gallery h4 { flex: 1 1 100%; margin: 0 0 4px; }
.gallery a { line-height: 0; }
.gallery img { border-radius: 6px; width: 80px; height: 80px; object-fit: cover; margin: 0; }
.col_8 > img:first-child { border-radius: var(--mk-radius); margin-bottom: 16px; }
ul.menu.vertical { border: 0; box-shadow: none; background: none; }
ul.menu.vertical li { border: 0; border-bottom: 1px solid var(--mk-line); background: none; }
ul.menu.vertical li a { color: var(--mk-green); padding: 9px 4px; background: none; }
ul.menu.vertical li a:hover { color: var(--mk-orange); background: none; }
ul.menu.vertical li.menu-toggle { display: none !important; }

/* ---------- buttons ---------- */
a.button, .button, button, input[type="submit"] { border-radius: 999px !important; }
a.button.orange, .button.orange {
	background: var(--mk-orange); border: 0; color: #fff; text-shadow: none; box-shadow: 0 3px 10px rgba(224, 123, 38, .3);
	font: 600 14px 'open_sansbold', 'Open Sans', Arial, sans-serif; padding: 8px 18px;
}
a.button.orange:hover { background: var(--mk-orange-dark); color: #fff; }
a.button.medium.orange { font-size: 16px; padding: 11px 26px; }

/* ---------- tables ---------- */
table { border-collapse: collapse; width: 100%; font-size: 14px; }
table.striped tr:nth-child(even) td { background: var(--mk-cream); }
table td, table th { padding: 9px 10px; border-bottom: 1px solid var(--mk-line); }
#ratetable { display: block; overflow-x: auto; }
#ratetable table td:first-child { color: var(--mk-text); }
.table-scroll { overflow-x: auto; }

/* ---------- booking form ---------- */
#reservation { margin-top: 30px; color: var(--mk-gold); }
#cfg-contactform-2 { margin-top: 10px; }
#cfg-contactform-2 .cfg-title { display: block; font: 20px/1.3 'open_sansbold', 'Open Sans', Arial, sans-serif; color: var(--mk-green); margin: 24px 0 6px; padding-bottom: 8px; border-bottom: 1px solid var(--mk-line); }
#cfg-contactform-2 .cfg-label { color: var(--mk-text); font-size: 14.5px !important; padding-top: 9px; }
#cfg-contactform-2 .cfg-label span { color: inherit; font-size: inherit; }
#cfg-contactform-2 .cfg-required { color: #c0392b !important; }
#cfg-contactform-2 .cfg-element-content input[type="text"],
#cfg-contactform-2 .cfg-element-content textarea,
#cfg-contactform-2 .cfg-element-content select {
	font: 400 15px 'open_sansregular', 'Open Sans', Arial, sans-serif; color: var(--mk-text);
	border: 1px solid #cfdcd4; border-radius: 6px; padding: 9px 11px; box-sizing: border-box; background: #fff; height: auto; box-shadow: none;
}
#cfg-contactform-2 .cfg-element-content input:focus,
#cfg-contactform-2 .cfg-element-content textarea:focus,
#cfg-contactform-2 .cfg-element-content select:focus { border-color: var(--mk-green); outline: 2px solid rgba(33, 123, 77, .2); outline-offset: 0; }
#cfg-contactform-2 .cfg-submit, #cfg-contactform-2 input[type="submit"] {
	background: var(--mk-orange); color: #fff; border: 0; text-shadow: none;
	font: 16px 'open_sansbold', 'Open Sans', Arial, sans-serif; padding: 12px 30px; box-shadow: 0 4px 14px rgba(224, 123, 38, .35); cursor: pointer;
}
#cfg-contactform-2 .cfg-submit:hover { background: var(--mk-orange-dark); }
.cfg-validationmessage { border-radius: 8px; }

/* ---------- inline photos ---------- */
img.align-right, img.align-left { border-radius: 8px; box-shadow: 0 3px 12px rgba(23, 92, 57, .15); }
img.align-right { float: right; margin: 4px 0 14px 22px; }
img.align-left { float: left; margin: 4px 22px 14px 0; }

/* how to get there / contact */
.label { color: var(--mk-green); }
.contact-list { list-style: none; margin: 0 0 18px; padding: 0; }
.contact-list li { margin: 0 0 8px; padding-left: 28px; position: relative; }
.contact-list i { position: absolute; left: 0; top: 4px; color: var(--mk-mint); }
.note { background: var(--mk-mint-soft); border-left: 4px solid var(--mk-mint); border-radius: 8px; padding: 14px 18px; font-size: 14.5px; }

/* ---------- footer ---------- */
#site-footer { background: var(--mk-green-dark); color: #d6e8de; font-size: 14px; line-height: 1.8; margin-top: 10px; }
#site-footer .ft-inner { max-width: 1100px; margin: 0 auto; padding: 30px 16px; display: flex; flex-wrap: wrap; gap: 18px 40px; justify-content: space-between; box-sizing: border-box; }
#site-footer a { color: #fff; }
#site-footer a:hover { color: var(--mk-mint); }
#site-footer strong { color: #fff; }
#site-footer .ft-links { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: flex-start; }

/* ---------- tablet / mobile ---------- */
@media (max-width: 900px) {
	.room-cards { grid-template-columns: repeat(2, 1fr); }
	#header ul.menu > li > a { font-size: 14px; padding: 10px 7px 12px; }
}
@media (max-width: 768px) {
	#header { position: relative; }
	.hdr-inner { flex-wrap: wrap; gap: 6px 14px; padding: 8px 12px; }
	.hdr-brand img { width: 110px; }
	.hdr-right { align-items: stretch; flex: 1 1 100%; }
	.hdr-contact { justify-content: flex-start; font-size: 13px; gap: 2px 14px; }
	.hdr-contact a.email-txt { display: none; }
	#header ul.menu { width: 100%; margin-top: 4px; }
	#header ul.menu > li { display: none; float: none; width: 100%; }
	#header ul.menu li a { display: block; }
	#header ul.menu > li.menu-toggle, #header ul.menu.open > li { display: block; }
	#header ul.menu.open li ul { display: block !important; position: static; }
	#header ul.menu li.has-menu span.arrow { display: none; }
	#header ul.menu li.menu-toggle a { border: 1px solid var(--mk-line); border-radius: 8px; padding: 9px 14px; color: var(--mk-green); }
	.grid ul.menu.vertical li { display: block; }
	#header ul.menu > li > a { border-bottom: 1px solid var(--mk-line); padding: 10px 6px; }
	#header ul.menu li ul { box-shadow: none; margin: 0 0 0 12px !important; padding: 0; position: static; }
	#headline { padding: 22px 14px; }
	#headline h2 { font-size: 23px; }
	#page-container > .grid.clearfix { margin: 14px 10px 20px !important; padding: 20px 16px; width: auto; }
	#slider + .grid.clearfix { margin-top: 14px !important; }
	h3 { font-size: 22px; }
	.room-cards { grid-template-columns: 1fr; }
	img.align-right, img.align-left { float: none; display: block; margin: 0 0 14px; }
	#cfg-contactform-2 .cfg-label, #cfg-contactform-2 .cfg-element-set { float: none !important; width: 100% !important; }
	#cfg-contactform-2 .cfg-label { padding-top: 0; margin-bottom: 4px; }
	table { font-size: 13px; }
	table td, table th { padding: 7px 6px; }
	iframe { max-width: 100%; }
}