@font-face { font-family: CompSoc; src: url(assets/compsoc-font.ttf); font-weight: normal; }
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/atkinsonhyperlegible/v11/9Bt43C1KxNDXMspQ1lPyU89-1h6ONRlW45G056IkUwCybQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/*
Theme Name:   	OxCompSoc
Author:       	Ibraheem Rodrigues
Author URI:     http://ibraheemrodrigues.com
Template:     	storefront
Description:  	
Version:      	1.0.4
Text Domain:  	storefront
*/

body {
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-weight: 400;
  font-style: normal;
}


.site-header {
    padding: 0 !important;
    border: 0 !important;

    display: grid;
    grid-template-areas: "logo button" "nav nav";
    grid-template-columns: 8rem 1fr;
    grid-template-rows: 5rem 1fr;
    place-items: stretch end;

    background: #002147 !important;
}

.site-header::before {
    content: "";
    position: absolute;
    bottom: -0.3rem;
    left: 0;
    width: 100%;
    height: 0.3rem;
    z-index: -1;
}

.site-header .site-branding {
    grid-area: logo;
    margin: 0;
    width: 100%;
}

.site-header .site-branding img {
    width: auto ;
    height: 5rem;
    margin: auto;
}

.site-header .menu-toggle {
    grid-area: button;
    padding: 1.6180469716rem 1.875rem 1.6180469716rem 2.517924rem;
    border: none !important;
}


.site-header .main-navigation {
    grid-area: nav;
    margin: 0;
    width: 100%;
}

.site-header .primary-navigation>ul>li>a {
    height: 5rem;
}

.handheld-navigation li>a {
    padding-left: 1rem;
}

.main-navigation,
.site-footer {
    font-family: "CompSoc", "Source Sans Pro", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    text-transform: uppercase;
}

.post-edit-link {
    text-decoration: dashed underline;
}

.handheld-navigation .dropdown-toggle { 
    padding-right: 2rem;
	padding-top: 0.4rem;
}

.handheld-navigation ul:not(.sub-menu)>li>a {	
	margin: 0.7rem;
	padding: 0.5rem 0.8rem 0.3rem 0.8rem;
}


/* Mostly color stuff below */

.site-header::before {
    background: linear-gradient(330deg, #ff4a8e 0%, #8a6fd5 50%, #00c5ba 100%) !important;
}

.main-navigation a[href="#"]:hover {
	text-decoration: none !important;
}
.primary-navigation ul.sub-menu,
.handheld-navigation {
    background: linear-gradient(330deg, #ff4a8e 0%, #8a6fd5 50%, #00c5ba 100%) !important;
}

.handheld-navigation .dropdown-toggle {
	color: #00c5ba !important;
} 

.handheld-navigation ul:not(.sub-menu)>li>a {
	background: white;
	color: #00c5ba;
    display: block;
}

.site-footer {
    background: linear-gradient(330deg, #ff4a8e 0%, #8a6fd5 50%, #00c5ba 100%) !important;
    padding: 2rem 1rem 1rem 1rem;
	flex-wrap: nowrap;
	
}

.site-footer .footer-widgets {
    padding: 0;
	flex-wrap: nowrap;
}

.site-footer .col-full {
    padding: 0;
	flex-wrap: nowrap;
}

.wp-block-columns {
 flex-wrap: nowrap;
}

/*There isn't a discord icon so I'm reskinning mastodon*/
.wp-social-link-mastodon svg {
	fill: transparent !important
}

.wp-social-link-mastodon a {
	background: url("../../uploads/2022/10/62595384f934b806f37f4956_145dc557845548a36a82337912ca3ac5.svg");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

form.cart .quantity, form.cart button[name="add-to-cart"] {
	display: none;
}

.product_meta {
	display: none;
}
.storefront-handheld-footer-bar {
	display: none;
}
fieldset {
	background: none;
}
fieldset button, fieldset input, fieldset label {
	margin: 1rem;
}

.woocommerce-breadcrumb {
	display: none;
}

button {
    font-family: "CompSoc", "Source Sans Pro", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    text-transform: uppercase;
	padding: 0.9180469716em 1.41575em 0.6180469716em 1.41575em;
}

input,
textarea {
    color: #43454b;
    font-family: "CompSoc", "Source Sans Pro", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    line-height: 1.618;
    text-rendering: geometricPrecision;
    font-weight: 400;

    background-color: #002147 !important;
	
	border: 2px solid white !important;
	
	color: white !important;
	padding: 1rem
}

select {
    font-family: "CompSoc", "Source Sans Pro", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    max-width: 100%;
    text-transform: uppercase;

    background-color: #002147 !important;
	
	border: 2px solid white !important;
	
	color: white !important;
	padding: 1rem
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Atkinson Hyperlegible", "CompSoc", "Source Sans Pro", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    text-transform: uppercase;
}

button.menu-toggle::before,
button.menu-toggle::after,
button.menu-toggle span::before {
    height: 5px;
    width: 25px;
    border-radius: 0;
}

button.menu-toggle::before {
    transform: translateY(-10px)
}

button.menu-toggle::after {
    transform: translateY(10px)
}

button.menu-toggle.toggled::before,
button.menu-toggle.toggled::after {
    transform: rotate(45deg)
}

button.menu-toggle.toggled::after {
    transform: rotate(-45deg)
}

button.menu-toggle.toggled span::before {
    opacity: 0
}

.main-navigation {
    position: relative;
}

.handheld-navigation {
    clear: both;
    position: absolute;
    width: 100%;
}

.handheld-navigation ul.menu .sub-menu.toggled-on {
    max-height: 1000px;
}

.main-navigation.toggled .handheld-navigation,
.main-navigation.toggled .menu>ul:not(.nav-menu),
.main-navigation.toggled ul[aria-expanded=true] {
    max-height: 1000px;
}

.widget {
    margin: 0 0 1em
}
@media(min-width: 768px) {
    .site-header {
        grid-template-areas: "logo nav";
        position: relative;
    }

    .woocommerce-active .site-header .site-branding {
        width: 100%;
        float: unset;
        margin-right: 0;
    }

    .woocommerce-active .site-header .site-search {
        width: 100%;
        float: unset;
        margin-right: 0;
        clear: none
    }

    .woocommerce-active .site-header .main-navigation {
        width: 100%;
        float: unset;
        margin-right: 0;
        clear: both
    }

    .woocommerce-active .site-header .site-header-cart {
        width: 100%;
        float: unset;
        margin-right: 0;
        margin-bottom: 0
    }

}

.site-branding {
    width: auto;
}

a:active,
a:hover {
    text-decoration: underline;
    outline: 0
}