/* ============================================================
   BROKEN SYSTEMS - STYLESHEET For laptops and desktops
   Modern responsive design with educational comments
   Author: Mark T Britton
   ============================================================ */

/* ========== RESET & BASE STYLES ========== */
* {
    margin: 0;                           /* Remove default spacing outside elements */
    padding: 0;                          /* Remove default spacing inside elements */
    box-sizing: border-box;              /* Include padding/border in element width calculations */
}

/* ========== CUSTOM FONT ========== */
@font-face {
    font-family: Papyrus;                /* Name you'll use to reference this font */
    src: url("Papyrus%20ICG(1).ttf");    /* Path to font file (%20 = space in filename) */
    font-display: swap;                  /* Show fallback font first, swap when custom loads */
}

/* ========== BODY (Entire Page Background) ========== */
body {
    background-image: url("Images/BackgroundBrt.jpg");  /* Your textured background image */
    background-size: cover;              /* Stretch image to cover entire viewport */
    background-repeat: repeat;           /* Tile the image if needed */
    background-position: center;         /* Center the background image */
    background-attachment: fixed;        /* Keep background fixed when scrolling */
    font-family: 'Georgia', 'Liberation Serif', 'Times New Roman', serif;  /* Font stack (tries first, falls back to next) */
    font-size: 18px;                     /* Base font size for entire site */
    line-height: 1.8;                    /* Space between lines (1.8 = 180% of font size) */
    color: #2c3e50;                      /* Default text color (dark blue-gray) */
    min-height: 100vh;                   /* Minimum height = 100% of viewport height */
    position: relative;                  /* Establishes positioning context for children */
}

/* ========== HEADER (Creek Image with Title) ========== */
.myheader {
    width: 100%;                         /* Full width of parent container */
    height: 20vw;                        /* Height = 20% of viewport width (responsive) */
    min-height: 200px;                   /* Never smaller than 200px */
    max-height: 300px;                   /* Never larger than 300px */
    background-image: url("Images/creekv3.jpg");  /* Your creek header image */
    background-size: cover;              /* Stretch to fill container */
    background-repeat: no-repeat;        /* Don't tile the image */
    background-position: center top;     /* Align to center horizontally, top vertically */
    position: relative;                  /* Allows absolute positioning of children */
    margin-bottom: 30px;                 /* Space below header */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);  /* Shadow: horizontal vertical blur color */
    border-radius: 0 0 12px 12px;        /* Round corners: top-left top-right bottom-right bottom-left */
}

/* ========== HEADER TITLE TEXT ========== */
#headertitle {
    position: absolute;                  /* Position relative to .myheader parent */
    top: 38%;                            /* 38% from top of header */
    left: 5%;                            /* 5% from left edge */
    color: white;                        /* Text color */
    font-weight: bold;                   /* Make text bold */
    font-family: Papyrus, 'Georgia', 'Helvetica', sans-serif;  /* Font preference order */
    font-size: clamp(24px, 3vw, 48px);   /* Responsive: min 24px, prefer 3vw, max 48px */
    text-align: left;                    /* Align text to left */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);  /* Shadow: right down blur color (for readability) */
    line-height: 1.2;                    /* Tight line spacing for title */
}

/* ========== HEADER SUBTITLE TEXT ========== */
#headersubtext {
    position: absolute;                  /* Position relative to parent */
    top: 54%;                            /* 54% from top */
    left: 5%;                            /* 5% from left */
    color: white;                        /* White text */
    font-size: clamp(16px, 2vw, 32px);   /* Responsive sizing */
    text-align: left;                    /* Left-aligned */
    font-weight: bold;                   /* Bold text */
    font-family: Papyrus, 'Georgia', 'Helvetica', sans-serif;  /* Font stack */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);  /* Text shadow for contrast */
    line-height: 1.3;                    /* Slightly more line spacing */
}

