/*
Theme Name: ITCM
Template: twentytwentyfour
Theme URI: 
Author: ITCM
Author URI: 
Description: 
Requires at least: 6.5
Tested up to: 6.7 
Requires PHP: 8.1
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: theme-itcm
Tags: blog, news, portfolio, one-column, wide-blocks, accessibility-ready, block-patterns, block-styles, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, rtl-language-support, sticky-post, style-variations, threaded-comments, translation-ready, 
*/

/* Generic Resets and Defaults */
:root {
	--itcm-gradient-light: linear-gradient(127deg, rgba(247,165,44,.2) 0%, rgba(226,14,104,.2) 100%);
	--itcm-border-radius: 0.25rem;
	--itcm-gradient-full: linear-gradient(
		-40deg,
		hsl(335 88% 57%) 20%,
		hsl(36 93% 67%) 40%,
		hsl(36 93% 67%) 45%,
		hsl(335 88% 57%) 65%
	);
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
}
  
:target {
    scroll-margin-top: 175px !important;
}

/* push footer to bottom */
.wp-site-blocks {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0));
}

main {
    flex: 1;
}
/* END push footer to bottom */

@media (min-width: 840px) {
    header {
      position: sticky;
      top: var(--wp-admin--admin-bar--height, 0);
      z-index: 9999;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    }
}

p {
    text-wrap: pretty;
  }
  
strong {
    font-weight: 800;
}

body.home header > div {
  margin-bottom: 0 !important;
}

.wp-block-button a {
    transition: background-color 0.15s
}

.is-style-outline.is-style-outline.wp-block-button .wp-block-button__link {
    padding: 0.5rem 1.4rem;
    border: 2px solid var(--wp--preset--color--accent-1);
    color: var(--wp--preset--color--accent-1);
}

.is-style-outline.is-style-outline.wp-block-button .wp-block-button__link:hover {
    background-color: color-mix(in oklab, var(--wp--preset--color--accent-1) 95%, white);
    color: var(--wp--preset--color--base-1);
    border: 2px solid color-mix(in oklab, var(--wp--preset--color--accent-1) 95%, rgb(84, 28, 28));
}

a:focus {
    outline: none;
}

/* Mobile menu */
.wp-block-navigation__responsive-container-close svg,
.wp-block-navigation__responsive-container-open svg {
  width: 28px;
  height: 28px;
}

.has-modal-open {
    /* space for log at top */
    & .wp-block-navigation__container {
        margin-top: 60px;
        margin-left: 10px;
    }


    /* background color */
    & .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
        background-color: var(--wp--preset--color--base-2);
    }

    & .wp-block-navigation-submenu {
        margin-top: 0px;
        margin-bottom: 0px;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* text color */
    & .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
        color: var(--wp--preset--color--contrast-1);
    }

    /* text size first level */
    & .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > ul > li > a.wp-block-navigation-item__content {
        font-size: var(--wp--preset--font-size--x-large);
        font-weight: 500;
        line-height: 2;
        font-family: var(--wp--preset--font-family--heading) !important;
    }

    /* sub levels */
    & .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        /* font-size: var(--wp--preset--font-size--large); */
        line-height: 1.3;
        padding: 0;
        margin-top: 4px;
        margin-bottom: 8px;
    }

    & .wp-block-navigation__responsive-container .wp-element-button,
    & .wp-block-navigation__responsive-container .wp-block-button__link {
      font-size: var(--wp--preset--font-size--large) !important;
      margin-top: 2rem;
    }

    & .wp-block-navigation__responsive-container-close {
        top: 10px;
        color: var(--wp--preset--color--contrast-1);
    }

}

/* Contact Form 7 */
.wpcf7 {
    --form-spacing: 1.5em;
    box-sizing: border-box;
    padding: 0 var(--form-spacing) calc(var(--form-spacing) * 2);
    background-color:  var(--wp--preset--color--base-2);
  
    & * {
      box-sizing: border-box !important;
    }
  
    & p {
      margin: 0;
      padding: 0;
    }
  
    & .wpcf7-list-item {
      margin: 0;
    }
  
    & .form-row {
      @media (min-width: 768px) {
        display: flex;
        gap: var(--form-spacing);
  
        & > p {
          flex: 1;
        }
      }
    }
  
    & div:not(.consent) label {
      margin-top: calc(var(--form-spacing) * 1.5);
      display: inline-block;
      width: 100%;
  
      :where(input, textarea, select) {
        font-family: var(--wp--preset--font-family--body);
        padding: 1em;
        margin-top: calc(var(--form-spacing) / 3);
        width: 100% !important;
        background-color:  var(--wp--preset--color--base-0);
        color: var(--wp--preset--color--constrast-1);
  
        &:not([type="submit"]) {
          font-size: 0.9em;
          border: 0;
        }
      }
  
      :where(textarea) {
        height: 10em;
      }
    }
  
    & input[type="submit"] {
      margin-top: var(--form-spacing);
    }
  
    & div.consent {
      margin-top: var(--form-spacing);
    }
  }


