/* ==========================================================================
   LP DIARY — SHARED SITE THEME
   One stylesheet, reused on every page. Edit the variables in :root to
   re-skin the whole site (colors, fonts, spacing) without touching markup.
   Include AFTER bootstrap.min.css and BEFORE any page-specific style.css.
   ========================================================================== */

:root{
  /* --- Colors --- */
  --lp-bg:             #202c3d;   /* page background */
  --lp-bg-elevated:    #151b23;   /* header/footer/cards */
  --lp-bg-elevated-2:  #1c232d;   /* hover / nested surfaces */
  --lp-border:         #5f6a73;

  --lp-text:           #e6edf3;
  --lp-text-muted:     #d5dce6;
  --lp-text-faint:     #5b6472;

  --lp-green:          #2ecc71;  /* proceed / primary accent */
  --lp-green-dim:      #1f8a4d;
  --lp-amber:          #f5a623;  /* caution / secondary accent */
  --lp-red:            #e5484d;  /* stop / danger, use sparingly */

  /* --- Typography --- */
  --lp-font-heading: 'Poppins', 'Segoe UI', sans-serif;
  --lp-font-body:    'Inter', 'Segoe UI', sans-serif;

  /* --- Layout --- */
  --lp-radius:        12px;
  --lp-radius-sm:      8px;
  --lp-container:   1140px;
  --lp-header-h:      64px;
  --lp-shadow: 0 4px 18px rgba(0,0,0,0.35);
}

/* ---------- Base ---------- */
html{scroll-behavior:smooth;}
body{
  background:var(--lp-bg) !important;
  color:var(--lp-text) !important;
  font-family:var(--lp-font-body);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
main, .lp-main{flex:1 0 auto;}

h1,h2,h3,h4,h5,h6{
  font-family:var(--lp-font-heading);
  font-weight:600;
  letter-spacing:0.01em;
  color:var(--lp-text);
}

a{color:var(--lp-green); text-decoration:none;}
a:hover{color:#54e08f;}

.lp-container{
  max-width:var(--lp-container);
  margin:0 auto;
  padding:0 20px;
}

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.lp-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:var(--lp-bg-elevated);
  border-bottom:1px solid var(--lp-border);
  box-shadow:var(--lp-shadow);
}
.lp-header .navbar{
  min-height:var(--lp-header-h);
  padding:8px 0;
}
.lp-brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none !important;
}
.lp-brand-lamp{
  width:14px; height:14px; border-radius:50%;
  background:var(--lp-green);
  box-shadow:0 0 10px var(--lp-green);
  flex:none;
}
.lp-brand-text{
  display:flex; flex-direction:column; line-height:1.1;
}
.lp-brand-text .name{
  font-family:var(--lp-font-heading);
  font-weight:700;
  font-size:18px;
  color:var(--lp-text);
  letter-spacing:0.02em;
}
.lp-brand-text .tagline{
  font-size:10.5px;
  color:var(--lp-text-faint);
  letter-spacing:0.04em;
  text-transform:uppercase;
}

.lp-header .navbar-toggler{
  border-color:var(--lp-border);
}
.lp-header .navbar-toggler-icon{
  filter:invert(1) grayscale(1) brightness(1.6);
}

.lp-header .nav-link{
  color:var(--lp-text-muted) !important;
  font-weight:500;
  font-size:14.5px;
  padding:8px 14px !important;
  border-radius:var(--lp-radius-sm);
  transition:color .15s, background .15s;
}
.lp-header .nav-link:hover{
  color:var(--lp-text) !important;
  background:var(--lp-bg-elevated-2);
}
.lp-header .nav-link.active{
  color:var(--lp-text) !important;
}
.lp-header .nav-item > .nav-link.active{
  position:relative;
}
.lp-header .nav-item > .nav-link.active::after{
  content:"";
  position:absolute;
  left:14px; right:14px; bottom:2px;
  height:2px;
  background:var(--lp-green);
  border-radius:2px;
}

