/*
  The Daily Ledger — layout assignment styles
  Required: menu link states, div borders, floated image, box model

  Theme
  Deep Blue   #1557A6
  Sky Blue    #3FA9F5
  News Red    #E63946
  Dark Red    #B91C2B
  Soft White  #F4F7FB
  Dark Navy   #172033
  White       #FFFFFF
*/

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 24px 16px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 16px;
    line-height: 1.6;
    color: #172033;
    background-color: #F4F7FB;
}

/* Outer page wrapper: width, margin, padding, and border */
.page {
    width: 860px;
    max-width: 100%;
    min-height: 700px;
    margin: 0 auto;
    padding: 28px 32px 36px 32px;
    background-color: #FFFFFF;
    border: 3px solid #1557A6;
}

.back-link {
    margin: 0 0 12px 0;
    text-align: left;
}

.masthead {
    margin: 0 0 16px 0;
    padding: 8px 0 14px 0;
    border-bottom: 4px solid #1557A6;
    text-align: center;
}

.paper-name {
    margin: 0;
    font-size: 42px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #1557A6;
}

.edition {
    margin: 6px 0 0 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #172033;
}

/* ========== Menu DIV ========== */
.menu {
    width: 100%;
    margin: 0 0 24px 0;
    padding: 10px 12px 14px 12px;
    border: 2px solid #B91C2B;
    background-color: #1557A6;
    text-align: center;
}

.menu a {
    display: inline-block;
    margin: 0 10px;
    padding: 6px 14px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: bold;
}

/* Four states of the menu anchor tags */
.menu a:link {
    color: #FFFFFF;
    text-decoration: none;
}

.menu a:visited {
    color: #3FA9F5;
    text-decoration: none;
}

.menu a:hover {
    color: #FFFFFF;
    text-decoration: underline;
    background-color: #E63946;
}

.menu a:active {
    color: #FFFFFF;
    text-decoration: underline;
    background-color: #B91C2B;
}

/* Shown on load: News as the active page, Arts as a visited link */
.menu a.visited {
    color: #3FA9F5;
    text-decoration: none;
}

.menu a.active {
    color: #FFFFFF;
    text-decoration: underline;
    background-color: #B91C2B;
}

/* ========== News story DIV ========== */
.story {
    overflow: auto;
    width: 100%;
    min-height: 420px;
    margin: 0 0 20px 0;
    padding: 20px 22px 24px 22px;
    border: 2px solid #E63946;
    background-color: #FFFFFF;
}

.section-label {
    margin: 0 0 6px 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #E63946;
}

.story h1 {
    margin: 0 0 8px 0;
    padding: 0;
    font-size: 30px;
    line-height: 1.25;
    color: #172033;
}

.byline {
    margin: 0 0 16px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #3FA9F5;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #172033;
}

.story p {
    margin: 0 0 14px 0;
}

/* Image floated to the right so story text wraps on the left */
.story-image {
    float: right;
    width: 320px;
    height: 200px;
    margin: 0 0 16px 20px;
    padding: 4px;
    border: 3px solid #1557A6;
    object-fit: cover;
}

/* Continue-reading link: right-aligned at the bottom, different from the menu links */
.read-more-wrap {
    clear: both;
    margin: 24px 0 0 0;
    text-align: right;
}

.read-more {
    color: #1557A6;
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
}

.read-more .arrow {
    display: inline-block;
    margin-left: 6px;
    transition: transform 0.2s ease;
}

.read-more:hover {
    color: #E63946;
    text-decoration: underline;
}

.read-more:hover .arrow {
    transform: translateX(6px);
}

.back-link .arrow {
    margin-left: 0;
    margin-right: 6px;
}

.back-link .read-more:hover .arrow {
    transform: translateX(-6px);
}

.footer {
    margin: 0;
    padding: 12px 0 0 0;
    border-top: 2px solid #1557A6;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    text-align: center;
    color: #172033;
}