/*
Theme Name: Goonin teema 0.6.6
Theme URI: https://gooniry.fi
Author: Petteri Muukkonen
Author URI: https://syvis.net
Description: Gooni ry:n kotisivuja varten luotu teema. Nyt mobiilivalikolla!
Version: 0.6.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: green gooni diy
Text Domain: Gooni
*/

/* Contact form 7 related extra styles Contact form 7 is used to do surveys and event registrations */

/* Teksti napeissa tummaksi */
.wpcf7-form-control {color:#000;}

.wpcf7-radio, .wpcf7-checkbox {
    display:flex; 
    flex-direction:column;
}

/* Contact form 7 list items visible on dark background */
.wpcf7-list-item {
    color:#fff;
}

.wpcf7-text, .wpcf7-textarea {
	z-index:0; /* Ilman tätä tekstikentät jää mobile-menun päälle */
}


/* "Global" styles" */

html {
    scroll-behavior: smooth; /* Smooth scrolling to another spot in the same page */
}

body {
    font-family: monospace;
    background-color: var(--gooninvihrea);
    color:var(--text-900);
    margin:10pt;
}

p {
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 13pt;
}

h1 {
    font-size: 22pt;
}

h2 {
    font-size: 18pt;
}

h3 {
    font-size: 16pt;
}

/* Slightly rounded corners for all photos */
img {
    border-radius: 5px;
}



/* Wordpress block editor button */
.wp-block-button__link {
	background-color: var(--background-300) !important;
	border: 3px solid var(--gooninvihrea) !important;
	font-size:12pt !important;
}

/* ParentDiv contains almost everything on the screen, uses flexbox */
/* make the content area not take up the whole width of the viewport and center it */
#parentDiv {
    margin:10pt;
    display:flex;
    flex-direction: column;
    max-width:60%;
    margin-left:auto;
    margin-right:auto;
}

/* Header (Gooni logo, navigation) */
#mainHeader {
    display: flex;
}

/* Logo in the header */
#topLogoPic {
    width:120px;
    height:120px;
    margin-right:30px;
    margin-bottom:10px;
}

/* Hide wordpress admin bar */
/*
#wpadminbar {
 display: none;
}*/

/* Sidebar = tiedotteita */
#sidebar > h2 {
    margin-top:0pt;
    margin-bottom: 5pt;
}

/* negative top margin for sidebar so that it's at the same level as the main div */
#sidebar {
    margin-top:-26pt;
}

/* Top navigation container */
#ultraNav {
    display: flex;
    align-items: center;
    text-transform: uppercase;
}

/* Wordpress menu styles */
.menu, .menu-topbar-container{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}

/* Top level menus, not sub menus */
.menu > .menu-item {
    display: inline-block; /* this has to be inline block, other wise the layout breaks, feel free to make it so that it doesn't break */
    margin-right: 8pt;
    margin-bottom: 6pt;
    background-color:var(--background-300);
    border-radius:0.9em;
    padding: 0.8em 1em 0.8em 1em;
    border:1px solid var(--text-900);
}

.menu-item a {
    color:var(--primary-900);
    text-decoration: none;
    font-size: 14pt;
}

/* Menun linkki ei saa alleviivausta jos sillä on sub menu = sillä itsellään ei ole osoitetta*/
.menu-topbar-container li a:not([href]):hover {
    text-decoration: none;
}

.menu-topbar-container li a:hover {
    text-decoration: underline;
    font-weight: bold;
    cursor: pointer;
}

/* Make the name of the current page bold (if there's a link for it) */
.current_page_item {
    font-weight:bold;
}

/* Sub menu, visibility is handled with "visibility" and "opacity" instead of the traditional "display" */
.sub-menu {
    display:flex;
    flex-direction: column;
    box-sizing: border-box;
    z-index: 1;
    position:absolute;
    background-color: var(--background-300);
    border-radius:0.9em;
    visibility: hidden;
    opacity:0;
    margin:0;
    margin-top:0.8em;
    margin-left: -1em;
    border:1px solid var(--text-900);
    list-style: none;
    padding-left:5px;
    padding-right: 5px;
}

/* li elements under sub-menu */
.sub-menu > .menu-item {
    border-top:2px solid var(--text-900);
    /*background-color: var(--background-200);*/
    background-color:transparent;
    list-style:none;
    border-radius:0;
    padding:0.8em 1.2em 0.8em 1em;
    width:auto;
    box-sizing: border-box;
}

/* remove the border from the topmost li item on the sub menu */
.sub-menu > li:first-child {
	border:none;
}

