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

    Yorkshire Regiment Remembrance Website
    Release 1.0

    Master Stylesheet

    ------------------------------------------------------------

    Originally established : 2006
    HTML5/CSS3 Edition     : Release 1.0

    This stylesheet provides:

        • Responsive layout
        • Mobile-first design
        • Accessibility enhancements
        • Semantic HTML5 support
        • Responsive navigation
        • Flexible content panels
        • Modern typography
        • Print-friendly output

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


/*==============================================================
    COLOUR SCHEME
==============================================================*/

:root {

    --regimental-green: #234b32;
    --regimental-green-dark: #183322;
    --regimental-green-light: #2f6544;

    --cream: #f7f5ef;

    --white: #ffffff;

    --text: #222222;

    --text-light: #666666;

    --border: #d7d2c8;

    --highlight: #9dcf08;

    --shadow:
        0 3px 10px rgba(0,0,0,.12);

}


/*==============================================================
    RESET
==============================================================*/

*,
*::before,
*::after {

    margin:0;
    padding:0;

    box-sizing:border-box;

}


/*==============================================================
    PAGE
==============================================================*/

html {

    scroll-behavior:smooth;

}

body {

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    font-size:18px;

    line-height:1.7;

    color:var(--text);

    background:#e9ece7;

}


/*==============================================================
    WRAPPER
==============================================================*/

.wrapper {

    max-width:1400px;

    margin:0 auto;

    background:var(--white);

    box-shadow:var(--shadow);

    min-height:100vh;

}


/*==============================================================
    IMAGES
==============================================================*/

img {

    display:block;

    max-width:100%;

    height:auto;

}

.feature-image img {

    width:100%;

    height:auto;

    display:block;

}


/*==============================================================
    LINKS
==============================================================*/

a {

    color:var(--regimental-green);

    text-decoration:none;

    transition:.25s;

}

a:hover {

    color:var(--highlight);

}

a:focus {

    outline:3px solid var(--highlight);

    outline-offset:3px;

}


/*==============================================================
    HEADINGS
==============================================================*/

h1,h2,h3,h4 {

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    color:var(--regimental-green-dark);

    font-weight:normal;

    line-height:1.25;

}

h1{

    font-size:3rem;

}

h2{

    font-size:2rem;

    margin-bottom:1rem;

}

h3{

    font-size:1.5rem;

}


/*==============================================================
    PARAGRAPHS
==============================================================*/

p{

    margin-bottom:1.2rem;

}


/*==============================================================
    SECTIONS
==============================================================*/

section{

    padding:3rem 4rem;

}

/*==============================================================
    HEADER
==============================================================*/

.site-header {

    background: linear-gradient(
        to bottom,
        var(--regimental-green-dark),
        var(--regimental-green)
    );

    color: var(--white);

    padding: 2.5rem 3rem;

    border-bottom: 6px solid #c6b27a;

}


/*--------------------------------------------------------------
    Header Layout
--------------------------------------------------------------*/

.header-content {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 2.5rem;

    flex-wrap: nowrap;

}


/*--------------------------------------------------------------
    Cap Badge
--------------------------------------------------------------*/

.badge {

    flex: 0 0 auto;

}

.badge img {

    width: 180px;

    height: auto;

    border: 3px solid rgba(255,255,255,.55);

    border-radius: 6px;

    background: var(--white);

    padding: .4rem;

    box-shadow: var(--shadow);

    transition: transform .3s ease;

}

.badge a:hover img {

    transform: scale(1.03);

}


/*--------------------------------------------------------------
    Title Block
--------------------------------------------------------------*/

.title-block {

    flex: 1;

    min-width: 320px;

    text-align: left;

}


/*--------------------------------------------------------------
    Main Heading
--------------------------------------------------------------*/

.title-block h1 {

    color: var(--white);

    font-size: 3.3rem;
	
	font-weight:600;

    letter-spacing: .04em;

    margin-bottom: .35rem;

}


/*--------------------------------------------------------------
    Dates
--------------------------------------------------------------*/

.title-block .dates {

    color: #f2e7c4;

    font-size: 1.5rem;

    letter-spacing: .35em;

    margin-bottom: 1rem;

}


/*--------------------------------------------------------------
    Regiment Name
--------------------------------------------------------------*/

.title-block h2 {

    color: var(--white);

    font-size: 2rem;

    margin-bottom: .15rem;

}

