/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /*background-color: rgb(255, 255, 204); */ /* Sets the entire page background */
}


.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

/* Header & Footer */
.site-header {
    background-color: rgba(255, 255, 204, 0.999);
    color: red;
    padding: 20px 0;
    text-align: center;
}


.site-header .container {
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
}


.site-header nav a {
    color: blue;
    text-decoration: none;
    margin-left: 20px;
}

.site-footer {
    background-color: rgb(255, 255, 204);
    color: blue;
    text-align: center;
    padding: 20px 0;
    margin-top: auto;
}

/* Container adjustment for 3-column layout */
.container {
    max-width: 1400px; /* Widened slightly to fit center content + 600px of ads */
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

/* Main Layout (Responsive Mobile-First) */
.main-layout {
    display: grid;
    grid-template-columns: 1fr; /* Stacks everything into 1 full-width column on mobile */
    gap: 40px;
    padding: 20px 20px;
    flex: 1;
}

/* Main body content styling */
.main-content {
    background-color: rgb(255, 255, 204);
    padding: 20px;
    border: 1px solid #eee;
    text-align: center;
}

/* Desktop Styles (Screens wider than 1024px) */
@media (min-width: 1024px) {
    .main-layout {
        /* Left: 300px | Center: Flexibly fills space | Right: 300px */
        grid-template-columns: 300px 1fr 300px; 
    }
}

/* Ad Columns Settings */
.ad-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%; /* Spans full width on mobile */
}

@media (min-width: 1024px) {
    .ad-column {
        width: 300px; /* Explicitly locks sidebar width on desktop */
    }
}

/* Update individual ad slots to neatly contain images or scripts */
.ad-slot {
    background-color: transparent; /* Removed gray color since ads fill this space */
    border: none;                 /* Removed dashed border for production */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 250px;
    overflow: hidden;             /* Prevents breaking layout if an ad is too large */
}

/* Ensure images inside ads fill the 300x250 box perfectly */
.ad-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;            /* Scales image smoothly without stretching */
    display: block;
}
/* Additional CSS Below */

/* Station headline text */
.station-title-line {
	font-size: large;
	color: red;
	font-weight: bold;
}

.station-subtitle {
	font-size: medium;
	color: blue;
	font-weight: normal;
}

/* Red section heading text */
.section-heading {
	color: red;
	font-weight: bold;
}

/* Large body text used in the main content area */
.large-text {
	font-size: large;
}
/* Large body text used in the main content area */
.large-text {
	font-size: large;
}
/* Horizontal divider styling */
.divider {
	width: 100%;
	height: 2px;
}
/* Bold Red heading text */
.bold-red {
	color: red;
	font-weight: bold;
}
#pgheader {
    font-family: Arial;
    font-size: 25px;
    line-height: 30px;
    font-weight: bold;
    color: red;
    text-align: center;
}

a:link {
  color: blue;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: blue;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: gray;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: black;
  background-color: transparent;
  text-decoration: underline;
}

.small-space {
  margin-top: 5px; /* Adjust this value to get the exact pixel spacing you want */
}
.small-space-20px {
  margin-top: 20px; /* Adjust this value to get the exact pixel spacing you want */
}

/* my css */

.custom-text {
    font-size: 1rem;
  color: #ff0000;        /* Changes the text color (Hex, RGB, or name) */
  text-align: center;    /* Positions text horizontally (left, center, right) */
}

.my-box {
    align-items: center;
    justify-content: center;
    background-color: rgb(254, 255, 176);
    border: 2px solid #1d99ff; 
}

.flex-area {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%; /* or a minimum height */
}