/*
 Theme Name:   The Friends
 Theme URI:    https://uorfriends.org.uk
 Description:  The Friends of University of Reading Theme
 Author:       Annette Haworth
 Author URI:   https://uorfriends.org.uk
 Template:     twentythirteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  the-friends
*/

/* global styling */
* {
	  --vh: 1vh; /* some systems don't have dvh */
	  --vh: 1dvh;
	  --vw: 1vw;
	  --vw: 1dvw;
}
html, body {
	  margin: 0;
	  padding: 0;
	  box-sizing: border-box;
	  --friendsbgcolor: rgb(84, 73, 26); /* sent by Ian Burn Summer 2026 */
	  --friendscolor: white; /* color of text when over the background color */
	  --friendslogo: url(https://uorfriends.org.uk/wp-content/uploads/friends-logo-white-large-scaled-1-768x409.png);
	  /*--friendslogo: url(https://uorfriends.org.uk/wp-content/uploads/friends-logo-circular-white.png);*/
	  --balloonanimation: balloon 9s cubic-bezier(.45,.05,.55,.95) infinite;
}
a {text-decoration:none !important;}
td {padding:20px;}
body {font-family: Arial, Helvetica, sans-serif;}
a.screen-reader-text{display:none;} /* ?why this? */
.entry-meta {display:none;}
.entry-thumbnail {
	  display: none;
}
.friendsthumb {width:300px;height:200px;}

/* styling the page */
#page {
	width: 100vw;
	min-height: calc(100 * var(--vh));
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: calc(35 * var(--vh)) auto max(calc(5 * var(--vh)), 3lh);
	gap: 0;
	margin: 0 auto;
}
/* the frontpage consists of just the header and footer */
.home #page {
	height: calc(100 * var(--vh)); /* all on one page */
	grid-template-rows: calc(100% - 3lh) 0 3lh;
}
.home #page {
    height: calc(100 * var(--vh));
    grid-template-rows: calc(100% - 3lh - 30px) 0 3lh;
    gap: 10px;
}
/* styling the header */
#masthead {
	grid-row: 1;
	height: 100%;
	width: 100%;
	background: var(--friendsbgcolor);
	display: grid;
	grid-template-columns: 1fr 1fr;	
	grid-template-rows: calc(25 * var(--vh)) 1fr;
	gap: 1vmin;
	padding-top: calc(2 * var(--vh));
}
#masthead .home-link {
	grid-column: 1;
	grid-row: 1;
	width: 100%;
    rheight: calc(100% - 2lh);
	height: 100%;
    position: relative;
    rtop: 1lh;
	background-image: var(--friendslogo);
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}
#masthead .friends-headline {
	grid-column: 2;
	grid-row: 1;
	color: var(--friendscolor);
    font-size: 3vmin;
    display: flex;
	justify-content: center;
	align-items: flex-end;
	position: relative;
	overflow: hidden;
}
#masthead .navbar {
	 grid-column-start: 1;
	 grid-column-end: 3;
	 grid-row: 2;
	 font-size: 3vmin;
	 width: 100%;
	 display: flex;
	 flex-direction: row;
	 justify-content: right;
	 align-items: top;
	background-color: var(--friendscolor);
	color: var(--friendsbgcolor);
}
.home #masthead .navbar {
	display: block;
	height: 100%;
	position: relative;
	background-color: var(--friendsbgcolor);
	color: var(--friendscolor);
}
#masthead .main-navigation, #masthead .menu-mainmenu-container {
	height: 100%;
	position: relative;
	display: block;
}
/* styling the navigation menu */
.menu-toggle {display:none;}
#primary-menu{list-style-type:none; font-size: 3vmin; padding-right: 25px;}
#primary-menu li {display:inline-block;}
#primary-menu li a {color:var(--friendsbgcolor); }

