/*
Theme Name: King Rama 3
Theme URI: https://wordpress.org/themes/kingrama3/
Author: the WordPress team
Author URI: https://wordpress.org
Description: kingrama3 emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kingrama3
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */

:root {
	--color-r3-blue: #241E53;
	--color-r3-burnt: #7D450F;
	--color-r3-gold: #BA8D2C;
	--color-r3-gold-2: #E3D7B4;
}

:root :where(.is-layout-flow) > * {
	margin-block-start: 0px;
}

body {
	font: normal normal normal 16px/30px K2D;
	letter-spacing: 0.26px;
	line-height: 1.6rem;
}

.bg-color-section {
	background: transparent linear-gradient(180deg, #FFFFFF 0%, #E3D7B4 100%) 0% 0% no-repeat padding-box;
}

.bg-color-section-2 {
	background: transparent linear-gradient(180deg, #DAC594 0%, #E3D7B400 130%) 0% 0% no-repeat padding-box;
}

a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: 5px;
}

.btn {
	cursor: pointer;
	font: normal normal 300 15px/20px K2D;
	letter-spacing: 0px;
	padding: 5px;

	&.btn-link {
		color: var(--color-r3-blue);
		text-decoration: underline;
		text-underline-offset: 5px;

		&:hover {
			text-decoration: none;
		}
	}
}

.btn-link-badge {
	font: normal normal 600 13px/17px K2D;
	letter-spacing: 0px;
	background-color: var(--color-r3-gold-2);
	color: var(--color-r3-blue);
	border: 1px solid var(--color-r3-gold-2);
	padding: 3px 24px;
	border-radius: 20px;
	text-decoration: none;

	&:hover,
	&.active {
		border-color: var(--color-r3-gold);
	}
}

/* font size */
h1 {
	font: normal normal 600 40px/60px K2D;
	letter-spacing: 0px;
}

h2 {
	font: normal normal normal 30px/40px K2D;
	letter-spacing: 0px;
}

h3 {
	font: normal normal 600 30px/50px K2D;
	letter-spacing: 0px;
}

h6 {
	font: normal normal normal 20px/30px K2D;
	letter-spacing: 0px;
	line-height: 30px;
}

.text-title {
	font: normal normal normal 17px/25px K2D;
	letter-spacing: 0px;
}

.text-semibold {
	font: normal normal 600 17px/25px K2D;
	letter-spacing: 0px;
}

.text-light {
	font: normal normal 200 15px/25px K2D;
	letter-spacing: 0px;
}

.text-normal {
	font: normal normal normal 15px/20px K2D;
	letter-spacing: 0px;
}

.text-thin {
	font: normal normal 100 13px/17px K2D;
	letter-spacing: 0px;
}

.text-link {
	font: normal normal normal 13px/17px K2D;
	letter-spacing: 0px;
}

.text-badge {
	font: normal normal 600 13px/17px K2D;
	letter-spacing: 0px;
}

p {
	margin-block-start: 0px;
	margin-top: 0px;
}

/* font color */
.color-burnt {
	color: var(--color-r3-burnt);
}

.color-gold-2 {
	color: var(--color-r3-gold-2);
}

.html-style-block {
	ol.wp-block-list {
		list-style-type: decimal; 
	}
}

/* image */
.card-thumbnail {
	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

	&.aspect-thumb {
		img {
			aspect-ratio: 16 / 11;
		}
	}
}

/* badges */
.ul-badges {
	li {
		background-color: var(--color-r3-gold-2);
		color: var(--color-r3-burnt);
		padding: 3px 24px;
		border-radius: 20px;
	}
}

@media screen and (max-width: 640px) {
	h1 {
		font: normal normal 600 30px/50px K2D;
		letter-spacing: 0px;
	}

	h2 {
		font: normal normal normal 25px/30px K2D;
		letter-spacing: 0px;
	}

	h3 {
		font: normal normal 600 20px/40px K2D;
		letter-spacing: 0px;

		&.ignore-mobile {
			font: normal normal 600 30px/50px K2D;
		}
	}

	h6 {
		font: normal normal normal 16px/30px K2D;
		letter-spacing: 0px;
	}
}

/* Focus styles */
/* :where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
} */

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}

.block-object-cover img {
	width: 100%;
        height: 100%;
        object-fit: cover;
}


/*
 * link
*/
.r3-link {
	a {
		text-decoration: none;
		padding-left: 4px;
		border-left: 1px solid var(--color-r3-gold);
	}
}