/* ========== HEADER AUTHOR TEXT ========== */
#authorsubtext {
    position: absolute;                  /* Absolute positioning */
    top: 72%;                            /* 72% from top */
    left: 5%;                            /* 5% from left */
    color: white;                        /* White text */
    font-size: clamp(12px, 1vw, 18px);   /* Smallest text, responsive */
    text-align: left;                    /* Left-aligned */
    font-weight: bold;                   /* Bold */
    font-family: 'Liberation Serif', 'Georgia', serif;  /* Serif font */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);  /* Subtle shadow */
    line-height: 1.2;                    /* Tight spacing */
}

/* ========== MAIN CONTAINER (Two-Column Layout) ========== */
#main {
    max-width: 1400px;                   /* Maximum width of content area */
    margin: 0 auto;                      /* Center horizontally (0 top/bottom, auto left/right) */
    padding: 0 20px 60px;                /* Padding: top right/left bottom */
    display: grid;                       /* Use CSS Grid for layout */
    grid-template-columns: 1fr 320px;    /* Two columns: flexible main + 320px sidebar */
    gap: 40px;                           /* Space between columns */
    position: relative;                  /* Positioning context */
}

/* ========== MAIN CONTENT COLUMN ========== */
#columnone {
    background: rgba(255, 255, 255, 0.98);  /* White with 98% opacity (semi-transparent) */
    padding: 50px;                       /* Internal spacing on all sides */
    border-radius: 12px;                 /* Rounded corners */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);  /* Drop shadow for depth */
    backdrop-filter: blur(10px);         /* Blur background behind (glass effect) */
}

#embedtext {
    max-width: 900px;                    /* Limit text width for readability */
}

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

/* Main Page Heading */
h1 {
    font-size: 2.5em;                    /* 2.5 times base font size */
    color: #1a365d;                      /* Dark blue color */
    margin-bottom: 30px;                 /* Space below heading */
    line-height: 1.3;                    /* Line height for multi-line headings */
    border-bottom: 4px solid #2c5282;    /* Bottom border for emphasis */
    padding-bottom: 15px;                /* Space between text and border */
    font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;  /* Modern sans-serif */
    font-weight: 700;                    /* Extra bold (100-900 scale) */
    letter-spacing: 0.5px;               /* Slight spacing between letters */
}

/* Section Headings */
.text-T1 {
    font-size: 1.6em;                    /* 1.6x base size */
    font-weight: 700;                    /* Bold */
    color: #2c5282;                      /* Medium blue */
    margin-top: 40px;                    /* Space above */
    margin-bottom: 20px;                 /* Space below */
    font-family: 'Georgia', serif;       /* Serif font for distinction */
}

/* Normal Text */
.text-T2 {
    font-size: 1.1em;                    /* Slightly larger than base */
    color: #2d3748;                      /* Dark gray */
}

/* Link Text */
.text-T4 {
    color: #2b6cb0;                      /* Blue for links */
    text-decoration: none;               /* Remove underline */
    font-weight: 600;                    /* Semi-bold */
}

/* Image Captions */
.text-T6 {
    font-size: 0.9em;                    /* Smaller than base */
    color: #718096;                      /* Gray */
    font-style: italic;                  /* Italic text */
    display: block;                      /* Takes full width */
    margin-top: 8px;                     /* Space above */
}

