:root {
  --bg: #f7f9fc;
  --surface: #ffffff;
  --text: #0f172a;
  --muted: #6b7280;
  --accent: #1d4ed8;
  --accent-2: #0ea5e9;
  --border: #e5e7eb;
  --radius: 14px;
  --shadow: 0 12px 30px rgba(2, 8, 20, 0.08);
  --font-sans: "Sora", "Helvetica Neue", Arial, sans-serif;
}

body, #the_page,
h1, h2, h3, h4, h5, h6, .title {
  font-family: var(--font-sans);
}

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

#header, #theHeader, #the_header {
  background: #0b0d12;
  border-bottom: 1px solid #111827;
}

/* Top bar + site title: white + bold */
#header a, #theHeader a, #the_header a,
#header h1, #theHeader h1, #the_header h1,
#header .title, #theHeader .title, #the_header .title {
  color: #ffffff !important;
  font-weight: 700 !important;
}

#content, #menubar, #footer, .content, .bloc, .menu {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

#content { padding: 24px; }

.thumbnail img,
.thumbnails img,
.image img {
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(2, 8, 20, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.thumbnail:hover img,
.thumbnails li:hover img,
.image:hover img {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 14px 28px rgba(2, 8, 20, 0.14);
}

button, input, select, textarea {
  border-radius: 10px;
  border: 1px solid var(--border);
  font-family: var(--font-sans);
}

#footer { color: var(--muted); }

/* Global background -> white */
body, #the_page {
  background: #ffffff !important;
}

/* Remove white card around album area */
#content, .content, .bloc, .menu, #menubar {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Remove black strip behind page title + subtitle */
#content h1, #content h2, .title, .page-header, .titrePage, #theHeader {
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Header title text: white, bold, not “linky” */
#header a, #theHeader a, #the_header a {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
#header a:hover, #theHeader a:hover, #the_header a:hover {
  color: #ffffff !important;
}
#header a.site-title, #theHeader a.site-title, #the_header a.site-title {
  pointer-events: none;
  cursor: default;
}

/* White page background */
body, #the_page { background: #ffffff !important; }

/* Remove dark strip behind page title/welcome */
#content h1, #content h2, .titrePage, .page-header {
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
  padding: 0 !important;
}

/* Remove white card around album thumbnails */
#content, .content, .bloc, .menu, #menubar,
.thumbnails, .thumbnail, .thumbnail a, .thumbnails li, .thumbnails li .thumbnail {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Header title should not look like a link */
#header a, #theHeader a, #the_header a {
  color: #ffffff !important;
  text-decoration: none !important;
}
#header a:hover, #theHeader a:hover, #the_header a:hover {
  color: #ffffff !important;
}
#header h1 a, #theHeader h1 a, #the_header h1 a {
  pointer-events: none;
  cursor: default;
}

/* Album description as date subhead */
.thumbCatDesc {
  margin: 6px 0 0;
  font-size: 0.95rem;
  color: #6b7280;
}

/* Page title + welcome text: dark charcoal, no shadow */
#gallery_title,
#content h1, #content h2,
.titrePage h2,
.header_notes, .header_notes p {
  color: #2b2f36 !important;
  text-shadow: none !important;
}

/* Hide the Home header on index page */
body#theIndex .titrePage { display: none !important; }

/* Breadcrumb/nav ("Home") styling */
#navigationBar, #navigationBar a,
.breadcrumb, .breadcrumb a,
.nav-breadcrumb, .pwg-breadcrumb {
  color: #2b2f36 !important;
  font-size: 0.9rem;
  text-shadow: none !important;
}
#navigationBar a:hover,
.breadcrumb a:hover,
.nav-breadcrumb a:hover,
.pwg-breadcrumb a:hover {
  color: #9aa0a6 !important;
}

/* Album titles under thumbnails */
#thumbnails .thumbnail .caption,
#thumbnails .thumbnail .caption a,
#thumbnails .thumbnail .thumbLegend,
#thumbnails .thumbnail .thumbLegend a,
#thumbnails .thumbnail .title,
#thumbnails .thumbnail .title a,
#thumbnails .thumbnail .thumbTitle,
#thumbnails .thumbnail .thumbTitle a {
  color: #2b2f36 !important;
  text-shadow: none !important;
}
#thumbnails .thumbnail a:hover,
#thumbnails .thumbnail .caption a:hover,
#thumbnails .thumbnail .thumbLegend a:hover,
#thumbnails .thumbnail .title a:hover,
#thumbnails .thumbnail .thumbTitle a:hover {
  color: #9aa0a6 !important;
}

/* Footer: centered + no shadow */
#footer {
  text-align: center !important;
  text-shadow: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
#footer a:hover { color: #9aa0a6 !important; }


/* Force dark charcoal + remove text-shadow everywhere in content */
#content, #content * { text-shadow: none !important; }