/* Show the sub-menu items when the parent is hovered on (or "focus-within'ed", for iOS) */
.menu-item:hover .sub-menu, .menu-item:focus-within .sub-menu {
    display: flex;
    visibility:visible;
    opacity: 1;
}

/* Make the parent menu item stay bold when its children are hovered on */
.menu-item-has-children:hover > a, .menu-item-has-children:focus-within > a, .menu-item-has-children:active > a {
    font-weight: bold;
}

/* Top navigation ends */

/* Main area, divided into the top part with no border and the bottom part with borders. It used to be just "main" but cf7-views destroyed the styling so it needed an unique name */
.mainDiv {
    display:grid;
    grid-template-columns: 3fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
    ". ."
    ". .";
    gap:10pt;
    margin-top:4pt;
}

/* A container for aligning the "Tiedotteita" title to the bottom of the parent element */
#tiedotteitaContainer {
    display: flex;
    flex-direction: column-reverse;
}

/* Class for elements that should be underlined when hovering on */

.underlinehover {
    text-decoration: none;
}

.underlinehover:hover {
	text-decoration:underline;
}

.underlinehover a {
    text-decoration: none;
}

.underlinehover a:hover {
    text-decoration: underline;
    font-weight: bold;
}


/* Remove unnecessary margin from certain headings */
#welcomeContainer h2, #tiedotteitaContainer h2 {
    margin:0;
}


/* Logo, temporary element ig */
#presentationPic {
    max-width:200px;
    max-height:200px;
}

/* A class for generic photos */
.photos {
    max-width:100%;
}

/* Links have gooni themed lighter green */
a {
    color: var(--primary-800);
    /*text-decoration: none;*/
}

/* Make links interactive when hovered on */
a:hover {
    /*font-weight: bold;*/
    text-decoration: none;
}

/* Some empty space you can use if needed :D */
.emptyspace {
    height: 20px;
}

/* The container for the main content on "regular" pages */
.page-content {
    background-color: var(--background-400);
    border-radius: 10px;
    padding:1.5em;
    padding-top: 0.5em;
}

.page-content li {
    font-size: 12pt;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

/* Articles starts */

.articles {
    max-width: 100%;
}

/* All articles */
article {
    /*border:2.5pt solid var(--gooninvihrea);*/
    padding:10pt;
    margin-bottom:10pt;
    border-radius: 10px;
    max-width:100%;
    background-color: var(--background-400);
}

.leftColumn, .rightColumn {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.rightPic > .leftColumn {
    width: 50%;
}

.rightPic > .rightColumn {
    width:50%;
    display: flex;
    align-items: center;
}

.leftPic > .leftColumn {
    width:50%;
}

.leftPic > .rightColumn {
    width:50%;
}

.leftPic .width70, .rightPic .width70 {
    width:70%;
}

.leftPic .width30, .rightPic .width30 {
    width:30%;
}

article > section > h2 {
    margin-top:0;
    margin-bottom:0;
    color:var(--primary-800);
}

article > section > p {
    margin-top:3pt;
    margin-bottom:8pt;
    font-size: 13pt;
    line-height: 0.6cm;
}

article.rightPic, article.leftPic {
    display: flex;
    flex-direction: row;
    column-gap: 5pt;
}
/* Articles ends */

/* Yhteistyökumppanit section and img */
section#kumppanit {
    width:100%;
    text-align: center;
}

section#paakumppanit {
    padding-top:10px;
    padding-bottom: 10px;
    padding-left:10%;
    padding-right:10%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#paakumppanit > img {
    width:auto;
}


#sponsorlogohigh {
    height:40px;
}

/*#sponsorlogolong {
    height:40px;
}*/


/* Generic width classes */

.width60 {
    width:60%;
}

.width40 {
    width:40%;
}

.width70 {
    width:70%;
}

.width30 {
    width:30%;
}

.frontPageNews {
    /*border-color: var(--gooninvihrea);*/
    background-color: var(--background-300);
}

.frontPageNews > h3 {
    margin:0;
}

.frontPageNews > h3 > a {
    text-decoration: none;
    color:var(--primary-800);
}

.frontPageNews > h3 > a:hover {
    text-decoration: underline;
}

.frontPageNews > p {
    margin-top:5pt;
    margin-bottom: 5pt;
}

h2.green {
    margin-top:0;
    margin-bottom:5pt;
    color:var(--primary-800);   
}

#dynamicContent > ul > li {
    font-size: 14pt;
}

/* footer text */

#footertext {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

