/* CSS Document — Aperture Photo Club
   Author: Leo Humbach
   Course: ITWP 1000
   File: styles.css
   External stylesheet for all pages of the Aperture Photo Club website.
   Template style inspired by HTML5 UP Stellar (html5up.net)
   Free for personal and commercial use under the CCA 3.0 license
*/

body {
    background-color: #f4f7fa;
    color: #222222;
    font-family: Georgia, "Times New Roman", serif;
    margin: 0;
    padding: 0;
}

a {
    color: #1a6fba;
}

a:hover {
    color: #0d4a80;
}

img {
    max-width: 100%;
}

/* Top banner */
#top-banner {
    background-color: #1a6fba;
    color: #ffffff;
    text-align: center;
    padding: 6px;
    font-size: 13px;
}

/* Navigation bar */
#site-nav {
    background-color: #0d1b2a;
    overflow: hidden;
    padding: 0 20px;
}

#site-nav .nav-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
}

#site-nav .nav-logo span {
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    vertical-align: middle;
    letter-spacing: 1px;
}

#site-nav .nav-logo .logo-icon {
    font-size: 26px;
    margin-right: 8px;
    vertical-align: middle;
}

#site-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

#site-nav ul li a {
    color: #ccddee;
    text-decoration: none;
    padding: 8px 14px;
    display: block;
    font-size: 15px;
}

#site-nav ul li a:hover,
#site-nav ul li a.active {
    background-color: #1a6fba;
    color: #ffffff;
}

/* Hero section — homepage only */
#hero {
    background-color: #0d1b2a;
    color: #ffffff;
    text-align: center;
    padding: 70px 20px;
    background-image: linear-gradient(to bottom, #0d1b2a 60%, #0a2540);
}

#hero .hero-icon {
    font-size: 64px;
    display: block;
    margin: 0 auto 20px auto;
}

#hero h1 {
    font-size: 46px;
    margin-bottom: 10px;
    letter-spacing: 2px;
}

#hero p.hero-sub {
    font-size: 18px;
    color: #aabbcc;
    margin-bottom: 20px;
}

#hero .hero-typewriter {
    font-size: 20px;
    color: #66aaee;
    min-height: 30px;
    margin-bottom: 30px;
}

#hero .btn {
    display: inline-block;
    background-color: #1a6fba;
    color: #ffffff;
    text-decoration: none;
    padding: 12px 30px;
    border-radius: 4px;
    font-size: 15px;
    margin: 5px;
}

#hero .btn:hover {
    background-color: #0d4a80;
    color: #ffffff;
    text-decoration: none;
}

#hero .btn.outline {
    background-color: transparent;
    border: 2px solid #aabbcc;
    color: #ffffff;
}

#hero .btn.outline:hover {
    background-color: #1a3a5c;
}

/* Social share area */
.social-share-box {
    background-color: #ffffff;
    border: 1px solid #dde4ee;
    border-radius: 4px;
    padding: 28px 36px;
    margin-bottom: 28px;
    text-align: center;
}

.social-share-box h2 {
    font-size: 20px;
    margin-bottom: 10px;
    border-bottom: 1px solid #dde4ee;
    padding-bottom: 8px;
}

.social-share-box p {
    color: #555555;
    margin-bottom: 16px;
    font-size: 14px;
}

.share-placeholder {
    background-color: #e8f0fb;
    border: 2px dashed #1a6fba;
    border-radius: 4px;
    padding: 18px 24px;
    color: #1a6fba;
    font-size: 13px;
    line-height: 1.7;
}

/* Page header for inner pages */
.page-header {
    background-color: #0d1b2a;
    color: #ffffff;
    text-align: center;
    padding: 44px 20px;
}

.page-header .header-icon {
    font-size: 48px;
    display: block;
    margin-bottom: 12px;
}

.page-header h1 {
    font-size: 34px;
    margin-bottom: 8px;
}

.page-header p {
    color: #aabbcc;
    font-size: 16px;
}

/* Main content area */
.content-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 50px 24px;
}

/* Section headings */
.section-title {
    font-size: 28px;
    border-bottom: 3px solid #1a6fba;
    padding-bottom: 8px;
    margin-bottom: 10px;
    display: inline-block;
}

/* White content boxes */
.text-section {
    background-color: #ffffff;
    border: 1px solid #dde4ee;
    border-radius: 4px;
    padding: 36px 40px;
    margin-bottom: 28px;
}

.text-section h2 {
    font-size: 22px;
    border-bottom: 1px solid #dde4ee;
    padding-bottom: 8px;
    margin-bottom: 14px;
}

.text-section p {
    color: #444444;
    margin-bottom: 14px;
    line-height: 1.75;
}

.text-section ul, .text-section ol {
    color: #444444;
    line-height: 1.9;
    padding-left: 22px;
}

/* Feature cards grid */
.feature-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 36px;
}

.feature-card {
    background-color: #ffffff;
    border: 1px solid #dde4ee;
    border-radius: 4px;
    padding: 28px 24px;
    width: calc(50% - 12px);
    box-sizing: border-box;
}

