/*
 * Workshop Stylesheet (style.css)
 *
 * This file contains all the styling for the Florida Flash Writing Workshop form page.
 * It is linked in the HTML head section.
 */

/* -------------------- Custom Styles for Time-Release -------------------- */
.hidden {
    display: none; /* KEY: Hides elements until JavaScript removes this class */
}

#countdown-timer {
    font-size: 1.8em;
    color: rgb(255, 200, 50); /* Bright gold color for visibility */
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4);
    margin: 30px 0;
    text-align: center;
    padding: 15px;
    background-color: rgb(30, 80, 150); /* Darker blue background */
    border-radius: 8px;
    border: 2px solid rgb(255, 200, 50);
}

.prompt {
    color: rgb(255, 255, 255);
    background-color: rgb(10,50,120);
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    font-size: 1.2em;
    text-align: center;
}

/* -------------------- Original Styles -------------------- */
body {
    font-family: "Century Gothic", Verdana, sans-serif;
    background-color: rgb(20,90,190);
    background-image: radial-gradient(circle, rgb(0,25,130), rgb(20,90,190), rgb(30,120,240));
    background-color: rgb(20,90,190);
    padding-top: 110px;
}

.error-message {
    color: rgb(180,40,40);
    border-style: outset;
    border-color: rgb(30,50,170);
    background-color: rgb(235,235,150);
    font-size: 1.2em;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin-top: 4px;
    transition: opacity 0.3s ease, max-height 0.3s ease;
}

.error-message.visible {
    opacity: 1;
    max-height: 50px;
}

.invalid {
    border-color: red;
    outline: none;
}

#f2w2submission {
    font-size: 1.0em;
    color: rgb(10,50,200);
    text-shadow: 2px 2px 3px #ababab;
}

input {
    border-color: rgb(10,30,140);
    border-style: outset;
    box-sizing: border-box; 
    margin-bottom: 5px;
    margin-top: 10px;
    border-radius: 5px;
    padding: 5px;
}

textarea {
    min-width: 45%;
    height: 125px;
    margin-bottom: 10px;
    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
}

button[type=submit] {
    width: 25%;
    background-color: rgb(60,110,220);
    color: white;
    padding: 14px;
    margin: 8px 0;
    border: outset;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    box-shadow:0 8px 16px 0 rgba(0,0,0,0.6);
    background-color: rgb(60,190,230);
}

button:active {
    box-shadow: 0 5px #666;
    transform: translateY(4px);
}

.explanation {
    color: rgb(10,50,120);
    text-shadow: 2px 2px 3px #ababab;
    font-size: 1.0em;
    background-color: rgb(220,240,255);
    padding: 10px;	
    line-height: 1.5;
    margin-bottom: 20px;
}

.f2w2logo {
    max-width: 25%;
    height: auto;
    display: block;
    margin: auto;
    filter: drop-shadow(8px 8px 10px rgb(100,200,255));
    position: relative;
    animation-name: myAnimation;
    animation-duration: 2s;
}

@keyframes myAnimation {
    0%   {filter:drop-shadow(8px 8px 10px rgb(100,200,255)); left:0px; top:0px;}
    25%  {filter:drop-shadow(8px 8px 10px rgb(220,240,255)); left:200px; top:0px;}
    50%  {filter:drop-shadow(8px 8px 10px rgb(220,250,200)); left:200px; top:200px;}
    75%  {filter:drop-shadow(8px 8px 10px rgb(250,220,100)); left:0px; top:200px;}
    100% {filter:drop-shadow(8px 8px 10px rgb(100,200,255)); left:0px; top:0px;}
}

#what, #how, #summary, #explain {
    font-size: 1.3em;
    color: rgb(10,50,200);
    text-shadow: 2px 2px 3px #ababab;
}

.form {
    border-style: outset;
    padding: 10px;
    border-radius: 5px;
    background-color: rgb(220,240,255);
}

h1.formtitle {
    font-size: 1.5em;
    color: rgb(10,50,200);
    text-shadow: 2px 2px 3px #ababab;
    text-align: center;
    text-transform: uppercase;
}

.infobox{
border-left: 5px solid rgb(150,200,255);
padding-left: 10px;
}

ul{
list-style-type: circle;
list-style-position: inside;
}

