/* ============================================================
   LG ACADEMIC NOTES — CANÓNICO v4
   Derivado da linguagem pública dominante de
   Research / Words / Profile no site linoguerreiro.com
   Regra de largura: WordPress controla a geometria exterior; conteúdo interno a 100%; media centrada
   ============================================================ */

.lg-notes,
.lg-notes *,
.lg-notes *::before,
.lg-notes *::after{
  box-sizing:border-box;
}

/* WORDPRESS BOUNDARY — CANÓNICO
   O tema WordPress controla width/max-width/margens do elemento raiz.
   Não criar breakout da .entry-content; 100% aplica-se apenas dentro da app.
*/
.lg-notes{
  --lg-accent:#F6A400;
  --lg-blue:#0A84FF;
  --lg-ink:#171717;
  --lg-muted:#62666d;
  --lg-line:#d8d8d8;
  --lg-paper:#ffffff;

  min-width:0;

  color:var(--lg-ink);
  background:transparent;

  font-family:inherit;
  font-size:16.5px;
  line-height:1.62;

  overflow-x:hidden;
  scroll-behavior:smooth;
}

/* ============================================================
   ABERTURA / INTRO
   Gramática editorial de Research e Words:
   barra laranja + regra terminal.
   ============================================================ */

.lg-notes .oa-head,
.lg-notes .ha-head{
  position:relative;
  display:block;

  width:100%;
  margin:0 0 3.7rem;
  padding:.15rem 0 1.65rem;
}

.lg-notes .oa-head::after,
.lg-notes .ha-head::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;

  height:1px;
  background:linear-gradient(
    90deg,
    var(--lg-ink) 0 76px,
    var(--lg-line) 76px 100%
  );
}

.lg-notes .subtitle{
  position:relative;

  width:100%;
  max-width:100%;
  margin:0;
  padding:.28rem 0 .28rem 1.35rem;

  color:var(--lg-ink);
  font-size:17px;
  line-height:1.64;
  font-weight:500;
  letter-spacing:-.006em;

  text-align:left;
  hyphens:auto;
}

.lg-notes .subtitle::before{
  content:"";
  position:absolute;
  left:0;
  top:.23em;
  bottom:.23em;

  width:3px;
  border-radius:99px;
  background:var(--lg-accent);
}

/* ============================================================
   ESTRUTURA — sem cartões
   ============================================================ */

.lg-notes .oa-grid,
.lg-notes .oa-content,
.lg-notes .ha-content{
  display:block;
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
}

.lg-notes .oa-sec,
.lg-notes .ha-sec{
  width:100%;
  margin:0 0 3.8rem;
  padding:0;

  color:var(--lg-ink);
  background:transparent;

  border:0;
  border-radius:0;
  box-shadow:none;

  scroll-margin-top:28px;
}

/* ============================================================
   TÍTULOS DE SECÇÃO
   Mesmo princípio visual de Research / Profile.
   ============================================================ */

.lg-notes .oa-sec > h2,
.lg-notes .ha-sec > h2{
  position:relative;
  display:block;

  width:100%;
  margin:0 0 1.55rem;
  padding:0 0 .7rem;

  color:var(--lg-ink);
  border-bottom:1px solid var(--lg-ink);

  font-size:.80rem;
  line-height:1.22;
  font-weight:780;
  letter-spacing:.145em;
  text-transform:uppercase;
}

.lg-notes .oa-sec > h2::after,
.lg-notes .ha-sec > h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;

  width:34px;
  height:3px;

  border-radius:99px;
  background:var(--lg-accent);
}

.lg-notes .oa-sec > h2 a,
.lg-notes .ha-sec > h2 a{
  color:inherit !important;
  text-decoration:none !important;
}

.lg-notes .oa-sec > h2 a:hover,
.lg-notes .ha-sec > h2 a:hover{
  color:var(--lg-blue) !important;
}

/* ============================================================
   SUBTÍTULOS
   ============================================================ */

.lg-notes .oa-sec h3,
.lg-notes .ha-sec h3,
.lg-notes .oa-sec .sub,
.lg-notes .ha-sec .sub{
  margin:1.65rem 0 .42rem;
  padding:0;

  color:var(--lg-ink);

  font-size:17.5px;
  line-height:1.32;
  font-weight:750;
  letter-spacing:-.008em;

  background:none;
  border:0;
}

.lg-notes .oa-sec h4,
.lg-notes .ha-sec h4{
  margin:1.45rem 0 .38rem;
  padding:0;

  color:var(--lg-ink);

  font-size:15.5px;
  line-height:1.35;
  font-weight:750;

  background:none;
  border:0;
}

/* ============================================================
   CORPO DE TEXTO
   ============================================================ */

.lg-notes p{
  max-width:100%;
  margin:.72rem 0 0;

  color:var(--lg-ink);

  font-size:16.5px;
  line-height:1.62;

  text-align:left;
  hyphens:auto;
  overflow-wrap:break-word;
}

