/*
  Global styles for the XTSkins blog.
  The colour palette is inspired by the logo: deep navy backgrounds with
  vibrant turquoise accents. Typography is set using the Poppins font for
  modern readability. Cards and sections use subtle shadows and rounded
  corners to create separation on dark backgrounds.
*/

:root {
  --primary-color: #00c4cc;
  --primary-color-dark: #05a0a4;
  --background-color: #0a1f33;
  --card-bg: #011e36;
  --text-color: #e5e7eb;
  --muted-text: #a5b4cb;
  --footer-bg: #011e36;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background-color: var(--background-color);
  color: var(--text-color);
  line-height: 1.6;
}

nav {
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 2rem;
  position: sticky;
  top: 0;
  z-index: 100;
}

nav .logo {
  height: 40px;
}

nav .nav-links {
  list-style: none;
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
}

nav .nav-links li {
  position: relative;
}

nav .nav-links a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  padding: 0.5rem 0;
  display: inline-block;
}

nav .nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background-color: var(--primary-color);
  transition: width 0.3s ease;
}

nav .nav-links a:hover::after,
nav .nav-links a:focus::after {
  width: 100%;
}

/* Hero section */
.hero {
  background-image: url('../images/hero-bg.png');
  background-size: cover;
  background-position: center;
  position: relative;
  color: #fff;
  text-align: center;
  padding: 160px 20px;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
}

.hero-content img {
  width: 300px;
  max-width: 70%;
}

.hero-content h1 {
  font-size: 3rem;
  margin: 1rem 0;
  line-height: 1.2;
}

.hero-content p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  color: var(--muted-text);
}

.cta-buttons {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-buttons a {
  background-color: var(--primary-color);
  color: #011e36;
  padding: 0.8rem 1.6rem;
  border-radius: 0.5rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.cta-buttons a:hover {
  background-color: var(--primary-color-dark);
}

/* Sections */
.section {
  padding: 60px 20px;
}

.section-title {
  font-size: 2.4rem;
  text-align: center;
  margin-bottom: 40px;
  color: var(--primary-color);
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.card {
  background-color: var(--card-bg);
  border-radius: 10px;
  overflow: hidden;
  width: 300px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-6px);
}

.card img {
  width: 100%;
  height: 170px;
  object-fit: cover;
}

.card-content {
  padding: 20px;
}

.card-content h3 {
  margin-top: 0;
  font-size: 1.4rem;
  color: var(--primary-color);
}

.card-content p {
  font-size: 0.9rem;
  color: var(--muted-text);
  margin-bottom: 1rem;
}

.card-content a {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 600;
}

.card-content a:hover {
  text-decoration: underline;
}

/* Footer */
.footer {
  background-color: var(--footer-bg);
  color: var(--muted-text);
  text-align: center;
  padding: 40px 20px;
  font-size: 0.9rem;
}

.footer a {
  color: var(--primary-color);
  margin: 0 6px;
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

/* Post pages */
.post-header {
  background-size: cover;
  background-position: center;
  position: relative;
  color: #fff;
  padding: 140px 20px;
  text-align: center;
}

.post-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
}

.post-header h1 {
  position: relative;
  z-index: 1;
  font-size: 3rem;
  margin: 0;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.post-content {
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
  line-height: 1.7;
}

.post-content h2 {
  color: var(--primary-color);
  margin-top: 2rem;
  font-size: 1.8rem;
}

.post-content h3 {
  color: var(--primary-color);
  margin-top: 1.5rem;
  font-size: 1.4rem;
}

.post-content p {
  margin-bottom: 1rem;
  color: var(--text-color);
}

.post-content ul {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.post-content li {
  margin-bottom: 0.5rem;
  color: var(--muted-text);
}

.footnotes {
  font-size: 0.8rem;
  margin-top: 2rem;
  border-top: 1px solid #163a5a;
  padding-top: 1rem;
  color: var(--muted-text);
}

.footnotes a {
  color: var(--primary-color);
  text-decoration: none;
}

.footnotes a:hover {
  text-decoration: underline;
}

/* CTA button for services section */
.services .cta-link {
  display: inline-block;
  background-color: var(--primary-color);
  color: #011e36;
  padding: 0.8rem 1.6rem;
  border-radius: 0.5rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.services .cta-link:hover {
  background-color: var(--primary-color-dark);
}

/* Call to action section used at the end of posts to promote nossos serviços de
   compra e venda de skins. Creates a card-style container with centered
   heading, descriptive text and a button. */
.cta-section {
  background-color: var(--card-bg);
  border-radius: 10px;
  padding: 40px 20px;
  margin-top: 3rem;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

.cta-section h3 {
  color: var(--primary-color);
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
}

.cta-section p {
  color: var(--muted-text);
  margin-bottom: 1.2rem;
}

.cta-section a {
  display: inline-block;
  background-color: var(--primary-color);
  color: #011e36;
  padding: 0.7rem 1.6rem;
  border-radius: 0.5rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.cta-section a:hover {
  background-color: var(--primary-color-dark);
}

/* Advertisement slot placeholder for Google AdSense. Visible as a dashed box with
   muted text and centred content. Replace the inner content with actual
   AdSense code when integrating ads. */
.ad-slot {
  margin: 60px auto;
  max-width: 900px;
  background-color: var(--card-bg);
  border: 2px dashed var(--primary-color);
  color: var(--muted-text);
  padding: 1.5rem;
  text-align: center;
  font-size: 0.9rem;
  border-radius: 10px;
}