/*
Theme Name: Freela Prime Blog (Modern)
Theme URI: https://freelaprime.com
Author: Freela Prime
Author URI: https://freelaprime.com
Description: Tema moderno, rápido e confortável para leitura (SEO + Core Web Vitals) para o blog do Freela Prime.
Version: 1.6.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: freelaprime-blog
Tags: blog, one-column, accessibility-ready, custom-menu, featured-images, block-styles
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
*/

/* =========================
   Design tokens (Freela Prime)
   ========================= */
:root{
  /* palette */
  --fp-bg: #EFF2F8;          /* cinza-azulado */
  --fp-surface: #FFFFFF;     /* cards */
  --fp-surface-2: #F8FAFC;   /* subtle */
  --fp-text: #0A0C0D;
  --fp-muted: #475569;
  --fp-border: rgba(2,40,64,.10);

  --fp-primary: #022840;     /* azul escuro */
  --fp-primary-2: #024873;   /* azul médio */
  --fp-accent: #33B7C7;      /* azul claro */
  --fp-accent-2: #88DFF2;    /* azul bem claro */

  --fp-link: #024873;
  --fp-link-hover: #022840;

  /* geometry */
  --fp-radius: 18px;
  --fp-radius-sm: 14px;
  --fp-shadow: 0 12px 30px rgba(2,40,64,.08);
  --fp-shadow-soft: 0 8px 24px rgba(2,40,64,.06);

  /* type */
  --fp-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --fp-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --fp-container: 1120px;
  --fp-content: 760px;

  --fp-fs-base: 17px;
  --fp-lh: 1.78;

  --fp-focus: 0 0 0 4px rgba(51,183,199,.28);
  --fp-ring: 0 0 0 1px rgba(51,183,199,.25);
  --fp-ease: cubic-bezier(.2,.8,.2,1);
  --fp-shadow-premium: 0 18px 60px rgba(2,40,64,.14);
  --fp-hairline: rgba(2,40,64,.08);

}

/* Dark mode (auto) — mantém leitura confortável */
@media (prefers-color-scheme: dark){
  :root{
    --fp-bg: #0B1220;
    --fp-surface: #0F172A;
    --fp-surface-2: #0B1220;
    --fp-text: #E5E7EB;
    --fp-muted: #94A3B8;
    --fp-border: rgba(136,223,242,.14);
    --fp-shadow: 0 18px 50px rgba(0,0,0,.35);
    --fp-shadow-soft: 0 14px 40px rgba(0,0,0,.28);
    --fp-link: #88DFF2;
    --fp-link-hover: #E2F7FB;
  }
}

/* =========================
   Base
   ========================= */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family: var(--fp-font);
  color: var(--fp-text);
  background: #F6F8FC;
line-height: var(--fp-lh);
  font-size: var(--fp-fs-base);
}

/* Font rendering */
body, input, textarea, button { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Links */
a{
  text-decoration-color: rgba(2,72,115,.35);

  color: var(--fp-link);
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
}
a:hover{ color: var(--fp-link-hover); text-decoration-color: rgba(2,40,64,.55); }

/* Focus */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible{
  outline: none;
  box-shadow: var(--fp-focus);
  border-radius: 12px;
}

/* Selection */
::selection{
  background: rgba(51,183,199,.25);
}

/* =========================
   Layout
   ========================= */
.fp-container{
  max-width: var(--fp-container);
  margin: 0 auto;
  padding: 0 20px;
}
.fp-shell{
  padding: 26px 0 64px;
}
.fp-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 980px){
  .fp-grid{
    grid-template-columns: minmax(0, 1fr) 330px;
    align-items: start;
    gap: 22px;
  }
}

.fp-card{
  background: var(--fp-surface);
  border: 1px solid rgba(2,40,64,.07);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(2,40,64,.06);
}

/* =========================
   Header (modern, clean)
   ========================= */
.fp-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.70);
  border-bottom: 1px solid var(--fp-border);
  backdrop-filter: blur(12px);
}
@media (prefers-color-scheme: dark){
  .fp-header{ background: rgba(15,23,42,.72); }
}

.fp-header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding: 14px 0;
}

