/*

 Theme Name:   TK266 (on Newspaper)

 Theme URI:    https://266.com.hk

 Description:  The TK theme derived from Newspaper theme

 Author:       Jo Ba

 Author URI:   https://266.com.hk

 Template: Newspaper

 Version:      1.0.0

 License:      GNU General Public License v2 or later

 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready

 Text Domain:  newspaper_tk266

*/


/* align all element's font-family */
.header,
.landingpage,
.postpage,
.footer { font: var(--font-set-p); }

/* IMPORTANT -- to clear the font-size settings by the theme and use the global settings in this CSS */
.header *,
.landingpage *, 
.postpage *,
.footer * { font-size: inherit; }

/* set the font size of headers and notes */
.landingpage h1, .landingpage .h1-text { font: var(--font-set-h1); margin:0;}
.landingpage h2, .landingpage .h2-text { font: var(--font-set-h2); margin:0;}
.landingpage h3, .landingpage .h3-text { font: var(--font-set-h3); margin:0;}
.landingpage h4, .landingpage .h4-text { font: var(--font-set-h4); margin:0;}
.landingpage h5, .landingpage .h5-text { font: var(--font-set-h5); margin:0;}
.landingpage h6, .landingpage .h6-text { font: var(--font-set-h6); margin:0;}
.landingpage p, .landingpage .p-text  { font: var(--font-set-p);}
.landingpage .notes { font: var(--font-set-notes);}

.postpage h1, .postpage .h1-text { font: var(--font-set-h1); margin:0;}
.postpage h2, .postpage .h2-text { font: var(--font-set-h3); margin:0;}
.postpage h3, .postpage .h3-text { font: var(--font-set-h4); margin:0;}
.postpage h4, .postpage .h4-text { font: var(--font-set-h5); margin:0;}
.postpage h5, .postpage .h5-text { font: var(--font-set-h6); margin:0;}
.postpage h6, .postpage .h6-text { font: var(--font-set-h6); margin:0;}
.postpage p, .postpage .p-text  { font: var(--font-set-p);}
.postpage .notes { font: var(--font-set-notes);}


/* set the font size for different screen size */
:root {
		--font-set-h1: 700 56px/1.1 var(--global-1);
		--font-set-h2: 700 48px/1.1 var(--global-1);
		--font-set-h3: 700 40px/1.1 var(--global-1);
		--font-set-h4: 600 32px/1.1 var(--global-1);
		--font-set-h5: 600 24px/1.1 var(--global-1);
		--font-set-h6: 600 24px/1.1 var(--global-1);
		--font-set-p: 500 18px/1.5 var(--global-1);
		--font-set-notes: 400 14px/1.5 var(--global-1);

}


/* 1. Desktop Viewport */
@media (min-width: 1200px) {
	:root {
		--font-set-h1: 700 56px/1.1 var(--global-1);
		--font-set-h2: 700 48px/1.1 var(--global-1);
		--font-set-h3: 700 40px/1.1 var(--global-1);
		--font-set-h4: 600 32px/1.1 var(--global-1);
		--font-set-h5: 600 24px/1.1 var(--global-1);
		--font-set-h6: 600 24px/1.1 var(--global-1);
		--font-set-p: 500 18px/1.5 var(--global-1);
		--font-set-notes: 400 14px/1.5 var(--global-1);
	}
}

/* 2. Landscape Viewport */
@media (min-width: 1019px) and (max-width: 1199px) {
	
	:root {
		--font-set-h1: 700 48px/1.1 var(--global-1);
		--font-set-h2: 700 40px/1.1 var(--global-1);
		--font-set-h3: 700 32px/1.1 var(--global-1);
		--font-set-h4: 600 24px/1.1 var(--global-1);
		--font-set-h5: 600 20px/1.1 var(--global-1);
		--font-set-h6: 600 20px/1.1 var(--global-1);
		--font-set-p: 500 18px/1.5 var(--global-1);
		--font-set-notes: 400 14px/1.5 var(--global-1);
	}
}

/* 3. Portrait Viewport */
@media (min-width: 768px) and (max-width: 1018px) {
	:root {
		--font-set-h1: 700 40px/1.1 var(--global-1);
		--font-set-h2: 700 32px/1.1 var(--global-1);
		--font-set-h3: 700 24px/1.1 var(--global-1);
		--font-set-h4: 600 20px/1.1 var(--global-1);
		--font-set-h5: 600 18px/1.1 var(--global-1);
		--font-set-h6: 600 18px/1.1 var(--global-1);
		--font-set-p: 500 16px/1.5 var(--global-1);
		--font-set-notes: 400 12px/1.5 var(--global-1);
	}
}