/* Large Centered Title (e.g., "Researching in the Post-truth Era") */
.paragraph-P1 {
    font-size: 2em;                      /* Large text */
    font-weight: 700;                    /* Bold */
    color: #1a365d;                      /* Dark blue */
    text-align: center;                  /* Center text */
    margin: 35px 0 30px;                 /* Margin: top left/right bottom */
    padding: 25px;                       /* Internal spacing */
    background: linear-gradient(135deg, #ebf8ff 0%, #e6fffa 100%);  /* Diagonal gradient background */
    border-radius: 10px;                 /* Rounded corners */
    border-left: 6px solid #2c5282;      /* Thick left border for accent */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);  /* Subtle shadow */
}

/* Paragraph with Indent */
.paragraph-P2 {
    font-size: 1.1em;                    /* Slightly larger */
    line-height: 1.9;                    /* Generous line spacing */
    margin-bottom: 20px;                 /* Space below paragraph */
    color: #2d3748;                      /* Dark gray */
    text-align: justify;                 /* Justify text (even edges) */
    text-indent: 2em;                    /* First line indented */
}

/* Paragraph without Indent */
.paragraph-P5 {
    font-size: 1.1em;                    /* Slightly larger */
    line-height: 1.9;                    /* Generous line spacing */
    margin-bottom: 20px;                 /* Space below */
    color: #2d3748;                      /* Dark gray */
    text-align: justify;                 /* Justified text */
}

/* Centered Content (like license image) */
.paragraph-P4 {
    text-align: center;                  /* Center everything inside */
    margin: 30px 0;                      /* Top and bottom margin */
}

/* ========== LINKS ========== */

/* Default Link Styling */
a {
    color: #2b6cb0;                      /* Blue links */
    text-decoration: none;               /* No underline by default */
    transition: all 0.3s ease;           /* Smooth transition for hover effects (0.3 seconds) */
    font-weight: 500;                    /* Medium weight */
}

/* Link Hover State */
a:hover {
    color: #1a365d;                      /* Darker blue on hover */
    text-decoration: underline;          /* Underline appears on hover */
}

/* Special Button-Style Links (like fact checker links) */
a.one {
    display: inline-block;               /* Allows padding and margins like a box */
    padding: 3px 20px;                  /* Internal spacing: vertical horizontal */
    background: #ebf8ff;                 /* Light blue background */
    border: 2px solid #2b6cb0;           /* Blue border */
    border-radius: 8px;                  /* Rounded corners */
    margin: 1px 5px;                    /* Space around button */
    transition: all 0.3s ease;           /* Smooth hover transition */
    font-weight: 600;                    /* Semi-bold text */
}

/* Button Link Hover */
a.one:hover {
    background: #2b6cb0;                 /* Background becomes blue */
    color: white;                        /* Text becomes white */
    text-decoration: none;               /* No underline */
    transform: translateY(-2px);         /* Move up 2px (lift effect) */
    box-shadow: 0 4px 12px rgba(43, 108, 176, 0.3);  /* Shadow appears */
}

/* Brackets around button links */
a.one span {
    font-weight: 700;                    /* Bold brackets */
    margin: 0 5px;                       /* Space around brackets */
}

/* ========== IMAGES & DIVIDERS ========== */

/* CSS Gradient Divider (replaces divider.png) */
.highlightDiv {
    display: block;                      /* Takes full width */
    margin: 50px auto;                   /* Center with vertical spacing */
    max-width: 80%;                      /* 80% of container width */
    height: 3px;                         /* 3 pixels tall */
    background: linear-gradient(90deg,   /* Horizontal gradient (90 degrees) */
        transparent 0%,                  /* Invisible at edges */
        #2c5282 10%,                     /* Dark blue */
        #667eea 30%,                     /* Medium blue */
        #764ba2 50%,                     /* Purple in center */
        #667eea 70%,                     /* Medium blue */
        #2c5282 90%,                     /* Dark blue */
        transparent 100%);               /* Invisible at edges */
    border: none;                        /* No border */
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);  /* Purple glow */
    border-radius: 3px;                  /* Slightly rounded */
}

/* Chart Containers */
.chartwtitle_1,
.chartwtitle_3 {
    margin: 40px 0;                      /* Vertical spacing */
    padding: 25px;                       /* Internal spacing */
    background: #f7fafc;                 /* Light gray background */
    border-radius: 10px;                 /* Rounded corners */
    border: 1px solid #e2e8f0;           /* Light border */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);  /* Subtle shadow */
}

/* Images inside chart containers */
.chartwtitle_1 img,
.chartwtitle_3 img {
    max-width: 100%;                     /* Never wider than container */
    height: auto;                        /* Maintain aspect ratio */
    display: block;                      /* Remove inline spacing issues */
    margin: 0 auto 15px;                 /* Center with bottom spacing */
    border-radius: 8px;                  /* Rounded corners */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);  /* Image shadow */
}

