/*=========================================================================================*/
/* swrs_responsive.css */
/*=========================================================================================*/
/*  Initially a sandbox for experimenting.
  Later will become the main file for new pages designed for responsiveness,
  with the ultimate aim of replacing the existing mess!
 */

/* Make sure any borders created within pseudo-elements are inside the size of the element.
    Prevents weird stuff. [Ref: Kevin Powell(YT) - before/after part 3) */
*, *::before, *::after { box-sizing: border-box; }

/*=========================================================================================*/

/* Tweak needed so that menu drop-downs appear over top of totem banner! */
.submenu ul{
    z-index: 10;
}

/* Menu bar has been modified to remove the 'sitemap' links, as they just get in the way of the dropdown. */
/* See note in index.html */
/* New IDs to hide complete submenus on the menubar */
/* [Copied into main CSS file, for use in index, events, location pages - 23 Nov 2022] */
#history_submenu,
#donate_submenu {
    display: none;
}

/* [23-11-22] 
    Don't know if this is a good idea, or not... */
/* Found that omitting it prevented a full viewport-width header: body had default margin of 8px in Firefox
    header/nav/div/footer were all zero margin, p had top/bottom of 16px. */
    /* In original CSS, this was in '*', but that was not inherited by 'body', so have moved it. */
body{
    /* Original '-x-' comment: */
	/*There are default values for these, which make layout difficult. So clear them to start with, and specify as required.
		NB - on BBC website, these are set for all the main elements (h1, p, li, etc) rather than just '*'.*/
	margin: 0;
	padding: 0;
}

/*=========================================================================================*/
 /* [Temp comment] 'Safe' choices for basic elements */
/*=========================================================================================*/

body {
	/* background-color: #e7e7e7; - safe grey */
    background-color: #fffcd0; /* Matches main website */

	color: #000000;
	font-family: Verdana,Tahoma,Arial,Helvetica,sans-serif;
}

h1, h2, h3, h4 {
    color: #7b3f00;
}

/*=========================================================================================*/
/* 23 Oct 2025 - copied verbatim from main css */
/*=========================================================================================*/

/* 'hide' is used in place of commenting out old events and gives potential features:
	- Auto-creation of table from (eg) a text file using JavaScript (and hence auto-update according to date!)
	- Alternative print/screen versions of page, where print version always shows complete (or half) table! */
.hide{              /* WARNING -- this is now used willy-nilly across the site! */
	display:none;
}

/*=========================================================================================*/
/*==== Header ====*/
/*=========================================================================================*/

header {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    /* margin-top needed to reveal the top outline/border lines above the box */
    margin-top: 0.35em;
 
    /* By setting the font size here, and using em's for the child element dimensions, the graphics will grow/shrink proportional to this setting  */
    /* (Similarly, use the same trick in the media query) */
    font-size:0.5rem; 

    outline: 0.2em solid #000000;
    border-top: 0.15em solid #ff7f00;
    border-bottom: 0.15em solid #ff7f00;
	background-color: #003300;
}


/*==== Header Components ====*/

/* The outline around the logo can be used to identify a responsive page (using this CSS file) */
/* Dimensions here are for mobile display. Media query enhances presentation as space improves. */
#header_logo{
    height: 4em;
    margin-block: 0.7em;
    margin-inline: 1.5em;
	border-radius:70%;
    outline: 0.1em solid white;
    outline-offset: 0.15em;
}

#header_name{
	color:#fffcd0;
	/* Just a small margin-bottom to cope with droppers. */
    margin: 0 0 0.2em 0;
	text-align: left;
}
#header_pic{
    height:5em;
	border:0;
    margin-block: 0.3em;
    margin-inline: 0.5em;
    display: none;
}


/* Under a width of 50rem, the heading is small, left-justified and has no pic of no.3.
These are the values programmed in above: "design simple for mobile, then make it more complicated as display width increases".
Above 50rem width, header layout is similar to the existing website.
Might be nice if between 40 and 60 (say) font size, and hence header height reduces, rather than abrupt change at 50. 
Exact 'best' break points are yet to be determined. */
@media (min-width: 50rem) {
    header {
        font-size: 1.3rem; 
        justify-content: space-around;
    }

    #header_logo{
        margin-inline: 0.5em;
    }

    #header_name{
        text-align: center;
    }

    #header_pic{
        /* display: block - removes the tiny border below the image, caused by default being inline-block */
        display: block;
    }
}


