/*
Theme Name: Endangered Collections
Theme URI: https://endangeredcollections.com
Author: Endangered Collections
Description: Custom "ledger book" archive-styled theme for Endangered Collections. Home, About, Services, Blog and Podcast pages are built as page templates with editable content; Case Files, Services and Podcast Episodes are managed as custom post types in wp-admin.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: endangered-collections
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Lora:ital,wght@0,400;0,500;0,600;1,400&family=Special+Elite&display=swap');

:root{
    --paper: #f2e8d0;
    --paper-2: #ece0c4;
    --rule: #b7c7d3;
    --rule-soft: rgba(120,140,155,0.4);
    --margin-red: #a94b45;
    --ink: #2c2619;
    --ink-soft: #5c5340;
    --ink-faint: #8a8067;
    --kraft: #d3b57f;
    --kraft-dark: #b3924f;
    --kraft-shadow: #7d5f34;
    --metal: #aeb7bd;
    --metal-dark: #7c848a;
    --stamp-green: #4c5d3f;
    --stamp-red: #9c3d36;
    --shadow: rgba(40,32,16,0.28);
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background: #d8c9a6;
    background-image:
      radial-gradient(ellipse at 20% 10%, rgba(255,255,255,0.12), transparent 55%),
      radial-gradient(ellipse at 80% 90%, rgba(0,0,0,0.08), transparent 55%);
    min-height:100vh;
    font-family:'Lora', serif;
    color: var(--ink);
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding: 48px 20px 80px;
  }

  a{color:inherit;}

  /* ---------- Ledger book shell ---------- */
  .ledger-book{
    position:relative;
    width:100%;
    max-width: 900px;
    margin-top: 34px;
  }

  .book-shadow{
    position:absolute;
    inset: 10px -10px -18px 10px;
    background: var(--shadow);
    filter: blur(18px);
    z-index:0;
    border-radius: 2px;
  }

  .page-frame{
    position:relative;
    background: var(--paper);
    border: 1px solid rgba(60,48,24,0.25);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.4) inset,
      0 30px 60px -20px rgba(30,22,10,0.45),
      0 2px 0 var(--paper-2);
    z-index:1;
  }
  .page-frame::after{
    content:"";
    position:absolute; inset:0;
    pointer-events:none;
    box-shadow: inset 0 0 40px rgba(90,70,30,0.18), inset 0 0 3px rgba(40,30,10,0.35);
  }

  /* ---------- Paperclip ---------- */
  .paperclip{
    position:absolute;
    top: -30px;
    left: 34px;
    width: 54px;
    height: 92px;
    z-index: 5;
    transform: rotate(-9deg);
    filter: drop-shadow(2px 4px 3px rgba(20,15,5,0.35));
  }
  .paperclip svg{ width:100%; height:100%; display:block; }

  /* ---------- Tag logo ---------- */
  .tag-logo{
    position:absolute;
    top: -18px;
    left: 108px;
    z-index: 4;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-decoration:none;
    transform: rotate(6deg);
    transition: transform .35s ease;
    cursor:pointer;
  }
  .tag-logo:hover{ transform: rotate(2deg) translateY(-2px); }

  .tag-string{
    width:2px;
    height:16px;
    background: linear-gradient(var(--ink-faint), var(--ink-faint));
    opacity:.55;
  }

  .tag-shape{
    position:relative;
    width: 132px;
    height: 76px;
    background: linear-gradient(160deg, var(--kraft) 0%, var(--kraft-dark) 100%);
    clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 20% 100%, 0% 50%);
    box-shadow: 2px 5px 8px rgba(30,20,5,0.35), inset 0 0 12px rgba(80,55,20,0.25);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding-left: 12px;
  }
  .tag-hole{
    position:absolute;
    left: 16px; top: 50%;
    width: 10px; height:10px;
    border-radius:50%;
    background: var(--paper);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.15);
    transform: translateY(-50%);
  }
  .tag-text-main{
    font-family:'Special Elite', monospace;
    font-size: 12.5px;
    letter-spacing: 0.5px;
    color: var(--ink);
    line-height:1.25;
    text-align:center;
  }
  .tag-text-sub{
    font-family:'Special Elite', monospace;
    font-size: 8.5px;
    color: var(--ink-soft);
    margin-top:3px;
    letter-spacing:1px;
  }

  /* ---------- Right-edge tab index ---------- */
  .tab-index{
    position:absolute;
    top: 92px;
    right: -46px;
    display:flex;
    flex-direction:column;
    gap: 14px;
    z-index: 3;
  }
  .tab-index a{
    font-family:'Special Elite', monospace;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: var(--kraft);
    color: var(--ink);
    border: 1px solid rgba(60,45,15,0.4);
    border-left: none;
    padding: 10px 10px 10px 14px;
    cursor: pointer;
    text-align:left;
    text-decoration:none;
    display:block;
    width: 84px;
    box-shadow: 2px 3px 5px rgba(30,20,5,0.25);
    transition: transform .2s ease, background .2s ease, width .2s ease;
    clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%);
  }
  .tab-index a:hover{ transform: translateX(3px); }
  .tab-index a.active{
    background: var(--paper);
    width: 96px;
    color: var(--stamp-red);
    font-weight: bold;
  }

  /* ---------- Ruled page surface ---------- */
  .page-surface{
    position:relative;
    padding: 74px 46px 56px 84px;
    min-height: 560px;
    background-image: repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 33px,
      var(--rule) 34px
    );
    overflow:hidden;
  }
  .page-surface::before{
    content:"";
    position:absolute;
    top:0; bottom:0;
    left: 54px;
    width: 2px;
    background: var(--margin-red);
    opacity: 0.55;
  }

  .enter{ animation: settle .5s ease; }

  @keyframes settle{
    from{ opacity:0; transform: translateY(8px); }
    to{ opacity:1; transform: translateY(0); }
  }

  /* ---------- Typography ---------- */
  .eyebrow{
    font-family:'Special Elite', monospace;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--stamp-red);
    margin: 0 0 6px;
  }
  h1{
    font-family:'Fraunces', serif;
    font-weight: 600;
    font-size: clamp(32px, 5vw, 50px);
    line-height: 1.05;
    margin: 0 0 16px;
    color: var(--ink);
  }
  h2{
    font-family:'Fraunces', serif;
    font-weight: 600;
    font-size: 26px;
    margin: 0 0 10px;
    color: var(--ink);
  }
  h3{
    font-family:'Fraunces', serif;
    font-weight: 500;
    font-style: italic;
    font-size: 19px;
    margin: 0 0 6px;
    color: var(--ink);
  }
  p{
    font-size: 15.5px;
    line-height: 33px;
    color: var(--ink-soft);
    margin: 0 0 0;
  }
  .lede{
    font-size: 17px;
    line-height: 33px;
    color: var(--ink);
    max-width: 54ch;
  }

  .cta-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top: 30px; }
  .btn{
    font-family:'Special Elite', monospace;
    font-size: 12.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 12px 20px;
    border: 1.5px solid var(--ink);
    background: transparent;
    color: var(--ink);
    cursor:pointer;
    text-decoration:none;
    display:inline-block;
  }
  .btn.solid{
    background: var(--ink);
    color: var(--paper);
  }
  .btn:hover{ background: var(--stamp-red); color:var(--paper); border-color:var(--stamp-red); }

  /* ---------- ledger table rows ---------- */
  .ledger-rows{ margin-top: 34px; }
  .ledger-row{
    display:grid;
    grid-template-columns: 90px 1fr 120px;
    gap: 16px;
    align-items:baseline;
    padding: 11px 0;
    border-bottom: 1px dashed var(--rule-soft);
  }
  .ledger-row:first-child{ padding-top:0; }
  .row-no{ font-family:'Special Elite', monospace; font-size: 12px; color: var(--ink-faint); }
  .row-title{ font-family:'Fraunces', serif; font-size:17px; color:var(--ink); }
  .row-title span{ display:block; font-family:'Lora',serif; font-style:italic; font-size:13px; color:var(--ink-faint); margin-top:2px;}
  .stamp{
    font-family:'Special Elite', monospace;
    font-size: 10.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 8px;
    border: 1.5px solid currentColor;
    transform: rotate(-4deg);
    display:inline-block;
    width:fit-content;
    justify-self:end;
  }
  .stamp.risk,.stamp.at-risk{ color: var(--stamp-red); }
  .stamp.recovered{ color: var(--stamp-green); }
  .stamp.review,.stamp.in-review{ color: var(--ink-soft); }

  /* ---------- generic content blocks ---------- */
  .two-col{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; margin-top: 26px; }
  .card{
    background: rgba(255,255,255,0.25);
    border: 1px solid rgba(60,48,24,0.18);
    padding: 20px 22px;
  }
  .card p{ font-size:14.5px; line-height:26px; }
  .services-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 30px; }
  .service-card{ border-left: 3px solid var(--margin-red); padding-left: 16px; }
  .service-card h3{ margin-bottom:8px; }
  .service-card p{ font-size:14.5px; line-height:26px; }

  .blog-post, .pod-ep{
    padding: 18px 0;
    border-bottom: 1px dashed var(--rule-soft);
  }
  .blog-post{ display:block; text-decoration:none; transition: padding-left .2s ease; }
  .blog-post:hover{ padding-left: 6px; }
  .blog-post:first-child, .pod-ep:first-child{ padding-top: 0; }
  .meta{ font-family:'Special Elite', monospace; font-size: 11px; color: var(--ink-faint); letter-spacing:0.5px; margin-bottom:6px; text-transform:uppercase;}
  .blog-post p, .pod-ep p{ font-size:14.5px; line-height:26px; max-width: 62ch; }
  .read-link{
    display:inline-block;
    margin-top: 8px;
    font-family:'Special Elite', monospace;
    font-size: 11.5px;
    letter-spacing: 0.5px;
    color: var(--stamp-red);
    text-decoration:none;
  }

  /* full post reading view */
  .post-full{ max-width: 66ch; }
  .post-full h1{ margin-top: 10px; }
  .back-link{
    display:inline-block;
    cursor:pointer;
    font-family:'Special Elite', monospace;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 18px;
    text-decoration:none;
  }
  .back-link:hover{ color: var(--stamp-red); }
  .post-full p{ font-size:15.5px; line-height:29px; }
  .post-full p + p{ margin-top:20px; }

  footer.page-footer{
    margin-top: 46px;
    padding-top: 18px;
    border-top: 1px solid var(--rule-soft);
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap: 10px;
  }
  .footer-note{
    font-family:'Special Elite', monospace;
    font-size: 11px;
    color: var(--ink-faint);
    letter-spacing: 0.5px;
  }

  /* ---------- WordPress block-editor content mapping ----------
     Lets page content (Home/About/Services/Podcast lede text) be
     authored in the normal block editor and still match the design:
     - Paragraph block + "eyebrow" custom CSS class -> red eyebrow label
     - Paragraph block + "lede" custom CSS class -> intro paragraph style
     - Columns block -> two-col layout
     - Group block + "card" custom CSS class -> kraft/paper side card
     - Buttons block -> cta-row; Button block -> solid .btn;
       Button block set to "Outline" style -> outline .btn
  ------------------------------------------------------------- */
  .page-surface .wp-block-columns{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; margin-top: 26px; }
  .page-surface .wp-block-column{ margin:0; }
  .page-surface .wp-block-group.card,
  .page-surface .card.wp-block-group,
  .page-surface .wp-block-column.card{
    background: rgba(255,255,255,0.25);
    border: 1px solid rgba(60,48,24,0.18);
    padding: 20px 22px;
  }
  .page-surface .wp-block-group.card p,
  .page-surface .card.wp-block-group p,
  .page-surface .wp-block-column.card p{ font-size:14.5px; line-height:26px; }
  .page-surface .wp-block-buttons{ display:flex; gap:14px; flex-wrap:wrap; margin-top: 30px; }
  .page-surface .wp-block-button__link{
    font-family:'Special Elite', monospace;
    font-size: 12.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 12px 20px !important;
    border: 1.5px solid var(--ink);
    background: var(--ink);
    color: var(--paper) !important;
    border-radius:0 !important;
    text-decoration:none;
  }
  .page-surface .is-style-outline .wp-block-button__link{
    background: transparent;
    color: var(--ink) !important;
  }
  .page-surface .wp-block-button__link:hover{ background: var(--stamp-red); color:var(--paper) !important; border-color:var(--stamp-red); }
  .page-surface .wp-block-heading{ margin:0 0 16px; }
  .page-surface > .enter > p:first-child.eyebrow,
  .page-surface p.eyebrow{ margin:0 0 6px; }

  /* ---------- responsive ---------- */
  @media (max-width: 720px){
    .tab-index{
      position: static;
      flex-direction: row;
      flex-wrap: wrap;
      margin: 0 0 20px 0;
      gap: 8px;
    }
    .tab-index a{ clip-path:none; width:auto; border-left:1px solid rgba(60,45,15,0.4); }
    .tab-index a.active{ width:auto; }
    .page-surface{ padding: 96px 24px 40px 40px; }
    .page-surface::before{ left: 26px; }
    .two-col{ grid-template-columns: 1fr; }
    .page-surface .wp-block-columns{ grid-template-columns: 1fr; }
    .services-grid{ grid-template-columns: 1fr; }
    .ledger-row{ grid-template-columns: 50px 1fr; }
    .ledger-row .stamp{ grid-column: 1 / -1; justify-self:start; margin-top:4px; }
    .tag-logo{ left: 78px; }
  }

  /* admin bar spacing */
  body.admin-bar{ padding-top: 32px; }
  @media screen and (max-width: 782px){
    body.admin-bar{ padding-top: 46px; }
  }