/**
 * Theme Name: Blocksy Brandfugetsu
 * Description: Blocksy Child theme
 * Author: applemint
 * Author URI: https://www.applemint.tech/
 * Template: blocksy
 * Version: 1.0.0-alpha.2
 * Requires PHP: 7.4
 * Tested up to: 6.2
 * Text Domain: blocksy
 */

/* Variables */

/* Font size */

/* Border */

/* Breakpoints */

/* ---------------------------------------------
  # Base
--------------------------------------------- */

/* ---------------------------------------------
  ## Body Elements
--------------------------------------------- */

/* ---------------------------------------------
  ## Media
--------------------------------------------- */
.has-mobile-fv main > .ct-container:first-child {

	/* Although it's not media, it affects the looking of the First View */
}

@media screen and (max-width: 768px) {

	.has-mobile-fv main > .ct-container:first-child {
		padding-top: 0;
	}
}

.has-mobile-fv main article.page {
	display: flex;
	flex-direction: column;
}

@media screen and (max-width: 768px) {

	.has-mobile-fv main article.page .ct-featured-image {
		order: 1;
	}
}

@media screen and (max-width: 768px) {

	.has-mobile-fv main article.page .hero-section {
		order: 2;
	}
}

.has-mobile-fv main article.page .entry-content {
	order: 3;
}

@media screen and (max-width: 768px) {

	.has-mobile-fv .ct-featured-image {
		width: 100vw;
		margin-left: calc(50% - 50vw);
	}
}

@media screen and (min-width: 1000px) {

	.has-mobile-fv .ct-featured-image {
		padding-bottom: 24px;
	}
}

/* ---------------------------------------------
  ## Typography
--------------------------------------------- */
.text-size-base {
	font-size: 16px;
}

.text-size-small {
	font-size: 14px;
}

.text-size-smaller {
	font-size: 12px;
}

.text-size-middle {
	font-size: 18px;
}

.text-size-large {
	font-size: 24px;
}

.text-size-larger {
	font-size: 28px;
}

.text-size-largest {
	font-size: 32px;
}

.text-weight-base {
	font-weight: 400;
}

.text-weight-demi {
	font-weight: 500;
}

/* ---------------------------------------------
  # Components
--------------------------------------------- */

/* ---------------------------------------------
  ## Navigation
--------------------------------------------- */
#mega-menu-wrap-menu_1 #mega-menu-menu_1 a.mega-menu-link {
	text-align: center;
}

/* Breadcrumbs
================================================== */
.bcn-container {
	border-bottom: 1px solid #ddd;
	padding: 24px 0;
}

.bcn-container span {
	font-size: 14px;
}

/* ---------------------------------------------
  ## Header
--------------------------------------------- */

/*
* data-device: desktop
*/

/*
* data-row: top
*/
header [data-row="top"] [data-id="widget-area-1"] .wp-block-columns {
	margin-bottom: 0;
}

/*
* data-row: middle
*/
#mega-menu-wrap-menu_1 #mega-menu-menu_1 li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator {
	display: none;
}

#mega-menu-wrap-menu_1 #mega-menu-menu_1 li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator::after {
	content: unset;
}

/*
* data-device: mobile
*/

/* ---------------------------------------------
  ## Main Content
--------------------------------------------- */
#main {
	position: relative;
}

#main > .ct-container-full::before,
#main > .ct-container-full::after,
#main > .ct-container::before,
#main > .ct-container::after {
	background-image: url("/assets/brandfugetsu.tw/wp-content/themes/blocksy-brandf/assets/img/bg-up.png");
	background-repeat: repeat-x;
	content: "";
	position: absolute;
	width: 100%;
	height: 108px;
	left: 0;
	z-index: -1;
}

#main > .ct-container-full::before,
#main > .ct-container::before {
	top: 0;
}

#main > .ct-container-full::after,
#main > .ct-container::after {
	bottom: 0;
	transform: scaleY(-1);
}

#main .hero-section ~ .ct-container::before {
	top: 400px;
}

/* --------------------------------------------------
   Client Voices
-------------------------------------------------- */
.client-voice .is-layout-grid > li {
	border: 1px solid var(--paletteColor5);
}

.client-voice .is-layout-flex {
	gap: 16px;
}

.client-voice .wp-block-query-pagination > .wp-block-query-pagination-next,
.client-voice .wp-block-query-pagination > .wp-block-query-pagination-numbers,
.client-voice .wp-block-query-pagination > .wp-block-query-pagination-previous {
	margin-right: 0;
}

.client-voice .wp-block-query-pagination .wp-block-query-pagination-previous::after,
.client-voice .wp-block-query-pagination .wp-block-query-pagination-next::after {
	content: "";
	display: block;
	width: 30px;
	background: url("/assets/brandfugetsu.tw/wp-content/themes/blocksy-brandf/assets/svg/chevron-down.svg");
	height: 30px;
	background-size: 10px;
	border: 1px solid var(--paletteColor5);
	background-repeat: no-repeat;
	background-position: center;
}

.client-voice .wp-block-query-pagination .wp-block-query-pagination-previous::after {
	transform: rotate(90deg);
}

.client-voice .wp-block-query-pagination .wp-block-query-pagination-next::after {
	transform: rotate(270deg);
}

.client-voice .wp-block-query-pagination .wp-block-query-pagination-numbers {
	display: flex;
	gap: 16px;
}

/* ---------------------------------------------
  ## Post Type Specific Styles
--------------------------------------------- */

/*
Single: Result
================================================== */
.single-buying_report .entry-content .wp-block-table table {
	border-width: 0;
}

.single-buying_report .entry-content .wp-block-table thead {
	background: #f8f8f8;
	border-bottom: 0;
}