/* Pagination = links to next/previous page in home.php */
.pagination {
    text-align: center
}

/* Instagram (IG) link button and icon */
#ig-button{
    display: flex;
    align-items: center;
    justify-content: center;
    margin:0;
}

#ig-link {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--gooninvihrea);
    padding:10px;
    color: var(--secondary-800);
    border-radius: 10px;
    font-size: 13pt;
    text-decoration: none;
    max-width:320px;
}

#ig-link:hover {
    background-color: var(--background-100);
    color: var(--secondary-700);
    transition: 250ms ease-in-out;
    font-weight: bold;
}

#ig-icon {
    width:35px;
    height:35px;
    margin-left: 10px;
}

#ig-widget {
    padding:0px;
}

/* Nuolet / Arrows (kopioitu w3schoolsista) */
.arrow {
  border: solid var(--primary-900);
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.parent-arrow {
    margin-left:5pt;
    margin-bottom:3px;
}

/* MEDIA QUERIES */

/* Width of the parent div which contains pretty much everything on screen */
@media screen and (max-width: 2000px) {

    #parentDiv {
        max-width: 70%;
    }

}

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

    #parentDiv {
        max-width: 90%;
    }

}

/* Make the parent div the width of the screen if the viewport is narrower than  x px */
/* Then the tiedotteita sidebar is under the other content (on the front page) */
@media screen and (max-width: 1020px) {

    /* parentdiv needs no more empty space on the sides */
    #parentDiv {
        max-width: 100%;
        margin-left: 10pt;
        margin-right: 10pt;
    }

    #ultraNav {
        width:100%;
    }

    /* Little margin between the logo and navigation */
    #topLogoPic {
        margin-right: 10px;
    }

    /* Contains the changing content of the page, move the stuff to be in one column instead of multiple (like on wider screens) */
    .mainDiv {
        grid-template-columns: 1fr;
        grid-template-rows: 200px, auto, auto;
        grid-template-areas:
        "."
        "."
        ".";
        gap:0;
        margin-top:5px;
    }

    /* Some styles for articles and their content = cards/boxes of content, to make them look nicer on narrow displays */

    .articles {
        max-width:100%;
    }

    article.rightPic, article.leftPic {
        flex-direction: column;
    }

    .rightPic > .leftColumn {
        width: 100%;
    }
    
    .rightPic > .rightColumn {
        width:100%;
        margin-bottom: 5pt;
        align-items: center;
    }
    
    .leftPic > .leftColumn {
        width:100%;
        margin-bottom: 5pt;
        align-items: center;
    }

    .photos {
        max-height: 300px;
    }

    .leftPic > .rightColumn {
        width:100%;
    }

    /* Sidebar title no longer needs to be aligned with the container next to it */
    #sidebar {
        margin-top:0pt;
    }

}

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

    #ultraNav > a {
        font-size: 14pt;
    }

    .menu-item {
        padding:5px;
    }

    .width60, .width40 {
        width:100%;
    }

    .width70, .width30 {
        width:100%;
    }

    /* A class for generic photos */
    .photos {
        width:auto;
        max-height:200px;
        max-width:600px;
    }

    .leftPic > .leftColumn {
        width:100%;
        margin-bottom: 5pt;
    }

    .rightPic > .rightColumn {
        width:100%;
        margin-bottom: 5pt;
    }

    section#paakumppanit {
        padding-left: 1pt;
        padding-right: 1pt;
    }

    #leicalogo {
        height:40px;
    }
    
    #millogo {
        height:40px;
    }
    
    #trionalogo {
        height:25px;
    }

    #footertext {
        margin-left:auto;
        margin-right:auto;
        flex-direction: column;
    }
}


/* Mobile menu and hamburger button */
/* Mobiilivalikko ja hampurilaisnappi. Tämän pohja on tehty valitettavasti rappiollisesti käyttäen chätäriä eli chat gpt, mutta aika rankalla kädellähän sitä piti sit muokata. */
/* Pahoittelut jos on puutteelliset kommentoinnit tai jossain on liikaa tageja, kaikkea ei ole ehditty siivota pois... */

/* HUOM! Mobiilivalikon avaamistoiminto on javascriptinä

/* --- Hamburger Button container --- */
#hamburger-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
}    

