/*==================================================
 Ride-OK Magazine
 newsletter.css
==================================================*/


/*==================================================
 COLORS
==================================================*/

:root{

    --bronze:#9d6a2c;
    --bronze-light:#c68b3c;
    --cream:#faf8f4;
    --border:#d8c7a3;
    --text:#333;
    --gray:#777;
    --background:#444;

}


.home-button {
    position: fixed;
    top: 15px;
    left: 15px;

    padding: 8px 16px;

    background: #B08D57;
    color: white;

    text-decoration: none;
    font-weight: bold;

    border-radius: 6px;

    box-shadow: 0 2px 6px rgba(0,0,0,.3);

    z-index: 1000;
}

.home-button:hover {
    background: #8d0000;
}
/*==================================================
 RESET
==================================================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

body{

    background:var(--background);
    font-family:Arial, Helvetica, sans-serif;

}
/*==================================================
 COVER
==================================================*/
/*==================================================
 COVER CONTENT
==================================================*/

.masthead{

    position:absolute;

    top:70px;

    left:60px;

    color:white;

    text-shadow:3px 3px 10px black;



}

.masthead h1{

    font-size:82px;

    letter-spacing:3px;

    color:white;

    font-weight:900;

    text-shadow:
        0 3px 6px black,
        0 0 25px rgba(0,0,0,.75);

}

.masthead h2{

    color:var(--bronze-light);

}

.edition{

    position:absolute;

    top:225px;

    left:65px;

    color:white;

    font-size:24px;

    letter-spacing:2px;

    text-shadow:
        0 2px 8px rgba(0,0,0,.9);

}

/*==================================================
 COVER STORY
==================================================*/

.cover-story{

    position:absolute;

    left:60px;

    bottom:105px;

    width:390px;

    color:white;

}

.cover-story h3{

    color:var(--bronze-light);

    font-size:36px;

    font-weight:700;

    margin-bottom:20px;

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

}

.cover-story ul{
    list-style:none;
    padding-left:0;
    margin:0;
}

.cover-story li{
    position:relative;
    padding-left:22px;

    font-size:24px;
    font-weight:600;
    margin-bottom:30px;

    text-shadow:
        0 3px 8px rgba(0,0,0,.95);
}

.cover-story li::before{
    content:"•";
    position:absolute;
    left:0;
    color:var(--bronze-light);
    font-size:24px;
    line-height:1;
}

.feature-icon{

    color:var(--bronze-light);

    font-size:28px;

    width:34px;

    text-align:center;

}

.footer{

    position:absolute;

    bottom:20px;

    width:100%;

    text-align:center;

    color:white;

    font-size:13px;

    letter-spacing:2px;

    line-height:1.4;

    text-shadow:
        0 2px 6px rgba(0,0,0,.85);

    opacity:.90;



}
.cover{

    position:relative;

    width:8.5in;

    height:11in;

    margin:25px auto;

    overflow:hidden;

    background:black;

    box-shadow:0 0 30px rgba(0,0,0,.6);

}

.cover-photo{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

}

.cover-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        rgba(0,0,0,.10),

        rgba(0,0,0,.30),

        rgba(0,0,0,.60)

    );

}

.cover-story{

    position:absolute;

    left:60px;

    bottom:105px;

    width:390px;

    color:white;

    text-shadow:2px 2px 6px black;

}
/*==================================================
 PAGE LAYOUT
==================================================*/

.page{

    width:8.5in;

    height:11in;

    margin:25px auto;

    background:white;

    color:var(--text);

    overflow:hidden;

    page-break-after:always;

}


#directorPage,
#featurePage,
#eventsPage{

    padding:35px 60px;

}

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

.feature-header{

    margin-bottom:15px;
    padding-bottom:0px;

}

.feature-header h1{

    margin-bottom:4px;

}

.subtitle{

    margin-bottom:4px;

}

.byline{

    margin-bottom:0;

}

/*==================================================
 PAGE 2 LAYOUT
==================================================*/

.page2-top{

    display:grid;

    grid-template-columns:2.2fr 1.5fr;

    gap:40px;

    align-items:start;

    margin:30px 0 40px;

}


/*==================================================
 Monthly Ride to Eat
==================================================*/
.ride-details-button{
    display:block;
    margin:5px auto 0;
    padding:12px 18px;
    background:#8a6a2f;
    color:#ffffff !important;
    text-decoration:none;
    text-align:center;
    font-weight:bold;
    border-radius:8px;
}

