/* EnFavori Homepage — single-source soft-color shortcut cards.
   Scoped to the four existing portal shortcuts; no image assets or JS.
   Color, icon, hover and responsive behavior live together here. */

/* Compact desktop rhythm: controls + shortcuts are one editorial group.
   Keep the header and hero image dimensions completely unchanged. */
@media(min-width:761px){
  .ef4-portal .ef4-portal__spotlight{padding-bottom:3px}
  .ef4-portal .ef4-portal__controls{min-height:38px;margin-top:2px}
}

.ef4-portal .ef4-portal__shortcuts{
  gap:14px;
  padding-top:3px;
}
.ef4-portal__shortcuts > .ef4-portal__shortcut:nth-child(1){
  --shortcut-accent:#00ad9c;
  --shortcut-wash:#e7faf6;
  --shortcut-border:#a4ebe1;
  --shortcut-shadow:rgba(0,144,132,.27);
  --shortcut-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2017l6-6%204%204%208-8%22%2F%3E%3Cpath%20d%3D%22M15%207h6v6%22%2F%3E%3C%2Fsvg%3E");
}
.ef4-portal__shortcuts > .ef4-portal__shortcut:nth-child(2){
  --shortcut-accent:#237cf3;
  --shortcut-wash:#eaf3ff;
  --shortcut-border:#b9d9ff;
  --shortcut-shadow:rgba(29,102,222,.25);
  --shortcut-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2214%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M7%208h6M7%2012h5M20%2012v9M16%2016.5h8%22%2F%3E%3C%2Fsvg%3E");
}
.ef4-portal__shortcuts > .ef4-portal__shortcut:nth-child(3){
  --shortcut-accent:#f47430;
  --shortcut-wash:#fff2e9;
  --shortcut-border:#ffd3b9;
  --shortcut-shadow:rgba(211,92,27,.27);
  --shortcut-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2010c0%205-8%2012-8%2012S4%2015%204%2010a8%208%200%201%201%2016%200Z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%222.5%22%2F%3E%3C%2Fsvg%3E");
}
.ef4-portal__shortcuts > .ef4-portal__shortcut:nth-child(4){
  --shortcut-accent:#8745db;
  --shortcut-wash:#f5edff;
  --shortcut-border:#ddc5fb;
  --shortcut-shadow:rgba(114,57,188,.25);
  --shortcut-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M3%2020v-2a6%206%200%200%201%2012%200v2%22%2F%3E%3Cpath%20d%3D%22M17%205a3%203%200%200%201%200%206M17%2014a5%205%200%200%201%204%205v1%22%2F%3E%3C%2Fsvg%3E");
}
.ef4-portal__shortcuts > .ef4-portal__shortcut{
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  box-sizing:border-box;
  min-width:0;
  min-height:118px;
  height:118px;
  overflow:hidden;
  padding:11px 16px 10px;
  border:1px solid var(--shortcut-border);
  border-radius:17px;
  background:linear-gradient(112deg,#fff 2%,var(--shortcut-wash) 100%);
  box-shadow:0 9px 25px -17px var(--shortcut-shadow),inset 0 1px rgba(255,255,255,.75);
  color:#102a43;
  text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.ef4-portal__shortcuts > .ef4-portal__shortcut::before{
  content:"";
  position:absolute;
  right:15px;
  top:12px;
  width:76px;
  height:76px;
  background:var(--shortcut-accent);
  opacity:.075;
  -webkit-mask:var(--shortcut-icon) center / contain no-repeat;
  mask:var(--shortcut-icon) center / contain no-repeat;
  pointer-events:none;
}
.ef4-portal__shortcuts > .ef4-portal__shortcut::after{
  content:"→";
  position:absolute;
  right:11px;
  bottom:10px;
  display:grid;
  place-items:center;
  width:31px;
  height:31px;
  border:1px solid var(--shortcut-border);
  border-radius:50%;
  background:rgba(255,255,255,.93);
  box-shadow:0 5px 13px -7px var(--shortcut-shadow);
  color:var(--shortcut-accent);
  font-size:21px;
  font-weight:800;
  line-height:1;
  pointer-events:none;
  transition:background-color .18s ease,color .18s ease,transform .18s ease;
}
.ef4-portal__shortcuts .ef4-portal__shortcut-symbol{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  flex:0 0 36px;
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--shortcut-accent);
  box-shadow:0 5px 16px -8px var(--shortcut-shadow);
  color:transparent;
  font-size:0;
  line-height:1;
}
.ef4-portal__shortcuts .ef4-portal__shortcut-symbol::after{
  content:"";
  display:block;
  width:21px;
  height:21px;
  background:#fff;
  -webkit-mask:var(--shortcut-icon) center / contain no-repeat;
  mask:var(--shortcut-icon) center / contain no-repeat;
}
.ef4-portal__shortcuts .ef4-portal__shortcut strong{
  position:relative;
  z-index:1;
  display:block;
  max-width:calc(100% - 25px);
  margin-top:6px;
  color:#102a43;
  font-size:15px;
  font-weight:850;
  line-height:1.2;
  letter-spacing:-.02em;
}
.ef4-portal__shortcuts .ef4-portal__shortcut small{
  position:relative;
  z-index:1;
  display:block;
  max-width:calc(100% - 43px);
  margin-top:2px;
  color:#506b82;
  font-size:11.5px;
  font-weight:500;
  line-height:1.35;
}
@media(hover:hover) and (pointer:fine){
  .ef4-portal__shortcuts > .ef4-portal__shortcut:hover{
    transform:translateY(-3px);
    border-color:var(--shortcut-accent);
    box-shadow:0 15px 28px -16px var(--shortcut-shadow);
  }
  .ef4-portal__shortcuts > .ef4-portal__shortcut:hover::after{
    transform:translateX(2px);
    background:var(--shortcut-accent);
    color:#fff;
  }
}
.ef4-portal__shortcuts > .ef4-portal__shortcut:focus-visible{
  outline:3px solid var(--shortcut-accent);
  outline-offset:3px;
}
@media(max-width:760px){
  .ef4-portal .ef4-portal__shortcuts{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
    padding-top:6px;
  }
  .ef4-portal__shortcuts > .ef4-portal__shortcut{
    height:115px;
    min-height:115px;
    flex-direction:column;
    align-items:flex-start;
    padding:10px 12px 10px;
    border-radius:14px;
  }
  .ef4-portal__shortcuts .ef4-portal__shortcut-symbol{
    flex-basis:33px;
    width:33px;
    height:33px;
  }
  .ef4-portal__shortcuts .ef4-portal__shortcut-symbol::after{width:19px;height:19px}
  .ef4-portal__shortcuts .ef4-portal__shortcut strong{
    margin-top:6px;
    font-size:13px;
  }
  .ef4-portal__shortcuts .ef4-portal__shortcut small{
    margin-top:2px;
    font-size:10.5px;
    line-height:1.32;
  }
  .ef4-portal__shortcuts > .ef4-portal__shortcut::before{
    right:9px;
    top:12px;
    width:52px;
    height:52px;
  }
  .ef4-portal__shortcuts > .ef4-portal__shortcut::after{
    right:9px;
    bottom:9px;
    width:29px;
    height:29px;
    font-size:18px;
  }
}
@media(max-width:365px){
  .ef4-portal__shortcuts > .ef4-portal__shortcut{
    padding:11px 10px 10px;
  }
  .ef4-portal__shortcuts .ef4-portal__shortcut strong{font-size:12px}
  .ef4-portal__shortcuts .ef4-portal__shortcut small{font-size:10px}
  .ef4-portal__shortcuts > .ef4-portal__shortcut::before{width:47px;height:47px}
}
/* All four cards remain legible with the site dark theme. */
:is(html[data-theme="dark"],html[data-bs-theme="dark"],html.dark,body[data-theme="dark"],body.dark)
 .ef4-portal__shortcuts > .ef4-portal__shortcut{
  background:linear-gradient(120deg,#172b40,#20354b);
  border-color:color-mix(in srgb,var(--shortcut-accent) 47%,#172b40);
  box-shadow:0 10px 24px -18px #020a12;
}
:is(html[data-theme="dark"],html[data-bs-theme="dark"],html.dark,body[data-theme="dark"],body.dark)
 .ef4-portal__shortcuts .ef4-portal__shortcut strong{color:#f2f8fe}
:is(html[data-theme="dark"],html[data-bs-theme="dark"],html.dark,body[data-theme="dark"],body.dark)
 .ef4-portal__shortcuts .ef4-portal__shortcut small{color:#c0d1e0}
@media(prefers-reduced-motion:reduce){
  .ef4-portal__shortcuts > .ef4-portal__shortcut,
  .ef4-portal__shortcuts > .ef4-portal__shortcut::after{
    transition:none;
  }
}