/*
Theme Name: Notice Board
Description: A very simple theme that shows every post as a pinned notice on a cork board.
Version: 1.0
Author: Agriedu4u
Text Domain: notice-board
*/

:root{
  --cork:#b98a57;
  --cork-dark:#8f6a3f;
  --wood:#5a3b22;
  --ink:#2b2118;
  --paper-yellow:#fff3a8;
  --paper-white:#fffdf7;
  --paper-blue:#cfe8ff;
  --paper-pink:#ffd6dc;
  --paper-green:#d3f0c4;
  --pin:#d63a2f;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans","Noto Sans Malayalam",Arial,sans-serif;
  line-height:1.6;
  background-color:var(--cork);
  background-image:
    radial-gradient(rgba(70,40,10,.28) 1px,transparent 1.5px),
    radial-gradient(rgba(255,235,200,.22) 1px,transparent 1.5px),
    radial-gradient(rgba(70,40,10,.18) 2px,transparent 2.5px);
  background-size:19px 19px,27px 27px,41px 41px;
  background-position:0 0,9px 13px,5px 21px;
}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}

/* Header */
.site-head{
  background:var(--wood);
  color:#fff;
  border-bottom:6px solid #3d2814;
  box-shadow:0 6px 14px rgba(0,0,0,.3);
}
.site-head .wrap{padding-top:22px;padding-bottom:18px}
.site-title{margin:0;font-size:clamp(1.5rem,4vw,2.2rem);line-height:1.2}
.site-title a{text-decoration:none}
.site-desc{margin:4px 0 0;opacity:.85;font-size:.95rem}
.top-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.search-form{display:flex;gap:6px}
.search-form input[type=search]{
  padding:8px 12px;border:0;border-radius:6px;min-width:0;width:200px;font-size:.95rem;
}
.search-form button{
  padding:8px 14px;border:0;border-radius:6px;background:var(--paper-yellow);color:var(--ink);
  font-weight:600;cursor:pointer;
}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chips a{
  text-decoration:none;padding:6px 14px;border-radius:999px;
  background:rgba(255,255,255,.14);color:#fff;font-size:.95rem;
}
.chips a:hover{background:rgba(255,255,255,.28)}
.chips a.on{background:var(--paper-yellow);color:var(--ink);font-weight:600}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #1b6ef3;outline-offset:2px}

/* Board */
.board-wrap{padding:30px 0 50px}
.board-title{
  display:inline-block;margin:0 0 24px;padding:8px 16px;
  background:var(--paper-white);border-radius:4px;font-size:1.15rem;
  box-shadow:0 3px 6px rgba(0,0,0,.25);
}
.board{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:34px 26px;
  padding:6px 4px 10px;
}

/* A single notice */
.notice{
  position:relative;
  display:flex;flex-direction:column;
  min-height:220px;
  padding:30px 20px 18px;
  background:var(--paper-yellow);
  box-shadow:0 2px 3px rgba(0,0,0,.2),0 10px 18px rgba(0,0,0,.2);
  transform:rotate(-1.2deg);
  transition:transform .2s ease,box-shadow .2s ease;
}
.notice:nth-child(3n+2){transform:rotate(.9deg)}
.notice:nth-child(3n){transform:rotate(-.4deg)}
.notice:hover,.notice:focus-within{
  transform:rotate(0) translateY(-5px);
  box-shadow:0 4px 6px rgba(0,0,0,.2),0 16px 26px rgba(0,0,0,.28);
  z-index:2;
}
.notice.n1{background:var(--paper-white)}
.notice.n2{background:var(--paper-blue)}
.notice.n3{background:var(--paper-pink)}
.notice.n4{background:var(--paper-green)}

.pin{
  position:absolute;top:-10px;left:50%;margin-left:-11px;
  width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ff9d94 0,var(--pin) 45%,#8f1d15 100%);
  box-shadow:0 4px 5px rgba(0,0,0,.4);
}
.notice:nth-child(3n+2) .pin{background:radial-gradient(circle at 35% 30%,#a9cbff 0,#2e6fe0 45%,#17376f 100%)}
.notice:nth-child(3n) .pin{background:radial-gradient(circle at 35% 30%,#b9f0b0 0,#2f9e44 45%,#17501f 100%)}

.notice .tag{
  align-self:flex-start;margin-bottom:8px;padding:2px 10px;border-radius:4px;
  background:rgba(0,0,0,.09);font-size:.8rem;font-weight:600;
}
.notice h2{margin:0 0 6px;font-size:1.15rem;line-height:1.35}
.notice h2 a{text-decoration:none}
.notice h2 a::after{content:"";position:absolute;inset:0}
.notice .date{margin:0 0 10px;font-size:.85rem;opacity:.7}
.notice .excerpt{flex:1;font-size:.95rem}
.notice .excerpt p{margin:0}
.notice .more{
  margin-top:14px;padding-top:10px;border-top:1px dashed rgba(0,0,0,.3);
  font-weight:600;font-size:.9rem;
}

/* Single notice page */
.paper{
  position:relative;
  max-width:820px;margin:34px auto 50px;padding:44px 34px 34px;
  background:var(--paper-white);
  box-shadow:0 3px 5px rgba(0,0,0,.2),0 16px 30px rgba(0,0,0,.28);
}
.paper .pin{top:-12px}
.paper h1{margin:6px 0 6px;font-size:clamp(1.5rem,4vw,2.1rem);line-height:1.25}
.paper .meta{margin:0 0 22px;font-size:.9rem;opacity:.7}
.paper .tag{display:inline-block;margin-bottom:6px;padding:2px 10px;border-radius:4px;background:var(--paper-yellow);font-size:.8rem;font-weight:600}
.paper .tag a{text-decoration:none}
.entry{font-size:1.05rem;overflow-wrap:break-word}
.entry h2,.entry h3{line-height:1.3}
.entry img{max-width:100%;height:auto}
.entry table{width:100%;border-collapse:collapse;display:block;overflow-x:auto}
.entry th,.entry td{border:1px solid #d8d0bd;padding:8px 10px;text-align:left}
.entry th{background:var(--paper-yellow)}
.entry a{color:#0b57d0}
.back{
  display:inline-block;margin-top:26px;padding:8px 16px;border-radius:6px;
  background:var(--wood);color:#fff;text-decoration:none;font-weight:600;
}
.post-nav{display:flex;justify-content:space-between;gap:16px;margin-top:22px;font-size:.95rem}
.post-nav a{text-decoration:none;font-weight:600}

/* Pagination */
.pagination{margin-top:36px}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pagination a,.pagination span.current{
  padding:8px 14px;border-radius:6px;text-decoration:none;font-weight:600;
  background:var(--paper-white);box-shadow:0 2px 4px rgba(0,0,0,.25);
}
.pagination span.current{background:var(--paper-yellow)}

.empty{padding:30px;background:var(--paper-white);max-width:520px;box-shadow:0 8px 16px rgba(0,0,0,.25)}
.ad-slot{margin:0 auto 26px;text-align:center}
.site-foot{background:var(--wood);color:#f3e7d8;text-align:center;padding:18px 20px;font-size:.9rem;border-top:6px solid #3d2814}

@media (max-width:520px){
  .board{grid-template-columns:1fr}
  .paper{padding:40px 20px 26px;margin-left:10px;margin-right:10px}
  .search-form,.search-form input[type=search]{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .notice{transition:none}
  .notice:hover,.notice:focus-within{transform:none}
}

.screen-reader-text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}