/* -----------------------------------------------------
   CSS Variables (Using theme.dart defaults)
------------------------------------------------------ */
:root {
  --primary-color: #003E47;      /* Deep Teal */
  --secondary-color: #A67C52;    /* Gold */
  --accent-color: #007E87;       /* Bright Teal */
  --background-color: #F5F5F5;   /* Light Gray */
  --text-primary: #212121;       /* Rich Black */
  --text-secondary: #4A4A4A;     /* Dark Gray */
  --button-color: #A67C52;       /* Gold */
  --card-background: #FFFFFF;    /* White */
}

/* -----------------------------------------------------
   Base Reset & Body
------------------------------------------------------ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  background: var(--background-color);
  color: var(--text-secondary);
  line-height: 1.5;
}

/* -----------------------------------------------------
   HERO / COVER SECTION
------------------------------------------------------ */
.cover-container {
  position: relative;
  width: 100%;
  height: 400px; /* Increased height for prominence */
  overflow: hidden;
  background-color: var(--background-color);
}

.cover-container .cover-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Optional Overlay for better readability */
.cover-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.2);
  pointer-events: none;
}

/* -----------------------------------------------------
   PROFILE OVERVIEW (over the cover)
------------------------------------------------------ */
.profile-overview {
  position: absolute;
  bottom: -60px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: var(--text-primary);
}

.profile-pic {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 4px solid #FFF;
  object-fit: cover;
  margin-bottom: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.profile-category {
  font-size: 0.95rem;
  color: #666;
}

/* -----------------------------------------------------
   NAVIGATION BAR (optional)
------------------------------------------------------ */
.profile-nav {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-top: 80px;
}

.profile-nav ul {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 8px 0;
}

.profile-nav li {
  margin: 0 16px;
}

.profile-nav a {
  text-decoration: none;
  color: #333;
  padding: 6px 12px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.profile-nav a:hover,
.profile-nav a.active {
  background-color: #f1f1f1;
}

/* -----------------------------------------------------
   MAIN CONTENT CONTAINER
------------------------------------------------------ */
.profile-content {
  max-width: 900px;
  margin: 60px auto 30px;
  padding: 0 16px;
}

/* -----------------------------------------------------
   CARD SECTIONS (for personal info, contact, social, websites)
------------------------------------------------------ */
.card-section {
  background: var(--card-background);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  margin-bottom: 30px;
  padding: 24px;
}

.card-section h2 {
  margin-bottom: 20px;
  font-size: 1.2rem;
  color: var(--primary-color);
}

/* Two-column grid for social and website sections */
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* A generic "info-item" block */
.info-item {
  display: flex;
  flex-direction: column;
}

/* If you want to differentiate read-only fields, add this class */
.read-only-field label {
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-secondary);
  font-size: 0.9rem;
  display: flex;      /* so icon + text align horizontally if you want */
  align-items: center;
  gap: 6px;           /* spacing between icon and label text */
}

.read-only-field input {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
  font-size: 0.9rem;
  color: var(--text-primary);
  outline: none;
  width: 100%;
}

/* Keep the input read-only but let it be selectable */
.read-only-field input[readonly] {
  cursor: text; /* so user can copy the URL if they want */
}

/* Focus state (if user clicks into the box to copy text) */
.read-only-field input:focus {
  border-color: var(--primary-color);
}

/* Icon styling in the label */
.read-only-field label i {
  font-size: 1.1rem;
  color: var(--secondary-color);
}

/* Responsive: single column on smaller screens */
@media (max-width: 600px) {
  .info-grid {
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------------------
   FORM-STYLE GRID FOR INFO
------------------------------------------------------ */
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.info-item {
  display: flex;
  flex-direction: column;
}
.info-item label {
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-secondary);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 6px;
}
.info-item input {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
  font-size: 0.9rem;
  color: var(--text-primary);
  outline: none;
  width: 100%;
}
.info-item input[readonly] {
  cursor: text;
}
.info-item input:focus {
  border-color: var(--primary-color);
}

.card-section h2 i {
  color: var(--secondary-color);
  margin-right: 6px;
}

/* -----------------------------------------------------
   CONTACT BUTTONS (for contact-options)
------------------------------------------------------ */
.contact-container a {
  display: inline-block;
  margin: 8px 4px;
  padding: 10px 16px;
  background-color: var(--button-color);
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  transition: opacity 0.2s;
}

.contact-container a:hover {
  opacity: 0.9;
}

/* -----------------------------------------------------
   SOCIAL MEDIA & WEBSITE LINKS (if using clickable links)
------------------------------------------------------ */
.social-container a,
.website-container a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px 6px;
  padding: 10px 14px;
  background-color: var(--button-color);
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  transition: opacity 0.2s;
}

.social-container a:hover,
.website-container a:hover {
  opacity: 0.9;
}

.social-container i,
.website-container i {
  font-size: 1.1rem;
  color: var(--secondary-color);
}

/* -----------------------------------------------------
   MARKETING / CTA SECTION
------------------------------------------------------ */
.marketing-section {
  max-width: 600px;
  margin: 40px auto;
  text-align: center;
  padding: 24px;
  background: var(--card-background);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.marketing-section .brand-logo {
  width: 80px;
  margin-bottom: 16px;
}

.marketing-section h2 {
  font-size: 1.3rem;
  color: var(--primary-color);
  margin-bottom: 12px;
}

.marketing-section p {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.download-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.download-buttons img {
  width: 140px;
  margin: 8px;
  transition: opacity 0.2s;
}

.download-buttons img:hover {
  opacity: 0.8;
}

/* -----------------------------------------------------
   FOOTER
------------------------------------------------------ */
footer {
  text-align: center;
  margin: 40px 0;
  font-size: 0.85rem;
  color: #666;
}

/* -----------------------------------------------------
   RESPONSIVE ADJUSTMENTS
------------------------------------------------------ */
@media (max-width: 600px) {
  .cover-container {
    height: 300px;
  }
  .profile-overview {
    position: static;
    transform: none;
    margin-top: -40px;
  }
  .profile-nav {
    margin-top: 20px;
  }
  .profile-content {
    margin-top: 20px;
  }
  .info-grid {
    grid-template-columns: 1fr;
  }
}