.fp-brand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
}
.fp-logo{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--fp-primary), var(--fp-primary-2));
  box-shadow: 0 14px 30px rgba(2,40,64,.18);
}
.fp-brand span{
  font-weight: 850;
  letter-spacing: -.02em;
  color: var(--fp-primary);
}
@media (prefers-color-scheme: dark){
  .fp-brand span{ color: #E5E7EB; }
}
.fp-brand small{
  display:block;
  font-size: 13px;
  color: var(--fp-muted);
  margin-top: -2px;
}

.fp-nav .menu{
  list-style:none;
  display:flex;
  gap: 8px;
  padding:0;
  margin:0;
  flex-wrap: wrap;
}
.fp-nav .menu a{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration:none;
  color: var(--fp-text);
  font-weight: 650;
  font-size: 14px;
  background: transparent;
  transition: background .16s var(--fp-ease), border-color .16s var(--fp-ease), transform .16s var(--fp-ease);
}

.fp-nav .menu a:hover{
  border-color: var(--fp-hairline);
  background: rgba(136,223,242,.14);
  transform: translateY(-1px);
  color: var(--fp-text);
}


.fp-search{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
}
.fp-search input[type="search"]{
  width: 260px;
  max-width: 52vw;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--fp-border);
  background: rgba(255,255,255,.85);
  font-size: 14px;
  color: var(--fp-text);
}
@media (prefers-color-scheme: dark){
  .fp-search input[type="search"]{ background: rgba(2,40,64,.22); }
}

.fp-search button{
  border: 0;
  background: linear-gradient(135deg, var(--fp-primary), var(--fp-primary-2));
  color: #fff;                 /* FIX: texto sempre branco */
  border-radius: 999px;
  padding: 10px 12px;
  cursor:pointer;
  box-shadow: 0 14px 28px rgba(2,40,64,.16);
  font-weight: 800;
}
.fp-search button:hover{
  background: linear-gradient(135deg, var(--fp-primary-2), var(--fp-primary));
  color: #fff;
}

/* =========================
   Main / Aside padding
   ========================= */
.fp-main{ padding: 18px; }
.fp-aside{ padding: 18px; }

@media (min-width: 680px){
  .fp-main{ padding: 26px; }
  .fp-aside{ padding: 22px; }
}

/* =========================
   Footer
   ========================= */
.fp-footer{
  margin-top: 34px;
  padding: 26px 0 36px;
  color: var(--fp-muted);
  font-size: 14px;
}

/* =========================
   Content typography
   ========================= */
.fp-content{
  max-width: var(--fp-content);
  margin: 0 auto;
}

/* Headings refinements */
h1,h2,h3,h4{
  line-height: 1.25;
  letter-spacing: -0.012em;
  margin: .95em 0 .45em;
  color: var(--fp-primary);
  text-wrap: balance;
}

