/* =========================
   Legacy Labor Brand System
   ========================= */
:root{
  --fg:#2d3313;         /* Forest Green (text) */
  --g2:#5b6432;         /* Military Olive */
  --g3:#899259;         /* Moss */
  --bg:#f6f7f3;
  --card:#ffffff;
  --muted:#6b6e60;
  --danger:#9b2c2c;

  --radius:16px;
  --shadow:0 8px 22px rgba(0,0,0,.08);
  --focus:0 0 0 3px rgba(137,146,89,0.35);

  --maxw:960px;
}

/* Reset-ish */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;height:auto;display:block}

/* Base */
body{
  background:var(--bg);
  color:var(--fg);
  font:16px/1.5 system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--g2);text-decoration:none;word-break:break-word}
a:hover{text-decoration:underline}
.mono{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace}

/* Layout containers */
.container{max-width:var(--maxw);margin:0 auto;padding:0 16px}
.page-header{padding:28px 0 8px;background:linear-gradient(180deg, #eef0e6, transparent)}
.page-header h1{margin:0;font-size:clamp(22px,3.8vw,34px);letter-spacing:.2px}
.page-header .subhead{margin:.5rem 0 0;color:var(--muted);max-width:62ch}

.page-footer{padding:16px 0 24px}
.tiny{font-size:12px}
.small{font-size:14px}

/* Cards */
.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px 16px;
  margin:18px 0;
}
.card-tight{padding:16px 14px}
.card-title{margin:.2rem 0 1rem}

/* Form */
.field .label{display:block;margin-bottom:6px;font-weight:600}
input,select,textarea{
  width:100%;
  padding:12px 12px;
  border:1px solid #dfe3d3;
  border-radius:12px;
  background:#fff;
  color:var(--fg);
  font-size:16px;
}
input:focus,select:focus,textarea:focus{outline:0;box-shadow:var(--focus);border-color:var(--g3)}
textarea{resize:vertical}

/* Grid (mobile-first) */
.grid{display:grid;gap:12px}
.grid-2{grid-template-columns:1fr}
.grid-span-2{grid-column:1 / -1}

@media (min-width:640px){
  .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Buttons */
.actions{display:flex;gap:10px;align-items:center;justify-content:flex-start}
.actions.wrap{flex-wrap:wrap}
.mt-10{margin-top:10px}

.btn{
  border:0;border-radius:999px;padding:10px 16px;cursor:pointer;font-weight:700;
  background:#e9ecd9;color:var(--fg);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;
}
.btn:hover{filter:brightness(0.98)}
.btn:focus{outline:0;box-shadow:var(--focus)}
.btn-primary{background:var(--g2);color:#fff}
.btn-primary:hover{filter:brightness(0.95)}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{filter:brightness(0.95)}

/* Links output */
.link-row{
  display:flex;gap:12px;align-items:flex-start;justify-content:space-between;
  padding:12px 0;border-top:1px solid #eef0e4;
}
.link-row:first-of-type{border-top:0}
.link-col{min-width:0} /* allow text to wrap nicely */
.link-clip{display:inline-block;max-width:100%;overflow-wrap:anywhere}

.note{margin-top:8px;color:var(--muted)}
.muted{color:var(--muted)}

/* Table (for admin page, but safe to keep here) */
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:10px;border-bottom:1px solid #eef0e4;vertical-align:top}
th{text-align:left;background:#f4f6ea;position:sticky;top:0}

/* Stars (for rate page — kept consistent) */
.stars{display:flex;gap:8px;font-size:28px}
.star{
  background:#fff;border:1px solid #dfe3d3;border-radius:12px;padding:6px 10px;line-height:1;
}
.star.on{background:#fff6bf;border-color:#f1d36b;color:#b58900}

/* Utilities */
.center{text-align:center}
.hidden{display:none !important}

/* Bigger brand logo (overrides) */
:root{
  --brand-logo: url("assets/LL_Logo_Color_RGB3.png");
  --brand-logo-size-mobile: 56px;  /* was 40px */
  --brand-logo-size-desktop: 72px; /* was 48px */
}

.page-header .container{
  display:flex;
  align-items:center;
  gap:16px;                 /* add a little breathing room next to the logo */
  flex-wrap:wrap;
}

/* the decorative logo before the header content */
.page-header .container::before{
  content:"";
  display:inline-block;
  width:var(--brand-logo-size-mobile);
  height:var(--brand-logo-size-mobile);
  background: var(--brand-logo) no-repeat center / contain;
  flex:0 0 auto;
}

@media (min-width:768px){
  .page-header .container::before{
    width:var(--brand-logo-size-desktop);
    height:var(--brand-logo-size-desktop);
  }
}