/*
 Theme Name: w3csspress Child
 Template: w3csspress
 Text Domain: w3csspress-child
 Description: Child theme to unify colors, fonts, widgets, and header/footer for w3csspress
 Version: 1.0.0
*/

/* Design Tokens */
:root {
  --color-primary: #0F5AE5; /* blue */
  --color-secondary: #111827; /* dark slate */
  --color-accent: #06B6D4; /* cyan */
  --color-bg: #F9FAFB; /* light background */
  --color-text: #111827; /* base text */
  --radius: 8px;
}

/* Base Typography */
html { scroll-behavior: smooth; }
body {
  font-family: Tajawal, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
}

h1,h2,h3,h4,h5,h6 { color: var(--color-secondary); }
a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-accent); }

/* Layout helpers */
.w3-container { max-width: 1200px; margin-left: auto; margin-right: auto; }

/* Header */
#header {
  position: sticky; top: 0; z-index: 999;
  background: var(--color-primary); color: #fff;
  padding-top: 1rem; padding-bottom: 1rem;
}
#branding #site-title span, #site-description { color: #fff; }

/* Navigation */
.menu.w3-bar { background: transparent; color: #fff; }
.menu.w3-bar a {
  color: #fff; padding: 10px 14px; border-radius: 6px;
}
.menu.w3-bar a:hover { background: rgba(255,255,255,.12); }

/* Footer */
#footer {
  background: var(--color-secondary); color: #fff;
  border-top: 2px solid rgba(255,255,255,.15);
}
#footer a { color: var(--color-accent); }
#footer a:hover { color: #fff; }
#gototop { position: fixed; bottom: 24px; right: 24px; background: var(--color-primary); color:#fff; padding:8px 10px; border-radius: 50%; }

/* Widgets */
.widget { border-radius: var(--radius); background:#fff; box-shadow: 0 4px 12px rgba(0,0,0,.06); padding: 1rem; }
.widget-title { color: var(--color-secondary); border-bottom: 2px solid var(--color-primary); padding-bottom: .5rem; margin-bottom: .75rem; }
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget ul li { margin: .4rem 0; }

/* Forms & Buttons */
button, .button, input[type="submit"], .w3-button {
  background: var(--color-primary); color:#fff; border: 0; border-radius: var(--radius);
}
button:hover, .button:hover, input[type="submit"]:hover, .w3-button:hover { background: var(--color-accent); }

/* Images */
img { border-radius: var(--radius); }

/* Content */
#container { padding-top: 1rem; padding-bottom: 2rem; }

/* Utilities */
.u-shadow { box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.u-card { background:#fff; border-radius: var(--radius); padding: 1rem; }

/* Header: professional layout */
.site-header-inner { display:flex; align-items:center; justify-content:space-between; gap: 16px; }
.site-nav-wrap { display:flex; align-items:center; gap: 12px; }
#branding { display:flex; flex-direction:column; gap: 4px; }
#branding #site-title h1, #branding #site-title span { margin: 0; }
.btn-cta { background: var(--color-accent); color:#fff; border-radius: var(--radius); padding: 10px 16px; }
.btn-cta:hover { background: #fff; color: var(--color-primary); }

/* Responsive tweaks */
@media (max-width: 768px) {
  .menu.w3-bar { display: none; }
  .btn-cta { padding: 8px 12px; font-size: 14px; }
}