.promptcontent{
	text-align: left;
   	border-style: inset;
   	padding: 10px;
    	border-radius: 5px;
    	background-color: rgb(30,90,200);
}
.promptphoto {
    max-width: 25%;
    height: auto;
    display: block;
    margin: auto;
    filter: drop-shadow(5px 5px 10px rgb(10,100,200));
    position: relative;
}

header {
width: 99%;
height: 100px;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
background-color: black;
color: white;
font-family: "Century Gothic", Verdana, sans-serif;
font-size: 0.9em;
text-shadow: 2px 2px 5px rgb(200,195,195);
padding: 10px;
border-left: 3px solid rgb(60,60,65);
border-bottom: 3px solid rgb(40,40,45);  
}

.ciwrlogoheader{
  position: absolute;
  top: 10%;
  left: 3%;
  font-weight: 700;
}

.ciwrlogo{
  border-radius: 50%;
}

.contact {
  position: absolute;
  top: 1%;
  left: 45%;
  font-weight: 700;
font-size: 1.1em;
}
.contactaddress {
  position: absolute;
  top: 50%;
  left: 40%;
  border-bottom: 3px solid white;  
}

.blurbtitle {
  position: absolute;
  top: 1%;
  left: 74%;
  font-weight: 700;
font-size: 1.1em;
}
.blurb {
  position: absolute;
  top: 44%;
  left: 72%;
 padding: 10px;
  border-top: 3px solid gray;
  border-bottom: 3px solid white;
 border-left: 3px solid gray;
border-right: 3px solid white;
background-color: rgb(40,30,40);
font-weight: 500;
font-size:1.1em;
  }
a.emailheader:link{
  color: white;
}
a.emailheader:visited{
  color: rgb(80,80,80);
}
a.emailheader:hover{
  color: rgb(185,210,255);
font-size: 1.1em;
font-weight: 700;
}
a.emailheader:active{
color: rgb(80,130,200);
font-size: 1.1em;
font-weight: 700;
background-color: rgb(230,225,150);
}
a.email:link{
    font-size: 1.1em;
    color: rgb(100,170,230);
    text-shadow: 1px 1px 4px rgb(110,180,235);
}
a.email:visited{
    font-size: 1.1em;
    color: rgb(90,220,160);
    text-shadow: 1px 1px 4px rgb(110,235,180);
}
a.email:hover{
  color: rgb(40,140,255);
font-size: 1.2em;
font-weight: 700;
}
a.email:active{
  color: rgb(40,140,255);
font-size: 1.2em;
font-weight: 700;
background-color: rgb(230,225,150);
}
.money{
color: rgb(30,190,50);
}