.ride-details-button:visited{
    color:#ffffff;
}

.ride-details-button:hover{
    color:#ffffff;
    background:#6f5526;
}
.next-rte-section{

    background:var(--cream);

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

    border-radius:12px;

    padding:18px;

    box-shadow:0 6px 18px rgba(0,0,0,.08);

}

.featured-badge{
    display:flex;
    flex-direction:column;

    background:var(--bronze);
    color:white;

    padding:12px 16px;
    border-radius:6px;
    margin-bottom:18px;

    text-align:center;
    line-height:1.35;
}

.featured-badge div:first-child{
    font-size:15px;
    font-weight:bold;
    letter-spacing:3px;
    margin-bottom:6px;
}

.featured-badge div{
    font-size:13px;
    letter-spacing:0;
}

.newsletter-rte{

    text-align:center;

}

.newsletter-rte img{

    width:100%;

    border-radius:10px;

    display:block;

    margin-bottom:15px;
	
	object-fit:cover;

}



.newsletter-rte-info h3{

    font-size:20px;

    color:var(--bronze);

    text-align:center;

    margin-bottom:14px;

    text-transform:uppercase;

}

.newsletter-rte-info p{

    margin-bottom:8px;

    line-height:1.5;

}

.newsletter-rte-info a{

    color:var(--bronze);

    text-decoration:none;

    font-weight:bold;

}


/*==================================================
 SHOOT'N THE BREEZE
==================================================*/

.director-message{

    font-family:Georgia, serif;

    font-size:16px;

    line-height:1.50
;

    text-align:justify;

    color:#333;

}

.director-message p{

    margin-bottom:0px;

}

.director-message p:first-child:first-letter{

    float:left;

    font-size:58px;

    line-height:.80;

    padding-right:8px;

    color:var(--bronze);

    font-weight:bold;

}
/*==================================================
 PHOTO OF THE MONTH
==================================================*/

.photo-of-month{

    margin-top:10px;

}

.photo-of-month img{

    width:100%;

    height:300px;

    object-fit:cover;

    display:block;

    border-radius:10px;

}

.photo-caption{

    margin-top:8px;

    text-align:center;

    font-size:13px;

    color:#666;

    font-style:italic;

}

.photo-caption span{

    font-size:12px;

    font-style:normal;

    color:#999;

}


/*==================================================
 PAGE 3 - FEATURE STORY
==================================================*/

.feature-hero{

    width:100%;
    height:210px;
    object-fit:cover;
    border-radius:10px;
    margin:0px 0 18px;
	

}

.feature-layout{

    display:grid;
    grid-template-columns:2.2fr .95fr;
    gap:30px;
    align-items:start;

}

.feature-article{

    font-family:Georgia, serif;
    font-size:16px;
    line-height:1.50;
    text-align:justify;

}

.feature-article p{

    margin-bottom:12px;

}



.feature-article p:first-child:first-letter{

    float:left;

    font-size:58px;

    line-height:.8;

    margin-right:8px;

    color:var(--bronze);

    font-weight:bold;

}

.ride-info{

    background:var(--cream);
    border:1px solid var(--border);
    border-radius:10px;
    padding:18px;

}

.ride-info h3{

    color:var(--bronze);

    text-align:center;

    border-bottom:2px solid var(--bronze);

    padding-bottom:8px;

    margin-bottom:18px;

}

.ride-info p{

    margin-bottom:16px;

    line-height:1.5;

}

/*==================================================
 SECOND RIDE REPORT PAGE
==================================================*/


.feature-page-2 {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.feature-page-2 .feature-content {
    flex: 1;
}

.feature-page-2 .feature-image-block {
    width: 92%;
    margin: 0 auto 18px;
    text-align: center;
}

.feature-page-2 .feature-hero {
    width: 100%;
    margin: 0 0 6px;
}

.feature-page-2 .feature-caption {
    margin: 0;
    font-family: Georgia, serif;
    font-size: 12px;
    font-style: italic;
    color: var(--bronze);
    text-align: center;
}

.feature-page-2 .feature-article {
    padding-left: 18px;
    padding-right: 18px;
}

/*==================================================
 PAGE 2 - RIDE REPORT HEADER
==================================================*/

.feature-page-2-header {
    text-align: center;
    margin-top: 18px;
    margin-bottom: 18px;
}

.feature-page-2-header .continued-label {
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--bronze);
    margin-bottom: 6px;
}