/* 4. Phone Viewport */
@media (max-width: 767px) {
	:root {
		--font-set-h1: 800 32px/1.1 var(--global-1);
		--font-set-h2: 800 29px/1.1 var(--global-1);
		--font-set-h3: 800 26px/1.1 var(--global-1);
		--font-set-h4: 800 20px/1.1 var(--global-1);
		--font-set-h5: 800 18px/1.1 var(--global-1);
		--font-set-h6: 800 18px/1.1 var(--global-1);
		--font-set-p: 500 18px/1.5 var(--global-1);
		--font-set-notes: 400 12px/1.5 var(--global-1);
	}
}

/* overall experience */ 

/* highlights */
.highlight-text-1 {
	color: var(--primary-1);
}

.highlight-text-2 {
	color: var(--primary-2);
}

.highlight-text-3 {
	color: var(--primary-3);
}


/*** contact form style ***/

/* Container and Grid Setup */

.custom-cf7-form {
    width: 100%;
}

.custom-cf7-form .form-row {
    display: grid;
    gap: 40px;
	  grid-template-columns: 1fr 1fr;
    margin-bottom: 20px;
}

.custom-cf7-form .form-row.file-upload-list {
	grid-template-columns: 1fr 1fr 1fr;
}

.custom-cf7-form .form-row.full-width{
	grid-template-columns: 1fr;
}

.custom-cf7-form .form-row.full-width{
	grid-template-columns: 1fr;
}

.custom-cf7-form .form-row.file-upload-list{
	gap: 10px;
	margin-top: -10px;
	color: #0496ff;
}
.custom-cf7-form .file-upload-list .form-group p {
    margin-bottom:0px;
	  font-size: 80% !important;
}

.custom-cf7-form .form-row .form-group p {
	margin-bottom: 0px !important;
}

/* Label Styling */
.custom-cf7-form label {
    margin-bottom: 5px;
}

.custom-cf7-form .req {
    color: #ef4444; /* Red asterisk */
}

/* Input Underline Styling */
.custom-cf7-form input[type="text"],
.custom-cf7-form input[type="email"],
.custom-cf7-form input[type="tel"],
.custom-cf7-form textarea {
    border: none !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 15px 5px !important;
    color: #0496ff;
	background-color:  #f9f9f9;
    width: 100%;
    box-shadow: none !important;
    border-radius: 0 !important;
    transition: border-color 0.3s ease;
	font: var(--font-set-p);
}


/* Focus State for Inputs */
.custom-cf7-form input[type="text"]:focus,
.custom-cf7-form input[type="email"]:focus,
.custom-cf7-form input[type="tel"]:focus,
.custom-cf7-form textarea:focus {
    outline: none !important;
    border-bottom: 1px solid #4b5563 !important; /* Darker line on focus */
	color: 
}

.custom-cf7-form textarea {
    min-height: 80px;
	  max-height: 120px;
    resize: vertical;
}

/* Helper Text Styling */
.custom-cf7-form .helper-text {
/*     font-size: 75%; */ 
    font: var(--font-set-notes);	
    color: #6b7280;
    margin-top: 0px;
    display: block;
}
/* Error message */
.custom-cf7-form .wpcf7-not-valid-tip{
	font: var(--font-set-notes);
	float:right;
}


/* Submit Button Styling */
.custom-cf7-form .form-row.form-button-row {
	margin-top:30px;
    display: flex;
	flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
	
}

.custom-cf7-form .btn-submit {
	width: auto;
	background-color: var(--clickable);
	padding: 16px 26px;
	font-size: 18px !important;
}

.custom-cf7-form .btn-submit:hover {
    background-color: var(--primary-2);
}


/* blog post */
/** make the post header banner blur **/
.postpage .post-header-bg:after{
	backdrop-filter:blur(5px);
}

/** fix the except font size and style **/
.postpage .tdb_single_excerpt p {
	font: var(--font-set-p);
	font-style:normal;
}

/** fix the page header font size**/
.postpage .tdb-single-title .tdb-title-text {
	font: var(--font-set-h1); margin:0;
}

/** fix the content formats **/
.postpage h1,
.postpage h2,
.postpage h3,
.postpage h4,
.postpage h5,
.postpage h6{
	line-height: 1.5;
}

/* Make it responsive for mobile devices */
@media (max-width: 767px) {
    .custom-cf7-form .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
	
	.custom-cf7-form .form-row.file-upload-list {
		grid-template-columns: 1fr;
	}	
	
}

@media (min-width: 768px) {
    .custom-cf7-form .form-row {
        grid-template-columns: 1fr 1fr;
    }
	.custom-cf7-form .form-row.file-upload-list {
		grid-template-columns: 1fr 1fr;
	}	
	
}

@media (min-width: 1200px) {
	.custom-cf7-form .form-row.file-upload-list {
		grid-template-columns: 1fr 1fr 1fr;
	}	
	
}