/* Gentle visual layer for the prayer chain. Kept separate from legacy Bootstrap. */
:root {
  --paper: #f7f3ec;
  --paper-deep: #eee8dc;
  --surface: #fffdf9;
  --ink: #35423b;
  --muted: #718078;
  --sage: #567469;
  --sage-dark: #3f5e53;
  --sage-pale: #dfe8e1;
  --clay: #b86f55;
  --clay-pale: #f1dfd5;
  --line: #deddd4;
  --shadow: 0 16px 45px rgba(69, 79, 71, .1);
  --soft-shadow: 0 7px 24px rgba(69, 79, 71, .08);
}

html { min-height: 100%; }

body {
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 8%, rgba(225, 214, 194, .7), transparent 30rem),
    linear-gradient(180deg, #f5f0e7 0%, #faf8f3 55%, #f2eee5 100%);
  font-family: "DM Sans", "Open Sans", sans-serif;
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  opacity: .32;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");
}

a { color: var(--sage-dark); }
a:hover, a:focus { color: #29483e; text-decoration: none; }

h1, h2, h3, h4, .panel-heading {
  color: var(--ink);
  font-family: "Lora", Georgia, serif;
  line-height: 1.3;
}

:focus-visible {
  outline: 3px solid rgba(184, 111, 85, .35);
  outline-offset: 3px;
}

#main {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(63, 94, 83, .96);
  border-bottom: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 6px 24px rgba(42, 61, 54, .1);
  backdrop-filter: blur(12px);
}

.navbar { min-height: 70px; margin: 0; border: 0; }
.navbar > .container { display: flex; align-items: center; min-height: 70px; }
.navbar-header { flex: 0 0 auto; }
.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  height: 70px;
  padding: 10px 15px;
  color: #fffdf7 !important;
  font-family: "Lora", Georgia, serif;
  font-size: 19px;
  font-weight: 600;
}
.navbar-brand img { width: 42px; height: 42px; object-fit: contain; }
.navbar-collapse { flex: 1 1 auto; }
.navbar-nav > li > a, .navbar-text, .navbar-link {
  color: rgba(255,255,255,.88) !important;
  font-weight: 500;
}
.navbar-nav > li > a { padding-top: 25px; padding-bottom: 25px; }
.navbar-nav > li > a:hover, .navbar-nav > li > a:focus {
  color: #fff !important;
  background: rgba(255,255,255,.08);
}
.navbar-account { display: flex; align-items: center; gap: 8px; }
.navbar-account .navbar-text { margin-right: 4px; }
.navbar-signout { display: inline-block; margin: 0; padding: 0; }
.navbar .btn-default {
  color: #fff;
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.26);
}
.navbar .btn-default:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); }
.navbar-toggle { margin-top: 17px; border: 1px solid rgba(255,255,255,.3); border-radius: 10px; }
.navbar-toggle .icon-bar { background: #fff; }

#app, #static-app { margin-top: 0; padding-top: 42px; padding-bottom: 24px; }
#static-app { color: var(--ink); }

#notifications { width: min(100% - 30px, 720px); }
#notifications .alert { margin-top: 22px; border: 0; border-radius: 14px; box-shadow: var(--soft-shadow); }

#calendar { margin: 0 auto 30px; }
#calendar ul {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 8px;
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(86,116,105,.13);
  border-radius: 20px;
  box-shadow: var(--soft-shadow);
}
#calendar li,
#calendar li.day {
  float: none !important;
  width: auto;
  min-height: 0;
  padding: 0;
  color: var(--muted);
  font-size: 15px;
}
#calendar li a,
#calendar li.inactive {
  display: block;
  padding: 11px 8px 10px;
  color: var(--muted);
  border-radius: 14px;
}
#calendar li a:hover { color: var(--sage-dark); background: var(--sage-pale); }
#calendar li.active a {
  color: #fff;
  background: var(--sage);
  box-shadow: 0 5px 14px rgba(63,94,83,.2);
}
#calendar small { margin-top: 1px; font-size: 11px; opacity: .8; }
#calendar li.inactive { opacity: .48; }
#calendar li:nth-child(1) { grid-column: 1; grid-row: 1; }
#calendar li:nth-child(2) { grid-column: 2; grid-row: 1; }
#calendar li:nth-child(3) { grid-column: 3; grid-row: 1; }
#calendar li:nth-child(4) { grid-column: 4; grid-row: 1; }
#calendar li:nth-child(5) { grid-column: 5; grid-row: 1; }
#calendar li:nth-child(6) { grid-column: 6; grid-row: 1; }
#calendar li:nth-child(7) { grid-column: 7; grid-row: 1; }