@media (prefers-color-scheme: dark){
  /* Headings refinements */
h1,h2,h3,h4{
  font-weight: 800;
  letter-spacing: -0.018em;
  text-wrap: balance;
 color: #E2F7FB; }
}
h1{ font-size: clamp(22px, 2.1vw, 30px); margin-top: 0; font-weight: 700; letter-spacing: -0.014em; }
h2{ font-size: clamp(18px, 1.6vw, 22px); font-weight: 680; letter-spacing: -0.012em; }
h3{ font-size: 17px; font-weight: 650; letter-spacing: -0.010em; }
p{ margin: .9em 0; color: var(--fp-text); }

.fp-lead{
  font-size: 19px;
  color: var(--fp-muted);
}

/* Lists */
ul,ol{ padding-left: 1.2em; }
li{ margin: .35em 0; }

/* Blockquote */
blockquote{
  margin: 1.2em 0;
  padding: 14px 16px;
  border-left: 4px solid rgba(51,183,199,.65);
  background: rgba(136,223,242,.14);
  border-radius: 14px;
  color: var(--fp-text);
}

/* Code */
code, pre{ font-family: var(--fp-mono); font-size: 0.92em; }
pre{
  padding: 14px 16px;
  border-radius: 16px;
  background: #0b1220;
  color: #e5e7eb;
  overflow:auto;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
}
pre code{ color: inherit; }
:not(pre) > code{
  background: rgba(2,72,115,.08);
  border: 1px solid rgba(2,72,115,.12);
  padding: 0 .35em;
  border-radius: 8px;
}

/* Tables */
table{
  width:100%;
  border-collapse: collapse;
  margin: 1.2em 0;
  font-size: 16px;
}
th, td{
  border: 1px solid var(--fp-border);
  padding: 10px 12px;
  vertical-align: top;
}
th{
  background: rgba(136,223,242,.18);
  color: var(--fp-primary);
  text-align:left;
}

/* Images */
img{ max-width: 100%; height:auto; border-radius: 16px; }
figcaption{ color: var(--fp-muted); font-size: 14px; margin-top: 6px; }

/* =========================
   Archive / Cards (more modern)
   ========================= */
.fp-post-list{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 680px){
  .fp-post-list{ grid-template-columns: 1fr 1fr; gap: 16px; }
}

.fp-post-card{
  overflow:hidden;
  border-radius: 20px;
  border: 1px solid var(--fp-border);
  background: var(--fp-surface);
  box-shadow: var(--fp-shadow);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.fp-post-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 45px rgba(2,40,64,.12);
  border-color: rgba(51,183,199,.30);
}
.fp-post-card a{
  text-decoration-color: rgba(2,72,115,.35);

  text-decoration:none;
  color: inherit;
  display:block;
}
.fp-post-thumb{
  aspect-ratio: 16/9;
  width: 100%;
  background: linear-gradient(135deg, rgba(2,40,64,.92), rgba(51,183,199,.55));
}
.fp-post-card-inner{ padding: 14px 16px 18px; }
.fp-post-card .fp-post-title{
  margin: .5em 0 .25em;
  font-size: 16px;
  font-weight: 700;
  color: var(--fp-primary);
}

.fp-post-meta{
  text-decoration-color: rgba(2,72,115,.35);

  color: var(--fp-muted);
  font-size: 13px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.fp-post-title{
  margin: .55em 0 .25em;
  font-size: 18px;
  color: var(--fp-primary);
}
@media (prefers-color-scheme: dark){
  .fp-post-title{ color: #E2F7FB; }
}
.fp-post-excerpt{
  color: var(--fp-muted);
  font-size: 15px;
  margin: .4em 0 0;
}

/* =========================
   Article chrome (badges, TOC, CTA)
   ========================= */
.fp-badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin: 10px 0 16px;
}
.fp-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border: 1px solid rgba(2,40,64,.08);
  background: rgba(2,40,64,.03);
  color: var(--fp-muted);
  padding: 6px 13px 6px 8px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 650;
}

.fp-toc{
  border: 1px solid rgba(2,40,64,.08);
  background: rgba(2,40,64,.02);
  border-radius: 16px;
  padding: 12px 14px 8px;
  margin: 14px 0 18px;
}
.fp-toc summary{
  cursor:pointer;
  font-weight: 850;
  color: var(--fp-text);
}
.fp-toc ol{
  margin: 10px 0 0;
  padding-left: 18px;
}
.fp-toc a{
  text-decoration-color: rgba(2,72,115,.35);

  font-size: 14px;
  color: var(--fp-link);
}
.fp-toc a:hover{ color: var(--fp-link-hover); text-decoration-color: rgba(2,40,64,.55); }

.fp-cta{
  border: 1px solid rgba(51,183,199,.22);
  background: linear-gradient(135deg, rgba(2,72,115,.06), rgba(51,183,199,.08));
  border-radius: 18px;
  padding: 16px;
  margin: 18px 0;
}
.fp-cta h3{ margin: 0 0 6px; }
.fp-cta p{ margin: 0 0 12px; color: var(--fp-muted); }

.fp-btn{
  position: relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(135deg, var(--fp-primary), var(--fp-primary-2));
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  text-decoration:none;
  box-shadow: 0 14px 38px rgba(2,40,64,.20);
  transition: transform .16s var(--fp-ease), box-shadow .16s var(--fp-ease), filter .16s var(--fp-ease);
  will-change: transform;
  isolation: isolate;
}
.fp-btn::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.14) 30%, rgba(255,255,255,0) 60%);
  transform: translateX(-120%);
  transition: transform .55s var(--fp-ease);
  z-index: 0;
  pointer-events:none;
}
.fp-btn::after{
  content:"";
  position:absolute;
  inset: 1px;
  border-radius: calc(14px - 1px);
  background: radial-gradient(120px 60px at 20% 0%, rgba(136,223,242,.22), transparent 60%);
  opacity: .85;
  z-index: -1;
}
.fp-btn:hover{
  transform: translateY(-1px);
  background: linear-gradient(135deg, #013255, #011A2B);
  color: #fff !important;
  box-shadow: 0 22px 60px rgba(2,40,64,.26);
}

.fp-btn:hover::before{
  transform: translateX(120%);
}
.fp-btn span, .fp-btn svg{ position: relative; z-index: 1; }


/* =========================
   Comments
   ========================= */
.comment-list{ list-style:none; padding:0; margin: 20px 0 0; }
.comment-list li{ margin: 0 0 14px; }
.comment-body{
  border: 1px solid var(--fp-border);
  background: var(--fp-surface);
  border-radius: 18px;
  padding: 14px 16px;
}
.comment-meta{
  text-decoration-color: rgba(2,72,115,.35);
 font-size: 13px; color: var(--fp-muted); }
.comment-reply-link{ font-weight: 750; }

/* =========================
   WordPress blocks basics
   ========================= */
.wp-block-image{ margin: 1.2em 0; }
.wp-block-separator{ border:0; border-top: 1px solid var(--fp-border); margin: 2em 0; }
.wp-block-table{ overflow-x:auto; }

/* Pagination */
.nav-links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 14px;
}
.page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--fp-border);
  text-decoration:none;
  background: rgba(255,255,255,.7);
  color: var(--fp-text);
  font-weight: 750;
}
.page-numbers.current{
  background: rgba(51,183,199,.20);
  border-color: rgba(51,183,199,.35);
}


