/*
Theme Name: EduPlix Enfold Child
Theme URI: https://eduplix.com
Description: Child theme for Enfold, giving EduPlix a cleaner, more modern look — refreshed typography, softer cards for blog listings, roomier spacing, and tidier sidebar widgets — without touching the parent theme so Enfold updates stay safe.
Author: EduPlix
Template: enfold
Version: 1.0.0
Text Domain: enfold-child
*/

/* =========================================================
   DESIGN TOKENS
   A calm, modern "editorial tech blog" palette — dark ink text,
   a single confident accent, and a lot of breathing room. Change
   these variables to re-skin the whole site from one place.
   ========================================================= */
:root{
  --ink:#141821;
  --body-text:#3C4250;
  --muted:#767C8C;
  --line:#E7E9EE;
  --surface:#FFFFFF;
  --surface-alt:#F6F7FA;
  --accent:#4F46E5;       /* modern indigo — links, buttons, active states */
  --accent-dark:#3F37C9;
  --accent-soft:#EEF0FE;  /* tag/category chip backgrounds */
  --radius-lg:14px;
  --radius-md:10px;
  --radius-sm:6px;
  --shadow-sm:0 1px 2px rgba(20,24,33,.05);
  --shadow-md:0 10px 30px rgba(20,24,33,.08);
  --font-display:'Plus Jakarta Sans','Segoe UI',sans-serif;
  --font-body:'Inter','Segoe UI',Arial,sans-serif;
}

/* =========================================================
   BASE / TYPOGRAPHY
   Enfold sets most of this in base.css already — we only
   override what's needed for the new look, so parent updates
   keep working underneath.
   ========================================================= */
#top{
  font-family:var(--font-body);
  color:var(--body-text);
  background:var(--surface-alt);
}
#top h1, #top h2, #top h3, #top h4, #top h5, #top h6,
#top .av-special-heading-tag{
  font-family:var(--font-display);
  color:var(--ink);
  font-weight:700;
  letter-spacing:-0.01em;
}
#top a{ color:var(--accent); }
#top a:hover{ color:var(--accent-dark); }

/* Page + post containers get a touch more air */
#top .container{ max-width:1220px; }
#main{ background:transparent; }

/* =========================================================
   HEADER
   ========================================================= */
#header{
  background:var(--surface);
  border-bottom:1px solid var(--line);
  box-shadow:none;
}
#header_main .container{ padding-top:6px; padding-bottom:6px; }
#header .logo{ padding:4px 0; }

/* Main nav: quieter, modern link style with an underline-on-hover
   instead of Enfold's default background highlight */
#header .av-main-nav > li > a{
  font-family:var(--font-display);
  font-weight:600;
  font-size:14.5px;
  color:var(--ink);
  padding-top:28px;
  padding-bottom:28px;
}
#header .av-main-nav > li > a .avia-menu-text{
  position:relative;
}
#header .av-main-nav > li > a .avia-menu-text::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-6px;
  height:2px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .2s ease;
}
#header .av-main-nav > li:hover > a .avia-menu-text::after,
#header .av-main-nav > li.current-menu-item > a .avia-menu-text::after{
  transform:scaleX(1);
}
#header .av-main-nav > li > a:hover,
#header .av-main-nav > li.current-menu-item > a{
  background:transparent;
  color:var(--accent);
}

/* Search icon + widget area in header meta */
#header_meta{ background:var(--ink); }
#header_meta .container{ font-size:12.5px; }
#header_meta a{ color:#cfd2e8; }
#header_meta a:hover{ color:#fff; }

/* =========================================================
   BUTTONS — Enfold's avia-button shortcode, restyled
   ========================================================= */
.avia-button, #top .av-inline-form input[type=submit]{
  font-family:var(--font-display);
  font-weight:600;
  border-radius:var(--radius-sm) !important;
  border-width:0 !important;
  background:var(--accent) !important;
  color:#fff !important;
  box-shadow:var(--shadow-sm);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.avia-button:hover{
  background:var(--accent-dark) !important;
  transform:translateY(-1px);
  box-shadow:var(--shadow-md);
}
.avia-button.avia-color-theme-color-subtle,
.avia-button.avia-color-grey{
  background:var(--surface) !important;
  color:var(--ink) !important;
  border:1.5px solid var(--line) !important;
  box-shadow:none;
}

/* =========================================================
   BLOG LISTINGS — turn Enfold's post-entry rows into modern cards
   ========================================================= */