.chain-layout {
  display: grid;
  grid-template-columns: minmax(275px, .8fr) minmax(0, 1.7fr);
  align-items: stretch;
  gap: 18px;
}

#info {
  float: none;
  width: auto;
  min-height: 0;
  padding: 38px 34px;
  color: #eef5f0;
  background: var(--sage-dark);
  border-radius: 24px;
  box-shadow: var(--shadow);
}
#info h3 { color: #fffdf8; font-size: 22px; }
#logo { margin: 0 0 34px; }
#logo img { width: min(100%, 250px); }
#now { padding-bottom: 28px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.16); }
#now p { margin: 15px 0 0; color: #fff; font-family: "Lora", Georgia, serif; font-size: 20px; line-height: 1.5; }
#intention { margin-top: 28px; }
#intention h3 { margin-bottom: 14px; }
#intention p { color: rgba(255,255,255,.84); line-height: 1.75; }
.long-intention::after { background: linear-gradient(to bottom, rgba(63,94,83,0), var(--sage-dark)); }
.show-full-intention { color: #fff; background: transparent; }

#hours {
  float: none;
  width: auto;
  margin: 0;
  padding: 34px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid rgba(86,116,105,.12);
  border-radius: 24px;
  box-shadow: var(--shadow);
}
.hours-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}
.eyebrow {
  color: var(--clay);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hours-heading h2 { margin: 5px 0 7px; font-size: 28px; }
.hours-heading p { max-width: 530px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.hours-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 14px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.hours-legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend-dot { width: 9px; height: 9px; border: 1px solid var(--line); border-radius: 50%; }
.legend-dot.available { background: #fff; }
.legend-dot.reserved { background: var(--sage); border-color: var(--sage); }
.legend-dot.yours { background: var(--clay); border-color: var(--clay); }
.hours-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.hours-grid form { margin: 0; }
#hours .time {
  float: none;
  width: 100%;
  min-height: 46px;
  height: auto;
  margin: 0;
  padding: 0;
  color: var(--ink);
  line-height: 1;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 13px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
#hours .time span, #hours .time-double span { display: block; padding: 14px 3px; }
#hours .time:hover {
  z-index: 2;
  border-color: #9aafa6;
  box-shadow: 0 6px 15px rgba(63,94,83,.12);
  transform: translateY(-2px);
}
#hours .time.reserved { color: #fff; background: var(--sage); border-color: var(--sage); }
#hours .time.user-reserved { color: #fff; background: var(--clay); border-color: var(--clay); }
#hours .reserved span, #hours .user-reserved span { color: inherit; background: transparent; border-radius: 0; }

.panel {
  overflow: hidden;
  margin-bottom: 24px;
  background: var(--surface);
  border: 1px solid rgba(86,116,105,.12);
  border-radius: 20px;
  box-shadow: var(--soft-shadow);
}
.panel .panel-heading,
.panel-default > .panel-heading {
  padding: 24px 26px 14px;
  color: var(--ink);
  background: var(--surface);
  border: 0;
  font-size: 22px;
  font-weight: 600;
}
.panel-body { padding: 18px 26px 28px; }
.panel-body p { line-height: 1.75; }
.panel-body img { border-radius: 12px; }
.panel blockquote { color: var(--sage-dark); border-left-color: var(--clay-pale); }

.form-control {
  height: 44px;
  color: var(--ink);
  background: #fff;
  border: 1px solid #d6d8d1;
  border-radius: 11px;
  box-shadow: none;
}
textarea.form-control { height: auto; }
.form-control:focus { border-color: #8da59b; box-shadow: 0 0 0 3px rgba(86,116,105,.1); }
.help-block { color: var(--muted); }
.btn { border-radius: 999px; font-weight: 600; transition: transform .16s ease, box-shadow .16s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary, .btn-success { color: #fff; background: var(--sage); border-color: var(--sage); }
.btn-primary:hover, .btn-success:hover, .btn-primary:focus, .btn-success:focus { background: var(--sage-dark); border-color: var(--sage-dark); box-shadow: 0 5px 13px rgba(63,94,83,.2); }
.modal-content { overflow: hidden; border: 0; border-radius: 20px; box-shadow: var(--shadow); }
.modal-header { padding: 22px 24px; background: var(--paper); border-bottom-color: var(--line); }
.modal-body { padding: 24px; color: var(--ink); line-height: 1.75; }

#login-dp { margin-top: 4px; color: var(--ink); border: 0; border-radius: 14px; box-shadow: var(--shadow); }
#login-dp a { color: var(--sage-dark); }
#login-dp .bottom { background: var(--paper); border-color: var(--line); }

.list-group-item { color: var(--ink); border-color: var(--line); }
.list-group-item:first-child { border-radius: 12px 12px 0 0; }
.list-group-item:last-child { border-radius: 0 0 12px 12px; }

footer { margin: 20px auto 0; padding: 24px 15px 34px; color: var(--muted); }
footer a { color: var(--sage-dark); }

@media (max-width: 991px) {
  .navbar > .container { display: block; }
  .navbar-account { align-items: flex-start; flex-wrap: wrap; padding: 8px 0 16px; }
  .chain-layout { grid-template-columns: 1fr; }
  #info { display: grid; grid-template-columns: .8fr 1fr; gap: 30px; }
  #logo { grid-column: 1 / -1; margin-bottom: 0; }
  #now { border-right: 1px solid rgba(255,255,255,.16); border-bottom: 0; padding: 0 30px 0 0; }
  #intention { margin: 0; }
  .hours-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  body { font-size: 14px; }
  #main { position: relative; }
  .navbar > .container { min-height: 64px; }
  .navbar { min-height: 64px; }
  .navbar-header { min-height: 64px; }
  .navbar-brand { height: 64px; font-size: 17px; }
  .navbar-brand img { width: 38px; height: 38px; }
  .navbar-collapse { margin: 0 -15px; padding: 0 20px 16px; background: var(--sage-dark); border: 0; box-shadow: none; }
  .navbar-nav > li > a { padding: 12px; border-radius: 10px; }
  .navbar-account { display: block; }
  .navbar-account .navbar-text { margin-left: 12px; }
  .navbar-account .btn { margin: 4px; }
  #app, #static-app { padding-top: 22px; }
  #calendar { margin-bottom: 16px; overflow-x: auto; padding-bottom: 4px; }
  #calendar ul { min-width: 650px; }
  #calendar li.inactive { display: block; }
  #info { display: block; padding: 28px 24px; border-radius: 19px; }
  #logo { margin-bottom: 24px; }
  #now { padding: 0 0 22px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.16); }
  #intention { margin-top: 22px; }
  #hours { padding: 25px 20px; border-radius: 19px; }
  .hours-heading { display: block; margin-bottom: 22px; }
  .hours-heading h2 { font-size: 24px; }
  .hours-legend { justify-content: flex-start; margin-top: 16px; }
  .hours-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  #hours .time { min-height: 44px; }
  .panel .panel-heading, .panel-default > .panel-heading { padding: 20px 20px 10px; font-size: 20px; }
  .panel-body { padding: 14px 20px 23px; }
}

@media (max-width: 380px) {
  .navbar-brand span { display: none; }
  .hours-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}