/*
  Global stylesheet for the Celebrity Management Agency site.

  This file unifies the look and feel across all pages using a dark,
  modern colour palette. It applies a rich navy backdrop, soft gray
  secondary panels, crisp white typography and vibrant accent tones.
*/

/* Colour Variables */
:root {
  --bg-primary: #111827;
  --bg-secondary: #1a1d28;
  --text-primary: #ffffff;
  --text-secondary: #e0e0e0;
  --accent-blue: #00bfff;
  --accent-cyan: #00ffff;
  /* Updated gold tones for lighter, shinier accents */
  --accent-gold-start: #fdd835;
  --accent-gold-end: #ffc107;
  --border-subtle: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.2);
  --radius-small: 8px;
  --radius-pill: 12px;
}

html, body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-primary);
  color: var(--text-secondary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
}

/* -------------------------------------------------------------------
   Header & Navigation

   The site header uses a subtle gradient to distinguish it from the
   content area. The internal flex container horizontally aligns the
   logo and navigation. Navigation links are slightly larger than
   default body text and evenly spaced. The header stays fixed at the
   top of the viewport when scrolling (sticky positioning).
*/
.site-header {
  background: linear-gradient(180deg, #0a1e40 0%, #0b1f3a 100%);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.site-header .brand {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent-gold-end);
  text-shadow: 0 0 8px rgba(255, 193, 7, 0.6);
  white-space: nowrap;
}

.site-header nav a {
  margin: 0 12px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-primary);
  text-shadow: 0 0 4px var(--accent-blue);
}

.site-header nav a:hover {
  color: var(--accent-cyan);
  text-decoration: underline;
}

/* -------------------------------------------------------------------
   Hero Section

   A large, welcoming section at the top of the page. Uses a deep
   gradient background, enlarged typography and centered layout to
   mirror the reference design. Call‑to‑action buttons are grouped
   with spacing and consistent sizing.
*/
.hero {
  background: linear-gradient(180deg, #0d2b54 0%, #0c2340 100%);
  padding: 80px 0 60px;
  text-align: center;
}

.hero h1 {
  font-size: 2.4rem;
  color: var(--text-primary);
  margin-bottom: 1rem;
  text-shadow: 0 0 5px var(--accent-blue);
}

.hero .lead {
  font-size: 1.2rem;
  color: var(--text-secondary);
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
}

.cta-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

/* Primary button: filled with gold gradient */
.btn-primary {
  display: inline-block;
  padding: 0.9rem 1.8rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(to right, var(--accent-gold-start), var(--accent-gold-end));
  color: #000;
  font-weight: 600;
  /* Thin dark border for subtle 3D definition */
  border: 1px solid rgba(0, 0, 0, 0.25);
  /* Softer glow for a lighter, shinier effect */
  box-shadow: 0 0 14px rgba(255, 220, 105, 0.55);
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
  text-decoration: none;
}

.btn-primary:hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
  box-shadow: 0 0 24px rgba(255, 220, 105, 0.85);
}

/* Outline button: transparent with gold border */
.btn-outline {
  display: inline-block;
  padding: 0.8rem 1.8rem;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--accent-gold-end);
  border: 2px solid rgba(253, 216, 53, 0.8);
  font-weight: 600;
  box-shadow: none;
  transition: background 0.2s ease, color 0.2s ease;
  text-decoration: none;
}

.btn-outline:hover {
  background: linear-gradient(to right, var(--accent-gold-start), var(--accent-gold-end));
  color: #000;
  box-shadow: 0 0 12px rgba(255, 220, 105, 0.6);
}

