/*
 Theme Name:   Astra Child
 Theme URI:    https://layer-hub.net
 Description:  Layer Hub Child Theme — Based on Astra
 Author:       Layer Hub
 Author URI:   https://layer-hub.net
 Template:     astra
 Version:      1.0.0
 Text Domain:  astra-child
*/

/* =============================================
   CSS Variables
   Edit here to change colors/fonts site-wide
   ============================================= */
:root {
  --color-primary:    #0d0d1a;
  --color-accent:     #5cc8e8;
  --color-accent2:    #b06ce8;
  --color-bg:         #f9f8f5;
  --color-bg2:        #ffffff;
  --color-text:       #1a1a1a;
  --color-muted:      #888888;
  --color-border:     #e8e4dc;
  --font-main:        'Inter','Helvetica Neue',Arial,sans-serif;
  --font-en:          'Inter','SF Pro Display',Arial,sans-serif;
  --radius-sm:        6px;
  --radius-md:        10px;
  --radius-lg:        14px;
  --max-width:        1200px;
  --header-height:    64px;
}

/* =============================================
   Base Reset
   ============================================= */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-main);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.8;
  font-size: 15px;
}

/* =============================================
   Header — Deep Navy
   ============================================= */
.site-header,
#masthead,
.ast-masthead-custom-menu,
.main-header-bar {
  background: var(--color-primary) !important;
  border-bottom: none !important;
  height: var(--header-height);
}

.site-branding,
.ast-site-identity {
  display: flex;
  align-items: center;
}

/* =============================================
   Top Navigation
   ============================================= */
.main-header-bar .main-navigation a,
.ast-nav-menu > li > a {
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0.5px;
  padding: 0 16px !important;
  line-height: var(--header-height) !important;
  transition: color 0.2s ease;
}

.main-header-bar .main-navigation a:hover,
.ast-nav-menu > li > a:hover {
  color: var(--color-accent) !important;
}

/* Dropdown */
.ast-nav-menu .sub-menu {
  background: var(--color-primary) !important;
  border: 1px solid rgba(92, 200, 232, 0.15) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
  min-width: 180px;
}

.ast-nav-menu .sub-menu li a {
  color: rgba(255,255,255,0.8) !important;
  font-size: 13px !important;
  padding: 10px 18px !important;
  line-height: 1.5 !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}

.ast-nav-menu .sub-menu li a:hover {
  color: var(--color-accent) !important;
  background: rgba(92,200,232,0.08) !important;
}

/* =============================================
   Post Cards
   ============================================= */
.ast-article-post,
.post-thumb-img-content,
article.post {
  background: var(--color-bg2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.ast-article-post:hover,
article.post:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

.entry-title a {
  color: var(--color-text) !important;
  font-weight: 600;
  line-height: 1.4;
}

.entry-title a:hover {
  color: var(--color-accent) !important;
}

/* =============================================
   Sidebar
   ============================================= */
#secondary,
.widget-area {
  background: var(--color-bg2);
  border-radius: var(--radius-md);
  padding: 20px;
}

.widget-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 8px;
  margin-bottom: 16px;
}

/* =============================================
   Footer
   ============================================= */
.site-footer,
#colophon {
  background: var(--color-primary) !important;
  color: rgba(255,255,255,0.5) !important;
  font-size: 13px;
  padding: 32px 0;
}

.site-footer a {
  color: var(--color-accent) !important;
}

.site-footer a:hover {
  color: #ffffff !important;
}

/* =============================================
   Responsive — Mobile (768px and below)
   ============================================= */
@media (max-width: 768px) {
  :root {
    --header-height: 56px;
  }

  #secondary,
  .widget-area {
    display: none;
  }

  .ast-article-post,
  article.post {
    margin-bottom: 16px;
  }
}