/*
Author: Abboud Qubbaj
File: style.css
Purpose: Controls the layout, colors, and overall styling for the trigonometry website
Course: CIS133DA 22095
Date: December 16, 2025
*/

/* Global page styling applied to the entire website */
body {
font-family: Arial, sans-serif; /* Sets a clean, readable font */
margin: 0; /* Removes default browser spacing */
background-color: #5AFA8C; /* Page background color */
color: #172740; /* Default text color */
}

/* Contact form layout and overall appearance */
.contact-form {
display:flex; /* Uses flexbox for vertical alignment */
flex-direction:column; /* Stacks form elements top to bottom */
max-width:500px; /* Limits width for readability */
margin:20px auto; /* Centers the form horizontally */
padding:20px; /* Adds spacing inside the form */
border:2px solid #333; /* Visible border around the form */
border-radius:10px; /* Slightly rounds the corners */
background-color:#f8f8f8; /* Light background for contrast */
}

/* Labels used inside the contact form */
.contact-form label {
margin-top:10px; /* Adds space above each label */
font-weight:bold; /* Makes labels stand out */
}

/* Input fields and text areas inside the contact form */
.contact-form input,
.contact-form textarea {
margin-top:5px;
padding:10px; /* Adds space inside input boxes */
border:1px solid #aaa; /* Light border for inputs */
border-radius:5px;
font-size:16px; /* Keeps text readable */
width:100%;
box-sizing:border-box; /* Ensures padding doesn’t affect width */
}

/* Text area specific behavior */
.contact-form textarea {
min-height:100px; /* Ensures enough typing space */
resize:vertical; /* Allows vertical resizing only */
}

/* Submit button styling */
.contact-form button {
margin-top:15px;
padding:12px;
background-color:#333; /* Dark button background */
color:white; /* Light text for contrast */
border:none;
border-radius:5px;
font-size:16px;
cursor:pointer; /* Shows pointer on hover */
}

/* Button hover effect for better user feedback */
.contact-form button:hover {
background-color:#555;
}

/* Fun facts section layout using flexbox */
.funfact-section {
display: flex; /* Places text and images side by side */
align-items: center;
justify-content: space-between;
margin: 40px 0; /* Adds vertical spacing between sections */
gap: 30px; /* Space between text and image */
flex-wrap: wrap; /* Allows stacking on smaller screens */
}

/* Reverses the layout to alternate image and text positions */
.funfact-section.reverse {
flex-direction: row-reverse;
}

/* Text container inside fun fact sections */
.funfact-text {
flex: 1 1 500px; /* Allows flexible resizing */
}

/* Headings inside fun fact text areas */
.funfact-text h3 {
margin-bottom: 15px;
color: #2c3e50;
}

/* Paragraph text inside fun fact sections */
.funfact-text p {
margin-bottom: 10px;
line-height: 1.6; /* Improves readability */
color: #333;
}

/* Image container for fun fact images */
.funfact-image {
flex: 1 1 400px;
text-align: center;
}

/* Shared image styling across multiple pages */
.funfact-image img,
.sine-example,
.trig-graph,
.triangle-image,
.quadrant-image,
.unit-circle-img,
.trig-image {
max-width: 100%;
width: 100%;
height: auto; /* Maintains image proportions */
border: 2px solid #5AFA8C;
border-radius: 0;
box-shadow: none;
transition: none;
}

.trig-image {
float: left;
margin-right: 15px;
width: 300px;
}
.trig-image + ul {
overflow: hidden;
}


/* Layout adjustments for smaller screens */
@media (max-width: 900px) {
.funfact-section,
.funfact-section.reverse {
flex-direction: column; /* Stacks content vertically */
}
.funfact-text,
.funfact-image {
flex: 1 1 100%;
}
.funfact-image {
margin-top: 20px;
}
}

/* Layout for example videos and accompanying text */
.example-video-container{
display:flex;
justify-content:center;
align-items:flex-start;
gap:20px;
margin-top:20px;
margin-bottom:20px;
}

/* Text displayed next to example videos */
.example-text{
max-width:45%;
}

/* Wrapper for sine graph examples */
.sine-example-wrapper {
display: flex;
align-items: flex-start;
gap: 20px;
flex-wrap: wrap;
}

/* Source links formatting for readability */
#sources a,
#sources-identities a {
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
color: #0645AD;
text-decoration: underline;
}

/* Paragraph layout inside sine example sections */
.sine-example-wrapper p {
flex: 1;
min-width: 200px;
}

/* Graph image styling */
.trig-graph {
display: block;
max-width: 600px;
width: 90%;
margin: 20px auto 40px auto; /* Centers graphs */
border-radius: 0;
box-shadow: none;
}

/* Adjusts graph size on large screens */
@media (min-width: 1200px) {
.trig-graph {
max-width: 500px;
}
}

/* Embedded video sizing */
.example-video{
width:45%;
height:315px;
border:0;
}

/* Mobile layout for videos */
@media(max-width:800px){
.example-video-container{
flex-direction:column;
align-items:center;
}
.example-text, .example-video{
max-width:100%;
width:100%;
}
}

/* Main content container for all pages */
.content-wrapper {
background-color: #DCF8FA;
width: 70%;
margin: 0 auto; /* Centers site content */
padding: 30px;
box-sizing: border-box;
min-height: 100vh; /* Ensures full page height */
}

/* Centers identities content on the page */
.center-identities {
text-align:center;
width:100%;
margin-left:auto;
margin-right:auto;
}

/* Quadrant section layout */
.quadrant-box {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 20px;
margin-top: 15px;
margin-bottom: 25px;
}

/* Quadrant table formatting */
.quadrant-table {
flex: 1;
min-width: 250px;
border-collapse: collapse;
}

.quadrant-table th, .quadrant-table td {
padding: 8px;
text-align: center;
}

/* Right triangle section layout */
.right-triangle-box {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 20px;
margin-top: 10px;
margin-bottom: 20px;
}

.triangle-text {
flex: 1;
min-width: 200px;
}

/* Centered tables and content */
.centered-content {
text-align: center;
margin: 0 auto;
max-width: 800px;
}

.centered-content table {
margin: 0 auto;
border-collapse: collapse;
width: 80%;
}

.centered-content table,
.centered-content th,
.centered-content td {
border: 1px solid black;
padding: 8px;
background-color: white;
}

.centered-content th {
background-color: #f2f2f2;
}

/* Navigation link styling */
nav a {
text-decoration: none;
color: #4c015e;
}

/* Hover effect for navigation links */
nav a:hover {
text-decoration: underline;
color: #5A16F8;
}

/* Header styling */
header {
background-color: #91FFD9;
color: black;
text-align: center;
}

/* Main content spacing */
main {
padding: 20px;
}

/* Footer styling */
footer {
background-color: #91FFD9;
color: #172740;
text-align: center;
}