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

    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;

}

/*/==========================================================
   PHOTOGRAPHS WITHIN INTERIOR PAGES
   ========================================================== */

figure.page-photo {
    display: block;
    width: 250px;
    max-width: 100%;
    margin: 1.5rem auto 2rem auto;
    padding: 0;
    text-align: center;
}

figure.page-photo img {
    display: block;
    width: 250px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 0;
}

figure.page-photo figcaption {
    display: block;
    width: 100%;
    margin: 0.6rem 0 0 0;
    padding: 0;
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* ==========================================================
   LARGE PHOTOGRAPHS WITHIN INTERIOR PAGES
   ========================================================== */

figure.large-photo {
    display: block;
    width: 750px;
    max-width: 100%;
    margin: 2rem auto;
    padding: 0;
    text-align: center;
}

figure.large-photo img {
    display: block;
    width: 750px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 0;
}

figure.large-photo figcaption {
    display: block;
    width: 100%;
    margin: 0.6rem 0 0;
    padding: 0;
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.4;
}

figure.large-photo img {
    width: 750px !important;
    max-width: 750px !important;
}


/*==============================================================
    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{

    text-align:center;

    margin:2rem auto 0;

    line-height:1.8;

}

.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;

    }

}

/*=========================================================
  INTERIOR PAGE HEADER
=========================================================*/

.section-header{
    background: linear-gradient(
        to bottom,
        var(--regimental-green-dark),
        var(--regimental-green)
    );
    color: var(--white);
    padding: 1rem 2rem;
    border-bottom: 4px solid #c6b27a;
}

.section-header-inner{
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.section-badge{
    flex: 0 0 auto;
}

.section-badge img{
    width: 90px;
    height: auto;
    display: block;
}

.section-title{
    flex: 1;
}

.section-title h1{
    margin: 0;
    font-size: 1.4rem;
    color: var(--white);
    font-weight: 600;
    letter-spacing: .03em;
}

.page-subtitle{
    margin: .25rem 0 0;
    font-size: 1.6rem;
    color: #f2e7c4;
    font-weight: 700;
}

/*==============================================================
    INTERIOR PAGE NAVIGATION
==============================================================*/

.section-navigation{
    background:#f8f6ef;
    border-bottom:1px solid var(--border);
}

.section-nav-wrapper{
    max-width:1150px;
    margin:0 auto;
    display:flex;
    flex-wrap:wrap;
    gap:0;
}

.section-navigation a{
    display:block;
    padding:1rem 1.4rem;
    color:var(--regimental-green-dark);
    text-decoration:none;
    font-weight:600;
    border-right:1px solid #e3dfd4;
    transition:background .25s, color .25s;
}

.section-navigation a:hover{
    background:#ece8dc;
    color:var(--regimental-green-dark);
}

.section-navigation a.active{
    background:var(--regimental-green-dark);
    color:var(--white);
}

@media (max-width:900px){

    .section-nav-wrapper{
        flex-direction:column;
    }

    .section-navigation a{
        border-right:none;
        border-top:1px solid #e3dfd4;
    }

    .section-navigation a:first-child{
        border-top:none;
    }

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

.breadcrumb{

    background:#f5f2e8;

    border-bottom:1px solid #d7d2c4;

    padding:.45rem 2rem;

    font-size:.95rem;

}

.breadcrumb a{

    color:var(--green);

    text-decoration:none;

    font-weight:600;

}

.breadcrumb a:hover{

    text-decoration:underline;

}

.separator{

    margin:0 .5rem;

    color:#666;

}

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

.breadcrumb{
    background:#f5f2e8;
    border-bottom:1px solid var(--border);
    padding:.45rem 2rem;
    font-size:.95rem;
}

.content-wrapper{
    max-width:1150px;
    margin:0 auto;
    padding:0.25rem 2rem 2rem;
}

/*=========================================================
  HISTORICAL NOTE
=========================================================*/

.information-box{
    background:#f8f6ef;
    border-left:6px solid var(--green);
    padding:1.4rem 1.8rem;
    margin:0.5rem 0 2rem;
}

.information-box h3{

    margin-top:0;

    color:var(--green);

}

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

.guidance-list{

    margin:1.5rem 0 2rem;

    padding-left:1.5rem;

}

.guidance-list li{

    margin-bottom:.75rem;

}

.guidance-list a{

    color:var(--green);

    font-weight:600;

    text-decoration:none;

}

.guidance-list a:hover{

    text-decoration:underline;

}

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

.section-divider{

    margin:3rem 0 2rem;

}

.closing-text{

    font-size:1.05rem;

    font-style:italic;

    text-align:center;

    color:#555;

}

/* ==========================================================
   SEARCH FOR A NAME - FORM CONTROLS
   ========================================================== */

.search-field input[type="text"] {
    box-sizing: border-box;
    width: 100%;
    max-width: 420px;
    padding: 0.65rem 0.75rem;
    border: 1px solid #aaa;
    border-radius: 3px;
    font: inherit;
    background: #fff;
}

.search-field input#forename {
    max-width: 90px;
    text-align: center;
}

.search-field input#surname {
    max-width: 420px;
}


/* ==========================================================
   SEARCH FOR A NAME - BUTTONS
   ========================================================== */

.search-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.search-buttons button {
    padding: 0.75rem 1.5rem;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid #183322;
    border-radius: 4px;
}

.search-buttons button[type="submit"] {
    min-width: 210px;
}

.search-buttons button[type="reset"] {
    min-width: 100px;
}

/* ==========================================================
   INTERIOR HEADER - ALLOW TITLE TO SHRINK CORRECTLY
   ========================================================== */

.section-header-inner {
    width: calc(100% - 4rem);
    max-width: 1100px;
    margin: 0 auto;
}

.section-title {
    min-width: 0;
}

.section-title h1 {
    overflow-wrap: break-word;
}