/*
  Photography AI Website - Main Stylesheet

  This stylesheet defines the core look and feel of the photography business
  website. The palette uses a dark background with warm accent colours to
  evoke a cinematic mood, while crisp typography and generous whitespace
  improve legibility. All elements are responsive by default, scaling
  gracefully from mobile through desktop. Where necessary, media queries
  provide fine‑grained control over layout breakpoints.
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

:root {
  /* Colour palette */
  --bg-color: #0b0b0b;
  --card-bg: #161616;
  --accent-color: #e57429;
  --accent-light: #ffa662;
  --text-color: #f8f8f8;
  --text-muted: #c5c5c5;
  --success: #5cb85c;
  --warning: #f0ad4e;
  --error: #d9534f;
  /* Typography */
  --font-family: 'Poppins', sans-serif;
  --heading-weight: 600;
  --body-weight: 400;
  /* Sizing */
  --max-width: 1200px;
  --border-radius: 6px;
  --transition: all 0.3s ease-in-out;
}

body {
  margin: 0;
  font-family: var(--font-family);
  color: var(--text-color);
  background-color: var(--bg-color);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  color: var(--accent-light);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--heading-weight);
  margin-top: 0;
  color: var(--text-color);
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--text-muted);
  font-weight: var(--body-weight);
}

/* Global containers */
.container {
  width: 90%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2rem 0;
}

/* Navigation Bar */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: rgba(11, 11, 11, 0.8);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: var(--transition);
}

header.scrolled {
  background-color: rgba(11, 11, 11, 0.95);
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
}

nav .logo {
  font-size: 1.5rem;
  font-weight: var(--heading-weight);
  color: var(--accent-color);
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.5rem;
}

nav ul li {
  position: relative;
}

nav ul li a {
  color: var(--text-muted);
  font-weight: var(--body-weight);
  letter-spacing: 0.5px;
}

nav ul li a:hover,
nav ul li a.active {
  color: var(--accent-color);
}

/* Responsive nav toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 4px;
}

.nav-toggle span {
  width: 25px;
  height: 3px;
  background-color: var(--text-color);
  border-radius: 2px;
}

@media (max-width: 768px) {
  nav ul {
    position: fixed;
    top: 60px;
    right: -100%;
    width: 200px;
    height: calc(100vh - 60px);
    background-color: rgba(11, 11, 11, 0.97);
    flex-direction: column;
    padding: 1rem;
    gap: 1rem;
    transition: var(--transition);
  }
  nav ul.show {
    right: 0;
  }
  .nav-toggle {
    display: flex;
  }
}

/* Hero Section */
.hero {
  height: 100vh;
  background-image: url('../images/hero.png');
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-color);
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.4));
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  padding: 0 1rem;
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

.btn {
  display: inline-block;
  background-color: var(--accent-color);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: var(--border-radius);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: var(--transition);
}

.btn:hover {
  background-color: var(--accent-light);
}

/* Sections */
section {
  padding: 4rem 0;
}

section.dark {
  background-color: var(--bg-color);
}

section.light {
  background-color: var(--card-bg);
}

/* Services */
.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.service {
  background-color: var(--card-bg);
  border-radius: var(--border-radius);
  padding: 2rem;
  text-align: center;
  transition: var(--transition);
}

.service:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

.service-icon {
  font-size: 2.5rem;
  color: var(--accent-color);
  margin-bottom: 1rem;
}

/* Gallery */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

.gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: var(--transition);
}

.gallery-grid img:hover {
  transform: scale(1.03);
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal img {
  max-width: 90%;
  max-height: 90%;
  border-radius: var(--border-radius);
}

.modal.show {
  display: flex;
}

/* Forms */
form {
  max-width: 600px;
  margin: 0 auto;
  background-color: var(--card-bg);
  padding: 2rem;
  border-radius: var(--border-radius);
  box-shadow: 0 5px 10px rgba(0,0,0,0.3);
}

form label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--text-muted);
}