/* =========================
   Optional: hide sidebar
   ========================= */
.fp-no-sidebar .fp-grid{ grid-template-columns: 1fr !important; }
.fp-no-sidebar .fp-aside{ display:none; }


/* Optional button variants */
.fp-btn--ghost{
  background: transparent;
  color: var(--fp-text);
  border-color: var(--fp-hairline);
  box-shadow: none;
}
.fp-btn--ghost:hover{ background: rgba(136,223,242,.14); box-shadow: 0 14px 40px rgba(2,40,64,.10); }


/* Sidebar widgets */
.fp-widget{ padding: 14px 14px; border: 1px solid var(--fp-hairline); border-radius: 16px; background: rgba(255,255,255,.55); box-shadow: 0 10px 28px rgba(2,40,64,.05); }
@media (prefers-color-scheme: dark){ .fp-widget{ background: rgba(2,40,64,.18);} }
.fp-widget ul{ margin: 0; }

/* Ensure button text is always readable */
.fp-btn, .fp-btn:visited, .fp-btn:hover, .fp-btn:active{ color:#fff !important; }
.fp-btn *{ color: inherit; }

/* =========================
   Hero (home)
   ========================= */
.fp-hero{
  border: 1px solid rgba(2,40,64,.06);
  background: rgba(255,255,255,.92);
  border-radius: 18px;
  padding: 18px 18px 16px;
  box-shadow: 0 10px 30px rgba(2,40,64,.05);
  margin-bottom: 14px;
}
.fp-hero h1{ margin: 0 0 6px; }
.fp-hero p{ margin: 0; color: var(--fp-muted); max-width: 60ch; }
.fp-hero-actions{ margin-top: 12px; display:flex; gap:10px; flex-wrap:wrap; }
.fp-linkpill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid rgba(2,40,64,.10);
  background: #ffffff;
  text-decoration:none;
  color: var(--fp-text);
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 8px 22px rgba(2,40,64,.08);
  transition: transform .16s var(--fp-ease), box-shadow .16s var(--fp-ease), background .16s var(--fp-ease);
}
.fp-linkpill:hover{
  transform: translateY(-1px);
  background: #ffffff;
  box-shadow: 0 14px 36px rgba(2,40,64,.14);
  color: var(--fp-text);
}