.title-block h3 {

    color: #f2e7c4;

    font-size: 1.25rem;

    font-style: italic;

    font-weight: normal;
	
	margin-top:0;

}


/*--------------------------------------------------------------
    Introductory Text
--------------------------------------------------------------*/

.site-header .intro {

    max-width: 900px;

    margin: 2rem auto 0;

    text-align: center;

    color: rgba(255,255,255,.92);

    font-size: 1.1rem;

    line-height: 1.8;

}


/*==============================================================
    SKIP LINK
==============================================================*/

.skip-link {

    position: absolute;

    left: -9999px;

    top: auto;

}

.skip-link:focus {

    left: 20px;

    top: 20px;

    z-index: 9999;

    background: var(--highlight);

    color: #000;

    padding: .75rem 1rem;

    border-radius: 4px;

    font-weight: bold;

}


/*==============================================================
    BREADCRUMB
==============================================================*/

.breadcrumb {

    background: #f2f2f2;

    padding: .8rem 4rem;

    border-bottom: 1px solid var(--border);

    font-size: .95rem;

}

.breadcrumb a {

    color: var(--regimental-green);

}

.breadcrumb span {

    color: var(--text-light);

}

/*==============================================================
    PRIMARY NAVIGATION
==============================================================*/

.main-navigation {

    background: var(--regimental-green);

    position: relative;

    z-index: 1000;

    border-top: 1px solid rgba(255,255,255,.15);

    border-bottom: 4px solid #c6b27a;

}


/*--------------------------------------------------------------
    Main Menu
--------------------------------------------------------------*/

.menu {

    list-style: none;

    display: flex;

    justify-content: center;

    align-items: stretch;

    flex-wrap: nowrap;

}


/*--------------------------------------------------------------
    Top Level Items
--------------------------------------------------------------*/

.menu > li {

    position: relative;

}

.menu > li > a {

    display: block;

    padding: 1rem 1.6rem;

    color: var(--white);

    font-size: 1rem;

    font-weight: 600;

    letter-spacing: .03em;

    white-space: nowrap;

    transition:
        background .25s,
        color .25s;

}

.menu > li > a:hover,
.menu > li > a:focus {

    background: var(--regimental-green-dark);

    color: var(--white);

}


/*==============================================================
    SUBMENUS
==============================================================*/

.submenu {

    list-style: none;

    display: none;

    position: absolute;

    left: 0;

    top: 100%;

    min-width: 260px;

    background: var(--white);

    border: 1px solid var(--border);

    box-shadow: var(--shadow);

    z-index: 5000;

}


.has-submenu:hover > .submenu,
.has-submenu:focus-within > .submenu {

    display: block;

}


.submenu li {

    border-bottom: 1px solid #ececec;

}

.submenu li:last-child {

    border-bottom: none;

}


.submenu a {

    display: block;

    padding: .85rem 1.25rem;

    color: var(--text);

    font-size: .95rem;

    transition:
        background .2s,
        color .2s;

}


.submenu a:hover,
.submenu a:focus {

    background: var(--regimental-green);

    color: var(--white);

}


/*==============================================================
    MENU TOGGLE BUTTON
==============================================================*/

.menu-toggle {

    display: none;

    width: 100%;

    padding: 1rem 1.5rem;

    background: var(--regimental-green);

    color: var(--white);

    border: none;

    cursor: pointer;

    font-size: 1.15rem;

    font-weight: bold;

    text-align: left;

}


.menu-toggle:hover,
.menu-toggle:focus {

    background: var(--regimental-green-dark);

}



/*==============================================================
    ACTIVE PAGE
==============================================================*/

.menu a.active {

    background: var(--regimental-green-dark);

    color: var(--white);

}


/*==============================================================
    SMALL DESKTOP
==============================================================*/

@media (max-width:1100px) {

.menu > li > a {

    padding: .9rem 1.1rem;

    font-size: .95rem;

}

}


/*==============================================================
    TABLET & MOBILE
==============================================================*/

@media (max-width:900px) {

.menu-toggle {

    display:block;

}

.menu {

    display:none;

    flex-direction:column;

    width:100%;

}

.menu.open {

    display:flex;

}

.menu > li {

    width:100%;

}

.menu > li > a {

    border-top:1px solid rgba(255,255,255,.10);

    padding:1rem 1.5rem;

}

.submenu {

    position:static;

    display:none;

    min-width:100%;

    box-shadow:none;

    border:none;

    background:#f5f5f5;

}

.has-submenu.open > .submenu {

    display:block;

}

.submenu a {

    padding-left:2.5rem;

}

}