/* Main title + welcome line */
#gallery_title,
#theHeader, #theHeader * ,
.titrePage h2,
#content h1, #content h2 {
  color: #2b2f36 !important;
  text-shadow: none !important;
}

/* “Home /” breadcrumb styling (smaller, charcoal, lighter hover) */
#navigationBar, #navigationBar a,
.breadcrumb, .breadcrumb a,
.nav-breadcrumb, .nav-breadcrumb a,
.pwg-breadcrumb, .pwg-breadcrumb a {
  color: #2b2f36 !important;
  font-size: 0.9rem !important;
  text-shadow: none !important;
}
#navigationBar a:hover,
.breadcrumb a:hover,
.nav-breadcrumb a:hover,
.pwg-breadcrumb a:hover {
  color: #9aa0a6 !important;
}

/* Album title under thumbnail */
#thumbnails .thumbnail .caption,
#thumbnails .thumbnail .caption a,
#thumbnails .thumbnail .thumbLegend,
#thumbnails .thumbnail .thumbLegend a,
#thumbnails .thumbnail .title,
#thumbnails .thumbnail .title a,
#thumbnails .thumbnail .thumbTitle,
#thumbnails .thumbnail .thumbTitle a {
  color: #2b2f36 !important;
  text-shadow: none !important;
}
#thumbnails .thumbnail .caption a:hover,
#thumbnails .thumbnail .thumbLegend a:hover,
#thumbnails .thumbnail .title a:hover,
#thumbnails .thumbnail .thumbTitle a:hover {
  color: #9aa0a6 !important;
}


/* Force main gallery title to charcoal */
#gallery_title {
  color: #2b2f36 !important;
  text-shadow: none !important;
}
#gallery_title * { text-shadow: none !important; }

/* Hide brand slot in nav */
.navbar .brand { display: none !important; }

/* Left-justify top nav links */
.navbar .nav {
  float: left !important;
  margin-left: 0 !important;
}
.navbar .nav > li {
  float: left !important;
}
.navbar .nav-collapse {
  text-align: left !important;
}
#gallery_title { color: #2b2f36 !important; text-shadow: none !important; }
#gallery_title * { text-shadow: none !important; }

/* FORCE charcoal + no shadow for header title + welcome line */
#theHeader, #theHeader * {
  color: #2b2f36 !important;
  text-shadow: none !important;
  background: transparent !important;
}
#theHeader h1, #theHeader h1 *, #theHeader p, #theHeader p * {
  color: #2b2f36 !important;
  text-shadow: none !important;
  background: transparent !important;
}

/* "Home" nav (header.titrePage) — small + charcoal */
header.titrePage h2,
header.titrePage h2 a {
  color: #2b2f36 !important;
  font-size: 0.9rem !important;
  text-shadow: none !important;
  background: transparent !important;
}
header.titrePage h2 a:hover { color: #9aa0a6 !important; }

/* Album title under thumbnail */
#content .thumbnail .caption,
#content .thumbnail .caption h3,
#content .thumbnail .caption h3 a {
  color: #2b2f36 !important;
  text-shadow: none !important;
  background: transparent !important;
}
#content .thumbnail .caption h3 a:hover {
  color: #9aa0a6 !important;
}


/* Login page layout (no typography/color overrides) */
body#theIdentificationPage #content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px 60px;
  gap: 24px;
}

body#theIdentificationPage .login-page {
  width: 100%;
  display: flex;
  justify-content: center;
}

body#theIdentificationPage .login-card {
  width: min(520px, 92vw);
  background: #d9d9d9;
  border-radius: 14px;
  padding: 28px 28px 24px;
  box-shadow: none;
}

body#theIdentificationPage .login-card h2 {
  margin: 0 0 8px;
}

body#theIdentificationPage .login-subhead {
  margin: 0 0 16px;
}

body#theIdentificationPage form {
  margin: 0;
}

body#theIdentificationPage fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

body#theIdentificationPage label {
  display: block;
  margin: 10px 0 6px;
}

body#theIdentificationPage input[type="text"],
body#theIdentificationPage input[type="password"] {
  width: 100%;
  max-width: 320px;
}

body#theIdentificationPage .login-note {
  margin: 12px 0 0;
}

body#theIdentificationPage .login-links {
  margin-top: 10px;
}

/* Login page layout + requested color tweaks */
body#theIdentificationPage #content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px 100px; /* more bottom space */
  gap: 24px;
}

body#theIdentificationPage .login-page {
  width: 100%;
  display: flex;
  justify-content: center;
}

body#theIdentificationPage .login-card {
  width: min(520px, 92vw);
  background: #d9d9d9;
  border-radius: 14px;
  padding: 28px 28px 24px;
  box-shadow: none;
}

body#theIdentificationPage .login-subhead,
body#theIdentificationPage label,
body#theIdentificationPage .login-note {
  color: #2b2b2b;
}