.single-buying_report .entry-content .wp-block-table th,
.single-buying_report .entry-content .wp-block-table td {
	font-weight: 400;
	border: 0;
}

/* ---------------------------------------------
  ## Footers
--------------------------------------------- */

/*
* data-row: middle
*/
#footer [data-row="middle"] {
	padding-bottom: 120px;
}

/*
* data-row: bottom
*/
#footer [data-row="bottom"] {
	background-color: #ecf4f7;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 99;
}

#footer [data-row="bottom"] .wp-block-columns {
	margin-bottom: 0;
}

#footer [data-row="bottom"] > div {
	--container-spacing: 16px;
}

@media screen and (max-width: 767px) {

	#footer [data-row="bottom"] .stk-block-column {
		max-width: 20%;
	}
}

/* ---------------------------------------------
  # Modules
--------------------------------------------- */

/* ---------------------------------------------
  ## Contact Form 7
--------------------------------------------- */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
	background-color: #f8f8f8;
}

.wpcf7 p:empty {
	margin: 0;
}

.brandf-form-label {
	font-weight: 700;
	margin-bottom: 12px;
}

.brandf-form-row {
	column-gap: 24px;
	display: flex;
	flex-wrap: wrap;
}

.brandf-form-row > .brandf-form-col {
	flex-grow: 1;
	margin-bottom: 28px;
}

.brandf-form-row > .brandf-form-col-6 {
	max-width: 50%;
}

@media screen and (max-width: 768px) {

	.brandf-form-row > .brandf-form-col-6 {
		max-width: 100%;
	}
}

.brandf-form-row > .brandf-form-col-12 {
	width: 100%;
}

.wpcf7-field-group {
	border-bottom: 1px solid #ddd;
	margin-bottom: 28px;
}

.wpcf7-field-group-add,
.wpcf7-field-group-remove {
	background: #fff;
	border: 1px solid #ddd;
	margin: 0 12px 28px 0;
	padding: 10px 60px;
}

.brandf-form-row-files .brandf-form-cols-file > .stk-row {
	--stk-column-gap: 12px;
	align-items: center;
}

.brandf-form-row-files .brandf-form-cols-file .stk-block-column:first-child {
	max-width: 140px;
}

.brandf-form-row-files .brandf-form-cols-file .stk-block-column > .stk-column-wrapper {
	--stk-columns-spacing: 0;
}

.brandf-form-row-files .brandf-form-cols-file .stk-block-column .stk-button {
	--stk-button-text-color: $color__text-heading;
	background: transparent;
	border: 1px solid #ddd;
	font-weight: 400;
}

.brandf-form-file {
	position: fixed;
	bottom: 100%;
	right: 100%;
}

.brandf-form-submit {
	display: flex;
	justify-content: center;
}

.brandf-form-submit .wpcf7-submit {
	background-color: #191970;
}

@media screen and (min-width: 768px) {

	.brandf-form-submit .wpcf7-submit {
		min-width: 423px;
	}
}

.brandf-form-submit .wpcf7-spinner {
	display: block;
}

/* Contact Form 7: Taiwan Address */
div[role="tw-city-selector"] {
	display: flex;
	width: 40%;
	column-gap: 12px;
	margin-bottom: 12px;
}

@media screen and (max-width: 768px) {

	div[role="tw-city-selector"] {
		width: 100%;
	}
}

#client-address {
	visibility: hidden;
	position: fixed;
}

/* ---------------------------------------------
  ## Google Review
--------------------------------------------- */
.wp-gr.wpac .wp-google-list .wp-google-reviews {
	display: flex;
	flex-wrap: wrap;
	column-gap: 24px;
	row-gap: 5px;
}

.wp-gr.wpac .wp-google-list .wp-google-reviews .wp-google-review {
	width: calc(( 100% - 48px ) / 3) !important;
	border: 1px solid var(--paletteColor5) !important;
	padding: 20px !important;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}

@media screen and (max-width: 1000px) {

	.wp-gr.wpac .wp-google-list .wp-google-reviews .wp-google-review {
		width: calc(( 100% - 24px ) / 2) !important;
	}
}

@media screen and (max-width: 768px) {

	.wp-gr.wpac .wp-google-list .wp-google-reviews .wp-google-review {
		width: 100% !important;
	}
}

.wp-gr.wpac .wp-google-list .wp-google-reviews .wp-google-left {
	margin-bottom: 16px !important;
}

.wp-gr.wpac .wp-google-list .wp-google-reviews .wp-google-right {
	height: 100%;
}

.wp-gr.wpac .wp-google-list .wp-google-reviews .wp-google-right .wp-google-stars {
	display: block;
	width: 100%;
	margin-bottom: 8px !important;
}

/* ---------------------------------------------
  ## Tabs
--------------------------------------------- */
.tab-index .stk-block-button.tab-btn {
	--stk-button-background-color: var(--paletteColor6);
	--stk-button-text-color: var(--paletteColor4);
}

.tab-index .stk-block-button.tab-btn.active,
.tab-index .tab-btn:hover a {
	--stk-button-background-color: var(--paletteColor2);
	--stk-button-text-color: var(--paletteColor7);
}

.tab-content {
	column-gap: 24px;
	row-gap: 20px;
}

.tab-content:not(.show) {
	display: none;
}

/* ---------------------------------------------
  # Utilities
--------------------------------------------- */

/* ---------------------------------------------
  ## Alignments
--------------------------------------------- */
.text-center {
	text-align: center;
}

/* ---------------------------------------------
  ## Responsive Utilities
--------------------------------------------- */
@media screen and (max-width: 768px) {

	.hide-mobile {
		display: none;
	}
}