/*addition by Annette 28 July 2026 to use the mainmenu to set up the frontpage */
.home #page {
  background: var(--friendsbgcolor);
  /* make the whole page for frontpage the background color */
}
.home #primary-menu {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1lh;
  width: 100%;
  height: 100%;
  max-width: 768px;
  list-style-type: none;
  margin: 0 auto;
  padding: calc(2 * var(--vh)) 0;
}
@media only screen and (max-width: 700px) and (max-height: 400px) {
	#primary-menu a {
		  font-size: 2vw;
	}
	.home #primary-menu {
		grid-template-columns: repeat(6, 1fr);
		grid-template-rows: 1fr;
		gap: 1vmin;
	}
}
.home #primary-menu li {	
	display: block;
	height: 100%;
	width: 100%;
}
.home #primary-menu li a {
	display: block;
	width: 100%;
	height: 100%;
	color: var(--friendscolor);
	position: relative;
}
.home #primary-menu li a::before {
	content: '';
	position: absolute;
	top: 1lh;
	left: 0;
	width: 100%;
	height: calc(100% - 2lh);
    background-image: var(--img);
    background-size: cover;
    background-repeat: no-repeat;	
    background-position: center top;	
}
#main {
	  grid-row: 2;width:100%;height: 100%; margin:0 auto;max-width: 768px;}
#main .entry-content {
	  width: calc(100% - 25px);/* leave room for scroll bar */
}
footer {
	  grid-column: 1;
	  grid-row: 3;
	  background: var(--friendsbgcolor);
	  color: var(--friendscolor);
	  width: 100%;
	  height: 100%;
	  min-height: 3lh;
	  display: flex;
	  flex-direction: row;
	  align-items: center;
}
footer .site-info {
	  display: flex;
	  flex-direction: row;
	  justify-content: space-around;
	  align-items: center;
	  height: 3lh;
	  width: 100%;
}
footer .site-info > :nth-child(2) {
	text-align: right;
}

/* for the Friends administrators we show them what others see on the frontend so take out the adminbar */
#wpadminbar {
	  display: none;
}
.admin-bar {
	height: 0 !important; /* found the parent theme set this with important */
}
html {
	  margin-top: 0px !important; /* because admin bar is not displayed don't reserve space for it */
}
.hide {
	 display: none;
}
.post-navigation { display: none;}

.single-friendsreport td img {
    width: 50px;
	height: 50px;
}
.friends_record_label { display: none;}

/* special for the centenary - balloons on the call to action in the header - code provided by ChatGPT July 2026 */
#masthead .friends-headline::before, #masthead .friends-headline::after, #masthead .friends-headline a::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background-image:
	  url(https://uorfriends.org.uk/wp-content/uploads/balloon-0.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 75% top;
background-position: center top;
rotate: 25deg;
    transform-origin: center bottom;
    animation: var(--balloonanimation);
}
@media (prefers-reduced-motion: reduce) {
	* {
	--balloonanimation: none;
    }
}
#masthead .friends-headline::after {	
	background-image:
	  url(https://uorfriends.org.uk/wp-content/uploads/balloon-1.png);
	background-position: 30% top;
background-position: center top;
rotate: -25deg;

	animation-delay: -4s;
	animation-duration: 7.5s;
	pointer-events: none;
}
#masthead .friends-headline a {
	  display: block;
	  position: relative;
	  color: var(--friendscolor);
}
#masthead .friends-headline a::before {
	top: -25dvh;
	top: calc(-25 * var(--vh));
	height: calc(25 * var(--vh));
	background-size: contain;
	background-position: center top;
	animation-delay: -6s;
	animation-duration: 6s;
	rotate: 0deg;
}
@keyframes balloon {
  0%   { transform: translate(0,0) rotate(0deg); }
  12%  { transform: translate(2px,-1px) rotate(1deg); }
  27%  { transform: translate(6px,-4px) rotate(3deg); }
  42%  { transform: translate(1px,1px) rotate(0deg); }
  58%  { transform: translate(-8px,-3px) rotate(-4deg); }
  72%  { transform: translate(-3px,2px) rotate(-1deg); }
  88%  { transform: translate(3px,-2px) rotate(2deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}