/* Itse hampurilaisnappi */
.hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 45px;
    height: 45px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1100;
    position:sticky; /* nappi pysyy paikallaan, ei liiku kun sivua scrollaa. huono puoli on se, että saattaa mennä menun nappien päälle kapealla näytöllä */
  }


  /* --- Navigation menu on mobile, full screen menu --- */
  .mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary-300);
    opacity: 0;
    visibility: hidden;
    display: block;
    transform: translateY(-20px);
    transition: all 0.3s ease;
    align-items: flex-start;
    justify-content: center;
    padding-top:150px;
    padding-left:3em;
    padding-right:3em;
    overflow-y: auto; /* valikossa voi scrollata tarvittaessa */
    z-index: 2; /* Tämän avulla mobile menu pysyy varmasti contact form 7:n tekstikenttien yläpuolella */
  }
  
  /* active-class tulee kun javascriptin click eventti tapahtuu */
  .mobile-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* mobile menun alapuolinen container, toiminnan kannalta tärkeä */
    .mobile-menu .menu {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
    width:80%;
    min-width: 100px;
    flex-wrap: initial;
  }
  
  .mobile-menu > .menu-topbar > .menu-item {
    margin: 1.5rem;
  }

  /* Menun linkki ei saa alleviivausta jos sillä on sub menu = sillä itsellään ei ole osoitetta*/
.mobile-menu li a:not([href]):hover {
    text-decoration: none;
}

/* näitä valikkojen ulkoasuja, millä korostetaan linkkiä kun sitä hoveroidaan */
.mobile-menu li a:hover {
    text-decoration: underline;
    font-weight: bold;
    cursor: pointer;
}

  
  /* --- Desktop Layout for mobile menu --- */
  @media (min-width: 950px) {
    /* hampurilaisnappi pois näkyvistä ku on työpöytänäkymän leveys */
    .hamburger {
      display: none;
    }

    /* Mobiilivalikko varmasti pois näkyvistä ku on työpöytänäkymän leveys */
    .mobile-menu {
    display:none;
      opacity: 1;
      visibility: hidden;
      transform: none;
      height: auto;
      background: none;
    }
  }

@media (max-width: 950px) {
    /* IG widgetti ja normaali valikko pois näkyvistä silloin kun on mobiilivalikon tarkoitus näkyä */
    #ultraNav, #ig-wdiget, .embedsocial-hashtag {
        display:none;
    }

    #mainHeader {
        flex-direction: row;
        justify-content: space-between;
    }

    /* tää on tärkeä, joka laittaa valikon itemit allekkain nätisti */
    .mobile-menu .menu {
        flex-direction: column;
        /* align-items: stretch; tää olikin vissii turha */
    }

    body.menu-open {
        overflow: hidden; /* varsinainen nettisivu piilotetaan kun mobiilimenu on auki */
      }
     
      /* hampurilaisvalikon nappia vähän irti reunasta */
      #hamburger-box {
        padding-right: 5px;
      }

      /* itse menu-item -boksien ulkoasua mobiilivalikossa*/
      .mobile-menu .menu-item{
        width:100%;
        margin-right:0px;
        padding: 3em 0 3em 0;
        margin-bottom: 1.5em;
        background-color: var(--background-300)
      }

      /* Alavalikossa ei "indent" mobiilimenussa */
      .sub-menu {
        display: flex;
        overflow: hidden;
        margin-left:0;
      }

    .sub-menu .menu-item {
        margin:0;
        /*background-color: var(--background-200); tän takaa näkyy reunoilla vähän väärää väriä, korjattava ois + halutaanko tälle nyt ylipäätään omaa väriä?*/
    }

    /* turha väli alapuolelta pois kun mobiilivalikossa hoverataan alavalikollista itemiä */
    .menu-item-has-children:hover, .menu-item-has-children:focus-within {
        padding-bottom: 0;
    }

    /* Valikon item, jolla on alavalikko, kun hoveroidaan, tulee vähän täytettä tekstin alle, jotta näyttää paremmalta */
    .menu-item-has-children:hover > a, .menu-item-has-children:focus-within > a {
        padding-bottom: 1em;
    }

    /* Show the sub-menu items when the parent is hovered on (or "focus-within'ed", for iOS) */
    .menu-item:hover .sub-menu, .menu-item:focus-within .sub-menu {
        display: flex;
        visibility:visible;
        position: static;
        overflow-y:auto;
        width: 100%;
    }

      .mobile-menu .menu-item-has-children {
        z-index: 1;
      }

  }

  @media (max-width:450px) {

    /* Sit kun näyttö meneekin vielä kapeammaks mobiilivalikon näkyessä, pienennetään paddingia koko helahoidon reunoilla. Voi noita kapeammiksikin ehkä säätää vielä */
    .mobile-menu {
        padding-left:1.5em;
        padding-right:1.5em;
    }
  }

