/* =========================================================
   Grace Untamed — Global Styles (cleaned + consolidated)
   ========================================================= */

/* -------- Reset / Base -------- */
:root{
  --page-bg: #333333;     /* site background */
  --panel-bg: #1e1e1e;    /* card / panel background */
  --ink: #ffffff;         /* base text */
  --muted: #cfcfcf;       /* secondary text */
  --accent: #f3c1c2;      /* accent/pink */
  --gold: #c5a253;        /* gold heading */
  --footer-bg: #000000;
}

/* Reset browser default spacing and box sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: var(--page-bg);
  color: var(--ink);
  font-family: "Playfair Display", serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* -------- Typography -------- */
h1 {
  font-family: "Playfair Display", serif;
  color: var(--gold);
  font-size: 30px;
  margin: 0 0 .5rem 0;
}

h2 {
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 .5rem 0;
}

h3 {
  font-family: "Playfair Display", serif;
  color: var(--ink);
  font-size: 25px;
  margin: 0 0 .5rem 0;
}

h6 {
  font-family: "Playfair Display", serif;
  color: var(--ink);
  font-size: 20px;
  margin: 0 0 .5rem 0;
}

p {
  font-family: "Playfair Display", serif;
  color: #b97f81;
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 1rem 0;
}

/* Utility accent */
.section-title,
.h-pink {
  color: #b97f81;
}

/* -------- Navbar -------- */
/* Make navbar flush to top and above content */
.navbar.bg-custom {
  background-color: var(--footer-bg);
  position: sticky;
  top: 0;
  z-index: 1100;
  margin-bottom: 0;
  box-shadow: none;
}

/* Navbar brand/logo */
.logo {
  width: 150px;
  height: auto;
  display: inline-block;
}

/* Nav links - keep readable size but responsive */
.nav-link {
  font-family: "Playfair Display", serif;
  color: var(--ink);
  font-size: 18px; /* reduced to 18 for better fit on smaller screens */
  font-weight: 500;
  padding: .5rem .75rem;
}
.nav-link:visited { color: #b97f81; }
.nav-link:hover,
.nav-link:focus { color: var(--ink) !important; text-decoration: none; }

/* Navbar toggler icon color */
.navbar-toggler {
  border-color: rgba(255,255,255,0.1);
}
.navbar-toggler-icon {
  background-image: none;
  color: var(--ink);
}

/* -------- Header / Logo wrapper -------- */
.header {
  background-color: var(--footer-bg);
  color: var(--ink);
  position: relative;
}

/* -------- Footer (full-width, always) -------- */
.footer {
  background-color: var(--footer-bg);
  color: var(--ink);
  width: 100%;
  padding: 20px 0;
  margin-top: auto; /* sits at bottom on short pages */
  display: block;
}
.footer a { color: var(--ink); }
.footer .container { max-width: 1200px; }

/* -------- Icons -------- */
.bi { font-weight: 500; color: var(--accent); }
.bi:hover { color: var(--ink); }

/* -------- Forms -------- */
.contactstyle { font-family: "Playfair Display", serif; }

.form-label {
  color: var(--accent);
  font-weight: 400;
  font-size: 16px;
  text-transform: uppercase;
}

.form-control {
  background-color: #36454F; /* dark slate */
  color: var(--ink);
  border: 1px solid rgba(255,255,255,0.05);
}
.btn-primary {
  background-color: #36454F;
  border: none;
  color: var(--ink);
}

/* =========================================================
   Portfolio / Carousel
   ========================================================= */
#portfolio { color: var(--ink); }
#portfolio h3,
#portfolio .meta { color: var(--accent); }
#portfolio .meta { font-weight: 500; }
#portfolio p { color: var(--ink); }

.carousel-item img {
  max-width: 600px;
  width: 100%;
  height: auto;
  display: block;
}

/* =========================================================
   Reviews
   ========================================================= */
#reviews .card {
  background-color: #111;
  color: var(--ink);
  border: 1px solid rgba(255,255,255,0.03);
}
#reviews .card p { margin-bottom: .5rem; }

/* =========================================================
   Services + Web Sections (consistent contrast)
   ========================================================= */
.services,
#web-packages,
#web-addons,
#addons {
  background-color: var(--page-bg);
  color: var(--ink);
}

/* Cancel parent opacity/filter that may leak into children */
.services, .services * {
  opacity: 1 !important;
  filter: none !important;
}

/* Panels / cards */
.card-panel,
.section-panel {
  background-color: var(--panel-bg);
  border: 1px solid #2a2a2a;
  border-radius: 1rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  color: var(--ink);
}

/* Package mockup images */
.pkg-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: .75rem;
  margin-bottom: 1rem;
}

/* Card titles and text contrast */
.services .card-title,
.card-panel .card-title { color: var(--accent); }

.services .card p,
.services .card li,
.services .card ul,
#web-packages p,
#web-addons li,
#addons li,
.section-panel p,
.section-panel li,
.section-panel ul {
  color: var(--ink);
}

.services .card .small,
.services .card .text-muted,
.section-panel .text-muted { color: var(--muted); }

/* Hover lift for panels */
#web-packages .rounded-3,
.section-panel {
  transition: transform .2s ease, box-shadow .2s ease;
}
#web-packages .rounded-3:hover,
.section-panel:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

/* Force brighter text in Business Packages cards */
.services .card-body,
.services .card-body p,
.services .card-body li,
.services .card-body ul {
  color: var(--ink);
}
.services .card-body .small,
.services .card-body .text-muted {
  color: #e6e6e6;
}

/* Specific rule for sections using py-5 with card-panel */
section.py-5 .card-panel .card-title { color: var(--accent); }
section.py-5 .card-panel .card-body,
section.py-5 .card-panel .card-body p,
section.py-5 .card-panel .card-body li,
section.py-5 .card-panel .card-body ul,
section.py-5 .card-panel .card-body .small,
section.py-5 .card-panel .card-body .text-muted {
  color: var(--ink);
}

/* =========================================================
   Responsive tweaks
   ========================================================= */
@media (max-width: 991.98px) {
  .nav-link { font-size: 16px; }
  .logo { width: 130px; }
  h3 { font-size: 20px; }
  p { font-size: 18px; }
}

@media (max-width: 575.98px) {
  .card-panel, .section-panel { border-radius: .75rem; }
  .footer h1 { font-size: 1.5rem; }
  .nav-link { font-size: 14px; padding: .25rem .5rem; }
  .logo { width: 120px; }
}

/* =========================================================
   Accessibility / small refinements
   ========================================================= */

/* Make images block-level so no inline-gap above them */
img { display: block; max-width: 100%; height: auto; }

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}