/* Creative Commons License Image */
.cc_pic{
  width:15%;
  text-align:center;
  display:block;
  background-color: transparent;
  border: 0vw solid transparent;
  margin-right: 10px;
  margin-bottom: 1px;
  float:left;
  	font-size: 1vw;  					/*	1vw = 1% of viewport width  */
	line-height: 0vw;
} 		

.picwtitle_1{					/*	for full size image at the rant top */
  width:100%;
  text-align:center;
  display:block;
  background-color: transparent;
  border: 0vw solid transparent;
  margin-right: 90%;
  margin-bottom: 20vw;
  float:left;
  font-size: 1vw;  					
  line-height: 0vw;
} 		

.picwtitle_2{					/*	for Partial image width (trump and fake) */
  width:34%;
  text-align:center;
  display:block;
  background-color: transparent;
  border: 0vw solid transparent;
  margin-right: 10px;
  margin-bottom: 1px;
  float:left;
  	font-size: 1vw;  					/*	1vw = 1% of viewport width  */
	line-height: 3vw;

} 		

.picwtitle_3{				/*	for Partial image width (muscles) */
  width:28%;
  text-align:center;
  display:block;
  background-color: transparent;
  border: 0vw solid transparent;
  margin-right: 10px;
  margin-bottom: 1px;
  float:left;
  	font-size: 1vw;  					
	line-height: 0vw;
} 		

.picwtitle_4{			/*	for Partial image width (gil scott) */
  width:30%;
  text-align:center;
  display:block;
  background-color: transparent;
  border: 0vw solid transparent;
  margin-right: 4vw;
  margin-bottom: 0vw;
  float:left;
  	font-size: 1vw;  					/*	1vw = 1% of viewport width  */
	line-height: 0vw;
} 		

/* ========== NAVIGATION ========== */

/* Horizontal Navigation Box (Home, Previous, Next) */
.horzlinks {
    background: linear-gradient(135deg, #ebf8ff 0%, #e6fffa 100%);  /* Gradient background */
    padding: 25px;                       /* Internal spacing */
    border-radius: 10px;                 /* Rounded corners */
    margin: 50px 0 30px;                 /* Spacing: top left/right bottom */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);  /* Subtle shadow */
}

/* Remove default list styling */
.horzlinks ul {
    list-style: none;                    /* No bullets */
    display: flex;                       /* Flexbox layout (horizontal by default) */
    flex-wrap: wrap;                     /* Wrap to multiple lines if needed */
    justify-content: center;             /* Center items horizontally */
    gap: 15px;                           /* Space between items */
}

/* Navigation Button Styling */
.horzlinks li a {
    display: block;                      /* Makes entire area clickable */
    padding: 14px 28px;                  /* Internal spacing: vertical horizontal */
    background: #2b6cb0;                 /* Blue background */
    color: white;                        /* White text */
    border-radius: 8px;                  /* Rounded corners */
    font-weight: 600;                    /* Semi-bold */
    transition: all 0.3s ease;           /* Smooth hover effect */
}

/* Navigation Button Hover */
.horzlinks li a:hover {
    background: #1a365d;                 /* Darker blue */
    transform: translateY(-3px);         /* Lift up 3px */
    box-shadow: 0 6px 16px rgba(26, 54, 93, 0.3);  /* Shadow on hover */
    text-decoration: none;               /* No underline */
}

/* ========== SITE LINKS BOX ========== */

/* Container for site links */
.contentlinks {
    background: #f7fafc;                 /* Light gray background */
    padding: 30px 25px;                  /* Internal spacing */
    border-radius: 10px;                 /* Rounded corners */
    margin: 35px 0;                      /* Vertical spacing */
    border-left: 5px solid #2c5282;      /* Blue accent border on left */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);  /* Subtle shadow */
}