/*=========================================================================================*/
/*==== Footer ====*/
/*=========================================================================================*/
/* 23rd Oct 2025 - Whole footer section copied from Header and hacked to basically work - some may be redundant
    All float/clear commented-out and related widths disabled. Just leave everything simple for now. */
Footer {
    /* display: flex; */
    /* align-items: center; */
    justify-content: flex-start;

    /* margin-top needed to reveal the top outline/border lines above the box */
    margin-top: 0.35em;
 
    /* By setting the font size here, and using em's for the child element dimensions, the graphics will grow/shrink proportional to this setting  */
    /* (Similarly, use the same trick in the media query) */
    			/* 23 Oct 2025 - header font size was 0.5rem - try 1.0 rem for footer */

    font-size:1.0rem; 

    outline: 0.2em solid #000000;
    border-top: 0.15em solid #ff7f00;
    border-bottom: 0.15em solid #ff7f00;
	background-color: #003300;
}

/* 23rd Oct 2025 - copied from main CSS file */
Footer p {
	color:#fffcd0;
	margin-top:0px;
	margin-bottom:0.9em;
	margin-right:0px;
}

/* Cheat - don't know how to suppress locally - use background colour so it doesn't show */
Footer a:hover{
	background-color:#003300;
}

.legal_info {
	/* float:left; */
	/* clear:both; */
	/* TODO - must set a width for float - this one thrown in quickly to avoid possible IE7 issues */
	/* width:450px; */
}
	
.legal_info h3 {
	color:#fffcd0;
	font-size:1.0em;
	margin-top:0.4em;
	margin-left:10px;
	font-weight:bold;
}

.legal_info p {
	font-size:0.7em;
	margin-left:10px;
}

/* 23 Oct 2025 - validation / html5 / website_notes no longer used */



/* width and margin-left provides for four icons. (See below.) */
.social_media{
	/* float:left; */
	/* width:120px; */
	margin-top:0px;
	margin-bottom:0px;
	margin-right:8px;
	/* margin-left:116px; */
    margin-left: 10px;
}

/* Temp adding Instagram icon on 'some' pages, and retaining Scooploop icon for now. ie page has 5 icons instead of 4 */
/* Must increase width, and reduce margin-left, by 30px (icon + spacing) to retain alignment. */
/* With a float this would be automatic, but that's in the future, and this is a safe hack for now! */
.social_media_5_icon{
	/* width and margin-left:86px; disabled 23 Oct 2025 */
	/* width:150px; */
 	/* margin-left:86px; */

}

.social_media p{
	font-size:0.7em;
	margin-top:6px;
	/* text-align:right; */
}

.social_media figure{
	/* text-align:right; disabled 23 Oct 2025 */
    /* text-align:right; */
	/* margin-top:6px; - changed 23 Oct 2025  */
	margin-top:20px;
}

/* Setting text as background colour hides any residual underline next to graphic */
.social_media a{
	color:#003300;
	border:0;
	/* width:22px; - changed 23 Oct 2025 */
   	width:44px;
	/* margin-left:4px;  - changed 23 Oct 2025*/
	margin-left:16px; 
	margin-bottom:0px;
}
/* Give icons consistent appearance - Twitter icon has larger corner radius than FB */
.social_media img{
	border:0;
	/* width:22px; - changed 23 Oct 2025 */
   	width:44px;
    margin-bottom:0px;
	/* border-radius:2px;  - changed 23 Oct 2025 */
	border-radius:8px;
}
/* The space is critical: element must be in both classes */
.social_media .email a{
	color:#fffcd0;
}

/* Temporary? matching icon for email using graphic from Contacts page */
/* This is not recognised - .social_media over-rides it.*/
.email_icon img{
	background-color:#FFFFFF;
    /* width:18px; - changed 23 Oct 2025 */
   	width:44px;
	padding:2px;

}


/* TODO - A little restructuring should allow the footnote to be simplified - done in a hurry! */
.copyright_msg{
	color:#fffcd0;
	font-size:0.7em;
	/* float:left; */
	/* clear:left; */
	/* TODO - must set a width for float - this one thrown in quickly to avoid possible IE7 issues */
	/* TODO - This was the one that wrapped in IE7! */
	/* width:400px; */
	margin-top:0.6em;
	margin-bottom:2px;
	margin-left:10px;
}
.update_notice{
	color:#fffcd0;
	font-size:0.7em;
	margin-left:10px;
    /* 23 Oct 2025 - added margin-left:10px; - disabled text-align:right; */
	/* text-align:right; */
	/* float:right; */
	/* clear:right; */
	/* TODO - must set a width for float - this one thrown in quickly to avoid possible IE7 issues */
	/* width:200px; */
	margin-top:0.6em;
	margin-bottom:0.4em;
	margin-right:10px;
}