footer {
width: 100%;
height: 250px;
position: relative;
top: 0;
left: 0;
background-color: black;
color: white;
font-family: "Century Gothic", Verdana, sans-serif;
font-size: 1.0em;
padding: 10px;
border-left: 3px solid rgb(60,60,65);
border-bottom: 3px solid rgb(40,40,45);  

.footerlinkstitle{
  position: absolute;
  top: 0;
  left: 3%;
  font-weight: 600;
  font-size: 1.5em;
  color: white;
 text-shadow: 1px 1px 1px rgb(170,210,220);
 border-left: 2px solid rgb(186,228,255);
padding: 10px; 
text-align: left;
}

.footerlinkstitletest{
  position: absolute;
  top: 0;
  left: 3%;
  font-weight: 500;
  font-size: 1.3em;
  color: rgb(60,70,255);
  text-shadow: 1px 1px 1px rgb(186,228,255);
  border-left: 1px solid rgb(150,205,230); 
  border-right: 1px solid rgb(186,228,255);
  border-top: 1px solid rgb(150,205,230);	
  border-bottom: 1px solid rgb(186,228,255);
  background-color: rgb(50,50,50);  
  padding: 10px;
}


.footerlinks{
color: white;
font-family: "Century Gothic", Verdana, sans-serif;
font-size: 1.1em;
padding: 10px;
text-align: left;
}

.footerlist{
list-style-type: none;
list-style-position: inside;
color: white;
font-family: "Century Gothic", Verdana, sans-serif;
font-size: 1.1em;
padding: 10px;
line-height: 1.4;
text-align: left;
}
a.footerlink:link{
color: white;
font-family: "Century Gothic", Verdana, sans-serif;
font-size: 1.1em;
}
a.footerlink:visited{
    font-size: 1.1em;
    color: rgb(90,220,160);
    text-shadow: 1px 1px 4px rgb(110,235,180);
}
a.footerlink:hover{
  color: rgb(40,140,255);
font-size: 1.2em;
font-weight: 700;
}
a.footerlink:active{
  color: rgb(40,140,255);
font-size: 1.2em;
font-weight: 700;
background-color: rgb(230,225,150);
}

.footercontacttitle{
  position: absolute;
  top: 0;
  left: 70%;
  font-weight: 700;
 font-weight: 600;
  font-size: 1.5em;
  color: white;
 text-shadow: 1px 1px 1px rgb(170,210,220);
padding: 10px; 
text-align: right;
}
.footercontactimage{
  position: absolute;
  top: 0;
  left: 57%;
  font-weight: 700;
text-align: right;
}
.footercontact{
  position: absolute;
  top: 50px;
  left: 70%;
  text-align: right;
}
a.emailfooter:link{
  color: white;
}
a.emailfooter:visited{
  color: rgb(80,80,80);
font-size: 1.1em;
}
a.emailfooter:hover{
  color: rgb(185,210,255);
font-size: 1.2em;
font-weight: 700;
}
a.emailfooter:active{
color: rgb(80,130,200);
font-size: 1.2em;
font-weight: 700;
background-color: rgb(230,225,150);
}
/* --- New General Responsive Rules --- */
img {
    max-width: 100%; /* Ensures all images (in the logo, prompt, etc.) never overflow their container */
    height: auto;
}

/* Ensures form inputs fill the width but respect padding */
input, textarea, button[type=submit] {
    width: 90% !important; /* Force inputs to use 90% of the screen width */
    box-sizing: border-box; /* Crucial: ensures padding doesn't push element width past 100% */
}

/* ======================================================= */
/* MOBILE AND TABLET OPTIMIZATIONS             */
/* ======================================================= */

@media (max-width: 768px) {

    /* --- BODY ADJUSTMENT --- */
    /* The header content will stack and take up more height now. */
    /* Adjust body padding to push main content down past the fixed header. */
    body {
        padding-top: 180px; /* Increase to account for the now-stacked header content */
    }

    /* --- HEADER FIXES --- */
    header {
        height: auto; /* Let the content define the height (it will be taller now) */
        display: flex; /* Use Flexbox to manage internal positioning */
        flex-direction: column; /* Stack all child elements vertically */
        align-items: center; /* Center content horizontally */
        padding: 5px 0;
    }
    
    /* Remove Absolute Positioning from ALL children inside the header */
    /* This makes them flow naturally (stacking vertically due to flex-direction: column) */
    .ciwrlogoheader, .contact, .contactaddress, .blurbtitle, .blurb {
        position: static; /* Reset to normal flow */
        width: 100%;
        left: initial;
        top: initial;
        text-align: center; /* Center the text */
        margin: 5px 0; /* Add vertical spacing between stacked elements */
    }
    
    /* Clean up header elements */
    .contactaddress, .blurb {
        padding: 0 10px;
    }
    .blurb {
        border: none; /* Remove borders that don't look good when centered/stacked */
        background-color: transparent;
        font-size: 0.9em;
    }
    
    /* --- FOOTER FIXES --- */
    footer {
        height: auto; /* Allow the footer to grow as content stacks */
        padding: 20px 10px;
    }
    
    /* Remove Absolute Positioning from ALL children inside the footer */
    .footerlinkstitle, .footercontactimage, .footercontacttitle, .footercontact {
        position: static;
        width: 100%; /* Force elements to full width so they stack */
        left: initial;
        top: initial;
        text-align: center;
        margin-bottom: 20px;
    }

    /* Adjust the list to look cleaner when stacked */
    .footerlist {
        list-style-type: none; /* Remove the bullet points */
        padding: 0;
    }
    
    /* --- MAIN CONTENT & TYPOGRAPHY --- */
    /* Make key graphics larger relative to the screen */
    .f2w2logo, .promptphoto {
        max-width: 80%;
    }

    /* Adjust font sizes for readability on small screens */
    .explanation, .infobox, .promptcontent {
        font-size: 1em; 
        padding: 10px; /* Give more space around the edges */
    }
    
    /* Reset the logo animation to avoid horizontal scroll on mobile */
    @keyframes myAnimation {
        /* Simplifies the animation or sets it to not move much horizontally */
        0%, 100% { left: 0px; top: 0px; }
        25% { left: 50px; top: 0px; }
        50% { left: 50px; top: 50px; }
        75% { left: 0px; top: 50px; }
    }
}