/* "Site Links" Title */
.contentlinks-title {
    font-size: 1.3em;                    /* Larger than body text */
    font-weight: 700;                    /* Bold */
    color: #1a365d;                      /* Dark blue */
    margin-bottom: 18px;                 /* Space below title */
    padding-bottom: 10px;                /* Space before border */
    border-bottom: 2px solid #2c5282;    /* Bottom border separator */
}

/* Remove bullets from list */
.contentlinks ul {
    list-style: none;                    /* No bullets */
}

/* Space between list items */
.contentlinks li {
    margin: 15px 0;                      /* Vertical spacing */
}

/* Link styling in content links */
.contentlinks li a {
    font-size: 1.08em;                   /* Slightly larger */
    padding: 10px 15px;                  /* Internal spacing */
    display: block;                      /* Full width clickable */
    border-radius: 6px;                  /* Rounded corners */
    transition: all 0.3s ease;           /* Smooth transition */
}

/* Link hover effect */
.contentlinks li a:hover {
    background: #ebf8ff;                 /* Light blue background */
    padding-left: 25px;                  /* Indent on hover (slide effect) */
    text-decoration: none;               /* No underline */
}

/* ========== SIDEBAR (Column Two) ========== */

/* Sidebar container */
#columntwo {
    position: sticky;                    /* Stays in place while scrolling */
    top: 20px;                           /* 20px from top when stuck */
    height: fit-content;                 /* Only as tall as content inside */
}

/* "Articles" Title in Sidebar */
.sidebar-title {
    font-size: 1.4em;                    /* Large title */
    font-weight: 700;                    /* Bold */
    color: #1a365d;                      /* Dark blue */
    margin-bottom: 20px;                 /* Space below */
    padding-bottom: 12px;                /* Space before border */
    border-bottom: 3px solid #2c5282;    /* Thick bottom border */
    text-align: center;                  /* Centered text */
}

/* Sidebar articles list container */
.sitelinks {
    background: rgba(255, 255, 255, 0.98);  /* Semi-transparent white */
    padding: 24px 20px;                  /* Internal spacing */
    border-radius: 12px;                 /* Rounded corners */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);  /* Drop shadow */
    backdrop-filter: blur(10px);         /* Blur effect behind */
}

/* Remove bullets */
.sitelinks ul {
    list-style: none;                    /* No bullets */
}

/* Sidebar list items */
.sitelinks li {
    margin: 12px 0;                      /* Vertical spacing */
    border-bottom: 1px solid #e2e8f0;    /* Separator line */
    padding-bottom: 12px;                /* Space before line */
}

/* Remove border from last item */
.sitelinks li:last-child {
    border-bottom: none;                 /* No border on last item */
    padding-bottom: 0;                   /* No padding needed */
}

/* Sidebar links */
.sitelinks li a {
    font-size: 0.95em;                   /* Slightly smaller than body */
    display: block;                      /* Full width clickable */
    padding: 8px 12px;                   /* Internal spacing */
    border-radius: 6px;                  /* Rounded corners */
    transition: all 0.3s ease;           /* Smooth transitions */
    font-weight: 500;                    /* Medium weight */
}

/* Sidebar link hover */
.sitelinks li a:hover {
    background: #ebf8ff;                 /* Light blue background */
    padding-left: 20px;                  /* Indent on hover */
    text-decoration: none;               /* No underline */
}

/* ========== FOOTER ========== */
#footer {
    grid-column: 1 / -1;                 /* Span all columns (1 to last) */
    text-align: center;                  /* Center text */
    padding: 25px;                       /* Internal spacing */
    margin-top: 40px;                    /* Space above */
    background: rgba(45, 55, 72, 0.95);  /* Dark semi-transparent */
    color: white;                        /* White text */
    border-radius: 10px;                 /* Rounded corners */
    font-size: 0.95em;                   /* Slightly smaller */
    backdrop-filter: blur(10px);         /* Blur behind */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);  /* Shadow */
}