body#theIdentificationPage .login-note {
  margin: 12px 0 0;
}

/* Hide nav search bar */
.navbar-search { display: none !important; }

/* Login page: keep everything inside the one card */
body#theIdentificationPage form,
body#theIdentificationPage form p {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Login page text colors you asked for */
body#theIdentificationPage .login-subhead,
body#theIdentificationPage label,
body#theIdentificationPage .login-note {
  color: #2b2b2b !important;
}

/* Footer breathing room */
#footer { padding-bottom: 32px; }

/* Picture page: hide Informations tab/link */
body#thePicturePage a[href="#imageInfos"],
body#thePicturePage #imageInfos {
  display: none !important;
}

/* Picture page: remove gray rounded backgrounds */
body#thePicturePage .tabbable,
body#thePicturePage .tab-content,
body#thePicturePage .nav-tabs,
body#thePicturePage .well,
body#thePicturePage .thumbnail {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Footer breathing room on picture page */
body#thePicturePage #footer {
  padding-bottom: 48px;
}

/* Picture page: image block should be clean */
body#thePicturePage .subcontent {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Comment count directly under image */
body#thePicturePage .comment-count {
  margin: 8px 0 0;
  text-align: left;
}
body#thePicturePage .comment-count a {
  color: inherit;
}

/* Photoroll under the image */
body#thePicturePage .navThumbs {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  align-items: center;
}
body#thePicturePage .navThumb {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  overflow: hidden;
  display: block;
}
body#thePicturePage .navThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body#thePicturePage .thumbHover {
  display: none;
}

/* Picture page: keep comments + photoroll aligned to image left edge */
body#thePicturePage .subcontent {
  text-align: center;
}
body#thePicturePage .imageStack {
  display: inline-block;
  text-align: left;
}
body#thePicturePage #theImage {
  margin: 0;
}
body#thePicturePage .comment-count {
  margin-top: 8px;
}
body#thePicturePage .navThumbs {
  justify-content: flex-start;
}

/* Picture page: comment link + comment UI styling */
body#thePicturePage .comment-count a,
body#thePicturePage #theComments a {
  color: #2b2b2b !important;
}

/* Center the comment UI under the image */
body#thePicturePage #theComments {
  display: flex;
  justify-content: center;
}
body#thePicturePage #theComments .row {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

/* Make all comment UI text dark charcoal */
body#thePicturePage #theComments,
body#thePicturePage #theComments h3,
body#thePicturePage #theComments label,
body#thePicturePage #theComments p,
body#thePicturePage #theComments .comment {
  color: #2b2b2b !important;
}

/* Add more space under preview thumbnails */
body#thePicturePage .navThumbs {
  margin-bottom: 24px;
}

/* Reduce space under thumbnail roll */
body#thePicturePage .navThumbs {
  margin-bottom: 12px;
}

/* Center the comment form under the image */
body#thePicturePage #theComments {
  display: flex;
  justify-content: center;
}
body#thePicturePage #theComments.row {
  margin-left: 0;
  margin-right: 0;
}
body#thePicturePage #theComments .span6 {
  float: none !important;
  width: 100% !important;
  max-width: 720px;
  margin: 0 auto !important;
}

/* Ensure comment link + form text stays charcoal */
body#thePicturePage #theComments a,
body#thePicturePage #theComments label,
body#thePicturePage #theComments h3,
body#thePicturePage #theComments p {
  color: #2b2b2b !important;
}

/* Slightly tighter space under thumbnail roll */
body#thePicturePage .navThumbs {
  margin-bottom: 14px;
}

/* Center comment form under image */
body#thePicturePage #theComments {
  max-width: 720px;
  margin: 0 auto;
}
body#thePicturePage #theComments.row {
  margin-left: 0;
  margin-right: 0;
}
body#thePicturePage #theComments .span6 {
  float: none !important;
  width: 100% !important;
  margin: 0 auto !important;
}

/* Show clickability on main image */
body#thePicturePage a.lightboxLink {
  cursor: zoom-in;
  display: inline-block;
}

/* Less gap under thumbnails */
body#thePicturePage .comment-count { margin-bottom: 6px; }
body#thePicturePage .navThumbs { margin-bottom: 8px; }

/* Remove extra space from tabs area */
body#thePicturePage .tab-content {
  margin-top: 6px;
  padding-top: 0;
}

/* Hard-center the comment UI block */
body#thePicturePage #theComments {
  max-width: 720px;
  margin: 0 auto;
  padding-top: 0;
}

body#thePicturePage #theComments .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body#thePicturePage #commentAdd,
body#thePicturePage #commentList {
  float: none !important;
  width: 100% !important;
  margin: 0 auto !important;
}

/* Keep form text aligned left inside the centered block */
body#thePicturePage #theComments form,
body#thePicturePage #theComments h3,
body#thePicturePage #theComments label {
  text-align: left;
}