.postcontent .post-entry,
.template-blog .post-entry,
.big-preview{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:26px 28px;
  margin-bottom:24px;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .2s ease, transform .2s ease;
}
.postcontent .post-entry:hover{
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
}
.post-entry .entry-content-header{ margin-bottom:14px; }
.post-entry .entry-content-header .post_title{ font-size:1.5em; margin-bottom:8px; }
.post-entry .entry-content-header .post_title a{ color:var(--ink); }
.post-entry .entry-content-header .post_title a:hover{ color:var(--accent); }

/* Meta row (date / category / author) as small pill-style chips */
.post-entry .blog-meta,
.post-entry .minor-meta{
  font-size:12.5px;
  color:var(--muted);
}
.post-entry .blog-categories a,
#top .single-big .blog-categories a{
  display:inline-block;
  background:var(--accent-soft);
  color:var(--accent-dark);
  font-weight:600;
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:.03em;
  padding:3px 10px;
  border-radius:999px;
  margin:0 6px 6px 0;
}
.post-entry .blog-categories a:hover{ background:var(--accent); color:#fff; }

/* Featured image corners to match the card radius */
.post-entry .format-standard-image img,
.post-entry .attachment-entry_with_sidebar,
.big-preview img{
  border-radius:var(--radius-md);
}

/* "Read more" link → looks like a small modern text-button */
.post-entry .more-link, .read-more-link a{
  font-family:var(--font-display);
  font-weight:600;
  font-size:13.5px;
  color:var(--accent);
}
.post-entry .more-link:hover, .read-more-link a:hover{ color:var(--accent-dark); }

/* =========================================================
   SINGLE POST
   ========================================================= */
.single-big{
  background:var(--surface);
  border-radius:var(--radius-lg);
  padding:32px 34px;
  box-shadow:var(--shadow-sm);
}
.single-big .entry-content-header .post_title{ font-size:2em; }
.single-big .entry-content-header .minor-meta{ margin-bottom:20px; }
#top .entry-content-wrapper p{ font-size:16px; line-height:1.75; }
#top .entry-content-wrapper h2{ margin-top:1.6em; }
#top .entry-content-wrapper blockquote{
  border-left:3px solid var(--accent);
  background:var(--surface-alt);
  padding:14px 18px;
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}

/* =========================================================
   SIDEBAR + WIDGETS
   ========================================================= */
.sidebar{ padding-left:8px; }
.sidebar .widget{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:22px 24px;
  margin-bottom:22px;
  box-shadow:var(--shadow-sm);
}
.sidebar .widgettitle{
  font-family:var(--font-display);
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--ink);
  border-bottom:2px solid var(--accent-soft);
  padding-bottom:10px;
  margin-bottom:14px;
}
.sidebar .widget ul{ margin:0; padding:0; list-style:none; }
.sidebar .widget li{
  padding:8px 0;
  border-bottom:1px dashed var(--line);
  font-size:13.5px;
}
.sidebar .widget li:last-child{ border-bottom:0; }
.sidebar .widget li a{ color:var(--body-text); }
.sidebar .widget li a:hover{ color:var(--accent); }

/* Sticky sidebar on wide screens for a more modern browsing feel */
@media (min-width:990px){
  .sidebar{ position:sticky; top:24px; align-self:flex-start; }
}

/* =========================================================
   FOOTER
   ========================================================= */
#footer{ background:var(--ink); }
#socket{ background:#0D0F16; }
#footer .widgettitle{
  color:#fff;
  font-family:var(--font-display);
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.05em;
  border-bottom:2px solid rgba(255,255,255,.12);
  padding-bottom:10px;
  margin-bottom:14px;
}
#footer .widget, #footer .widget p, #footer .widget li{ color:#B9BDCF; font-size:13.5px; }
#footer .widget a{ color:#B9BDCF; }
#footer .widget a:hover{ color:#fff; }
#socket .socket_color, #socket a{ color:#7B8098; font-size:12.5px; }
#socket a:hover{ color:#fff; }

/* =========================================================
   FORMS / SEARCH
   ========================================================= */
#top input[type=text], #top input[type=email], #top input[type=search],
#top input[type=tel], #top textarea{
  border-radius:var(--radius-sm);
  border:1.5px solid var(--line);
  font-family:var(--font-body);
}
#top input[type=text]:focus, #top textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
  outline:none;
}

/* =========================================================
   MISC
   ========================================================= */
#scroll-top-link{
  background:var(--accent) !important;
  border-radius:50% !important;
}
#scroll-top-link:hover{ background:var(--accent-dark) !important; }

::selection{ background:var(--accent-soft); color:var(--ink); }

/* =========================================================
   RESPONSIVE TWEAKS
   ========================================================= */
@media (max-width:768px){
  .postcontent .post-entry, .single-big{ padding:20px; border-radius:var(--radius-md); }
  .sidebar .widget{ padding:18px; }
}