/* ========== INFO & HIGHLIGHT BOXES ========== */

/* Blue info box */
.info-box {
    background: #ebf8ff;                 /* Light blue */
    border-left: 5px solid #2b6cb0;      /* Blue accent border */
    padding: 25px;                       /* Internal spacing */
    margin: 30px 0;                      /* Vertical spacing */
    border-radius: 8px;                  /* Rounded corners */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);  /* Subtle shadow */
}

/* Bold text in info boxes */
.info-box strong {
    color: #1a365d;                      /* Dark blue */
    font-size: 1.15em;                   /* Slightly larger */
}

/* Orange highlight box */
.highlight-box {
    background: #fff5e6;                 /* Light orange */
    border-left: 5px solid #ed8936;      /* Orange accent border */
    padding: 25px;                       /* Internal spacing */
    margin: 30px 0;                      /* Vertical spacing */
    border-radius: 8px;                  /* Rounded corners */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);  /* Subtle shadow */
    font-size: 1.5em;                   /* Slightly larger */
}

/* Orange highlight box */
        .highlight-box1 {
            background: #ecf0f1;
            padding: 20px;
            border-radius: 8px;
            margin: 30px 0;
            border-left: 5px solid #e74c3c;
        }
        .highlight-box1 h3 {
            margin-top: 0;
            color: #e74c3c;
        }

/* Orange highlight box for the warning area*/
.highlight-box3 {
    background: #F6BFC2;                 /* Light orange */
    border-left: 5px solid #ff0000;      /* Orange accent border */
    padding: 25px;                       /* Internal spacing */
    margin: 30px 0;                      /* Vertical spacing */
    border-radius: 8px;                  /* Rounded corners */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);  /* Subtle shadow */
}

/* ============================================================
   RESPONSIVE DESIGN - Media Queries
   ============================================================ */

/* ========== TABLETS (769px - 1024px) ========== */
@media (max-width: 1024px) and (min-width: 769px) {
    #main {
        grid-template-columns: 1fr 280px;  /* Narrower sidebar on tablets */
        gap: 25px;                       /* Less space between columns */
    }
}

/* ========== SMARTPHONES LANDSCAPE (481px - 768px) ========== */
@media (max-width: 768px) and (orientation: landscape) {
    #main {
        grid-template-columns: 1fr 240px;  /* Even narrower sidebar */
        gap: 20px;                       /* Less gap */
    }

    #columntwo {
        position: sticky;                /* Keep sticky behavior */
        top: 10px;                       /* Closer to top */
    }

    .sitelinks {
        padding: 18px 15px;              /* Less padding */
    }

    .sitelinks li {
        margin: 10px 0;                  /* Tighter spacing */
        padding-bottom: 10px;            /* Less padding */
    }

    .sitelinks li a {
        font-size: 0.85em;               /* Smaller text */
        padding: 6px 10px;               /* Less padding */
    }

    .sidebar-title {
        font-size: 1.1em;                /* Smaller title */
        margin-bottom: 15px;             /* Less space */
    }
}

/* ========== SMARTPHONES PORTRAIT (up to 768px) ========== */
@media (max-width: 768px) and (orientation: portrait) {
    body {
        font-size: 16px;                 /* Smaller base font */
    }

    .myheader {
        height: 24vw;                    /* Taller header (more vertical) */
        min-height: 160px;               /* Smaller minimum */
    }

    h1 {
        font-size: 2em;                  /* Smaller heading */
    }

    #main {
        grid-template-columns: 1fr;      /* Single column layout */
        gap: 25px;                       /* Space between sections */
    }

    #columnone {
        padding: 30px 25px;              /* Less padding */
    }

    .paragraph-P1 {
        font-size: 1.6em;                /* Smaller title */
    }

    .text-T1 {
        font-size: 1.4em;                /* Smaller section headings */
    }

    #columntwo {
        position: static;                /* Not sticky on portrait phones */
    }

    .sitelinks ul {
        display: grid;                   /* Grid layout */
        grid-template-columns: repeat(2, 1fr);  /* Two columns */
        gap: 12px;                       /* Space between items */
    }

    .sitelinks li {
        border-bottom: none;             /* No separator lines in grid */
        padding-bottom: 0;               /* No padding needed */
    }

 
 /* Horizontal site links */
