/*kab 2019-23*/
/*colours*/
/* #bbb; pale grey */
/* #5B676d medium greenish grey */
/* #013E39  dark pine green */



/*------------------reset----------------*/
*, body, html, a {
margin:0;
padding:0;
font-size:1em;
font-family: Poppins, Raleway, Arial, sans-serif;
color:#013E39; /*deep pine green */
background-color: white;
text-decoration:none;

}

/*
body {
    display:grid;
    place-items:center;
    height:100vh;
    }
 */

nav {
    display:flex;
    flex-wrap: wrap;
    place-items:center;
    text-align:center;
    vertical-align:middle;
    min-height:5vw;      /* was height:5vw — a fixed height made tall navs
                            overflow their box and the page content ran
                            underneath them. min-height keeps the same look
                            when the nav is short and grows when it is not. */
    }


/* Mobile First iPhone 5S 321px */

/* Across all Header, Main, Footer */

/*
.site {
text-:center;
width:100%;
}
 */

header, footer  {
color:#fff;
background-color: #013E39;
width:100%;
}

/*
section > h1 {
margin:10% 0 0 10%;
}
 */

main  {
color:  #013E39;
background-color:  #fff;
margin:5% 10%;
}


/* Masthead */

h1 {
    width:100%;
    background-url (../images/2020-06-16mockorangegate.jpg 50% 50%);
    }

.masthead {
    width:100%;
}   /* <-- was missing: the unclosed brace swallowed the rules below (fixed 03 Jul 2026) */

	/*..............RESOURCES PAGE .............*/
#masthead-resources {
    background:#000 url(../images/fl_rosefence2.jpg) 50% 60% no-repeat;
    background-size:cover;
    }

#masthead-gallery-dash {
    /* Background photo removed 15 Aug 2026.
       This id wraps the page heading and intro text inside <main>,
       not a masthead banner, so the robin behind it read as grey
       bars across the copy. The cover photo for this page now comes
       from #masthead-gallery in the header, like every other gallery. */
    }
    
    
    

h1 {
    line-height:2em;
    font-size:4em;
    letter-spacing:.2em;
    margin: 1em 0;
    font-weight:200;
    }

h2 {
    line-height:1.2em;
    font-size:2em;
  /*  letter-spacing:.2em;*/
    margin-top:1em;
    font-weight:300;
    }

h3 {
    line-height:1.2em;
    font-size:.6em;
    letter-spacing:.9em;
    margin-bottom:2em;
    font-weight:200;
    }

    p{
        font-size:1em;
        margin-bottom:2em;
        }

    aside{
        margin: 2em 1em;
        font-size:2em;
        }


    blockquote{
    color: #6699ff;
    font-weight:500;
    }

/* ---------- globalNav --------------*/

/* Global Nav - Top Nav */
nav {
    display:flex;
    flex-wrap: wrap;
    place-items:center;
    text-align:center;
    vertical-align:middle;
    min-height:5vw;      /* was height:5vw — a fixed height made tall navs
                            overflow their box and the page content ran
                            underneath them. min-height keeps the same look
                            when the nav is short and grows when it is not. */
    }


.clear {
	clear:both;
	}



 .top-nav
 {
	 background: #013E39;
	 color: white;
	 width:100%;
	 line-height:2.3em;
	    margin-left:10%;
	 /* clear:both; */
	 }
/* CV unordered list */
#cv {
color:#000;
background-color:#fff;
flex-start:top;
}

.cv {
color:#000;
background-color:#fff;
}


.footer-nav {
clear:both;
}

 .global-nav ul {
 	  list-style-type:none;
 	  overflow: hidden;
	 }

 /* was: li { background-color:#fff; margin-bottom:2em }
    A white background and a 2em gap on EVERY list item on the site.
    In the nav bars that painted white blocks over the green band.
    Scoped to prose lists only. 15 Aug 2026. */
 main article li,
 main .main-content > ul > li {
 margin-bottom:1em;
	}


 .global-nav ul,  .global-nav ul li {
	color: white;
	line-height:2em;
	vertical-align:middle;
    background-color: #013e39;
    display:inline;
	 }

 .global-nav ul li  a{
     display:inline;
	  background-color: #013E39;
	  	 color: white;
	  line-height:2em;
	  vertical-align:middle;
	  font-size:.8em;
	  font-weight:600;
	  text-align: center;
	  padding:1px 8px;
	/*  display: inline-block;*/
	  border-radius:5px 5px 0 0;

	 }


/* Change the color of links on hover */
.global-nav, .global-nav a:hover {
  background-color: #ddd;
  color: #aaa;

 display:inline;
}

/* Change the color of links on active */
.global-nav a:active {
  background-color: #ccc;
  color: #aaa;
   display:inline;
}

 .global-nav a.current-page {
  	background-color: #013E39;
  	color: #aaa;
  	cursor:default;
  	 display:inline;

	}

 .global-nav a.current-page:hover {
  	background-color: #013E39;
  	color: #eee;
  	cursor:default;
  	 font-weight:900;
 display:inline;
	}