/*==============================================================
    LARGE SCREENS
==============================================================*/

@media (min-width:1600px) {

.menu > li > a {

    padding:1rem 2rem;

}

}

/*==============================================================
    MAIN CONTENT
==============================================================*/

main {

    padding: 0;

    background: var(--white);

}


/*==============================================================
    CONTENT SECTIONS
==============================================================*/

.welcome,
.about-website,
.acknowledgements {

    padding: 3.5rem 4rem;

}


/*--------------------------------------------------------------
    Section Headings
--------------------------------------------------------------*/

.welcome h2,
.feature-panel h2,
.about-website h2,
.acknowledgements h2,
.remembrance h2 {

    position: relative;

    display: inline-block;

    margin-bottom: 2rem;

    padding-bottom: .6rem;

}

.welcome h2::after,
.feature-panel h2::after,
.about-website h2::after,
.acknowledgements h2::after,
.remembrance h2::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 180px;

    height: 3px;

    background: var(--regimental-green);

}


/*--------------------------------------------------------------
    Lead Paragraph
--------------------------------------------------------------*/

.lead {

    font-size: 1.28rem;

    line-height: 1.8;

    color: var(--regimental-green-dark);

    border-left: 5px solid var(--regimental-green);

    padding-left: 1.5rem;

    margin-bottom: 2rem;

}


/*==============================================================
    FEATURED MEMORIAL
==============================================================*/

.feature-panel {

    display: flex;

    gap: 3rem;

    align-items: flex-start;

    padding: 3.5rem 4rem;

    background: var(--cream);

    border-top: 1px solid var(--border);

    border-bottom: 1px solid var(--border);

}


/*--------------------------------------------------------------
    Memorial Photograph
--------------------------------------------------------------*/

.feature-image {

    flex: 0 0 32%;

}

.feature-image figure {

    background: var(--white);

    padding: 1rem;

    border: 1px solid var(--border);

    box-shadow: var(--shadow);

}

.feature-image img {

    width: 100%;

    border: 4px solid var(--white);

}


/*--------------------------------------------------------------
    Figure Caption
--------------------------------------------------------------*/

.feature-image figcaption {

    margin-top: 1rem;

    text-align: left;

    font-size: .95rem;

    line-height: 1.6;

    color: var(--text-light);

}

.feature-image figcaption strong {

    display: block;

    color: var(--regimental-green-dark);

    font-size: 1.05rem;

    margin-bottom: .6rem;

}


/*--------------------------------------------------------------
    Feature Text
--------------------------------------------------------------*/

.feature-text {

    flex: 1;
	
	padding-left:1rem;

}

.feature-text p:last-child {

    margin-bottom: 0;

}


/*==============================================================
    ABOUT THE WEBSITE
==============================================================*/

.about-website {

    background: var(--white);

}


/*==============================================================
    ACKNOWLEDGEMENTS
==============================================================*/

.acknowledgements {

    background: #faf8f3;

    border-top: 1px solid var(--border);

}


/*--------------------------------------------------------------
    Contributors
--------------------------------------------------------------*/

.contributors {

    columns: 2;

    column-gap: 3rem;

    margin-top: 2rem;

    margin-left: 1.5rem;

}

.contributors li {

    break-inside: avoid;

    margin-bottom: .75rem;

    color: var(--regimental-green-dark);

    font-weight: 600;

}

.contributors a{

    color: var(--regimental-green);

    text-decoration: none;

    font-weight: normal;

}

.contributors a:hover{

    color: var(--highlight);

    text-decoration: underline;

}

.contributors a:focus{

    outline: 2px solid var(--highlight);

    outline-offset: 2px;

}

@media (max-width:900px){

    .contributors{

        columns:1;

    }

}


/*==============================================================
    REMEMBRANCE QUOTATION
==============================================================*/

.remembrance {

    padding: 4rem;

    background: var(--regimental-green-dark);

    color: var(--white);

    text-align: center;

}

.remembrance blockquote {

    max-width: 850px;

    margin: 0 auto;

}

.remembrance p {

    font-family: Georgia, "Times New Roman", serif;

    font-size: 2rem;

    line-height: 1.6;

    font-style: italic;

    margin-bottom: 2rem;

    color: var(--white);

}

.remembrance footer {

    font-size: 1rem;

    letter-spacing: .08em;

    color: #d9d3c3;

}