.horzlinks {
    background: black;  /* Gradient background */
    padding: 20px;                       /* Internal spacing */
    border-radius: 10px;                 /* Rounded corners */
    margin: 50px 0 30px;                 /* Spacing: top left/right bottom */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);  /* Subtle shadow */
}

/* Remove default list styling */
.horzlinks ul {
    list-style: none;                    /* No bullets */
    display: flex;                       /* Flexbox layout (horizontal by default) */
    flex-wrap: wrap;                     /* Wrap to multiple lines if needed */
    justify-content: center;             /* Center items horizontally */
    gap: 15px;                           /* Space between items */
}

/* link area styling */
.horzlinks li a {
    display: block;                      /* Makes entire area clickable */
    padding: 5px 20px;                  /* Internal spacing: vertical horizontal */
    background: black;                 /* Blue background */
    color: white;                        /* White text */
    border-radius: 8px;                  /* Rounded corners */
    font-weight: 600;                    /* Semi-bold */
    transition: all 0.3s ease;           /* Smooth hover effect */
	 font-size: 20px;

}

/* link area hover */
.horzlinks li a:hover {
    background: #1a365d;                 /* Darker blue */
    transform: translateY(-3px);         /* Lift up 3px */
    box-shadow: 0 6px 16px rgba(26, 54, 93, 0.3);  /* Shadow on hover */
    text-decoration: none;               /* No underline */
}

/* "Articles" Title in Sidebar */
.sidebar-title {
    font-size: 1.4em;                    /* Large title */
    font-weight: 700;                    /* Bold */
    color: white;                      /* white */
    margin-bottom: 20px;                 /* Space below */
    padding-bottom: 12px;                /* Space before border */
    border-bottom: 3px solid #2c5282;    /* Thick bottom border */
    text-align: center;                  /* Centered text */
}

    .paragraph-P2,
    .paragraph-P5 {
        text-align: left;                /* Left-align (not justified) on small screens */
    }
}

/* ========== SMALL PHONES (up to 480px) ========== */
@media (max-width: 480px) {
    body {
        font-size: 15px;                 /* Even smaller base font */
    }

    .myheader {
        height: 30vw;                    /* Taller header for small screens */
        min-height: 140px;               /* Smaller minimum */
    }

    #columnone {
        padding: 20px 18px;              /* Minimal padding */
    }

    h1 {
        font-size: 1.6em;                /* Smaller main heading */
    }

    .paragraph-P1 {
        font-size: 1.3em;                /* Smaller featured title */
        padding: 18px;                   /* Less padding */
    }

    .sitelinks ul {
        grid-template-columns: 1fr;      /* Single column on very small screens */
    }
}

/* ========== PRINT STYLES ========== */
@media print {
    body {
        background: white;               /* White background for printing */
    }

    .myheader {
        background: white;               /* Remove background image */
        color: black;                    /* Black text */
        box-shadow: none;                /* No shadow */
    }

    #columntwo,                          /* Hide sidebar when printing */
    .horzlinks,                          /* Hide navigation */
    #footer {                            /* Hide footer */
        display: none;                   /* Don't print these elements */
    }

    #columnone {
        box-shadow: none;                /* No shadow for print */
        padding: 0;                      /* No padding for print */
    }
}

      .email-button {
            display: inline-block;
            background-color: #0066cc;
            color: white;
            padding: 15px 30px;
            text-decoration: none;
            border-radius: 5px;
            font-size: 16px;
            font-weight: bold;
            transition: background-color 0.3s;
        }
        .email-button:hover {
            background-color: #0052a3;
        }

/* ============================================================
   END OF STYLESHEET
   ============================================================ */