/*
Theme Name: GS1 InterACT
Theme URI: 
Author: Lazy Algorithm
Author URI: 
Description: Theme for GS1 InterACT 2025
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.2
Version: 1.0
License: GNU General Public License v3
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: gs1-interact
*/

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 40px;
}

body {
	background: #ffffff;
}

.main-header {
	background-position: center;
	background-attachment: fixed;
	height: 100vh;
	min-height: 650px;
}

.fixed-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	z-index: 1000;
	transition: opacity 0.3s ease-in-out;
}
  
.relative-header {
	opacity: 0;
	pointer-events: none;
}

.wp-block-navigation .register {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--white);
}

.wp-block-navigation .register a {
	padding: 8px 16px;
}

/* Forms */

.form-actions .wsf-grid {
	gap: 10px;
	padding-inline: 10px;
}

.form-actions .wsf-grid .wsf-tile {
	flex: 0 !important;
	padding: 0;
}

.field-disabled {
	opacity: 0.4 !important;
	pointer-events: none;
}

.wsf-form .wsf-field-wrapper[data-type="html"].session-title {
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: 20px;
}

.wsf-form .programme-selection input[type="checkbox"].wsf-field + label.wsf-label {
	font-size: 1rem;
	line-height: 1.2;
	margin-bottom: 10px;
	margin-left: 30px;
}

.wsf-form .flex-end .wsf-tile.wsf-field-wrapper {
	display: flex;
	justify-content: flex-end;
}

.wsf-form button.wsf-button {
	padding: 8px 16px;
}

.wsf-form button.wsf-button.submit-button,
.wsf-form button.wsf-button.submit-button:hover:enabled:not(:checked):not(:focus) {
	background: var(--wp--preset--color--primary);
	color: #ffffff;
}

.wsf-form hr.wsf-field {
	border: none;
	border-top: 1px solid #efefef;
	margin-block: 20px;
}

.user-data-table {
	border-collapse: collapse;
	font-size: 14px;
	line-height: 1.3;
}

.user-data-table td {
	border: 1px solid #dfdfdf;
	padding: 8px;
	vertical-align: top;
}

.user-data-table th {
	text-align: left;
	padding: 12px 8px;
	border: 1px solid #dfdfdf;
	background: #f5f5f5;
}

.user-data-table .session-time {
	white-space: nowrap;
}

.user-data-table.sessions .ical {
	opacity: 0.4;
	filter: saturate(0);
	transition: 0.2s;
}

.user-data-table.sessions .ical:hover {
	opacity: 1;
	filter: saturate(1);
}

.wp-block-navigation .wp-block-navigation-item.current-menu-item {
	font-weight: 700;
}

.tabulator .tabulator-tableholder .tabulator-placeholder .tabulator-placeholder-contents {
	font-size: 18px;
	font-weight: 600;
	color: #aaa;
}

.programme-selection .time {
	font-family: var(--wp--preset--font-family--roboto-mono);
	font-size: 12px;
	margin-right: 15px;
	padding-right: 15px;
	border-right: 1px solid var(--wp--preset--color--primary);
}

@media( max-width: 560px ) {
	.main-header {
		min-height: 70vh !important;
	}
}

/* Auxiliary Classes */

.flex, .is-layout-flex { display: flex; }
.inline-flex {display: inline-flex}

.flex-1 { flex: 1; }
.flex-2 { flex: 2; }
.flex-3 { flex: 3; }
.flex-4 { flex: 4; }
.flex-5 { flex: 5; }
.flex-align-start { align-items: flex-start; }
.flex-align-center { align-items: center; }
.flex-align-end { align-items: flex-end; }
.flex-justify-start { justify-content: flex-start; }
.flex-justify-center { justify-content: center; }
.flex-justify-end { justify-content: flex-end; }
.flex-space-between { justify-content: space-between; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-wrap { flex-wrap: wrap; }
.flex-shrink-0 { flex-shrink: 0;}
.flex-self-stretch { align-self: stretch; }

.grid, .is-layout-grid { display: grid; }

.grid-align-center { align-items: center; }

.grid-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-4-eq { grid-template-columns: repeat(4, minmax(0, 1fr))}
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.grid-1-2 { grid-template-columns: auto 1fr; }
.grid-40-60 { grid-template-columns: 40% 60%; }
.grid-20-80 { grid-template-columns: 20% 80%; }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); }
.grid-auto-medium { grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); }
.grid-auto-video { grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); }
.grid-auto-250 { grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); }
.grid-auto-small { grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); }
.grid-max-content { grid-auto-rows: max-content; }
.grid-ltr { direction: ltr; }
.grid-rtl { direction: rtl; }
.grid-flow-col { grid-auto-flow: column; }

