/*
	 * Theme Name: Congresso 2027
	 *
	 * assets/css/main.css | Definições de globais e de estrutura
	 *
	 */


	/* Variables */
	:root {

		/* Colors */
  		--main-bg-color: #ffffff;
  		--main-fg-color: #606060;
  		--main-title-color: #ffffff;
  		--main-subtitle-color: #7110cb;
  		--main-subject-color: #bb8de5;
  		--main-highlight-color: #ff9534;
  		--main-area-color: #b074e8;
  		--main-schedule-color: #ff8312;
  		
  		/* Fonts */
  		--main-title-font: 'Sofia Sans Extra Condensed', sans-serif;
  		--main-normal-font:  'Inter', sans-serif;

	}


	 /* Elements */
	html, body {
		font-family: var(--main-normal-font);
		height: 100%;
		margin: 0px;
		padding: 0px;
		color: var(--main-fg-color);
		font-size: clamp(16px, 1.28vw, 24px);
		letter-spacing: 0px;
		overflow-x: hidden;
		font-weight: 400;
	}

	html {
		scroll-behavior: smooth;
	}

	body {
	  overflow-y: scroll; /* Show vertical scrollbar */
	}


	a {
		color: var(--main-fg-color);
	 	text-decoration: none;
	}

	nav {
		position: relative;
		display: block;
		text-transform: uppercase;
	}

	img.filled {
		object-fit: fill;
		width: 100%;
		height: 100%;
	}

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

	img.contain {
		object-fit: contain;
		height: 100%;
	}

	div {
		box-sizing: border-box;
	}

	p {
		margin: 1.5em 0px;
	}
	
	h1, h2, h3,	h4, h5 {
		font-family: var(--main-title-font);
	}


	h1 {
		font-size: 2rem;
		letter-spacing: 0px;
		line-height: 40px;
		font-weight: 700;
		text-transform: uppercase;
	}


	h2 {
		margin-top: 2rem;
		font-size: 1.8rem;
		font-weight: 700;
		letter-spacing: 1px;
		line-height: 30px;
		text-transform: uppercase;
		margin-bottom: 0px;
	}

	h2 + p {
		margin-top: 10px;
	}

	
	h3 {
		margin-top: 2rem;
		margin-bottom: 10px;
		font-size: 1.2rem;
		font-weight: 700;
		letter-spacing: 0px;
		line-height: 30px;
		margin-bottom: 0px;
	}

	h3 + p {
		margin-top: 5px;
	}

	h4 {
		margin-top: 20px;
		margin-bottom: 0px;
	}

	h4 + p {
		margin-top: 5px;
	}

	h5 {
		margin-top: 10px;
		font-size: 12px;
		margin-bottom: 0px;
		line-height: 100%;
	}

	h5 + p {
		margin-top: 5px;
	}

	h3 + h4, h3 + h5 {
		margin-top: 0px;
	}

	.coluna > div > p:first-child {
		margin-top: 3px;
	}

	h1:first-child, 
	h2:first-child, 
	h3:first-child,
	h4:first-child,
	h5:first-child {
		margin-top: 0px; 	
	}

	li {
		font-size:  0.8em;
	}

	sup {
		font-size: 0.5em;
	}

	/* Wordpress */
	.menu, .submenu {
		list-style: none !important;
		margin:  0px;
		padding:  0px;
	}

	.form-process {
	    visibility: hidden;
	    position: absolute;
	    left: 0; top: 0;
	    height:0; width:0;
	    border: none;
	} 


	/* Structure */
	.wrapper {
		margin: 0px auto;
		width: 1250px;
	}


	/* General classes */
	.small {
		font-size: 0.8em;
		line-height:  1.8em;
	}

	.small p {
		margin:  0.8em 0;
	}

	.small h2 {
		font-size: 1.5em;
		line-height: 1.55em;
	}

	.toggle-size {
		display: block;
	}

	[class^="toggle-size-"], [class*=" toggle-size-"] {
		display: none;
	}

	.cols {
		display: flex;
		flex-direction: row;
	}

	.col {
		flex-shrink: 0;
		flex-grow: 1;
	}

	.col:not(:first-child) {
		margin-left: 50px;
	}

	.rows {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
	}

	.row:not(:first-child) {
		margin-top: 25px;
	}

	.button {
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
    	text-decoration: none;
    	text-transform: uppercase;
    	letter-spacing: 0.3px;
    	cursor:pointer;
    	color: #ff0148;
    	padding: 11px 18px;
		border-radius: 15px;
		font-weight: 600;
	}

	.button.disabled {
		cursor: default;
		opacity: 0.5;
	}

	/* Form */
	.form label {
		color: var(--main-schedule-color);
		font-family: var(--main-title-font);
	    font-size: 14px;
	    font-weight: 700;
	    text-transform:  uppercase;
	    margin-right: 5px;
	}

	.form input {
		padding: 7px;
	    border: 1px solid var(--main-schedule-color);
	    border-radius: 5px;
	    background: white;
	    cursor: pointer;
	    font-family: var(--main-title-font);
	    font-size: 14px;
	    color: #4c4c4c;
	    text-transform:  uppercase;
	}


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

	html, body {
		background:  #9e8d92 !important; 
		font-size: clamp(16px, 5.71vw, 19px);
	} 

	nav {
		width:  100%;
	}	

	h1 {
		font-size: 26px;
		line-height: 34px;
	}

	#main {
		min-height: calc(100vh - 60px);
	}

	.wrapper {
		width:  100%;
		min-width: 280px;
	}

	.toggle-size {
		display: none;
	}

	.toggle-size-mobile {
		display: block;
	}

	.image {
		width: 100% !important; 
	}

	.cols {
		flex-direction: column;
		margin-top: 20px;
	}

	.col {
		flex-shrink: 1;
	}

	.col:not(:first-child) {
		margin-left: 0px;
	}

	.button {
		width: calc(100% - 40px);
	}


}