```css
/*
Theme Name: Digital Colonies
Theme URI: https://digitalcolonies.com
Author: Digital Colonies LLC
Author URI: https://digitalcolonies.com
Description: A privacy-first, patriotic WordPress theme for Digital Colonies and VaultNode. Features Revolutionary Tech Frontier aesthetics with Colonial Blue, Colonial Red, Gold, and Green brand colors. Optimized for constitutional tech advocacy and hardware product showcases.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: digital-colonies
Domain Path: /languages
Requires at least: 5.0
Requires PHP: 7.4
*/

/* CSS Reset & Base */
:root {
    /* Colonial Brand Palette - Website Theme */
    --colonial-blue: #344468;    /* Headers, footers, primary */
    --colonial-red: #9E2A16;     /* Buttons, accents, links hover */
    --colonial-white: #E1DAD2;   /* Text, backgrounds */
    --gold: #D4AF37;             /* Highlights, borders */
    --green: #228B22;            /* Success, trust */
    
    /* Legacy Shield Colors (reference only) */
    --shield-navy: #0A2540;
    --shield-red: #C8102E;
    
    /* Functional Mappings */
    --navy: var(--colonial-blue);
    --red: var(--colonial-red);
    --white: var(--colonial-white);
    --off-white: #F5F3F0;
    --light-gray: #D5CFC8;
    --text-dark: #2C2416;
    --text-muted: #5A5348;
    
    --font-primary: 'Libre Franklin', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-accent: 'Crimson Text', Georgia, 'Times New Roman', serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--off-white);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-accent);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: var(--colonial-blue);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }

p {
    margin-bottom: 1rem;
}

a {
    color: var(--colonial-red);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:link {
	color: var(--colonial-red)
}

a:visited {
	color: var(--colonial-red)
}

a:hover {
    color: var(--gold);
}


/* Header & Navigation */
.site-header {
    background-color: var(--colonial-blue);
    color: var(--colonial-white);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(52, 68, 104, 0.3);
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Site Branding - Shield + Text Layout */
.site-branding {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Shield Logo Container */
.logo-icon {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}

/* Shield Image - Fixed 60px */
.shield-logo {
    height: 100px;
    width: 100px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform-origin: center center;
}

/* Shield Animation on Hover */
.logo-icon:hover .shield-logo {
    transform: rotate(-360deg);
}

/* Optional: Subtle circuit pulse animation */
@keyframes circuitPulse {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 2px var(--gold)); }
    50% { filter: brightness(1.3) drop-shadow(0 0 8px var(--gold)); }
}

.shield-logo {
    animation: circuitPulse 3s ease-in-out infinite;
}

/* Colonial Brand Text Container */
.colonial-brand {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.1;
}

.brand-link {
    text-decoration: none;
    display: flex;
    flex-direction: column;
}

/* "DIGITAL COLONIES" - Main Title */
.colonial-title {
    font-family: var(--font-accent);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--colonial-white);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-shadow: 1px 1px 3px rgba(10, 37, 64, 0.5);
    transition: color 0.3s ease;
    margin: 0;
}

/* Gold hover effect */
.brand-link:hover .colonial-title {
    color: var(--gold);
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
}

.colonial-title {
	font-family: "Libre Franklin", -apple-system, BlinkMacSystemFont, sans-serif; /* Modern clean font */
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--colonial-white);
	text-transform: uppercase; /* Ensures all caps display */
	letter-spacing: 0.15em;
	text-shadow: 1px 1px 3px rgba(10, 37, 64, 0.5);
	margin: 0;
}

/* Subtitle/Tagline - "Unify and Thrive" */
.colonial-subtitle {
    font-family: var(--font-primary);
    font-size: 0.8rem;
    color: var(--gold);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 0.25rem;
    opacity: 0.9;
}

/* Navigation */
.main-navigation ul {
    list-style: none;
    display: flex;
    gap: 2rem;
    margin: 0;
    padding: 0;
}

.main-navigation a {
    color: var(--colonial-white);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    padding: 0.5rem 0;
    position: relative;
}

.main-navigation a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
	color: var(--colonial-white);
    background-color: var(--gold);
    transition: width 0.3s ease;
}

.main-navigation a:hover::after,
.main-navigation .current-menu-item a::after {
    width: 100%;
}

.main-navigation a:hover {
    color: var(--gold);
}

/* Mobile Menu Toggle */
.menu-toggle {
    display: none;
    background: none;
    border: 2px solid var(--gold);
    color: var(--gold);
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-family: var(--font-primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.menu-toggle:hover {
    background-color: var(--gold);
    color: var(--colonial-blue);
}

/* Hero Section */
.hero-section {
    background: linear-gradient(135deg, var(--colonial-blue) 0%, #4a5a7d 100%);
    color: var(--colonial-white);
    padding: 5rem 2rem;
    text-align: center;
    border-bottom: 4px solid var(--gold);
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100" fill="none" stroke="%23D4AF37" stroke-width="0.5" opacity="0.1"/></svg>');
    opacity: 0.3;
    pointer-events: none;
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.hero-title {
    font-size: 3.5rem;
    color: var(--colonial-white);
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    font-family: var(--font-accent);
}

.hero-subtitle {
    font-size: 1.5rem;
    color: var(--gold);
    margin-bottom: 2rem;
    font-family: var(--font-accent);
    font-style: italic;
}

/* Update ALL button selectors to include 'a' element */
.cta-button {
    display: inline-block;
    background-color: var(--colonial-red);
    color: var(--colonial-white) !important; /* Force white */
    padding: 1rem 2.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 4px;
    border: 2px solid var(--colonial-red);
    transition: all 0.3s ease;
    font-family: var(--font-primary);
    text-decoration: none; /* Kill underline */
}

/* Hover stays gold */
.cta-button:hover {
    background-color: transparent;
    color: var(--gold) !important;
    border-color: var(--gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}


.hero-cta-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2rem;
}

.cta-primary {
    order: 1;
}

.cta-secondary {
    background: transparent;
    color: var(--colonial-white);
    border: 2px solid var(--colonial-white);
}

.cta-secondary:hover {
    background: var(--colonial-white);
    color: var(--colonial-blue);
}

/* Main Content Layout */
.site-content {
    max-width: 1200px;
    margin: 3rem auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 3rem;
}

.content-area {
    background: var(--colonial-white);
    padding: 2.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-top: 4px solid var(--colonial-blue);
}

.widget-area {
    background: var(--off-white);
    padding: 1.5rem;
    border-radius: 8px;
    border-top: 4px solid var(--colonial-red);
}

/* Posts & Pages */
.entry-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--light-gray);
}

.entry-title {
	text-align: center;
    color: var(--colonial-blue);
    font-size: 2.25rem;
    margin-bottom: 0.5rem;
}

.entry-title a {
    color: inherit;
}

.entry-title a:hover {
    color: var(--colonial-white);
}

.entry-meta {
    color: var(--text-muted);
    font-size: 0.875rem;
    font-style: italic;
}

.entry-content {
    line-height: 1.8;
}

.entry-content h2 {
    color: var(--colonial-blue);
    margin: 2.5rem 0 1rem;
    font-family: var(--font-accent);
}

.entry-content h3 {
    color: var(--colonial-blue);
    border-bottom: 2px solid var(--light-gray);
    padding-bottom: 0.5rem;
}

/* Product Features (VaultNode) */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.feature-card {
    background: var(--off-white);
    border: 1px solid var(--light-gray);
    padding: 2.5rem;
    border-radius: 8px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-top: 4px solid var(--green);
    position: relative;
    overflow: hidden;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gold);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.feature-card:hover::before {
    transform: scaleX(1);
}

.feature-icon {
    font-size: 2.5rem;
    color: var(--colonial-blue);
    margin-bottom: 1.5rem;
    display: inline-block;
}

.feature-title {
    color: var(--colonial-blue);
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    font-family: var(--font-accent);
    font-weight: 700;
}

.feature-desc {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Sidebar Widgets */
.widget {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--light-gray);
}

.widget:last-child {
    border-bottom: none;
}

.widget-title {
    color: var(--colonial-blue);
    font-size: 1.1rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    border-bottom: 2px solid var(--gold);
    padding-bottom: 0.5rem;
    display: inline-block;
}

.widget ul {
    list-style: none;
}

.widget li {
    margin-bottom: 0.75rem;
    position: relative;
    padding-left: 1rem;
}

.widget li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--colonial-red);
}

.widget a {
    color: var(--text-dark);
    transition: all 0.2s;
}

.widget a:hover {
    color: var(--colonial-red);
    padding-left: 0.25rem;
}

/* Footer */
.site-footer {
    background-color: var(--colonial-blue);
    color: var(--colonial-white);
    padding: 4rem 2rem 1.5rem;
    margin-top: 4rem;
    border-top: 4px solid var(--gold);
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
}

.footer-section h3 {
    color: var(--gold);
    font-size: 1.25rem;
    margin-bottom: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: var(--font-accent);
}

.footer-section p,
.footer-section a {
    color: var(--colonial-white);
    font-size: 0.9rem;
    line-height: 1.8;
}

.footer-section a:hover {
    color: var(--gold);
}

.footer-bottom {
    max-width: 1200px;
    margin: 3rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid rgba(225, 218, 210, 0.2);
    text-align: center;
    color: rgba(225, 218, 210, 0.7);
    font-size: 0.875rem;
}

/* Amendment Banner */
.amendment-banner {
    background-color: var(--colonial-red);
    color: var(--colonial-white);
    padding: 0.75rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    font-family: var(--font-primary);
    text-transform: uppercase;
}

/* Responsive */
@media screen and (max-width: 768px) {
    .menu-toggle {
        display: block;
    }
    
    .main-navigation {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--colonial-blue);
        padding: 1.5rem;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    
    .main-navigation.toggled {
        display: block;
    }
    
    .main-navigation ul {
        flex-direction: column;
        gap: 1.25rem;
    }
    
    .site-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin: 2rem auto;
    }
    
    .content-area {
        padding: 1.5rem;
    }
    
    .hero-title {
        font-size: 2.25rem;
    }
    
    .hero-subtitle {
        font-size: 1.2rem;
    }
    
    .feature-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .footer-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }
    
    .header-container {
        flex-wrap: wrap;
        gap: 1rem;
    }
    
    /* Mobile branding adjustments */
    .shield-logo {
        height: 60px;
        width: 60px;
    }
    
    .colonial-title {
        font-size: 1.25rem;
        letter-spacing: 0.08em;
    }
    
    .colonial-subtitle {
        font-size: 0.7rem;
        letter-spacing: 0.1em;
    }
    
    .site-branding {
        gap: 0.75rem;
    }
}

/* Respect user motion preferences (accessibility) */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .shield-logo {
        animation: none;
    }
}

/* Accessibility */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: var(--colonial-white);
    clip: auto !important;
    clip-path: none;
    color: var(--text-dark);
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    padding: 15px 23px 14px;
    position: absolute;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* WordPress Alignments */
.alignleft {
    float: left;
    margin-right: 1.5rem;
    margin-bottom: 1rem;
}

.alignright {
    float: right;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
}

/* Block Editor Support */
.wp-block-button__link {
    background-color: var(--colonial-red);
    color: var(--colonial-white);
    border-radius: 4px;
    font-weight: 700;
    padding: 0.75rem 1.5rem;
    transition: all 0.3s ease;
}

.wp-block-button__link:hover {
    background-color: var(--gold);
    color: var(--colonial-blue);
}

/* Editor Styles for Backend */
.editor-styles-wrapper {
    background-color: var(--off-white);
    color: var(--text-dark);
    font-family: var(--font-primary);
}

.block-editor__container .editor-styles-wrapper h1,
.block-editor__container .editor-styles-wrapper h2,
.block-editor__container .editor-styles-wrapper h3,
.block-editor__container .editor-styles-wrapper h4 {
    color: var(--colonial-blue);
    font-family: var(--font-accent);
}

/* Pagination */
.pagination {
    margin: 3rem 0 1.5rem;
    text-align: center;
}

.pagination a,
.pagination span {
    display: inline-block;
    padding: 0.5rem 1rem;
    margin: 0 0.25rem;
    background: var(--off-white);
    color: var(--colonial-blue);
    border: 1px solid var(--light-gray);
    border-radius: 4px;
    transition: all 0.2s;
}

.pagination a:hover,
.pagination .current {
    background: var(--colonial-blue);
    color: var(--colonial-white);
    border-color: var(--colonial-blue);
}

/* Comments */
.comments-area {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid var(--light-gray);
}

.comment-respond {
    background: var(--off-white);
    padding: 2rem;
    border-radius: 8px;
}

/* Forms */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--light-gray);
    border-radius: 4px;
    font-family: var(--font-primary);
    font-size: 1rem;
    background: var(--colonial-white);
    color: var(--text-dark);
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

button,
input[type="submit"] {
    background-color: var(--colonial-red);
    color: var(--colonial-white);
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.3s ease;
}

button:hover,
input[type="submit"]:hover {
    background-color: var(--gold);
    color: var(--colonial-blue);
    transform: translateY(-2px);
}
```