/*
 Theme Name:   Folk Camps WordPress Theme 1
 Description:  Folk Camps WordPress Theme 1
 Author:       Patrick Self
 Template:     twentysixteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
    
    NB - the only items that define the parent theme are:
    (1) the Template line above
    (2) the reference to the parent theme in the functions.php file.
*/

/* =Theme customization starts here
------------------------------------------------------- */

/* Folk Camps Colours to use. These are from the Folk Camps Branding Guidelines document in Spring 2017 */
/*
     (If we need to change the colours, then do a search and replace in this file) 
#8EA249  = Green
#84ABA8  = Sky Blue
#324679  = Dark Blue
#F6931E  = Orange
#C4292F  = Red
#DEA270  = Sand
#ECECEC  = Light Grey

There is also a dark grey - But I am not sure of the code for that. Maybe #DED5D0
                                                    or maybe HTML code: 	#A09FA4

I'm also not sure that the colours given here are an exact match of thos in the logo and image files that we are using. 
    I used a website that doesn't give all the same colour codes as I obtained in the branding doc from Sue M.
    I'm not sure which is at fault. 
    
    TODO - update all styles to use just these colours.
  
        background-color: #DEA270;
        background-color: #F6931E;
        background-color: #84ABA8;
        background-color: #8EA249;
        background-color: #C4292F;
        background-color: #A09FA4;
        background-color: #DED5D0;
*/


/* Styles to allow the iframe for the video from vimeo to be as wide as the frame, 
    and to resize correctly and keep the correct aspect ratio */

.aspect-ratio-video {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 57%;
/*  padding-bottom: 51%; */
}

.aspect-ratio-video iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0; top: 0;
}

/* to control fonts */
body, button, input, select, textarea {
    font-family: Verdana, Futura, Arial, Helvetica, Roboto, "Noto San Serif", sans-serif; 
     font-size: 1em; 
     /* padding:0; */
     margin:0; }

/* Styles for the booking form - it has a class of "fc_bookingform" */

/* This class is used to put an outline around blocks of related input items,
    e.g. for each person */
.fc_bookingformblock {
    border: 2px solid #84ABA8;
    border-radius: 5px;
    padding: 10px;
    margin: 0 0 2px 0;
}

/* to make each paragraph in the booking form closer together than default,
    to reduce spacing between elements in the form */
.fc_bookingform p{
    margin: 0 0 0.25em;
}

/* --------- Tooltip Styles ---------- */
/* 
   To use these, need to insert an attribute of tooltip="text to display" on the paragrphs for the field labels on the form.
   And the label needs to include the input field too, so it displays when the user is on the field. Helpful on mobile.
   
   This code is based on stuff from these websites (taken best of each to make it simple and compact):
    info here: https://www.w3schools.com/css/css_tooltip.asp
    and video here: https://www.youtube.com/watch?v=M4lQwiUvGlY
    and files in github here https://github.com/iamshaunjp/CSS-Tips-and-Tricks/tree/03-css-only-tooltip/CSS%20Tooltip

    NB: use <p> not <label> on the form, to ensure all browsers display the tooltips wide enough.
    I found that Firefox didn't display the tooltips wide enough when I used <label> tags.
*/

p[tooltip]{
    position: relative;
}

p[tooltip]::before, p[tooltip]::after{
    position: absolute;
    opacity: 0;
	visibility: hidden;
}

p[tooltip]::before{   /* This makes the triangle of the tooltip - for the speech bubble effect*/
    content: "";
    left: calc(20% + 30px);
    border-width: 10px 8px 0 8px;
    border-style: solid;
    border-color: #324679 transparent transparent transparent;
    top: -5px;
    margin-left: -8px;
}

p[tooltip]::after{  /* this creates the oval containing the tooltip text */
    content: attr(tooltip);
    left: 20%;
    background: #324679;
    top: -5px;
    transform: translateY(-100%);
    font-size: 14px;
    margin-left: -20%;
    border-radius: 10px;
    color: #eee;
    padding: 14px;
}

/* Hover - mkes the tooltip visible */

p[tooltip]:hover::before, p[tooltip]:hover::after{
    opacity: 1;
	visibility: visible;
}/* end of tooltip styles */


/* To make our logo larger in the header.
    This supersedes and overwrites a similar rule in the twentysixteen theme style.css file.
    Because this is a child theme of that, then we add a suitable rule here. */

.custom-logo {
	max-width: 200px;
}

@media screen and (min-width: 44.375em) {
    .custom-logo {
        max-width: 300px;
    }
}

@media screen and (min-width: 61.5625em) {
    .custom-logo {
    max-width: 400px;
    }
}

/* for the council members table */
.council-table td,tr {
    border: none;
}
.council-table {
    border: none;
}

/* make the first column (with photos) as narrow as possible. Assumes width of the photos */
/* TODO - could I change this to use Divs and float?*/
.council-table td:first-child {
    width: 160px;
} 

/* Styles for the camp programme table - which is a set of nested divs */
/* On a wide display, it will appear as a table. */
/* But on a narrow display, it appears as blocks (4 rows) for each camp, with the dates left justified, and other items indented a bit */

/* Mobile first. Styles for all screen widths including narrow screens, 
    then follow with changes to make it appear as a normal table on a wider screen */
div.camps-programme {
    display: block;
    font-size: 80%;
    border-collapse: collapse;
    border-spacing: 0;
    border-width: 1px 0 0 1px;   /* top, right, bottom, left*/
    border-style: solid;
    border-color: #84ABA8;
}
div.one-camp-row {
    display:  block;
    min-width: 100%;
    padding: 0;
    margin: 0;
    border-spacing: 0;
    border-style: double;
    border-color: #84ABA8;
}
div.camp-item {
    display: block;
    width:  100%;
    border-collapse: collapse;
    border-width: 0 1px 1px 0;
    border-color: #84ABA8;
    border-style: solid;
    text-align: left;
    margin: 0;
    padding: 0.4em;
}
div.camp-name,div.camp-type,div.camp-status,div.camp-staff{
    padding-left: 10%;
}
div.camp-dates,div.camp-name,div.camp-type,div.camp-status,div.camp-staff { /* not needed? */
    width:  100%;
}
div.camp-name{
    font-weight: bold; 
}
/* for wider screens, show as a normal table, one row per camp */
@media screen and (min-width: 600px) {
    div.camps-programme {
        display:  table;
    }
    div.one-camp-row {
        display:  table-row;
    }
    div.camp-item {
        display:  table-cell;
        padding: 0.4em;
    }
    div.camp-dates {
        width: 25%;
    }
    div.camp-name {
        width: 25%;
    }
    div.camp-type,div.camp-staff { /* one table has camp-type, the other has camp staff */
        width: 35%;
    }
    div.camp-status {
        width: 15%;
    }
}

/* styles for Camps price table */
table.camp-prices{
    max-width: 40ch;  /* Make the table max width approx = to number of characters in the titles row */
    border-color: #84ABA8;
    border-style: solid;
    font-size: 100%;
}
.camp-prices th,tr,td {
    border-color: #84ABA8;
}
.price-early {
    font-weight:bold;
}

.price-late {
    font-weight:normal;
}

/* Styles to make the email signup form small and neat */
/* TODO more here */
.fc_emailsignup h3,p {}