.lp-header .dropdown-menu{
  background:var(--lp-bg-elevated-2);
  border:1px solid var(--lp-border);
  border-radius:var(--lp-radius-sm);
  padding:6px;
}
.lp-header .dropdown-item{
  color:var(--lp-text-muted);
  border-radius:6px;
  font-size:14px;
  padding:8px 12px;
}
.lp-header .dropdown-item:hover, .lp-header .dropdown-item:focus{
  background:rgba(46,204,113,0.12);
  color:var(--lp-text);
}

/* ==========================================================================
   PAGE HERO (optional, use on any page)
   ========================================================================== */
.lp-hero{
  padding:48px 20px;
  text-align:center;
  border-bottom:0px solid var(--lp-border);
  background:
    radial-gradient(700px 260px at 50% -20%, rgba(46,4,113,0.08), transparent 60%),
    var(--lp-bg);
}
.lp-hero h1{
  font-size:clamp(22px, 4vw, 34px);
  margin:0 0 8px;
}
.lp-hero p{
  color:var(--lp-text-muted);
  max-width:560px;
  margin:0 auto;
  font-size:15px;
}

/* ==========================================================================
   CARDS / SERVICE GRID (reusable everywhere)
   ========================================================================== */
.lp-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:18px;
  padding:36px 0;
}
.lp-card{
  display:block;
  background:var(--lp-bg-elevated);
  border:1px solid var(--lp-border);
  border-radius:var(--lp-radius);
  padding:22px;
  text-decoration:none !important;
  transition:transform .15s, border-color .15s, background .15s;
}
.lp-card:hover{
  transform:translateY(-3px);
  border-color:var(--lp-green-dim);
  background:var(--lp-bg-elevated-2);
}
.lp-card h3{
  font-size:16px;
  margin:0 0 8px;
  color:var(--lp-text);
  display:flex; align-items:center; gap:8px;
}
.lp-card h3::before{
  content:"";
  width:8px; height:8px; border-radius:50%;
  background:var(--lp-green);
  box-shadow:0 0 8px var(--lp-green);
  flex:none;
}
.lp-card p{
  font-size:13.5px;
  color:var(--lp-text-muted);
  margin:0;
  line-height:1.5;
}

/* generic content section wrapper for inner pages */
.lp-section{padding:32px 0;}
.lp-section h2{
  font-size:20px;
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:1px solid var(--lp-border);
}

/* ==========================================================================
   BUTTONS (signal-colored)
   ========================================================================== */
.lp-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 18px;
  border-radius:var(--lp-radius-sm);
  font-weight:600;
  font-size:14px;
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none !important;
  transition:filter .15s, transform .1s;
}
.lp-btn:active{transform:translateY(1px);}
.lp-btn-go{background:var(--lp-green); color:#04170c !important;}
.lp-btn-caution{background:var(--lp-amber); color:#241800 !important;}
.lp-btn-stop{background:var(--lp-red); color:#2a0505 !important;}
.lp-btn-outline{
  background:transparent; color:var(--lp-text) !important;
  border-color:var(--lp-border);
}
.lp-btn:hover{filter:brightness(1.08);}

/* ==========================================================================
   FOOTER (collapsible)
   ========================================================================== */
.lp-footer{
  margin-top:auto;
  background:var(--lp-bg-elevated);
  border-top:1px solid var(--lp-border);
  font-size:13px;
  color:var(--lp-text-muted);
}
.lp-footer-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 20px;
  max-width:var(--lp-container);
  margin:0 auto;
}
.lp-footer-credit{
  display:flex; align-items:center; gap:8px;
}
.lp-footer-credit .lamp-mini{
  width:8px; height:8px; border-radius:50%;
  background:var(--lp-green);
  box-shadow:0 0 6px var(--lp-green);
}
.lp-footer-toggle{
  background:none;
  border:1px solid var(--lp-border);
  color:var(--lp-text-muted);
  border-radius:20px;
  padding:4px 12px;
  font-size:12px;
  display:flex; align-items:center; gap:6px;
  cursor:pointer;
}
.lp-footer-toggle:hover{color:var(--lp-text); border-color:var(--lp-green-dim);}
.lp-footer-toggle .chev{
  display:inline-block;
  transition:transform .2s;
  font-size:10px;
}
.lp-footer-toggle[aria-expanded="true"] .chev{transform:rotate(180deg);}

.lp-footer-more{
  border-top:1px solid var(--lp-border);
}
.lp-footer-more-inner{
  max-width:var(--lp-container);
  margin:0 auto;
  padding:16px 20px 20px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px,1fr));
  gap:18px;
}
.lp-footer-more-inner h6{
  font-family:var(--lp-font-heading);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--lp-text-faint);
  margin-bottom:8px;
}
.lp-footer-more-inner a{
  display:block;
  color:var(--lp-text-muted);
  font-size:13px;
  margin-bottom:6px;
}
.lp-footer-more-inner a:hover{color:var(--lp-green);}
.lp-footer-more-inner p{margin:0; font-size:12.5px; line-height:1.6;}

