---

### 🎨 Step 2: Ensure Your Accompanying Styling Is Perfect

To guarantee the colors, widths, spacing, layouts, and typography fonts scale flawlessly on mobile and desktop, go back to your hosting **File Manager**, edit **`style.css`**, and save this clean, optimized rule set:

```css
/*
Theme Name: Nations NHR Global Human Rights Theme
Theme URI: https://nationshr.org
Author: Custom NGO Architecture Core
Version: 1.0.4
Text Domain: nationshr-theme
*/

:root {
    --primary-navy: #0A2540;
    --accent-crimson: #C2185B;
    --bg-alabaster: #FAFAFA;
    --text-charcoal: #2D3748;
}

body {
    background-color: var(--bg-alabaster);
    color: var(--text-charcoal);
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

/* Header Grid Styling Rules */
.site-header {
    background-color: var(--primary-navy);
    color: #ffffff;
    padding: 15px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 4px solid var(--accent-crimson);
}

.site-logo h1 {
    margin: 0;
    font-weight: 900;
}

.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 25px;
}

.main-nav a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.5px;
    transition: color 0.2s ease;
}

.main-nav a:hover {
    color: #FFD700;
}

/* Structural Components Layout arrays */
.hero-banner {
    background: linear-gradient(rgba(10, 37, 64, 0.88), rgba(10, 37, 64, 0.88)), url('https://unsplash.com') center/cover no-repeat;
    color: #ffffff;
    text-align: center;
}

.hero-banner h2 {
    font-size: 42px;
    margin-bottom: 15px;
    font-weight: 900;
    line-height: 1.2;
}

.news-ticker {
    background-color: #1A202C;
    color: #FFD700;
    padding: 12px 5%;
    font-weight: bold;
    font-size: 13px;
}

.metrics-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    padding: 40px 5%;
    background-color: #ffffff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.metric-card {
    text-align: center;
    border-top: 4px solid var(--accent-crimson);
    padding: 25px 15px;
    background: #FFF;
}

.metric-num {
    font-size: 36px;
    font-weight: 900;
    color: var(--primary-navy);
}

.grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.post-card {
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    border: 1px solid #E2E8F0;
    transition: transform 0.2s ease;
}

.post-card:hover {
    transform: translateY(-4px);
}

.post-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.post-body {
    padding: 25px;
}

.btn-accent {
    background-color: var(--accent-crimson);
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    transition: background 0.2s ease;
}

.btn-accent:hover {
    background-color: #A0144C;
}

/* Ensure completely responsive scaling behavior across smaller viewports */
@media (max-width: 768px) {
    .site-header { flex-direction: column; text-align: center; gap: 15px; }
    .main-nav ul { gap: 12px; flex-wrap: wrap; justify-content: center; }
    .hero-banner h2 { font-size: 28px; }
}
/* Custom Featured Image Size Tuning */
.page-block img.wp-post-image {
    max-width: 450px !important;   /* 📐 Width Control: Change this to make it smaller (e.g., 350px) or larger (e.g., 550px) */
    height: auto !important;       /* Keeps the image proportions perfectly balanced so it never stretches */
    display: block !important;
    margin: 0 auto 20px auto !important; /* 🎯 Alignment: Centers the image perfectly inside its block frame */
    border-radius: 6px !important; /* Softens the image corners for a clean, modern look */
    box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important; /* Adds a premium subtle shadow depth under the photo */
}
/* Professional Read More Button Styling */
.content-text-area a.more-link {
    display: inline-block !important;
    background-color: #C2185B !important;
    color: #FFFFFF !important;
    padding: 10px 20px !important;
    margin-top: 15px !important;
    font-weight: bold !important;
    font-size: 13px !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 6px rgba(194,24,91,0.2) !important;
    transition: background 0.2s ease-in-out !important;
}

.content-text-area a.more-link:hover {
    background-color: #0A2540 !important; /* Turns midnight navy on hover */
    color: #FFFFFF !important;
}
/* Contact Form 7 Field Enhancements */
.wpcf7 input.form-control, .wpcf7 textarea.form-control {
    width: 100% !important;
    padding: 10px 15px !important;
    background-color: #FAFAFA !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 4px !important;
    font-family: inherit !important;
    font-size: 14px !important;
    color: #2D3748 !important;
    box-sizing: border-box !important;
}

.wpcf7 input.form-control:focus, .wpcf7 textarea.form-control:focus {
    border-color: #C2185B !important;
    outline: none !important;
    background-color: #FFFFFF !important;
}

.wpcf7 textarea.form-control {
    height: 120px !important;
    resize: vertical !important;
}
/* 📸 Unified Blog Grid Image Crop Matrix */
.post-card img, 
.post-card .wp-post-image {
    width: 100% !important;
    height: 220px !important;       /* 📐 Strict Height Lock: Forces all pictures to have the exact same height boundary */
    object-fit: cover !important;    /* 🎯 Smart Auto-Crop: Centers and crops the photo safely so it never stretches or distorts */
    object-position: center !important; /* Keeps the middle of the camera shot focused */
    display: block !important;
}
/* 📸 OFFICIAL WORDPRESS NATIVE GALLERY & BLOCK GRID SYSTEM */
.blocks-gallery-grid, 
.wp-block-gallery {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 20px auto !important;
    max-width: 100% !important;
}

/* Forces gallery items to snap into an even 3-column layout on desktop screens */
.blocks-gallery-grid .blocks-gallery-item, 
.wp-block-gallery .wp-block-image {
    flex: 1 1 calc(33.333% - 16px) !important;
    min-width: 250px !important;
    margin: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04) !important;
}

/* Locks all gallery photos to an identical crop height so they look perfectly aligned */
.blocks-gallery-grid .blocks-gallery-item img, 
.wp-block-gallery .wp-block-image img {
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    transition: transform 0.3s ease !important;
}

.blocks-gallery-grid .blocks-gallery-item img:hover, 
.wp-block-gallery .wp-block-image img:hover {
    transform: scale(1.03) !important; /* Premium clean zoom effect on hover */
}

/* Native Video Embedding block scaling alignment overrides */
.wp-block-embed-youtube, 
.wp-block-embed {
    max-width: 100% !important;
    margin: 25px auto !important;
}

.wp-block-embed__wrapper {
    position: relative !important;
    padding-bottom: 56.25% !important; /* Locks video player framework to widescreen 16:9 ratio */
    height: 0 !important;
    overflow: hidden !important;
    border-radius: 8px !important;
}

.wp-block-embed__wrapper iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
}

/* Ensures fluid columns collapse cleanly down to a single line block on mobile devices */
@media (max-width: 768px) {
    .blocks-gallery-grid .blocks-gallery-item, 
    .wp-block-gallery .wp-block-image {
        flex: 1 1 100% !important;
    }
}
/* 📋 CRISP FORM FIELD BORDERS & HIGHLIGHT MATRIX */
.reg-control,
input[type="text"].reg-control,
input[type="tel"].reg-control,
input[type="email"].reg-control,
input[type="url"].reg-control,
input[type="file"].reg-control,
textarea.reg-control {
    border: 2px solid #CBD5E1 !important;    /* 📐 Solid Border: Changes the thin line into a highly visible slate gray box border */
    border-radius: 6px !important;            /* Softly rounds the box corners for a modern, sleek appearance */
    background-color: #FFFFFF !important;     /* Forces the input field background to stay crisp, clean white */
    padding: 12px 14px !important;            /* Adds comfortable padding text margins inside the border box */
    font-size: 14px !important;
    transition: all 0.2s ease-in-out !important; /* Creates a smooth fade animation during selection transitions */
}

/* 🎯 INTERACTIVE FOCUS STATE: Triggers when a user clicks inside the input box box */
.reg-control:focus,
input[type="text"].reg-control:focus,
input[type="tel"].reg-control:focus,
input[type="email"].reg-control:focus,
input[type="url"].reg-control:focus,
textarea.reg-control:focus {
    border-color: #C2185B !important;        /* Swaps the gray line to your official Crimson Red boundary */
    box-shadow: 0 0 0 4px rgba(194, 24, 91, 0.15) !important; /* Adds a soft crimson shadow glow around the box */
    background-color: #FFFFFF !important;
    outline: none !important;                 /* Clears default yellow browser outline boxes */
}

/* Enhances file upload fields specifically to make document attachment clear */
input[type="file"].reg-control {
    background-color: #F8FAFC !important;
    border: 2px dashed #CBD5E1 !important;    /* Uses a clean dashed layout style for the document attachments area */
    cursor: pointer;
}
input[type="file"].reg-control:hover {
    border-color: #C2185B !important;
}