/* ---------- GLOBAL ---------- */
body {
background-color: rgb(180, 180, 180);
padding: 0;
margin: auto;
max-width: 100%;
text-align: center;
font-family: 'Times New Roman', Times, serif;
color: #faeee3;
}

/* Paragraphs */
p {
font-size: 21px;
padding: 10px 50px;
text-align: justify;
text-indent: 20px;
line-height: 1.65;
}

p:first-letter {
font-size: 135%;
font-weight: bold;
color: rgb(229, 240, 252);
}

/* ---------------- HEADINGS ---------------- */
h1, h2, h3, h4 {
font-family: inherit;
font-weight: bold;
line-height: 1.2;
margin: 25px 0 15px 0;
letter-spacing: 1px;
}

h1 {
font-size: 42px;
}
h2 {
font-size: 34px;
}
h3 {
font-size: 28px;
}
h4 {
font-size: 24px;
}

h1 span, h2 span, h3 span, h4 span {
color: rgb(238, 143, 0);
font-weight: bold;
}

/* ---------------- MENU BAR ---------------- */
.menu_bar {
background-color: rgb(0, 0, 0);
height: 80px;
width: 100%;
display: flex;
align-items: center;
padding-left: 60px;
}

.logo {
color: rgb(255, 255, 255);
font-size: 32px;
}

.sub_nav {
    width: 100%;
    border-bottom: none;
}

.sub_nav_inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px 20px;
    display: flex;
    justify-content: center;
    gap: 48px;
}

.sub_nav a {
    color: rgb(0, 0, 0);
    text-decoration: none;
    font-size: 22px;          /* bigger, more deliberate */
    font-weight: 600;
    letter-spacing: 1px;
    position: relative;
    padding-bottom: 0px;
    transition: color 0.45s ease;
}

/* subtle underline animation */
.sub_nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: rgb(238, 143, 0);;
    transition: width 0.25s ease;
}

.sub_nav a:hover {
    color: rgb(58, 56, 54);
}

.sub_nav a:hover::after {
    width: 100%;
}

/* ---------------- CONTENT WRAPPER ---------------- */
.content-wrapper {
max-width: 1000px; /* NEW: clean centered width */
margin: 0 auto;
padding: 0 10px;
}

/* ---------------- SECTION ---------------- */
section {
background: rgb(41, 41, 41);
padding: 25px;
margin: 22px auto;
border-radius: 10px;
overflow: hidden;
width: 100%;
}

section img {
border-radius: 20px;
width: 90%;
height: auto;
}

/* Float image right */
.float-right {
float: right;
width: 40%;
max-height: 500px;
object-fit: cover;
margin: 0 0 15px 20px;
}

/* ---------------- AI LIST - NEW BULLET STYLE ---------------- */
ol {
text-align: left;
margin: 25px 50px;
padding-left: 30px;
font-size: 20px;
line-height: 1.7;
}

ol li {
margin-bottom: 18px;
padding-left: 8px;
position: relative;
}

/* Orange custom bullet */
ol li::marker {
color: rgb(238, 143, 0);
font-size: 1.4em;
}

ol li strong {
color: rgb(238, 143, 0);
font-weight: bold;
}

section ul {
    counter-reset: goalcount;
}

section ul li {
    counter-increment: goalcount;
    padding: 12px 18px;
    margin: 10px 40px;
    font-size: 20px;
    list-style: none;
    background: #2d2d2d;
    border-radius: 8px;
    position: relative;
    text-align: left;
}

section ul li::before {
    content: counter(goalcount) ". ";
    color: rgb(238, 143, 0);
    font-weight: bold;
    margin-right: 12px;
}

/* ---------------- WEIGHT TABLE ---------------- */
#weight-charts {
font-family: 'Courier New', Courier, monospace;
border-collapse: collapse;
width: 100%;
margin-top: 30px;
}

#weight-charts td, #weight-charts th {
border: 1px solid #e98707;
padding: 6px;
}

#weight-charts tr:nth-child(even) {
background-color: #383737;
}

#weight-charts tr:hover {
background-color: black;
color: #d6d5d5;
}

#weight-charts th {
padding: 12px 6px;
text-align: left;
background-color: #0f0f0f;
color: white;
}

caption {
padding: 15px 0;
font-size: 1.25rem;
}

/* ---------------- ARROWS ---------------- */
.arrow {
border: solid rgb(9, 255, 0);
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}

.down { transform: rotate(45deg); }
.up { transform: rotate(-135deg); }

/* ---------------- FOOTER ---------------- */
footer {
padding: 12px;
background: black;
color: white;
}

/* ---------------- RESPONSIVE FIXES ---------------- */
@media only screen and (max-width: 960px) {


h1 { font-size: 34px; }
h2 { font-size: 28px; }
h3 { font-size: 24px; }
h4 { font-size: 22px; }

p {
    padding: 10px 25px;
    font-size: 19px;
    line-height: 1.6;
}

.float-right {
    float: none;
    width: 90%;
    max-height: 350px;
    margin: 15px auto;
    display: block;
}

ol {
    margin: 20px 25px;
    font-size: 18px;
}
}

@media only screen and (max-width: 600px) {


h1 { font-size: 30px; }
h2 { font-size: 26px; }
h3 { font-size: 22px; }
h4 { font-size: 20px; }

section {
    width: 100%;
    padding: 15px;
}

p {
    padding: 10px 15px;
    font-size: 18px;
}

ol {
    margin: 15px 15px;
    font-size: 17px;
}


}