@media (max-width:576px){
  .lp-footer-bar{flex-direction:column; align-items:flex-start; gap:8px;}
}

/* For a dedicated marquee.css, loaded site-wide */
.lp-marquee {
  --mq-speed: 20s;
  --mq-bg: var(--lp-surface, #12181f);
  --mq-accent: var(--lp-accent, #e0a13c);
  --mq-text: var(--lp-text, #e8e8e8);

  display: flex;
  align-items: center;
  background: var(--mq-bg);
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
}

.lp-marquee__label {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1rem;
  background: var(--mq-accent);
  color: #1a1a1a;
  font-weight: 600;
  font-size: .85rem;
  white-space: nowrap;
}

.lp-marquee__track-wrap {
  flex: 1 1 auto;
  overflow: hidden;
  position: relative;
}

.lp-marquee__track {
  display: flex;
  width: max-content;
  animation: lp-marquee-scroll var(--mq-speed) linear infinite;
}

.lp-marquee__track-wrap:hover .lp-marquee__track {
  animation-play-state: paused;
}

.lp-marquee__item {
  color: var(--mq-text);
  text-decoration: none;
  font-size: .85rem;
  white-space: nowrap;
  padding: .5rem 2rem;
  border-right: 1px solid rgba(255,255,255,0.12);
}

.lp-marquee__item:hover {
  color: var(--mq-accent);
  text-decoration: underline;
}

@keyframes lp-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
  .lp-marquee__track {
    animation: none;
    overflow-x: auto;
  }
}

/* Stack label on very small screens */
@media (max-width: 480px) {
  .lp-marquee { flex-direction: column; align-items: stretch; }
}



/* ---- Home: Latest circulars & updates (append to assets/css/theme.css) ---- */
.lp-latest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.lp-latest-panel {
  display: flex;
  flex-direction: column;
  padding: 18px;
  border-radius: 14px;
  border: 1px solid var(--lp-border, rgba(255,255,255,.18));
  background: var(--lp-card-bg, #161b22);
}

.lp-latest-panel h3 {
  margin: 0 0 12px;
  font-size: 1.05rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lp-latest-panel h3::before {           /* same green dot as the cards */
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lp-accent, #22c55e);
  flex: none;
}

.lp-latest-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  flex: 1;                               /* pushes the button to the bottom */
}
.lp-latest-list li + li {
  border-top: 1px solid var(--lp-border, rgba(255,255,255,.12));
}
.lp-latest-list a {
  display: block;
  padding: 10px 0;
  color: inherit;
  text-decoration: none;
}
.lp-latest-list a:hover .lp-latest-title,
.lp-latest-list a:focus-visible .lp-latest-title {
  color: var(--lp-accent, #22c55e);
}
.lp-latest-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;                 /* long titles stay on 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: .95rem;
  line-height: 1.25;
}
.lp-latest-date {
  display: block;
  margin-top: 3px;
  font-size: .70rem;
  color: inherit;
  opacity: .6;
}
.lp-latest-empty {
  flex: 1;
  margin: 0 0 16px;
  opacity: .6;
  font-size: .9rem;
}

.lp-latest-btn {
  align-self: flex-start;
  padding: 7px 18px;
  border-radius: 8px;
  border: 1px solid var(--lp-accent, #22c55e);
  color: var(--lp-accent, #22c55e);
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.lp-latest-btn:hover,
.lp-latest-btn:focus-visible {
  background: var(--lp-accent, #22c55e);
  color: #0b1017;
}

@media (max-width: 991px) {
  .lp-latest-grid { grid-template-columns: 1fr; }
}