/*
Theme Name: Goonin teema 0.5.4
Theme URI: https://gooniry.fi
Author: Vilho Syvähuoko
Author URI: https://syvis.net
Description: Gooni ry:n kotisivuja varten luotu teema.
Version: 0.5.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: simple gooni diy
Text Domain: Gooni
*/

/* Contact form 7 liittyviä tyylejä */
.wpcf7-form-control {color:#000;}

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

.wpcf7-list-item {
    color:#fff;
}

/* "Global" styles" */
html {
    scroll-behavior: smooth;
}

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;
}

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;
}

/* 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:80%;
    margin-left:auto;
    margin-right:auto;
}

/* Header */
#mainHeader {
    display: flex;
    justify-items: auto;
}

/* Logo yläpalkissa */
#topLogoPic {
    width:120px;
    height:120px;
    margin-right:30px;
    margin-bottom:10px;
}

/* Text logo (deprecated) */
#pageLogo {
    margin-top:0;
    margin-bottom:0;
    margin-right:15pt;
    color:#214332;
}

/* 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 starts */
#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 1.2em 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(--secondary-800);
    text-decoration: none;
}

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

/* 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:50px;
}

#sponsorlogolong {
    height:30px;
}


/* 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;
}

/* Hallitusesittelyn kuvien koko 2025 */
#hallitusEsittely .photos {
    max-height: 300px;
    width:auto;
}

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 */

@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 */
@media screen and (max-width: 1020px) {

    #parentDiv {
        max-width: 100%;
    }

    #ultraNav {
        width:100%;
    }

    #topLogoPic {
        margin-right: 10px;
    }

    .mainDiv {
        grid-template-columns: 1fr;
        grid-template-rows: 200px, auto, auto;
        grid-template-areas:
        "."
        "."
        ".";
        gap:0;
        margin-top:5px;
    }

    .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%;
    }

}

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

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

    .menu-item {
        padding:5px;
    }

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

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

    .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;
    }
}

/* 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;
  
    }
  }*/

  /*@media (prefers-color-scheme: dark) {*/
    :root {
        --gooninvihrea: #214332;

      --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;
  
    }
  /*}*/