/* Anfa Materials — visual layer.
   The pages are built from inline styles, so this file overrides with !important.
   It changes surface treatment only: radius, depth, hover, table rhythm, focus.
   No content, no copy, no layout structure. */

:root{
  --char:#26231F; --cream:#F2F0EC; --panel:#FFFDFB; --panel2:#F7F5F1;
  --line:#E4DFD6; --line2:#D3CCC1; --ox:#B8501E; --oxl:#C2703F; --muted:#7D766B;
  --sh1:0 1px 2px rgba(38,35,31,.045), 0 1px 1px rgba(38,35,31,.03);
  --sh2:0 4px 14px rgba(38,35,31,.09), 0 1px 3px rgba(38,35,31,.05);
}

body{ background:var(--cream) !important; }
*{ -webkit-tap-highlight-color: transparent; }
a, button, input, textarea, select, [style*="border: 1px solid #d8d3ca"],
a, button, input, textarea, select, [style*="border: 1px solid rgb(216, 211, 202)"]{
  transition: background-color .16s ease, border-color .16s ease, color .16s ease,
              box-shadow .18s ease, transform .18s ease !important;
}

/* ---- cards: hairline rectangles become surfaces with a little depth ---- */
div[style*="border: 1px solid #d8d3ca"],
div[style*="border: 1px solid rgb(216, 211, 202)"]{
  border-radius:4px !important; border-color:var(--line) !important;
  background:var(--panel) !important; box-shadow:var(--sh1) !important;
}
section[style*="grid-template-columns: repeat(3, 1fr)"] > div[style*="border: 1px solid #d8d3ca"]:hover,
section[style*="grid-template-columns: repeat(3, 1fr)"] > div[style*="border: 1px solid rgb(216, 211, 202)"]:hover{
  box-shadow:var(--sh2) !important; border-color:var(--line2) !important; transform:translateY(-2px) !important;
}

/* ---- grade family cards on the home page ---- */
a[href="products.html"][style*="border"]{ border-radius:0 !important; }
a[href="products.html"]:hover{ background:var(--panel2) !important; }

/* ---- buttons ---- */
a[style*="background: #b8501e"], button[style*="background: #b8501e"],
a[style*="background: rgb(184, 80, 30)"], button[style*="background: rgb(184, 80, 30)"]{
  border-radius:3px !important; box-shadow:0 1px 2px rgba(38,35,31,.18) !important;
  letter-spacing:.1em !important;
}
a[style*="background: #b8501e"]:hover, button[style*="background: #b8501e"]:hover,
a[style*="background: rgb(184, 80, 30)"]:hover, button[style*="background: rgb(184, 80, 30)"]:hover{
  background:#A2451A !important; box-shadow:0 3px 10px rgba(184,80,30,.28) !important; transform:translateY(-1px) !important;
}
a[style*="border: 1px solid #5c564c"],
a[style*="border: 1px solid rgb(92, 86, 76)"]{ border-radius:3px !important; }
a[style*="border: 1px solid #5c564c"]:hover,
a[style*="border: 1px solid rgb(92, 86, 76)"]:hover{ background:rgba(242,240,236,.06) !important; }

/* ---- pending chips: less like a rubber stamp ---- */
span[style*="border: 1px dashed #c4bdb1"],
span[style*="border: 1px dashed rgb(196, 189, 177)"]{
  border-radius:999px !important; border-style:solid !important;
  border-color:#DDD5C8 !important; background:#F4F1EA !important;
  color:#8C8478 !important; padding:3px 10px !important;
}

/* ---- phase chips ---- */
span[style*="background: #b8501e"][style*="letter-spacing"],
span[style*="background: rgb(184, 80, 30)"][style*="letter-spacing"]{ border-radius:2px !important; }