form input,
form textarea,
form select {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1.5rem;
  border: none;
  border-radius: var(--border-radius);
  background-color: #262626;
  color: var(--text-color);
  font-family: var(--font-family);
}

form button {
  background-color: var(--accent-color);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: var(--border-radius);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

form button:hover {
  background-color: var(--accent-light);
}

/* Shop */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.product {
  background-color: var(--card-bg);
  padding: 1.5rem;
  border-radius: var(--border-radius);
  text-align: center;
  transition: var(--transition);
}

.product:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

.product img {
  border-radius: var(--border-radius);
  margin-bottom: 1rem;
}

.product h4 {
  margin-bottom: 0.5rem;
}

.product .price {
  color: var(--accent-color);
  font-weight: 600;
  margin-bottom: 1rem;
}

.product button {
  background-color: var(--accent-color);
  color: #fff;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: var(--transition);
}

.product button:hover {
  background-color: var(--accent-light);
}

/* Cart */
.cart {
  max-width: 600px;
  margin: 0 auto;
  background-color: var(--card-bg);
  padding: 2rem;
  border-radius: var(--border-radius);
  box-shadow: 0 5px 10px rgba(0,0,0,0.3);
}

.cart-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.cart-item img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: var(--border-radius);
  margin-right: 1rem;
}

.cart-total {
  display: flex;
  justify-content: space-between;
  margin-top: 1.5rem;
  font-weight: 600;
}

/* Footer */
footer {
  background-color: #0d0d0d;
  padding: 2rem 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}

footer a {
  color: var(--accent-light);
  margin: 0 0.5rem;
}

/* Blog */
.blog-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.blog-post {
  background-color: var(--card-bg);
  border-radius: var(--border-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
}

.blog-post:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

.blog-post img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.blog-post-content {
  padding: 1.5rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.blog-post-content h3 {
  margin: 0 0 0.5rem;
}

.blog-post-content p {
  flex-grow: 1;
}

.blog-post-content .read-more {
  margin-top: 1rem;
  align-self: flex-start;
  background-color: var(--accent-color);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius);
  font-size: 0.9rem;
}

/* AI tools page */
.ai-section {
  margin-bottom: 3rem;
}

.ai-tool {
  background-color: var(--card-bg);
  padding: 2rem;
  border-radius: var(--border-radius);
  box-shadow: 0 5px 10px rgba(0,0,0,0.3);
  margin-bottom: 2rem;
}

.ai-tool h3 {
  margin-bottom: 1rem;
}

.ai-tool p {
  margin-bottom: 1rem;
}

.ai-tool input[type="file"] {
  margin-bottom: 1rem;
}

.ai-output {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.ai-output canvas,
.ai-output img {
  max-width: 100%;
  border-radius: var(--border-radius);
  flex: 1 1 45%;
}

/* Chat assistant */
.chatbox {
  max-width: 600px;
  margin: 0 auto;
  background-color: var(--card-bg);
  border-radius: var(--border-radius);
  display: flex;
  flex-direction: column;
  height: 500px;
  overflow: hidden;
  box-shadow: 0 5px 10px rgba(0,0,0,0.3);
}

.chat-messages {
  flex-grow: 1;
  padding: 1rem;
  overflow-y: auto;
}

.chat-message {
  margin-bottom: 1rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--border-radius);
  max-width: 80%;
}

.chat-message.user {
  background-color: var(--accent-color);
  margin-left: auto;
}

.chat-message.bot {
  background-color: #2a2a2a;
  margin-right: auto;
}

.chat-input {
  display: flex;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.chat-input input {
  flex-grow: 1;
  padding: 1rem;
  border: none;
  background-color: transparent;
  color: var(--text-color);
  font-family: var(--font-family);
}

.chat-input button {
  background-color: var(--accent-color);
  border: none;
  color: #fff;
  padding: 0 1.5rem;
  cursor: pointer;
  font-weight: 600;
  transition: var(--transition);
}

.chat-input button:hover {
  background-color: var(--accent-light);
}