.feature-page-2-header h2 {
    margin: 0;
    font-size: 28px;
}

.feature-page-2-header h3 {
    margin: 5px 0 0;
    font-size: 17px;
    font-style: italic;
    color: var(--bronze);
}
/*==================================================
 PAGE 4 - ON THE HORIZON
==================================================*/

.horizon-event{

    display:grid;

    grid-template-columns:160px 1fr;

    gap:25px;

    padding:18px 0;

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

}

.event-date{

    color:var(--bronze);

    font-size:14px;

    font-weight:bold;

    text-transform:uppercase;

    letter-spacing:2px;

}

.horizon-event h2{

    color:var(--bronze);

    font-size:24px;

    margin-bottom:8px;

}

.event-location{

    font-weight:bold;

    margin-bottom:6px;

}

}

.event-description{
	font-family:Georgia, serif;
    line-height:1.5;

    font-size:15px;

    color:#444;

}
${event.link ? `

<p class="event-link">

    <strong>More Information</strong><br>

    <a href="${event.link}"

       target="_blank">

        ${event.linkText || event.link}

    </a>

</p>

` : ""}

/*==================================================
 EVENT LAYOUT
==================================================*/

.horizon-event{

    display:grid;

    grid-template-columns:130px 1fr;

    gap:18px;

    align-items:start;

    padding:16px 0;

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

}
.event-photo{

    width:130px;

    height:95px;

    object-fit:cover;

    display:block;

    border-radius:8px;

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

}
.event-content h2{

    margin:4px 0 6px;

}

.event-date{

    font-size:14px;

    color:var(--bronze);

    font-weight:bold;

}

.event-location{

    margin-bottom:8px;

}

.event-description{

    margin-bottom:10px;

    line-height:1.5;

}

/*==================================================
 UPCOMING RIDES IMAGES
==================================================*/

.event-image{

    width:110px;

    height:80px;

    object-fit:cover;

    border-radius:8px;

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

    display:block;

    flex-shrink:0;

}

/*==================================================
 PAGE 5 - RESOURCES
==================================================*/
.resources-images{

    display:flex;

    justify-content:space-evenly;

    align-items:center;

    margin:18px 0 32px;

}

.resource-image{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-decoration:none;

    color:var(--text);

}

.resource-image img{

    max-width:120px;
    max-height:120px;
    object-fit:contain;

}

.resource-image:nth-child(2) img{

    max-width:170px;

}

.resource-image:hover img{

    transform:scale(1.05);

}

.resource-image span{

    margin-top:8px;

    font-size:14px;

    font-weight:600;

}
.resources-content{
    padding: 0 40px 30px;
}

#resourcesPage .feature-header{
    margin: 35px 40px 30px;
}

.resource-section{

    margin-bottom:30px;

}

.resource-section h2{

    color:var(--text);    /* or #222 */;

    font-size:22px;

    margin-bottom:10px;

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

    padding-bottom:6px;

}

.resource-section ul{

    list-style:none;

    padding:0;

    margin:0;

}

.resource-section li{

    margin-bottom:8px;

    font-size:16px;

}

.resource-section a{

    color:var(--bronze);
    font-weight:600;
    text-decoration:underline;
    text-decoration-color:var(--bronze);
    text-underline-offset:3px;
    transition:color .2s ease;

}

.resource-section a:hover{

    color:#8a5a24;
    text-decoration-thickness:2px;

}

/*==================================================
 PRINT
==================================================*/

@media print {

    @page {
        size: Letter;
        margin: 0;
    }

    body{

        background:white;

        margin:0;

        padding:0;

    }

    .page{

        width:8.5in;

        height:11in;

        margin:0;

        box-shadow:none;

        page-break-after:always;

        break-after:page;

    }

    .cover{

        margin:0;

        box-shadow:none;

        page-break-after:always;

        break-after:page;

    }

}
/*==================================================
 MAGAZINE FOOTER
==================================================*/

#resourcesPage{

    display:flex;
    flex-direction:column;
    min-height:100%;

}

.resources-content{

    flex:1;

}



.magazine-footer{

    margin-top:auto;
    padding:22px 0 24px;

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

    text-align:center;

}

.magazine-footer .closing{

    color:var(--bronze);

    font-size:18px;

    font-weight:600;

    letter-spacing:.5px;

    margin-bottom:10px;

}

.magazine-footer .copyright{

    color:#777;

    font-size:12px;

    line-height:1.5;

}
@media print {
    .home-button {
        display: none;
    }
}