/* ==========================================================================
   BAYA WEBSITE STYLES
   ========================================================================== */

/* ==========================================================================
   BASE STYLES
   ========================================================================== */

body {
  font-family: "Noto Serif", serif;  /* Main content font */
  background-color: #fdf6e3;         /* Warm cream background */
  color: #222;                       /* Dark text for readability */
  margin: 0;
  padding: 0;
  line-height: 1.6;                  /* Comfortable reading line height */
  min-height: 100vh;                 /* Full viewport height */
  display: flex;
  flex-direction: column;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

/* ==========================================================================
   LAYOUT & CONTAINER
   ========================================================================== */

.container {
  max-width: 800px;                             /* Maximum content width */
  margin: 0 auto;                               /* Center on page */
  padding: clamp(0.75em, 2vw, 1em);            /* Responsive padding: mobile → desktop */
  box-sizing: border-box;
  flex: 1;                                      /* Fill available space */
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0.1em 1em;
}

/* ==========================================================================
   HEADER SECTION
   ========================================================================== */

header {
  text-align: center;
  padding: clamp(0.6em,1vw, 1em) 0;
}

/* Logo and title container */
.logo-title {
  display: flex;
  flex-direction: row;                          /* Side-by-side layout */
  align-items: center;
  justify-content: center;
  gap: clamp(0.85em, 2vw, 1em);                /* Responsive gap between logo and title */
}

/* Logo image */
header img {
  max-height: clamp(70px, 10vw, 80px);        /* Logo size: 60px → 80px */
  margin-bottom: 0;
}

/* Main site title "Baya" */
.site-title {
  margin: 0;
  font-size: clamp(3.5em, 8vw, 4.7em);        /* Title size: 2.5em → 4.2em */
  color: #333;
  font-family: "Covered By Your Grace", cursive; /* Handwritten font for header */
  font-weight: 400;
  font-style: normal;
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */

nav {
  margin-top: 0.7em;
  margin-bottom: 0;
  font-family: "Covered By Your Grace", cursive; /* Same as title font */
  display: flex;
  justify-content: space-between;             /* Distribute links across full width */
  align-items: center;
  flex-wrap: wrap;                             /* Allow wrapping on very small screens */
  padding: 0 0           /* Match content horizontal padding */
}

/* Navigation links */
nav a {
  text-decoration: none;
  color: #333;
  font-size: clamp(1.6em, 3.5vw, 2.4em);     /* Nav size: 1.2em → 1.8em */
  white-space: nowrap;                         /* Prevent line breaks */
}

nav a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   CONTENT AREAS
   ========================================================================== */

.content {
  font-size: 1em;         /* Content text size */
  flex: 1;                                     /* Fill remaining space */
  padding: 0 clamp(0.5em, 3vw, 0.9em); /* Vertical | Horizontal padding */
}

/* Section titles (Poemas, Textos, Músicas) */
.content h2 {
  color: #333;
  font-size: clamp(1.25em, 3vw, 1.4em);       /* Section title size */
  margin-bottom: 0.5em;
  text-align: left;
  font-weight: bold;
  margin-top: 0em;
}

/* ==========================================================================
   CONTENT LISTS (Index pages)
   ========================================================================== */

.content-list ul {
  list-style: none;                            /* Remove bullet points */
  padding: 0;
  margin: 0;                                   /* Remove all margins including left indentation */
  font-family: "Arvo", serif;                 /* Arvo font for content lists */
}

.content-list li {
  margin-bottom: 0.5em;                       /* Space between list items */
}

/* Links in content lists */
.content-list a {
  color: #333;
  text-decoration: underline;                  /* Always underlined for clarity */
  font-size: clamp(1.1em, 1vw, 1.2em);       /* Larger font size: 1.1em → 1.2em */
  line-height: 1.4;
  font-family: "Arvo", serif;                 /* Arvo font for content list links */
  font-weight: 400;                           /* Regular weight */
}

.content-list a:hover {
  text-decoration: underline;
  color: #666;                                /* Darker on hover */
}

/* ==========================================================================
   POEM CONTENT
   ========================================================================== */

.poem-content {
  text-align: left;
  max-width: 100%;
  margin-top: clamp(1.2em, 3vw, 1.5em);  /* Consistent spacing to match h2 header */
}

/* Remove top margin if there's an h2 header */
.poem-content:has(h2) {
  margin-top: 0;
}

/* Poem paragraphs (stanzas) */
.poem-content p {
  margin: 0 0 1.5em 0;                        /* Space between stanzas */
  line-height: 1.8;                           /* Generous line spacing for poetry */
  font-size: 1em;
}

/* Remove margin from last stanza */
.poem-content p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   TEXT CONTENT (Prose)
   ========================================================================== */

.text-content {
  text-align: left;
  max-width: 100%;
  margin-top: clamp(1.2em, 3vw, 1.5em); /* Consistent spacing to match h2 header */
}

/* Remove top margin if there's an h2 header */
.text-content:has(h2) {
  margin-top: 0;
}

/* Text paragraphs */
.text-content p {
  margin: 0 0 1.2em 0;                        /* Space between paragraphs */
  line-height: 1.7;                           /* Comfortable line spacing for prose */
  font-size: 1em;
  text-align: justify;                        /* Justified text for prose */
  hyphens: auto;                              /* Enable automatic hyphenation */
  -webkit-hyphens: auto;                      /* Safari support */
  -ms-hyphens: auto;                          /* IE/Edge support */
  word-wrap: break-word;                      /* Fallback for long words */
}

/* Remove margin from last paragraph */
.text-content p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   MUSIC CONTENT (YouTube embeds)
   ========================================================================== */

.music-content {
  text-align: left;
  max-width: 100%;
  margin-top: clamp(1.2em, 3vw, 1.5em);  /* Consistent spacing to match h2 header */
}

/* Remove top margin if there's an h2 header */
.music-content:has(h2) {
  margin-top: 0;
}

/* Responsive YouTube embed container */
.youtube-embed {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;                     /* 16:9 aspect ratio */
  margin: 0;
}

/* YouTube iframe styling */
.youtube-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 8px;                         /* Rounded corners */
}

/* ==========================================================================
   DRAWING CONTENT (Images)
   ========================================================================== */

.drawing-content {
  text-align: center;
  max-width: 100%;
  margin-top: clamp(1.7em, 3.5vw, 1.9em);  /* Consistent spacing to match h2 header */
}

/* Remove top margin if there's an h2 header */
.drawing-content:has(h2) {
  margin-top: 0;
}

/* Drawing images */
.drawing-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;                         /* Rounded corners */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  margin: 1em 0;
}

