/* ==========================================================================
   WrittenInStone – custom.css
   Purpose: global polish, header hardening, belt fix, UI consistency
   NOTE: This file loads AFTER bootstrap/style/responsive – safe to override.
   ========================================================================== */

/* ========== 0) Base reset & belt fix ===================================== */
html, body {
  margin: 0;            /* prevents the top white belt from body default margin */
  padding: 0;
  background: #ffffff;  /* site base background */
}

body.main-layout {
  --wis-header-bg: #3c4042;   /* your dark header color */
  --wis-header-height: 72px;  /* visual height of the dark bar incl. shadow */
  --wis-focus: #2f80ed;       /* accessible focus color */
}

/* Ensure the very top is solid (no ghost gaps) */
#siteHeader, .header {
  margin: 0 !important;
  background: var(--wis-header-bg);
}

/* If any template starts with a big top margin, neutralize it */
#siteHeader + * {
  /* stop first-child margin from creating a gap under the header */
  margin-top: 0 !important;
}

/* Defensive: some region/layout wrappers might sneak a margin at the top */
#siteHeader + .banner_main,
#siteHeader + .container,
#siteHeader + section,
#siteHeader + div {
  margin-top: 0 !important;
}

/* Loader shouldn’t push layout either */
.loader_bg { margin: 0; }

/* Optional: make header sticky (stays at top when scrolling).
   This does NOT require extra padding because it doesn’t overlay content. */
#siteHeader {
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 4px 18px rgba(0,0,0,.12);
}

/* Focus styles (keyboard accessibility) */
a:focus, button:focus, .btn:focus, [tabindex]:focus {
  outline: 2px solid var(--wis-focus) !important;
  outline-offset: 2px;
}

/* Messages banner spacing (when present) */
.banner_main {
  margin: 0;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* ========== 1) Navigation polish ========================================= */
.navigation .navbar-nav .nav-link {
  font-weight: 600;
  letter-spacing: .2px;
}

.navigation .navbar-nav .nav-item.active .nav-link,
.navigation .navbar-nav .nav-link:hover,
.navigation .navbar-nav .nav-link:focus {
  text-decoration: none;
  opacity: .95;
}

/* User nav (top-right) */
ul.email {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;              /* force horizontal layout */
  align-items: center;
  gap: 12px;                  /* spacing between Hi/Logout */
}

ul.email .nav-link {
  font-size: 0.9rem;          /* smaller than main nav */
  font-weight: 500;
  padding: 4px 6px;
  line-height: 1.2;
}

/* “Check Asset Originality” button inside nav */
.navigation .btn.btn-warning.btn-sm {
  border-radius: 6px;
  font-weight: 600;
  padding: 6px 12px;
}

/* Right-side user area */
ul.email {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul.email li { display: inline-block; margin-left: 12px; }

/* ========== 2) Buttons & badges (unified system) ========================= */
.btn-action { display: inline-flex; align-items: center; gap: .4rem; }

/* Primary solid */
.btn-solid {
  background: #0d6efd;
  color: #fff !important;
  border: 1px solid #0d64ea;
  border-radius: 8px;
  padding: .5rem .9rem;
  font-weight: 600;
  transition: transform .06s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn-solid:hover { opacity: .95; box-shadow: 0 6px 16px rgba(13,110,253,.25); }
.btn-solid:active { transform: translateY(1px); }

/* Neutral outline */
.btn-outline {
  background: #fff;
  color: #333 !important;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  padding: .5rem .9rem;
  font-weight: 600;
  transition: background .2s ease, box-shadow .2s ease, transform .06s ease;
}
.btn-outline:hover { background: #f7f7f7; box-shadow: 0 3px 10px rgba(0,0,0,.08); }
.btn-outline:active { transform: translateY(1px); }

/* Danger */
.btn-danger,
.btn-action.btn-danger {
  background: #dc3545;
  color: #fff !important;
  border: 1px solid #c32d3b;
  border-radius: 8px;
  padding: .5rem .9rem;
  font-weight: 600;
}
.btn-danger:hover { opacity: .95; box-shadow: 0 6px 16px rgba(220,53,69,.25); }

/* Badges */
.badge {
  display: inline-block;
  padding: .25rem .5rem;
  border-radius: 6px;
  font-size: .8rem;
  font-weight: 600;
}
.badge-primary { background: #0d6efd; color: #fff; }
.badge-muted   { background: #eef1f4; color: #444; }

/* ========== 3) Cards & utilities ======================================== */
.card-soft {
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

.shadow-hover:hover { box-shadow: 0 16px 32px rgba(0,0,0,.14); }

/* ========== 4) Portfolio page (moved out of template) ==================== */
.portfolio-page { padding-top: 200px; padding-bottom: 100px; }

/* remove the thick left decoration line from this page only */
.portfolio-page .titlepage::before { display: none !important; }

/* spacing/typography tweaks */
.portfolio-page .titlepage h2 { margin-bottom: .5rem; }
.portfolio-page .title-lead { max-width: 980px; }

/* portfolio cards */
.pf-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  transition: transform .25s ease, box-shadow .25s ease;
  background: #fff;
}
.pf-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0,0,0,.14);
}
.pf-card img { display: block; width: 100%; height: auto; }
.pf-card-body { padding: 20px 22px; }
.pf-card h3 { font-size: 1.25rem; margin: 0 0 .25rem 0; }
.pf-card p { margin: 0; color: #555; }

/* optional icon actions */
.pf-actions {
  position: absolute; top: 10px; right: 10px; display: flex; gap: 8px;
}
.pf-actions a {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.9);
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
  color: #333;
}
.pf-actions a:hover { background: #fff; color: #000; }

/* ========== 5) Responsive header height (if your bar compresses) ========= */
@media (max-width: 992px) {
  body.main-layout { --wis-header-height: 64px; }
}
@media (max-width: 576px) {
  body.main-layout { --wis-header-height: 56px; }
}

/* ========== Hero / Banner text fixes ========== */

/* General hero region (dark background, needs white text) */
.hero, .banner_main, .about_hero,
[data-region="about_hero"], [data-region="hero"] {
  color: #fff;
}

/* Ensure headings are visible */
.hero h1, .hero h2, .hero h3,
.banner_main h1, .banner_main h2, .banner_main h3,
.about_hero h1, .about_hero h2, .about_hero h3 {
  color: #fff;
  font-weight: 700;
}

/* Paragraphs and buttons inside hero */
.hero p, .banner_main p, .about_hero p {
  color: #f0f0f0;
}

.hero .btn, .banner_main .btn, .about_hero .btn {
  color: #fff;
  border-color: rgba(255,255,255,.6);
}
.hero .btn:hover, .banner_main .btn:hover, .about_hero .btn:hover {
  background: #fff;
  color: #000;
}