/* Colours*/

/* Light theme colours for archival purposes, we decided not to make a light theme at all but someone in the future is free to make one and utilise these colours */
/*@media (prefers-color-scheme: light) {
    :root {
        --gooninvihrea: #214332;

      --text-50: #eff5f3;
      --text-100: #dfece8;
      --text-200: #bfd9d0;
      --text-300: #9fc6b9;
      --text-400: #80b3a2;
      --text-500: #609f8a;
      --text-600: #4d806f;
      --text-700: #396053;
      --text-800: #264037;
      --text-900: #13201c;
      --text-950: #0a100e;
  
      --background-50: #eff5f2;
      --background-100: #dfece6;
      --background-200: #bfd9cc;
      --background-300: #9fc6b3;
      --background-400: #80b399;
      --background-500: #609f80;
      --background-600: #4d8066;
      --background-700: #39604d;
      --background-800: #264033;
      --background-900: #13201a;
      --background-950: #0a100d;
  
      --primary-50: #edf7f3;
      --primary-100: #dbf0e7;
      --primary-200: #b8e0cf;
      --primary-300: #94d1b8;
      --primary-400: #70c2a0;
      --primary-500: #4db388;
      --primary-600: #3d8f6d;
      --primary-700: #2e6b52;
      --primary-800: #1f4736;
      --primary-900: #0f241b;
      --primary-950: #08120e;
  
      --secondary-50: #eef6f3;
      --secondary-100: #ddeee7;
      --secondary-200: #bbddcf;
      --secondary-300: #99ccb7;
      --secondary-400: #77bb9f;
      --secondary-500: #55aa87;
      --secondary-600: #44886c;
      --secondary-700: #336651;
      --secondary-800: #224436;
      --secondary-900: #11221b;
      --secondary-950: #09110d;
  
      --accent-50: #eff2f5;
      --accent-100: #e0e6eb;
      --accent-200: #c0ccd8;
      --accent-300: #a1b3c4;
      --accent-400: #829ab0;
      --accent-500: #62809d;
      --accent-600: #4f677d;
      --accent-700: #3b4d5e;
      --accent-800: #27333f;
      --accent-900: #141a1f;
      --accent-950: #0a0d10;
  
    }
  }*/

  /* See above at the light theme colours. We decided to only have a dark theme, so here's the colours for that, don't use the media query */
  /*@media (prefers-color-scheme: dark) {*/
    :root {
        --gooninvihrea: #214332; /* Gooni official dark green B) */

      --text-50: #0a100e;
      --text-100: #141f1b;
      --text-200: #273f37;
      --text-300: #3b5e52;
      --text-400: #4f7d6e;
      --text-500: #629d89;
      --text-600: #82b0a1;
      --text-700: #a1c4b8;
      --text-800: #c0d8d0;
      --text-900: #e0ebe7;
      --text-950: #eff5f3;
  
      --background-50: #0a100d;
      --background-100: #13201a;
      --background-200: #264033;
      --background-300: #39604d;
      --background-400: #4d8066;
      --background-500: #609f80;
      --background-600: #80b399;
      --background-700: #9fc6b3;
      --background-800: #bfd9cc;
      --background-900: #dfece6;
      --background-950: #eff5f2;
  
      --primary-50: #08120e;
      --primary-100: #0f241b;
      --primary-200: #1f4736;
      --primary-300: #2e6b52;
      --primary-400: #3d8f6d;
      --primary-500: #4db388;
      --primary-600: #70c2a0;
      --primary-700: #94d1b8;
      --primary-800: #b8e0cf;
      --primary-900: #dbf0e7;
      --primary-950: #edf7f3;
  
      --secondary-50: #09110d;
      --secondary-100: #11221b;
      --secondary-200: #224436;
      --secondary-300: #336651;
      --secondary-400: #44886c;
      --secondary-500: #55aa87;
      --secondary-600: #77bb9f;
      --secondary-700: #99ccb7;
      --secondary-800: #bbddcf;
      --secondary-900: #ddeee7;
      --secondary-950: #eef6f3;
  
      --accent-50: #0a0d10;
      --accent-100: #141a1f;
      --accent-200: #27333f;
      --accent-300: #3b4d5e;
      --accent-400: #4f677d;
      --accent-500: #62809d;
      --accent-600: #829ab0;
      --accent-700: #a1b3c4;
      --accent-800: #c0ccd8;
      --accent-900: #e0e6eb;
      --accent-950: #eff2f5;
  
    }
  /*}*/