.feature-card .icon {
    font-size: 30px;
    margin-bottom: 12px;
}

.feature-card h3 {
    font-size: 16px;
    color: #1a6fba;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.feature-card p {
    color: #555555;
    font-size: 14px;
    line-height: 1.7;
}

/* Category cards - three column */
.category-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 28px;
}

.category-card {
    background-color: #ffffff;
    border: 1px solid #dde4ee;
    border-radius: 4px;
    padding: 30px 26px;
    flex: 1;
    min-width: 280px;
    box-sizing: border-box;
}

.category-card .icon {
    font-size: 36px;
    margin-bottom: 14px;
    display: block;
}

.category-card h3 {
    font-size: 20px;
    color: #1a6fba;
    border-bottom: 2px solid #dde4ee;
    padding-bottom: 8px;
    margin-bottom: 12px;
}

.category-card p {
    color: #444444;
    font-size: 14px;
    line-height: 1.75;
}

/* Gallery grid */
.gallery-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 28px;
}

.gallery-item {
    background-color: #ffffff;
    border: 1px solid #dde4ee;
    border-radius: 4px;
    overflow: hidden;
    flex: 1;
    min-width: 280px;
    box-sizing: border-box;
}

.gallery-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.gallery-caption {
    padding: 14px 16px;
}

.gallery-caption h4 {
    font-size: 15px;
    color: #1a6fba;
    margin-bottom: 4px;
}

.gallery-caption p {
    font-size: 13px;
    color: #666666;
}

.winner-badge {
    display: inline-block;
    background-color: #f5a623;
    color: #ffffff;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 10px;
    border-radius: 10px;
    margin-bottom: 6px;
    text-transform: uppercase;
}

/* Voting section */
.voting-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 28px;
}

.vote-card {
    background-color: #ffffff;
    border: 1px solid #dde4ee;
    border-radius: 4px;
    overflow: hidden;
    flex: 1;
    min-width: 260px;
    box-sizing: border-box;
    text-align: center;
}

.vote-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.vote-card-body {
    padding: 16px;
}

.vote-card-body h4 {
    font-size: 15px;
    color: #222222;
    margin-bottom: 4px;
}

.vote-card-body p {
    font-size: 13px;
    color: #666666;
    margin-bottom: 12px;
}

/* Contact/Submit form */
.form-section {
    background-color: #ffffff;
    border: 1px solid #dde4ee;
    border-radius: 4px;
    padding: 40px 44px;
    max-width: 700px;
    margin: 0 auto;
}

.form-section h2 {
    font-size: 24px;
    margin-bottom: 8px;
    border-bottom: 1px solid #dde4ee;
    padding-bottom: 8px;
}

.form-section .form-intro {
    color: #555555;
    margin-bottom: 26px;
    font-size: 15px;
    line-height: 1.7;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 6px;
    color: #222222;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    color: #222222;
    background-color: #f9fafc;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: #1a6fba;
    outline: none;
}

.form-group textarea {
    min-height: 120px;
    resize: vertical;
}

.form-submit {
    background-color: #1a6fba;
    color: #ffffff;
    font-size: 15px;
    font-weight: bold;
    padding: 12px 34px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 6px;
}

.form-submit:hover {
    background-color: #0d4a80;
}

/* Chat placeholder */
.chat-placeholder {
    background-color: #ffffff;
    border: 1px solid #dde4ee;
    border-radius: 4px;
    padding: 32px 40px;
    margin-bottom: 28px;
    text-align: center;
}

.chat-placeholder h2 {
    font-size: 22px;
    border-bottom: 1px solid #dde4ee;
    padding-bottom: 8px;
    margin-bottom: 16px;
}

.embed-placeholder {
    background-color: #e8f0fb;
    border: 2px dashed #1a6fba;
    border-radius: 4px;
    padding: 24px;
    color: #1a6fba;
    font-size: 13px;
    line-height: 1.8;
    text-align: left;
}

.embed-placeholder strong {
    display: block;
    font-size: 15px;
    margin-bottom: 8px;
}

/* Two column layout */
.two-col {
    display: flex;
    gap: 24px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.two-col .text-section {
    flex: 1;
    min-width: 280px;
}

/* Footer */
#site-footer {
    background-color: #0d1b2a;
    color: #99aabb;
    padding: 40px 24px 24px;
    margin-top: 50px;
}

#site-footer .footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    padding-bottom: 28px;
    border-bottom: 1px solid #223344;
}

#site-footer h4 {
    color: #ffffff;
    font-size: 13px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

#site-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#site-footer ul li {
    margin-bottom: 7px;
}

#site-footer ul li a {
    color: #99aabb;
    font-size: 14px;
    text-decoration: none;
}

#site-footer ul li a:hover {
    color: #66aaee;
}

#site-footer p {
    font-size: 13px;
    line-height: 1.7;
}

#site-footer a {
    color: #66aaee;
}

.footer-bottom {
    max-width: 1100px;
    margin: 18px auto 0;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
}