/*=========================================================================================*/
/*==== 23rd Oct 2025  - Added for MRX guide ====*/
/*=========================================================================================*/
.mrx_guide_title{
    display: flex;
    align-items: center;
    justify-content: flex-start;

    /* margin-top needed to reveal the top outline/border lines above the box */
    margin-top: 0.5em;
    margin-left: 2em;
    margin-bottom: 0.5em;
 
    /* By setting the font size here, and using em's for the child element dimensions, the graphics will grow/shrink proportional to this setting  */
    /* (Similarly, use the same trick in the media query) */
    font-size:1.0rem; 

    padding: 10px 10px 10px 10px;
    /* width: auto;
    max-width: 15em;
    border-color: black;
    border-style: solid;
    border-width: 2px; */

}

.mrx_title_text{
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    /* Can change this once flex enabled! */
    margin-top: 0.5em;
}

.mrx_logo{
    height: 6em;
	margin-left: 1.5em;
}
/* This has to show the LARGE values.
   The initial definitions show the smaller size */
@media (min-width: 40rem) {
    mrx_guide_title {
        font-size: 2rem; 
        /* max-width: 29em; */
    }

    .mrx_title_text{
        font-size: 2.0em;
        font-weight: bold;
        text-align: center;
        /* Can change this once flex enabled! */
        margin-top: 0.5em;
    }

    .mrx_logo{
        height: 8em;
        margin-left: 1.5em;
    }
}

.layout_description {
    font-size: 1.0em;

    max-width: 800px;
	margin-left:2.0em;
    margin-right:2.0em;
    margin-top: 0em;
    margin-bottom: 2em;
}
.layout description p{
    padding:0;
    margin-top: 4em;;
    
}

.layout_title {
    font-size: 2.0em;
    font-weight: bold;
    margin-top: 0em;
    margin-bottom: 0.2em;
}

.layout_owner {
    font-size: 1.5em;

    margin-top: 0em;
    margin-bottom: 0.5em;
}
.layout_scale {
    font-size: 1.0em;
    font-weight: bold;

    margin-top: 0em;
    margin-bottom: 1.0em;
}

.layout_photo{
    border-color: black;
    border-width: 2px;
    margin-bottom: 1.0em;

    /* width/height settings make image responsive */
    width: 100%;
    height: auto;
}
.layout_text {
    font-size: 1.0em;

    margin-top: 0em;
    margin-bottom: 1.0em;
}

.guide_page_link{
    font-size: 0.8em;;
    margin-left: 2.0em;
    margin-top: 0.7em;
    margin-bottom: 0em;
}
.guide_page_link a{
    text-decoration: none;
}

.home_page_link{
    margin-left: 2.0em;
    margin-top: 4.0em;
    margin-bottom: 2.0em;
}

.showguide_list{
        margin-left: 2.0em;
}
.showguide_list ul{
}

.showguide_heading{
    font-size: 2.0em;
    font-weight: bold;
    font-style: italic;
    margin-top: 0em;
    margin-bottom: 0em;
}

/*  */
.control_button_2{
	padding:0.2em;
	border-radius:0.5em;
	box-shadow:0.3em 0.3em 5px #777777;
    text-align: center;
}
.control_button_2 span{	/* For the text in a button */
	display:inline-block;
	font-size:1.2em;
	font-weight:bold;
	font-variant:small-caps;
/* This is a real hack, as adding (PDF) as a fourth line after Download Show Guide showed that everything 
    was bottom-justified. No idea why. This code is a hack that at least makes it look OK!*/
/* padding-left:0.4em;
padding-bottom: 0.3em;
display: table-cell;
vertical-align: middle; */
}

/* Added for MRX page, based on print button with logo instead of icon.*/
@media screen{
	.showguide_button{	/* For div surrounding the control button */ /* This may change on other pages!*/
		/* float:right; */
		/* margin-right:40px; */
        margin-left: 4.0em;
        margin-top: 2.0em;
	}
	 /* PNG images need a width, SVG images do not.
	  * 32px gives same PNG size as original 128x128 SVG icon (using Firebug in Firefox!) 
	  * SVG gives a clearer image, but browser support (IE 9/10/11) is still not 100%.
	  */
	.showguide_button img{
		width:8em; /* Cannot use ~2.7em (with font-size 1.0em) as the * 0.95em problem gives inconsistent sizes across pages */
	}
	/*.showguide_button span{
		text-align: ;   
	}*/
}