/*
 * navigation
*/
.bg-navigation-r3 {
	height: 70px;
	padding-top: 9px;
	padding-bottom: 9px;
	background: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);

	.wp-block-site-logo {
		margin-bottom: -55px;
		filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.5));
	}

	.wp-block-navigation {
		width: 100%;
		display: flex;
		justify-content: center;
		justify-items: center;
		padding-left: 10px;
		padding-right: 10px;
		gap: 20px 40px;

		.wp-block-navigation-item {
			.wp-block-navigation-item__content {
				font: normal normal 600 18px/24px K2D;
				letter-spacing: 0px;
				color: var(--color-r3-blue);
				opacity: 1;
				outline-offset: 4px;
			}
		}

		.current-menu-item {
			.wp-block-navigation-item__content {
				text-decoration: underline;
			}
		}

		/* responsive */
		&:has(> .wp-block-navigation__responsive-container-open) {
			justify-content: end;
		}


		/* button.wp-block-navigation__responsive-container-open {
			padding-left: 30px;

			svg {
				display: none;
			}

			&::before {
				content: "";
				width: 20px;
				height: 20px;
				background-image: url('./assets/images/rama3/icons/hamburger.png');
				background-size: contain;
				display: inline-block;
			}
		} */

		.wp-block-navigation__responsive-container {
			&.is-menu-open {
				height: 100dvh;
				background-color: var(--color-r3-gold);

				.wp-block-navigation {
					margin-top: 60px;
					gap: 20px 0px;

					.wp-block-home-link {
						display: none;
					}

					.wp-block-navigation-item {
						width: 100%;

						.wp-block-navigation-item__content {
							width: 100%;
							justify-items: center;
							justify-content: center;
							text-align: center;
							font: normal normal 600 25px/30px K2D;
							color: #FFFFFF;
						}
					}
				}

				.wp-block-navigation__responsive-close {
					button.wp-block-navigation__responsive-container-close {
						display: flex;
						justify-items: center;
						justify-content: center;
						color: #FFFFFF;
						
						&::after {
							content: "ปิด";
							display: inline-block;
							margin-top: -2px;
						}
					}
				}
			}
		}
	}
}

.is-mobile-only {
	display: none;
}

@media (width <= 1175px) {

	.is-mobile-only {
        display: block;
    }
	
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	} 

	/* btn */
 	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: block;
		padding-left: 40px;
			svg {
				display: none;
			}

		&::before {
			content: "";
			width: 20px;
			height: 20px;
			background-image: url('./assets/images/rama3/icons/hamburger.png');
			background-size: contain;
			display: inline-block;
		}
	}

	/* button.wp-block-navigation__responsive-container-open::before {
		content: "";
				width: 20px;
				height: 20px;
				background-image: url('./assets/images/rama3/icons/hamburger.png');
				background-size: contain;
				display: inline-block;
	} */

	.is-home-page-menu {
        display: none !important;
    }

}

@media screen and (max-width: 600px) {
	.is-mobile-only {
		display: block;
	}
}

.owl-dots {
    text-align: center;
    margin-top: 24px;
	pointer-events: auto;
	display: flex;
    overflow-x: auto; /* scroll horizontal */
    -webkit-overflow-scrolling: touch;
	scroll-behavior: smooth; 
}
.owl-dots .owl-dot {
    flex: 0 0 70px;  /* fix width 70px */
    height: 70px;    /* fix height 70px */
    margin: 0 5px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 4px;
    cursor: pointer;
	border: 1px solid var(--color-r3-gold);
}
.owl-dots .owl-dot img {
    object-fit: cover;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}
.owl-dots .owl-dot.active img {
    border-color: #333;
    transform: scale(1.1);
}
.owl-carousel .owl-item {
	padding: 0px 2px;
}
.owl-carousel .owl-item .item {
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border: 1px solid var(--color-r3-gold);
}
.owl-carousel .owl-item .item img{
	width: 100%;
    height: 100%;
    object-fit: cover;       
    object-position: center; 
    display: block;
}


/* ----------------------------------------------------
---- add class gutenberg block
------------------------------------------------------- */
.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* อัตราส่วน 16:9 */
  height: 0;
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.image-full {
	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}
.block-cover-start {
	.wp-block-cover__inner-container {
		position: absolute;
		top: 0;
		height: 100%;
	}
}


/*
 * Forcefully apply custom button color to the search form
 * to override theme's default styles.
 */
.search-form-with-burnt-border .wp-block-search__input {
    border-color: var(--color-r3-burnt) !important;
	background-color: white;
}

.search-form-with-burnt-border .wp-block-search__button {
    background-color: var(--color-r3-burnt) !important;
    color: white !important;
    border: none;
}

/*
 * This style block contains the necessary CSS for multi-line text truncation.
 * It ensures the title and excerpt do not overflow the card. 
 */
    .custom-line-clamp-2 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .custom-line-clamp-3 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .custom-line-clamp-2 > p,
    .custom-line-clamp-3 > p {
        margin: 0;
    }

.sm-block {
     display: none;
    }

.sm-hidden {
	display: block;
}

@media (width >= 640px) {
    .sm-block {
        display: block;
    }

	.sm-hidden {
        display: none;
    }
}