/* Feature section: dark panel to highlight content following the hero */
.feature {
  background: var(--bg-secondary);
  padding-top: 40px;
  padding-bottom: 40px;
  border-radius: var(--radius-small);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* -------------------------------------------------------------------
   Contact grid

   Formats the contact & safety information into three responsive
   columns. On smaller screens it stacks vertically, and on wider
   viewports it lays out side‑by‑side. List styles are removed for
   clarity.
*/
.contact-grid {
  display: grid;
  gap: 24px;
  margin-top: 40px;
  margin-bottom: 40px;
}

.contact-grid h3 {
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
  text-shadow: 0 0 4px var(--accent-blue);
}

.contact-grid ul {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}

.contact-grid li + li {
  margin-top: 0.4rem;
}

/* Individual card styling within the contact grid */
.contact-grid > div {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-small);
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

@media (min-width: 680px) {
  .contact-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

h1, h2, h3, h4, h5, h6 {
  font-family: Georgia, "Times New Roman", Times, serif;
  margin-top: 0;
  margin-bottom: 0.6em;
  color: var(--text-primary);
  text-shadow: 0 0 5px var(--accent-blue);
}

p, ul, ol, blockquote, label, input, textarea, select {
  font-size: 1rem;
  color: var(--text-secondary);
}

blockquote {
  margin: 1em 0;
  padding: 0.8em 1.2em;
  border-left: 4px solid var(--accent-blue);
  background-color: var(--bg-secondary);
  border-radius: var(--radius-small);
  box-shadow: 0 0 4px rgba(0, 191, 255, 0.2);
}

a {
  color: var(--accent-blue);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--accent-cyan);
  text-decoration: underline;
}

/* Layout containers */
header, main, footer {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
}

header {
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-subtle);
  text-align: center;
}

footer {
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 0.875rem;
  text-align: center;
}

/* Navigation */
nav {
  margin-top: 10px;
}

nav a {
  margin: 0 10px;
  font-size: 0.875rem;
  color: var(--accent-blue);
}

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

/* Sections */
.section {
  padding: 20px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.section:last-child {
  border-bottom: none;
}

/* Utility classes */
.wrap {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
}

.center {
  text-align: center;
}

.divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 20px 0;
}

.grid {
  display: grid;
  gap: 20px;
}

@media (min-width: 680px) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
  .two {
    grid-template-columns: 1fr 1fr;
  }
  .three {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Cards & notices */
.card, .notice {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-small);
  padding: 12px 16px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

.notice {
  box-shadow: 0 0 10px rgba(0, 191, 255, 0.2);
}

/* Forms */
form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

input, textarea, select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-small);
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 1rem;
  box-sizing: border-box;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-secondary);
}

label {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-primary);
}

/* Buttons & pills */
button, .btn, .cta, .pill {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  background: linear-gradient(to right, var(--accent-gold-start), var(--accent-gold-end));
  color: #000;
  border: none;
  box-shadow: 0 0 10px rgba(255, 193, 7, 0.5);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
  text-decoration: none;
}

button:hover, .btn:hover, .cta:hover, .pill:hover {
  filter: brightness(1.05);
  box-shadow: 0 0 15px rgba(255, 193, 7, 0.8);
  transform: translateY(-1px);
}

button:active, .btn:active, .cta:active, .pill:active {
  transform: translateY(0);
  box-shadow: 0 0 8px rgba(255, 193, 7, 0.4);
}

/* Floating support and WhatsApp buttons */
.support-float, .whatsapp-float {
  position: fixed;
  right: 20px;
  z-index: 1000;
  text-decoration: none;
}

.support-float {
  bottom: 86px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #0b3d1c;
  background: linear-gradient(180deg, #62f08c 0%, #2bd96a 60%, #19c157 100%);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.support-float::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 10px;
  right: 10px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  filter: blur(1px);
  pointer-events: none;
}

.support-float:hover {
  transform: translateY(-1px);
}

.whatsapp-float {
  bottom: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #5af07f 0%, #25D366 60%, #1fb157 100%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.whatsapp-float::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 8px;
  bottom: -4px;
  right: -2px;
  border-radius: 0 0 12px 12px;
  box-shadow: 4px 4px 0 0 rgba(255, 255, 255, 0.8);
  transform: rotate(25deg);
}

.whatsapp-float:hover {
  transform: translateY(-1px) scale(1.02);
}

/* Table styling used in some pages */
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-secondary);
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
}

th, td {
  padding: 12px;
  border: 1px solid var(--border-subtle);
  text-align: left;
}

th {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

/* Misc small text */
.small {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.muted {
  opacity: 0.8;
}

/* Branding elements */
.logo-text,
.brand {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent-gold-end);
  text-shadow: 0 0 8px rgba(255, 193, 7, 0.6);
}