.remembrance footer em {

    font-style: italic;

}


/*==============================================================
    FOOTER
==============================================================*/

.site-footer {

    background: #202020;

    color: #dddddd;

    text-align: center;

    padding: 2.5rem 2rem;

    font-size: .95rem;

}

.site-footer p {

    margin-bottom: .9rem;

}

.site-footer strong {

    color: var(--white);

}

.site-footer a {

    color: #d9d3c3;

}

.site-footer a:hover {

    color: var(--highlight);

}

.copyright {

    margin-top: 1.5rem;

    padding-top: 1rem;

    border-top: 1px solid rgba(255,255,255,.15);

    font-size: .9rem;

}


/*==============================================================
    HORIZONTAL RULES
==============================================================*/

hr {

    border: 0;

    height: 1px;

    background: var(--border);

    margin: 3rem 0;

}


/*==============================================================
    TABLES
==============================================================*/

table {

    width: 100%;

    border-collapse: collapse;

    margin: 2rem 0;

}

th {

    background: var(--regimental-green);

    color: var(--white);

    text-align: left;

    padding: .8rem;

}

td {

    padding: .8rem;

    border-bottom: 1px solid var(--border);

}

tr:nth-child(even) {

    background: #fafafa;

}


/*==============================================================
    LISTS
==============================================================*/

ul,
ol {

    margin-left: 2rem;

    margin-bottom: 1.5rem;

}

li {

    margin-bottom: .4rem;

}


/*==============================================================
    IMAGE CAPTIONS
==============================================================*/

figcaption {

    font-size: .92rem;

    color: var(--text-light);

}

/*==============================================================
    RESPONSIVE MEDIA QUERIES
==============================================================*/


/*--------------------------------------------------------------
    Large Desktop
--------------------------------------------------------------*/

@media (min-width:1600px){

    .wrapper{

        max-width:1500px;

    }

    .site-header{

        padding:3rem 4rem;

    }

}


/*--------------------------------------------------------------
    Desktop
--------------------------------------------------------------*/

@media (max-width:1200px){

    section{

        padding:3rem;

    }

    .feature-panel{

        padding:2rem;

    }

}

.header-content{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:1.5rem;

    flex-wrap:nowrap;

}

.badge{

    flex:0 0 auto;

}

.title-block{

    text-align:left;

}


/*--------------------------------------------------------------
    Tablet
--------------------------------------------------------------*/

@media (max-width:900px){

    body{

        font-size:17px;

    }

    .header-content{

        flex-direction:column;

        text-align:center;

    }

    .badge img{

        width:150px;

    }

    .title-block h1{

        font-size:2.5rem;

    }

    .title-block h2{

        font-size:1.7rem;

    }

    .title-block h3{

        font-size:1.15rem;

    }

    .feature-panel{

        flex-direction:column;

    }

    .feature-image{

        width:100%;

    }

    .feature-text{

        width:100%;

    }

    .contributors{

        columns:1;

    }

}


/*--------------------------------------------------------------
    Mobile Phones
--------------------------------------------------------------*/

@media (max-width:600px){

    body{

        font-size:16px;

    }

    section{

        padding:2rem 1.5rem;

    }

    .site-header{

        padding:2rem 1rem;

    }

    .badge img{

        width:120px;

    }

    .title-block h1{

        font-size:2rem;

    }

    .title-block .dates{

        font-size:1.2rem;

        letter-spacing:.15em;

    }

    .title-block h2{

        font-size:1.45rem;

    }

    .title-block h3{

        font-size:1rem;

    }

    .lead{

        font-size:1.1rem;

        padding-left:1rem;

    }

    .feature-panel{

        gap:2rem;

    }

    .feature-image figure{

        padding:.75rem;

    }

    .welcome,
    .about-website,
    .acknowledgements{

        padding:2rem 1.5rem;

    }

    .remembrance{

        padding:2.5rem 1.5rem;

    }

    .remembrance p{

        font-size:1.5rem;

    }

    .site-footer{

        padding:2rem 1rem;

    }

}


/*--------------------------------------------------------------
    Very Small Phones
--------------------------------------------------------------*/

@media (max-width:400px){

    .title-block h1{

        font-size:1.7rem;

    }

    .title-block h2{

        font-size:1.2rem;

    }

    .title-block h3{

        font-size:.95rem;

    }

    .menu-toggle{

        font-size:1rem;

    }

}