/*
Theme Name: Agricultural Museums Theme
Author: Cradur (Arfon Parry)
Author URI: http://cradur.com/
Description: Theme designed especially for Internationl Association of Agricultural Museums 
Template: twentytwentyone
Version: 1.1.09
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
:root {
   
   /* Font Family */
   --global--font-primary: var(--font-headings, -apple-system, Open Sans, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
   --global--font-secondary: var(--font-base, -apple-system, Open Sans, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
   
   --aima-banner-background-colour: #dde4dd;
   --aima-banner-background-colour: #fffff8;
   --aima-body-background-colour: #fffff8;
   --global--color-background: var(--aima-body-background-colour);
   
   --global--font-size-base: 1.2rem;
   --global--font-size-sm: 1.1rem;
   --global--font-size-xs: 1rem;

   --global--font-size-md: 1.2rem;
   --global--font-size-lg: 1.4rem;
   --global--font-size-xl: 1.9rem;
   --global--font-size-xxl: 2.5rem;
   --global--font-size-xxxl: 3rem;
   
   --heading--font-size-h6: var(--global--font-size-xs);
   --heading--font-size-h5: var(--global--font-size-sm);
   --heading--font-size-h4: var(--global--font-size-md);
   --heading--font-size-h3: calc(1.1 * var(--global--font-size-md));
   --heading--font-size-h2: var(--global--font-size-xl);
   
   --form--border-color: #888;
   --form--border-width: 1px;
   --form--border-radius: 5px;
   --form--spacing-unit: calc(0.2 * var(--global--spacing-unit));
   
   --global--spacing-vertical: .5em;
   
   --heading--font-weight-page-title: 500;
   
   
   --branding--title--font-size: var(--global--font-size-sm);
   --branding--title--font-size-mobile: var(--heading--font-size-h4);
   --branding--title--font-weight: normal;
   --branding--title--text-transform: none;
      
   --global--color-border: #aaa;
   
   --button--color-background: #035;
   --button--line-height: 1.5;
   --button--border-width: 1px;
   --button--border-radius:   2px;
   --button--padding-vertical: 1px;
   --button--padding-horizontal: calc(15 * var(--button--padding-vertical));
   
}

.site-title
   {text-transform:uppercase}
.site-title, .site-description
   {margin-left: 10px}
.site-header 
   {max-width:100%; padding-top: calc(.5 * var(--global--spacing-vertical)); 
   padding-bottom: calc(.5 * var(--global--spacing-vertical)); 
   background-color:var(--aima-banner-background-colour); row-gap:0}   
.site-header > .site-logo 
   {width: auto; padding-bottom: 0; border-bottom: 0; text-align: center; }
.site-header > .primary-navigation
   {width: 100%;}
.primary-navigation .menu-item-description > span {
    display: none;
}.primary-navigation .primary-menu-container 
   {margin-right: auto; margin-left: auto;}
.primary-navigation > div > .menu-wrapper 
   {justify-content: center;}
   
.entry-header
   {max-width: var(--responsive--alignwide-width);}   
  
.widget-area
   {background-color:var(--aima-banner-background-colour);max-width: var(--responsive--alignwide-width); padding: 0 ; margin-top:0;
   border-top: 2px solid var(--global--color-border); padding-top:1em}
.site-title > a
   {text-decoration:none}
.search-form 
   {align-items: center;justify-content: space-between}   
button.search-toggle 
   {margin-left:1em;border-color:transparent; background-color: #0df; border-radius:10px; 
   height:3em; width: 3em;border: 1px solid #000;;box-shadow: 10px 10px 10px 5px rgba(100,100,100,0.2)}
button.search-toggle:not(:hover):not(:active):not(.has-background)
   {background-color: #0fd }
.search-form
   {width:90vw;}
.search-form, .widget-area > .widget_search
   {margin-top:0; margin-bottom:1em}   
.search-form .search-field
   {margin-right:0; margin-left:0; border: 1px solid #aaa; border-radius:5px;box-shadow: 10px 10px 10px 5px rgba(100,100,100,0.2);width:50vw}   
.site-footer
   {background-color:var(--aima-banner-background-colour);max-width:100%; padding: 0 5vw}
.footer-navigation
   {margin-top:0;margin-bottom: 1em}      
.site-footer > .site-info
   {padding-top: 0; margin-top:0; margin-bottom:0; border-top: 2px solid #aaa}   
.site-footer > .site-info .site-name 
   {text-transform: var(--branding--title--text-transform);}   
.site-footer > .site-info a.cradLogo, .site-footer > .site-info a.cradLogo:visited
   {padding: 0 .2em;background-color:#bbb;color:#a00; text-decoration:none;font-weight:700; 
   border:2px solid #666;border-top-color:#ccc;border-left-color:#ccc}
.singular .entry-header 
   {border-bottom: 2px solid var(--global--color-border);
    padding-bottom: calc(0.5 * var(--global--spacing-vertical));
    margin-bottom: calc(0.5 * var(--global--spacing-vertical));}

.cradLangSwitch select
   {border-radius: var(--form--border-radius);padding: 0 .8em 0 0;
   position:absolute;top:.5em;right:1em; }
.cradWinTop
   {background-color:var(--aima-banner-background-colour); height:2em}          
.cradLineBreak
   {clear:both;height:0}
   
input[type="submit"]:not(:hover):not(:active):not(.has-background)
   {background-color:var(--button--color-background)}   
   
.AimaSocMediaLink
   {float:right; margin-right:1em;}   
.AimaSocMediaLink a
   {display:inline-block;height:50px; width:50px;color:transparent;background-repeat: no-repeat;background-position: center}
   
.AimaTwitterLink a
   {background-image: url("twitter.png");}

.AimaInstagramLink a
   {background-image: url("instagram.png")}
   
      
@media only screen and (min-width: 10px) { /* small screen*/
   .site-title 
      {font-size: 1.2em}         
   .site-header > .site-logo 
      {margin-right:3%; margin-left:2%}
   .site-header.has-logo.has-title-and-tagline.has-menu 
      {justify-content: flex-start;}   
}   
body:not(.primary-navigation-open) .site-header.has-logo.has-title-and-tagline .menu-button-container #primary-mobile-menu
   {padding-left: calc(var(--global--spacing-horizontal) * 0.6 - 4.5px);
   padding-right: calc(var(--global--spacing-horizontal) * 0.6 - 4.5px);
   margin-right: calc(20px - var(--global--spacing-horizontal) * 0.6);}

@media only screen and (min-width: 482px) { /* meddium screen*/
   :root {
      --responsive--aligndefault-width: calc(100vw - 4 * var(--global--spacing-horizontal));
      --responsive--alignwide-width: calc(100vw - 4 * var(--global--spacing-horizontal));
   }
   .site-title 
      {font-size: 1.5em}         
}
@media only screen and (min-width: 822px) { /* large screen*/
   :root {
      --responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 1024px);
      --responsive--alignwide-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 1024px);
   }
   .site-title 
      {font-size: 2em}
   .widget-area 
      {grid-template-columns: repeat(3, 1fr);}
   .aimaCopyright 
      {padding-left:1em}               
   .cradWinTop
      { height:1em}  
   .cradLangSwitch select
      {position:fixed}
}   
@media only screen and (min-width: 1024px) { /* huge screen*/
   
   .site-title 
      {font-size: 3em}         
}