/*
Theme Name: Nubia
Theme URI: https://nubx.io
Author: Nubia Technologies Inc.
Version: 1.0
Description: A lightweight WordPress theme inspired by the Paxos corporate site and tailored for the NUBX and NUBX‑Y ecosystem. It uses the official NUBX logo colours, optimised typography via Google Fonts and includes page templates for long‑form marketing and legal pages. The theme registers a footer widget area for a sitemap and legal links, provides support for a custom logo and responsive navigation, and keeps styles lean for fast performance.
Tags: corporate, custom-logo, custom-menu, responsive, one-column, two-columns, footer-widgets
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nubx

*/

/*
 * Colour palette
 * These CSS custom properties reflect the shades found in the NUBX logo: a deep navy for primary actions, a mid tone for secondary accents and a light blue for highlights. Additional neutral colours round out the palette.
 */
:root {
  --nubx-dark: #0a2e6e;      /* dark navy inspired by the upper portion of the logo */
  --nubx-mid:  #123e8f;      /* mid blue taken from the letterforms */
  --nubx-light: #86b4e5;     /* light blue inspired by the lower cross bar */
  --nubx-accent: #1c4fa9;    /* secondary accent used for buttons/links */
  --nubx-bg:    #f9fafc;     /* very light background for pages */
  --nubx-text:  #212529;     /* primary text colour for high contrast */
  --nubx-border: #e5e8ef;    /* subtle border colour */
}

/* Reset some basic elements to create a consistent baseline */
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  background-color: var(--nubx-bg);
  color: var(--nubx-text);
  line-height: 1.6;
}

a {
  color: var(--nubx-accent);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover,
a:focus {
  color: var(--nubx-dark);
  text-decoration: underline;
}

/* Typography
 * Headings use Montserrat for a strong, modern look. Body copy uses Open Sans for readability.
 */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
  margin-top: 0;
  color: var(--nubx-dark);
}
h1 {
  font-size: 2.5rem;
  font-weight: 700;
}
h2 {
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
h3 {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
p {
  margin-top: 0;
  margin-bottom: 1.25rem;
  line-height: 1.7;
}

/* Layout helpers */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Header styles */
header.site-header {
  background-color: var(--nubx-bg);
  border-bottom: 1px solid var(--nubx-border);
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 10;
}
.site-branding {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.site-branding img {
  max-height: 48px;
  height: auto;
  width: auto;
}
.site-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--nubx-dark);
  margin: 0;
}

/* Navigation */
.primary-navigation {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.primary-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.5rem;
}
.primary-navigation li {
  margin: 0;
}
.primary-navigation a {
  font-weight: 500;
  color: var(--nubx-dark);
}
.primary-navigation a:hover {
  color: var(--nubx-accent);
}

/* Hero section for the front page */
.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 5rem 2rem;
  background: linear-gradient(180deg, var(--nubx-bg) 0%, #eef3fc 100%);
  border-bottom: 1px solid var(--nubx-border);
}
.hero-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.hero-subtitle {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  color: var(--nubx-mid);
  max-width: 800px;
}
.hero-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.button {
  background-color: var(--nubx-accent);
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-weight: 600;
  display: inline-block;
  transition: background-color 0.2s ease;
}
.button:hover {
  background-color: var(--nubx-dark);
  text-decoration: none;
}

/* Content */
main.site-main {
  padding: 2rem 0;
}
.site-main .page-content {
  max-width: 800px;
  margin: 0 auto;
}

/* Footer styles */
footer.site-footer {
  background-color: var(--nubx-dark);
  color: #ffffff;
  padding: 2rem 0;
  font-size: 0.9rem;
}
.site-footer .footer-widgets {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2rem;
}
.footer-widget {
  flex: 1;
  min-width: 200px;
}
.footer-widget-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.site-footer a {
  color: #c7d4f2;
}
.site-footer a:hover {
  color: #ffffff;
}
.site-footer .site-info {
  text-align: center;
  font-size: 0.8rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .primary-navigation ul {
    flex-direction: column;
    gap: 1rem;
  }
  .hero-title {
    font-size: 2rem;
  }
  .hero-subtitle {
    font-size: 1rem;
  }
  .site-footer .footer-widgets {
    flex-direction: column;
  }
}