/* Drawing image container for better control */
.drawing-image {
  display: block;
  margin: 1em auto;
  max-width: 100%;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

footer {
  text-align: center;
  padding: clamp(1.5em, 3vw, 2em) 0 clamp(0.5em, 1vw, 1em) 0; /* Top | Bottom padding */
  margin-top: auto;                           /* Push to bottom */
}

/* Social media links */
.social-links a {
  color: #333;
  text-decoration: none;
  display: inline-block;
  transition: transform 0.2s ease, color 0.2s ease;
}

.social-links a:hover {
  color: #666;
  transform: scale(1.1);                      /* Slight zoom on hover */
}

.social-links svg {
  width: clamp(28px, 2vw, 34px);
  height: clamp(28px, 2vw, 34px);
}

/* ==========================================================================
   CUSTOMIZATION NOTES
   ========================================================================== */

/*
  EASY CUSTOMIZATION GUIDE:
  
  FONTS:
  - Header font: Change "Covered By Your Grace" in .site-title and nav
  - Content font: Change "Noto Serif" in body
  
  COLORS:
  - Background: Change #fdf6e3 in body
  - Text: Change #333 in various elements
  - Hover: Change #666 in hover states
  
  SIZES:
  - Title: Adjust clamp(2.5em, 8vw, 4.2em) in .site-title
  - Navigation: Adjust clamp(1.2em, 3.5vw, 1.8em) in nav a
  - Content: Adjust clamp(0.9em, 2vw, 1em) in .content
  
  SPACING:
  - Header spacing: Adjust margin-bottom in nav
  - Content padding: Adjust padding in .content
  - List indentation: Adjust margin in .content-list ul
  
  CLAMP() FORMAT: clamp(minimum, preferred, maximum)
  - minimum: smallest size (mobile)
  - preferred: scales with viewport (vw = viewport width)
  - maximum: largest size (desktop)
*/