/* ---- tables ---- */
table{ border-collapse:separate !important; border-spacing:0 !important; }
thead tr{ background:var(--panel2) !important; }
tbody tr{ transition:background-color .14s ease !important; }
tbody tr:hover{ background:#F5F2EC !important; }
tbody tr:nth-child(even){ background:rgba(38,35,31,.014); }
tbody tr:nth-child(even):hover{ background:#F5F2EC !important; }
td, th{ font-variant-numeric: tabular-nums !important; }

/* ---- inputs ---- */
input[type="text"], textarea{
  border-radius:3px !important; border-color:var(--line2) !important;
  background:var(--panel) !important; box-shadow:inset 0 1px 1px rgba(38,35,31,.03) !important;
}
input[type="text"]:focus, textarea:focus{
  outline:none !important; border-color:var(--oxl) !important;
  box-shadow:0 0 0 3px rgba(184,80,30,.13) !important;
}
select:focus{ outline:2px solid var(--oxl) !important; outline-offset:1px !important; }

/* ---- header ---- */
header[style]{ box-shadow:0 1px 0 rgba(0,0,0,.35) !important; }
header nav a{ padding:4px 2px !important; border-bottom:1px solid transparent !important; }
header nav a:hover{ border-bottom-color:rgba(242,240,236,.45) !important; text-decoration:none !important; }

/* ---- section rules get a mark, so labels stop reading as plain text ---- */
div[style*="border-bottom: 2px solid #26231f"],
div[style*="border-bottom: 2px solid rgb(38, 35, 31)"]{ position:relative !important; }

/* ---- photographs ---- */
img[src*="/photos/"]{ border-radius:3px !important; }
figure img{ box-shadow:var(--sh1) !important; }

/* ---- links ---- */
a[style*="text-transform: uppercase"]:hover{ letter-spacing:.115em !important; }

/* ---- focus visibility for keyboard users ---- */
a:focus-visible, button:focus-visible{ outline:2px solid var(--oxl) !important; outline-offset:2px !important; }

/* ---------------------------------------------------------------- mobile nav */
.anfa-burger{
  display:none; margin-left:auto; background:transparent; border:1px solid #4D4840;
  border-radius:3px; width:40px; height:36px; cursor:pointer; padding:0;
  flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.anfa-burger span{ display:block; width:17px; height:1.5px; background:#F2F0EC; transition:transform .22s ease, opacity .18s ease; }
header.anfa-open .anfa-burger span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
header.anfa-open .anfa-burger span:nth-child(2){ opacity:0; }
header.anfa-open .anfa-burger span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

@media (max-width: 720px){
  .anfa-burger{ display:flex; }
  header .anfa-nav{
    display:none !important; width:100% !important; order:3;
    flex-direction:column !important; align-items:stretch !important;
    gap:0 !important; margin:14px 0 4px !important;
    border-top:1px solid #3B362F; padding-top:6px !important;
  }
  header.anfa-open .anfa-nav{ display:flex !important; }
  header .anfa-nav a{
    padding:13px 2px !important; border-bottom:1px solid #33302A !important;
    font-size:15px !important; letter-spacing:.01em !important;
  }
  header .anfa-lang{ display:none !important; order:4; }
  header.anfa-open .anfa-lang{ display:block !important; width:100% !important; margin-top:12px !important; }
  header > div{ flex-wrap:wrap !important; }

  /* ---- collapsible sections ---- */
  .anfa-acc-head{
    cursor:pointer; position:relative; padding-right:32px !important;
    padding-top:18px !important; margin-top:8px !important;
    border-top:1px solid var(--line) !important; user-select:none;
  }
  .anfa-acc-head::after{
    content:''; position:absolute; right:6px; top:calc(50% + 4px);
    width:8px; height:8px; border-right:1.6px solid var(--muted); border-bottom:1.6px solid var(--muted);
    transform:translateY(-50%) rotate(45deg); transition:transform .2s ease;
  }
  .anfa-acc-head.is-closed::after{ transform:translateY(-50%) rotate(-45deg); }
  .anfa-acc-body{ overflow:hidden; }
  .anfa-acc-body.is-closed{ display:none; }
}

/* ---------------------------------------------------------------- motion */
@media (prefers-reduced-motion: no-preference){
  .anfa-rise{ opacity:0; transform:translateY(14px); }
  .anfa-rise, .anfa-in{ transition:opacity .46s cubic-bezier(.22,.61,.36,1), transform .46s cubic-bezier(.22,.61,.36,1); }
  .anfa-in{ opacity:1 !important; transform:none !important; }
}

/* ---------------------------------------------------------------- rhythm
   The page was one uninterrupted cream field. The dark band breaks it, and
   the grade grid now sits on a lighter panel so the sections read as sections. */
main > div > section[style*="grid-template-columns: repeat(3, 1fr)"] > div{ background:var(--panel) !important; }
main > div > div[style*="grid-template-columns: repeat(3, 1fr)"] a{ background:var(--panel) !important; }
main > div > div[style*="grid-template-columns: repeat(3, 1fr)"] a:hover{ background:#F4F1EB !important; }

/* the stats row in the dark band */
section[style*="background: #26231F"] div[style*="border-left: 1px solid #3B362F"],
section[style*="background: rgb(38, 35, 31)"] div[style*="border-left: 1px solid rgb(59, 54, 47)"]{ border-color:#3B362F !important; }

@media (max-width: 720px){
  section[style*="background: #26231F"],
  section[style*="background: rgb(38, 35, 31)"]{ padding:52px 0 !important; }
  section[style*="background: #26231F"] p[style*="font-size: 25px"],
  section[style*="background: rgb(38, 35, 31)"] p[style*="font-size: 25px"]{ font-size:20px !important; max-width:none !important; }
  section[style*="background: #26231F"] > div,
  section[style*="background: rgb(38, 35, 31)"] > div{ padding-left:20px !important; padding-right:20px !important; }
  section[style*="background: #26231F"] div[style*="font-size: 34px"],
  section[style*="background: rgb(38, 35, 31)"] div[style*="font-size: 34px"]{ font-size:27px !important; }
  section[style*="background: #26231F"] div[style*="border-left"],
  section[style*="background: rgb(38, 35, 31)"] div[style*="border-left"]{ border-left:0 !important; padding-left:0 !important;
    border-top:1px solid #3B362F !important; }
}