.gap-2 { gap: 2px; }
.gap-5 { gap: 5px; }
.gap-10 { gap: 10px; }
.gap-15 { gap: 15px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-25 { gap: 25px; }
.gap-30 { gap: 30px; }
.gap-40 { gap: 40px; }
.gap-50 { gap: 50px; }
.gap-60 { gap: 60px; }
.gap-70 { gap: 70px; }
.gap-80 { gap: 80px; }
.gap-90 { gap: 90px; }
.gap-100 { gap: 100px; }
.gap-120 { gap: 120px; }
.gap-160 { gap: 160px; }

.gap-inline-10 { gap: 0 10px; }
.gap-inline-30 { gap: 0 30px; }
.gap-block-10 { gap: 10px 0; }
.gap-block-15 { gap: 15px 0; }
.gap-15-30 { gap: 15px 30px; }
.gap-col-40 { column-gap: 40px; }
.gap-row-10 { row-gap: 10px;}

.m-0 { margin: 0;}
.m-10 { margin: 10px;}
.m-block-10 { margin-block: 10; }
.m-inline-10 { margin-inline: 10; }
.m-b-0 { margin-bottom: 0; }
.m-b-5 { margin-bottom: 5px; }
.m-b-10 { margin-bottom: 10px; }
.m-b-15 { margin-bottom: 15px; }
.m-b-16 { margin-bottom: 16px; }
.m-b-20 { margin-bottom: 20px; }
.m-b-30 { margin-bottom: 30px; }
.m-b-40 { margin-bottom: 40px; }
.m-b-50 { margin-bottom: 50px; }
.m-b-60 { margin-bottom: 60px; }
.m-b-80 { margin-bottom: 80px; }
.m-b-100 { margin-bottom: 100px; }
.m-b--180 { margin-bottom: -180px; }
.m-t-5 { margin-top: 5px; }
.m-t-10 { margin-top: 10px; }
.m-t-20 { margin-top: 20px; }
.m-t-30 { margin-top: 30px; }
.m-t-40 { margin-top: 40px; }
.m-t-50 { margin-top: 50px; }
.m-t-60 { margin-top: 60px; }
.m-t-100 { margin-top: 100px; }
.m-t--20 { margin-top: -20px; }
.m-t--30 { margin-top: -30px; }
.m-t--50 { margin-top: -50px; }
.m-t--80 { margin-top: -80px; }

.p-0 { padding: 0; }
.p-5 { padding: 5px; }
.p-10 { padding: 10px; }
.p-15 { padding: 15px; }
.p-20 { padding: 20px; }
.p-25 { padding: 25px; }
.p-30 { padding: 30px; }
.p-40 { padding: 40px; }
.p-50 { padding: 50px; }
.p-60 { padding: 60px; }
.p-b-0 { padding-bottom: 0; }
.p-b-10 { padding-bottom: 10px; }
.p-b-20 { padding-bottom: 20px; }
.p-l-20 { padding-left: 20px; }
.p-l-40 { padding-left: 40px; }
.p-l-80 { padding-left: 80px; }
.p-r-20 { padding-right: 20px; }
.p-r-40 { padding-right: 40px; }
.p-r-60 { padding-right: 60px; }
.p-t-0 { padding-top: 0; }
.p-t-30 { padding-top: 30px; }
.p-t-50 { padding-top: 50px; }
.p-t-90 { padding-top: 90px; }
.p-block-5 { padding-block: 5px; }
.p-block-10 { padding-block: 10px; }
.p-block-20 { padding-block: 20px; }
.p-block-30 { padding-block: 30px; }
.p-block-40 { padding-block: 40px; }
.p-block-50 { padding-block: 50px; }
.p-block-60 { padding-block: 60px; }
.p-block-100 { padding-block: 100px; }
.p-block-120 { padding-block: 120px; }
.p-inline-10 { padding-inline: 10px; }
.p-inline-15 { padding-inline: 15px; }
.p-inline-20 { padding-inline: 20px; }
.p-inline-25 { padding-inline: 25px; }
.p-inline-30 { padding-inline: 30px; }
.p-inline-40 { padding-inline: 40px; }

.max-w-25 { max-width: 25%; }
.max-w-30 { max-width: 30%; }
.max-w-33 { max-width: 33%; }
.max-w-40 { max-width: 40%; }
.max-w-50 { max-width: 50%; }
.max-w-60 { max-width: 60%; }
.max-w-66 { max-width: 66%; }
.max-w-330 { max-width: 330px; }

.min-h-0 { min-height: 0; }
.min-w-50 { min-width: 50%; }
.min-w-60 { min-width: 60%; }
.min-w-70 { min-width: 70%; }

.w-40 { width: 40%; }
.w-50 { width: 50%; }
.w-60 { width: 60%; }
.w-100 { width: 100%; }

.h-100 { height: 100%; }
.h-auto { height: auto; }

.bg-white { background: #ffffff; }

.border-r-5 { border-radius: 5px; }
.border-r-10 { border-radius: 10px; }
.border-r-100 { border-radius: 100px; }

.relative { position: relative; }
.absolute { position: absolute; }

.list-2-col { column-count: 2; }
.list-3-col { column-count: 3; }
.list-4-col { column-count: 4; }

.round-20 { border-radius: 20px; }

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-upper { text-transform: uppercase; }
.font-w-600 { font-weight: 600; }

.t-01 { transition: 0.1s; }
.t-02 { transition: 0.2s; }
.t-03 { transition: 0.3s; }
.t-05 { transition: 0.5s; }

.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-index-100 { z-index: 100; }

.img-cover { object-fit: cover; }

.sticky { position: sticky; }
.top-80 { top: 80px; }

.ratio-1-1 { aspect-ratio: 1/1  ; }   
.ratio-10-4 { aspect-ratio: 10/4; }

.opacity-02 { opacity: 0.2; }
.opacity-05 { opacity: 0.5; }
.opacity-06 { opacity: 0.6; }
.opacity-075 { opacity: 0.75; }
.opacity-08 { opacity: 0.8; }

.line-height-18 { line-height: 1.8; }
.text-wrap-balance { text-wrap: balance; }