/* ========================================
   FONTS
   ======================================== */

@import url("https://use.typekit.net/uhp6rud.css");
@import url("https://use.typekit.net/uhp6rud.css");


@font-face {
    font-family: 'SinCity';
    src: url('font/SinCity.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* CC Meanwhile font loaded from Adobe Fonts */

/* ========================================
   BODY & PAGE CONTAINER
   ======================================== */

body {
    font-family: "ccmeanwhile", sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #FFFFFF;
    border: 45px solid transparent;
    border-image: url('images/yellowsplatter.jpg') 85 repeat; 
    margin: 30px;
    padding: 70px; 
    background-attachment: fixed;
    text-align: center; 
}

body::before {
   content: "";
   position: fixed;
   inset: 0;
   background: url('images/alley.jpg') center/cover no-repeat ;
   opacity: 1;
   z-index: -1;
}

/* ========================================
   TYPOGRAPHY
   ======================================== */

/* Headings use SinCity — no red borders */
h1, h2, h3, h4, h5, h6 {
    font-family: 'SinCity', sans-serif;
    font-style: normal;
    font-weight: 400;
    color: #FFD414;
    margin: 20px 20;
    padding: 10px 15px;
    /* background-color: rgba(0, 0, 0, 0.4); */
}

/* Make the main title much larger */
h1 {
    font-size: 4em;
    line-height: 1.2;
}

/* Make h2 headings (Article headings) larger */
h2 {
    font-size: 2.5em;
    line-height: 1.3;
}

/* Make h3 headings (Section headings) larger, but exclude table headings */
h3:not(td h3) {
    font-family: 'SinCity', sans-serif !important;
    font-style: normal;
    font-weight: 400;
    color: #FFD414;
    margin: 20px 0;
    padding: 10px 15px;
    font-size: 2em;
    line-height: 1.3;
}

/* Ensure all text in h3 headings uses SinCity font - more specific approach */
.section h3:not(td h3) {
    font-family: 'SinCity', sans-serif !important;
}

/* Target section headings specifically - comprehensive font application */
h3:not(td h3) {
    font-family: 'SinCity', 'Arial Black', 'Helvetica', sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
}

h3::after {
    content: "";
    font-family: 'SinCity', sans-serif;
    color: #FFD414;
}

p {
    font-family: "ccmeanwhile", sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #060606;
    border: 4px solid #FFD414;
    padding: 10px 15px;
    margin: 20px 0;
    background-image: url('images/paper.jpg');
    background-size: cover;
    background-position: center;
}

p.italic {
    font-style: italic;
}

/*LINKS */

a:link,
a:visited,
a:hover,
a:active {
    color: #FFFFFF; /* white color for body text links */
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    text-decoration: underline;
}

/* ========================================
   TOP BLOCK AREA
   ======================================== */

.topblock {

}

.intro {
    color: #FFD414;
}

.caption {
    color: #FFD414;
}

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

.section {
    /* removed counters to prevent floating numbers */
}

.section h3:contains("Section. 8.") {
}

.section:nth-of-type(7) {
    margin: 20px 0;
}

/* Style the h3 heading to appear outside the box */
.section:nth-of-type(7) h3 {
    margin-bottom: 20px;
    padding-bottom: 10px;
}

/* Create a wrapper for the content with the box styling */
.section:nth-of-type(7) .content-wrapper {
    border: 3px solid #BD0000;
    background-image: url('images/paper.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 15px;
}

.section:nth-of-type(7) p {
    border: none;
    background: none;
    margin: 10px 0;
    padding: 0;
}

/* Section 8 styling */
.section:nth-of-type(8) {
    margin: 20px 0;
}

/* Style the h3 heading to appear outside the box */
.section:nth-of-type(8) h3 {
    margin-bottom: 20px;
    padding-bottom: 10px;
}

/* Create a wrapper for the content with the box styling */
.section:nth-of-type(8) .content-wrapper {
    border: 3px solid #BD0000;
    background-image: url('images/paper.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 15px;
}

.section:nth-of-type(8) p {
    border: none;
    background: none;
    margin: 10px 0;
    padding: 0;
}

/* ========================================
   HEADER & NAVIGATION
   ======================================== */

header {
    text-align: left;
}

nav {
    text-align: left;
}

nav a {
    text-align: left;
}

/* ========================================
   PAGE LAYOUT STRUCTURE
   ======================================== */

header,
nav,
main,
footer {

}

main {
    max-width: 1200px;
    margin: 0 auto; 
    text-align: center; 
}

footer {
    text-align: center;
}

/* ========================================
   TABLE STYLES
   ======================================== */

table { 
    width: 100%;
    border-collapse: separate;
    border-spacing: 20px;
    margin: 0 auto; /* Center the table */
}

caption {

}

th {

}

tr {

}

td {
    vertical-align: top;
    padding: 15px;
    border: 3px solid #BD0000;
    background-color: #000000;
    background-image: url('images/paper.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    opacity: 1;
    width: 300px;
    text-align: center;
}

/* Style state headings in table */
td h3 {
    font-family: 'SinCity', sans-serif;
    font-style: normal;
    font-weight: 400;
    color: #BD0000;
    margin: 0 0 15px 0;
    padding: 0;
    font-size: 1.2em;
}

td h3 strong {
    font-family: 'SinCity', sans-serif;
    color: #BD0000;
    font-weight: 400;
}

/* Style state links in table */
td a:link,
td a:visited,
td a:hover,
td a:active {
    font-family: "ccmeanwhile", sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #FFD414 !important;
    text-decoration: none;
    display: block;
    margin: 8px 0;
    padding: 5px;
    transition: color 0.2s ease;
}

td a:hover {
    color: #BD0000 !important;
    text-decoration: underline;
}

/* STATES & LINKS SECTION */

.states {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 25px;
    margin-top: 40px;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.4);
    border: 3px solid #BD0000;
    border-radius: 8px;
}

.states h2 {
    font-family: 'SinCity', sans-serif;
    color: #FFD414;
    margin-bottom: 10px;
    text-align: center;
}

.states a {
    display: block;
    color: #FFD414;
    text-decoration: none;
    font-family: "ccmeanwhile", sans-serif;
    font-weight: 700;
    margin: 4px 0;
    text-align: center;
    transition: all 0.2s ease;
}

.states a:hover {
    text-decoration: underline;
    color: #FFFFFF;
}

.states ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.states > div {
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 6px;
}