.columns-300px {
  columns: 300px;
}




/* Forms and Inputs */
form input[type=text],
form input[type=search],
.wpcf7-form input[type=email] {
    width: 100%;
}

form.itcm-form * {
    margin: 10px auto 10px;
}

form.itcm-form input {
    padding: 0.5rem;
    font-size: 1rem;
    outline: none;
    border: 0;
}

form.itcm-form input::placeholder {
    color: #AAA;
}

form.itcm-form {
    background: #292929;
    border: 1px solid #292929;
    border-radius: var(--itcm-border-radius);
    color: white !important;
}


/* Animations */
@keyframes movingGradient {
	0% {
		background: rgba(247,135,44,1);
	}
	100% {
		background: rgba(226,14,104,1)
	}
}


@keyframes movingBackground {
	0% {
		background-position: 0 50%;
	}

	50% {
		background-position: -100% 50%;
	}
	
	100% {
		background-position: -200% 50%;
	}
}

/* Form Specific States */
.itcm-submit-wrapper {
	width: 250px;
	display: inline-block;
	padding: 3px;
	background-image: var(--itcm-gradient-full);
	animation: movingBackground 2s linear infinite;
	border-radius: 6px;
	background-size: 200%;
}

form.itcm-form input[type=submit] {
	background: #292929;
  color: white;
	border: 0;
	width: 100%;
  text-transform: uppercase;
  padding: 0.5rem;
  margin: 0;
}

.itcm-submit-wrapper:hover, 
.itcm-submit-wrapper.submitted {
	animation: movingBackground 0.5s linear infinite;
}

.itcm-submit-wrapper:active,
.itcm-submit-wrapper:focus {
  outline: none !important;
}

.itcm * {
  font-family: var(--wp--preset--font-family--body);
}

/* Result Styles */
.itcm-result * {
    box-sizing: border-box;
}

.itcm-result > *:not(:last-child) {
    margin-top: 0;
    margin-bottom: 2rem;
}

.itcm-result,
form.itcm-form {
    padding: 1em;
    margin-bottom: 1em;
}

.itcm-result {
    --itcm-result-hue: 190;
		--itcm-result-bg-sat: 100%;
		--itcm-result-border-sat: 50%;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    border-radius: var(--itcm-border-radius);
    margin-block: 1rem;
    background-color: hsl(var(--itcm-result-hue), var(--itcm-result-bg-sat), 95%);
    border: 1px solid hsl(var(--itcm-result-hue) var(--itcm-result-border-sat) 80%);
	:is(p, h1, h2, h3, h4, h5, h6) {
		color: hsl(var(--itcm-result-hue) 35% 30%);
	}
}

.itcm-result-success {
    --itcm-result-hue: 140;
}

.itcm-result-warning {
    --itcm-result-hue: 30;
}

.itcm-result-danger {
    --itcm-result-hue: -20;
}

.itcm-result-dark {
	--itcm-result-bg-sat: 10%;
	--itcm-result-border-sat: 10%
}

/* Header Styles */
.itcm-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2rem;
}

/* Profile and Banner Styles */
.itcm-channel-banner {
    width: 100%;
    aspect-ratio: 1284/207;
    overflow: hidden;
}

.itcm-channel-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
		margin: 0;
}

.itcm-channel-profile-picture > img {
    width: 80px;
    aspect-ratio: 1;
    border-radius: 50%;
    max-width: initial;
}

/* Table Styles */
nouse table.itcm-table-3-cols td {
    width: 33%;
}

.itcm-table {
	--hue-sat: 230 0%;
  font-size: 1rem;
  width: 100%;
}

.itcm-table thead {
	background: hsl(var(--hue-sat) 0% / .1)
}

.itcm-table tbody tr:nth-child(2n+1) {
	background: #FFFFFF;
}

.itcm-table tbody tr:nth-child(2n) {
	background: hsl(var(--hue-sat) 0% / .07)
}

.itcm-table td,
.itcm-table th {
  padding: 0.5rem 1rem;
}

nouse .itcm-table-2-cols td:nth-child(1) {
  width: 30%;
}

nouse .itcm-table-2-cols td:nth-child(2) {
  width: 70%;
}


/* Thumbnail Downloader Styles */
.itcm-yttd .thumb {
	display: flex;
	flex-direction: column;
	align-items: start;
	margin-bottom: 2em;
}

.itcm-yttd .thumb > * {
	flex-shrink: 0;
	flex-grow: 0;
}

.itcm-button {
	background: hsl(var(--button-hue, 190) 85% 38%) !important;
  color: white;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: var(--itcm-border-radius);
  text-transform: uppercase;
}

/* Spacing Helpers */
.m-0 {
	margin: 0 !important;
}

.my-0 {
	margin-block: 0 !important;
}