.lg-notes ul,
.lg-notes ol{
  max-width:100%;
  margin:.72rem 0 0;
  padding-left:1.35rem;
}

.lg-notes li{
  margin:.22rem 0;
  font-size:16px;
  line-height:1.58;
}

/* ============================================================
   LINKS NO TEXTO
   Discretos; azul apenas como estado de interação.
   ============================================================ */

.lg-notes p a,
.lg-notes li a{
  color:inherit;
  text-decoration:underline;
  text-decoration-color:#aeb2b6;
  text-decoration-thickness:1px;
  text-underline-offset:.14em;
}

.lg-notes p a:hover,
.lg-notes li a:hover{
  color:var(--lg-blue);
  text-decoration-color:currentColor;
}

.lg-notes a:focus-visible{
  outline:2px solid var(--lg-blue);
  outline-offset:3px;
  border-radius:3px;
}

/* ============================================================
   NOTAS / LEGENDAS
   Sem fundos coloridos nem cartões.
   ============================================================ */

.lg-notes .note{
  max-width:100%;
  margin:1rem 0 0;
  padding:.08rem 0 .08rem 15px;

  color:var(--lg-muted);
  background:transparent;

  border:0;
  border-left:2px solid var(--lg-line);
  border-radius:0;

  font-size:14.25px;
  line-height:1.54;
}

/* ============================================================
   VER TAMBÉM
   Relação editorial discreta entre apontamentos.
   ============================================================ */

.lg-notes .lg-related{
  max-width:100%;
  margin:1.2rem 0 0;
  padding:.72rem 0 0;

  color:var(--lg-muted);
  background:transparent;

  border:0;
  border-top:1px solid var(--lg-line);
  border-radius:0;

  font-size:13.75px;
  line-height:1.52;
}

.lg-notes .lg-related strong{
  color:var(--lg-ink);
  font-weight:750;
}

.lg-notes .lg-related a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:.14em;
}

.lg-notes .lg-related a:hover{
  color:var(--lg-blue);
}

/* ============================================================
   COMPOSITORES / LISTAS DE NOMES
   ============================================================ */

.lg-notes .composers{
  max-width:100%;
  margin:.45rem 0 0;
  padding:0;

  color:var(--lg-muted);
  background:transparent;

  border:0;
  border-radius:0;

  font-size:14.25px;
  line-height:1.55;
  font-weight:400;
}

.lg-notes .composers::before{
  content:none !important;
}

/* ============================================================
   VÍDEO / MEDIA
   ============================================================ */

.lg-notes .media,
.lg-notes .video-block{
  width:100%;
  max-width:800px;
  margin:2.25rem auto 2.5rem;
}

.lg-notes .media{
  display:block;
}

.lg-notes .media iframe,
.lg-notes .media img,
.lg-notes .video-block iframe{
  display:block;

  width:100%;
  max-width:800px;
  height:auto;
  aspect-ratio:16/9;

  margin:0 auto;

  border:0;
  border-radius:0;
  background:#000;
  box-shadow:none;
}

/* Separação canónica entre texto introdutório e vídeo */
.lg-notes .video-block > iframe{
  margin-top:1.15rem;
  margin-bottom:1.15rem;
}

/* ============================================================
   SUMÁRIO — BOTÃO
   Minimalista; preto/cinza, laranja apenas como acento.
   ============================================================ */

.lg-notes #oa-toc-btn,
.lg-notes #hist-toc-toggle{
  position:fixed;
  top:24px;
  left:24px;
  z-index:99998;

  width:40px;
  height:40px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  margin:0;
  padding:0;

  color:var(--lg-ink);
  background:rgba(255,255,255,.96) !important;

  font:inherit;
  font-size:18px;
  line-height:1;

  border:1px solid var(--lg-ink);
  border-radius:6px;
  box-shadow:none;

  cursor:pointer;
  transition:background .12s ease, border-color .12s ease;
}

.lg-notes #oa-toc-btn::before{
  content:"☰";
  line-height:1;
}

.lg-notes #oa-toc-btn::after,
.lg-notes #hist-toc-toggle::after{
  content:"";
  position:absolute;
  left:7px;
  right:7px;
  bottom:-2px;

  height:3px;
  border-radius:99px;
  background:var(--lg-accent);
}

.lg-notes #oa-toc-btn:hover,
.lg-notes #hist-toc-toggle:hover{
  background:#f4f4f4 !important;
}

.lg-notes #oa-toc-btn:focus-visible,
.lg-notes #hist-toc-toggle:focus-visible{
  outline:2px solid var(--lg-blue);
  outline-offset:3px;
}

/* ============================================================
   SUMÁRIO — PAINEL
   Overlay funcional; única área onde se mantém sombra ligeira.
   ============================================================ */

.lg-notes .oa-toc,
.lg-notes #hist-toc-panel{
  position:fixed;
  top:74px;
  left:24px;
  z-index:99997;

  width:290px;
  max-width:calc(100vw - 48px);
  max-height:72vh;

  margin:0;
  padding:14px 0;

  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;

  background:rgba(255,255,255,.985);

  border:1px solid var(--lg-ink);
  border-radius:6px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);

  transform:translateY(-6px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transition:opacity .14s ease, transform .14s ease, visibility .14s ease;
}