/* Add an active class to highlight the current page */
	.global-nav a.current {
	  background-color: #4CAF50;
	  color: white;
	   display:inline;
		}


	footer div.social {
		margin:1em 4em;
		display: flex;
 		justify-content: space-between;
  		flex-direction:row;
		justify-content:center;
		text-align:center;
	}

	.social i {
		margin:0 20px;
		}

	/* position:sticky with no offset did nothing but create a new
	   stacking context, which let page content paint over the bar.
	   Removed 15 Aug 2026. */
	.global-nav#top-nav ul {
 	 	 display:flex;
		}

	address {
		display:flex;
		justify-content:center;
		padding-left:18%;
		padding-bottom:20px;
		font-size:.8em;
		text-align:center;
		}



/* ---------- END global nav   ----------*/
<!-- wider devices -->
@media only screen and (min-width:371px){

    /* Masthead */

    h1 {
    line-height:1.6em;
    font-size:4em;
    letter-spacing:.8em;
    margin: 2em 0 2em 0;
    font-weight:boldest;
    }

    h1 > img {
    margin-right:30%;

    }
/*  main  */

h2,h3 {
font-variant:small-caps;
font-weight:bolder;
}
    h2 {
    line-height:1.3em;
    font-size:4em;
    letter-spacing:.2em;
    margin: 1em 0 2em 0;
    }
    h3 {
        line-height:1.2em;
        font-size:2em;
        letter-spacing:.2em;
        margin: 1.6em 0 2em 0;
        }

    p{
     font-size:1.1em;
     margin-bottom:2em;
    }

    main > section {
    margin-bottom:2em;
    }

    aside{
    margin: 2em 1em;
    font-size:2em;
    width:30%;
    float:right;
    color: #6699ff;
    }



}


/* ---------- widest devices -- -------------------1001-------------- */
@media only screen and (min-width:1001px){
     /* ------------------Masthead------------------- */

    h1 {
    line-height:1.6em;
    font-size:5em;
    letter-spacing:.8em;
    margin: 2em 0 1em 0;
    font-weight:bold;
    }

    h1 > img {
    margin-right:10%;

    }
    /*  main  */

    h2,h3 {
    font-variant:small-caps;
    font-weight:bolder;
    }
        h2 {
        line-height:1.5em;
        font-size:4em;
        letter-spacing:.4em;
        margin: 1em 0 2em 0;
        }
        h3 {
            line-height:1.2em;
            font-size:3em;
            letter-spacing:.3em;
            margin: 1.6em 0 2em 0;
            }

        p{
         font-size:1.8em;
         margin-bottom:2em;
        }

        main > section {
        margin-bottom:2em;
        }

        aside{
        margin: 2em 1em;
        font-size:3em;
        width:30%;
        float:right;
        color: #6699ff;
        }

}


/* ============================================================
   SIDE-NAV PAGE LAYOUT  —  added 15 Aug 2026
   For pages carrying <main class="with-sidenav">: the vertical
   nav sits in its own column and the text sits beside it,
   rather than flowing underneath.
   ============================================================ */

main.with-sidenav {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem 2.5rem;
    align-items: start;
    }

main.with-sidenav > section:first-of-type {
    grid-column: 1 / -1;
    }

main.with-sidenav > nav {
    display: block;
    height: auto;
    min-height: 0;
    text-align: left;
    }

main.with-sidenav > nav ul {
    display: block;
    padding: 0;
    margin: 0;
    }

main.with-sidenav > nav li {
    margin: 0 0 .7em;
    list-style: none;
    }

@media only screen and (min-width: 800px) {
    main.with-sidenav {
        grid-template-columns: 11rem minmax(0, 1fr);
        }
    main.with-sidenav > nav {
        position: sticky;
        top: 1rem;
        }
}

/* ============================================================
   READABLE LISTS  —  added 15 Aug 2026
   ============================================================ */

/* Definition lists (the idiom and food sections) are term +
   meaning pairs, not bullets. A marker plus a bold term and an
   indented definition is what makes them scannable. */

dl.resources {
    margin: 0 0 1.75em;
    }

dl.resources dt {
    font-weight: 700;
    margin-top: 1.1em;
    }

dl.resources dt::before {
    content: "\25B8\00A0";     /* small right-pointing triangle */
    color: #5B676d;
    }

dl.resources dd {
    margin: .3em 0 0 1.6em;
    line-height: 1.55;
    }

/* Real bullet lists inside article text get a visible disc.
   Navigation lists keep list-style:none — this is scoped to
   article and main-content prose only. */

main article ul,
main .main-content article ul {
    list-style: disc outside;
    margin: 0 0 1.25em 1.5em;
    padding-left: 0;
    }

main article ul > li {
    list-style: disc;
    margin-bottom: .65em;
    line-height: 1.55;
    }