/* public-theme.css — Retro (brick) theme with image fallback + print tweaks */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Crimson+Text:wght@400;600&display=swap');

:root{
  --cream:#f7efe3;        /* background */
  --paper:#fff8ef;        /* menu card */
  --text:#2b2119;         /* dark brown text */
  --muted:#6e5d4d;        /* secondary text */
  --brick:#a64837;        /* brick red */
  --brick-dark:#7f3529;   /* darker brick */
  --wood:#6a3f29;         /* title color */
  --moss:#2e6e3a;         /* price color */
  --border:#e2d6c9;       /* paper border */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--cream);color:var(--text)}
body{
  font-family:'Crimson Text', Georgia, 'Times New Roman', serif;
  font-size:18px; line-height:1.35;
}
.wrap{max-width:880px;margin:auto;padding:14px}

.card-paper{
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 12px 26px rgba(0,0,0,.06);
  padding:18px;
  /* subtle paper grain */
  background-image:
    radial-gradient(rgba(0,0,0,.03) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,.02) 1px, transparent 1px);
  background-size: 22px 22px, 18px 18px;
  background-position: 0 0, 10px 8px;
}

h1,h2,h3,h4{
  margin:0 0 .6rem 0;
  font-family:'Playfair Display', serif;
  color:var(--wood);
  text-shadow:0 1px 0 rgba(255,255,255,.65); /* light letterpress */
}
h1{font-size:2rem; letter-spacing:.5px}
h4{font-size:1.05rem; letter-spacing:.2px; text-transform:uppercase; color:var(--brick-dark)}

.meta{color:var(--muted); font-size:.95rem}
.small-note{font-size:.97rem; color:var(--muted)}
.section{margin-top:1.4rem}

/* Section ornament */
.section h4{
  border-bottom:1px dashed #d5c7b6;
  padding-bottom:.35rem;
  position:relative;
}
.section h4::after{
  content:"⁂";
  position:absolute; right:0; bottom:-.9rem;
  font-family:'Playfair Display', serif;
  color:#b08a6b; font-size:.95rem;
}

/* Dotted leaders */
.leaders{padding:0; list-style:none; margin:0}
.leaders li{display:flex; gap:.5rem; align-items:baseline; padding:.2rem 0}
.leaders li .name{flex:1 1 auto; position:relative}
.leaders li .name:after{
  content:''; position:absolute; left:0; right:0; bottom:.35rem;
  border-bottom:2px dotted #c9b9a6; opacity:.85; z-index:0
}
.leaders li .name span{
  background:var(--paper); position:relative; z-index:1; padding:0 .35rem 0 0
}
.leaders li .price{
  white-space:nowrap; font-weight:600; color:var(--moss);
  font-feature-settings: 'tnum' 1; letter-spacing:.4px;
}

/* BRICK header/footer: image + CSS fallback (so bricks show even if image missing) */
.bricks{
  --mortar:#e9dfd2;
  height:140px; position:relative; border-bottom:3px solid var(--brick-dark);

  /* Layer 1: relief */
  background:
    linear-gradient(0deg, rgba(0,0,0,.12), rgba(0,0,0,0)) 0 0/100% 100%,

    /* Layer 2: image tile (if available) */
    url('brick.jpg') center/220px auto repeat,

    /* Layer 3: CSS bricks row A */
    repeating-linear-gradient(90deg,
      var(--brick) 0 130px, var(--mortar) 130px 142px),

    /* Layer 4: CSS bricks row B (offset) */
    repeating-linear-gradient(90deg,
      var(--brick) 65px 195px, var(--mortar) 195px 207px);

  background-size:
    100% 100%,
    220px auto,
    auto 55px,
    auto 55px;
  background-position:
    0 0,
    center center,
    0 0,
    0 27.5px; /* half-height offset */

  box-shadow: inset 0 -8px 18px rgba(0,0,0,.08);
}
.bricks.top{
  transform: scaleY(-1);
  border-top: 3px solid var(--brick-dark);
  border-bottom: none;
}
.bricks .title{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:var(--paper); padding:.5rem 1rem; border:1px solid var(--border);
  border-radius:12px; box-shadow:0 8px 18px rgba(0,0,0,.08);
  font-family:'Playfair Display', serif; font-size:1.1rem; letter-spacing:.3px; color:var(--wood);
}
.footer-note{
  display:flex;gap:.6rem;align-items:center;justify-content:center;
  color:#fff;font-weight:700;text-shadow:0 1px 0 rgba(0,0,0,.25)
}
.footer-note small{opacity:.95}

/* Divider */
hr.sep{border:0;border-top:1px dashed var(--border);margin:1rem 0}

/* Print-friendly */
@media print{
  .bricks, .title, .footer-note { display:none !important; }
  body{ background:#fff; color:#000; }
  .card-paper{ box-shadow:none; border:none; background:#fff; }
}

/* Responsive */
@media (max-width:560px){
  body{font-size:17px}
  .bricks{height:110px; background-size: 100% 100%, 180px auto, auto 55px, auto 55px}
  h1{font-size:1.6rem}
}

/* odstrani morebitne robove/borderje in skrije temne robove slike */
.bricks,
.bricks.top{
  border: 0 !important;
  box-shadow: inset 0 -6px 16px rgba(0,0,0,.08) !important; /* mehka senca, brez črne črte */
}

/* premakni “šiv” slike proč od vrha/spodaj (če je črn trak v sami sliki) */
.bricks{
  background-position:
    0 0,                /* relief */
    center 8px,         /* brick.jpg – malo potisni navzdol */
    0 0,                /* CSS row A */
    0 27.5px !important;/* CSS row B */
}

/* varnostna maska: prekrij 6px na vrhu in spodaj v barvi ozadja */
.bricks::before,
.bricks::after{
  content:"";
  position:absolute; left:0; right:0; height:6px; pointer-events:none;
  background: var(--cream);            /* enaka kot stran */
}
.bricks::before{ top:-1px; }
.bricks::after { bottom:-1px; }
.bricks{ height:95px !important; }
@media (max-width:560px){ .bricks{ height:50px !important; } }