.lg-notes .oa-toc.open,
.lg-notes #hist-toc-panel.open{
  transform:translateY(0);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.lg-notes .oa-toc ul,
.lg-notes #hist-toc-panel ul{
  margin:0;
  padding:0;
  list-style:none;
}

.lg-notes .oa-toc li,
.lg-notes #hist-toc-panel li{
  margin:0;
  padding:0;
}

.lg-notes .oa-toc a,
.lg-notes #hist-toc-panel a{
  position:relative;
  display:block;

  margin:0;
  padding:.46rem 14px .46rem 17px;

  color:var(--lg-ink);
  background:transparent;

  font-size:13.25px;
  line-height:1.35;
  font-weight:650;

  text-decoration:none !important;

  border:0;
  border-radius:0;
}

.lg-notes .oa-toc a::before,
.lg-notes #hist-toc-panel a::before{
  content:"";
  position:absolute;
  left:0;
  top:.42rem;
  bottom:.42rem;

  width:2px;
  background:transparent;
}

.lg-notes .oa-toc a:hover,
.lg-notes #hist-toc-panel a:hover{
  color:var(--lg-blue);
  background:#f7f7f7;
}

.lg-notes .oa-toc a.active,
.lg-notes .oa-toc a[aria-current="true"],
.lg-notes #hist-toc-panel a.active{
  color:var(--lg-ink);
  background:#f7f7f7;
}

.lg-notes .oa-toc a.active::before,
.lg-notes .oa-toc a[aria-current="true"]::before,
.lg-notes #hist-toc-panel a.active::before{
  background:var(--lg-accent);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media(max-width:782px){
  .admin-bar .lg-notes #oa-toc-btn,
  .admin-bar .lg-notes #hist-toc-toggle{
    top:58px;
  }

  .admin-bar .lg-notes .oa-toc,
  .admin-bar .lg-notes #hist-toc-panel{
    top:108px;
  }
}

@media(max-width:640px){
  .lg-notes{
    width:100%;
    max-width:100%;

    font-size:16px;
  }

  .lg-notes .oa-head,
  .lg-notes .ha-head{
    margin-bottom:2.8rem;
  }

  .lg-notes .subtitle{
    padding:.22rem 0 .22rem 1rem;

    font-size:16.5px;
    line-height:1.6;

    overflow-wrap:anywhere;
  }

  .lg-notes .oa-sec,
  .lg-notes .ha-sec{
    margin-bottom:3rem;
  }

  .lg-notes .oa-sec > h2,
  .lg-notes .ha-sec > h2{
    margin-bottom:1.35rem;
    padding-bottom:.62rem;

    font-size:.76rem;
    letter-spacing:.125em;
  }

  .lg-notes .oa-sec h3,
  .lg-notes .ha-sec h3,
  .lg-notes .oa-sec .sub,
  .lg-notes .ha-sec .sub{
    font-size:17px;
    line-height:1.34;
  }

  .lg-notes p{
    width:100%;
    max-width:100%;

    font-size:16px;
    line-height:1.58;
  }

  .lg-notes ul,
  .lg-notes ol{
    max-width:100%;
  }

  .lg-notes li{
    font-size:15.7px;
  }

  .lg-notes .note{
    max-width:100%;
    font-size:13.75px;
    line-height:1.5;
  }

  .lg-notes .lg-related{
    max-width:100%;
    font-size:13.5px;
  }

  .lg-notes .composers{
    max-width:100%;
    font-size:13.75px;
  }

  .lg-notes .media,
  .lg-notes .video-block{
    max-width:100%;
    margin:1.8rem auto 2rem;
  }

  .lg-notes .media iframe,
  .lg-notes .media img,
  .lg-notes .video-block iframe{
    max-width:100%;
  }

  .lg-notes #oa-toc-btn,
  .lg-notes #hist-toc-toggle{
    left:12px;
  }

  .lg-notes .oa-toc,
  .lg-notes #hist-toc-panel{
    left:12px;

    width:300px;
    max-width:calc(100vw - 24px);
    max-height:calc(100dvh - 90px);
  }
}

@media(max-width:420px){
  .lg-notes .subtitle{
    font-size:16px;
    line-height:1.58;
  }

  .lg-notes .oa-sec > h2,
  .lg-notes .ha-sec > h2{
    font-size:.73rem;
    letter-spacing:.105em;
  }

  .lg-notes p{
    font-size:15.7px;
    line-height:1.57;
  }
}

/* ============================================================
   ACESSIBILIDADE
   ============================================================ */

@media(prefers-reduced-motion:reduce){
  .lg-notes{
    scroll-behavior:auto;
  }

  .lg-notes *,
  .lg-notes *::before,
  .lg-notes *::after{
    transition:none !important;
  }
}