/*
Theme Name: Social Square
Theme URI: https://socialsquare.com
Author: Williamsville Empire Development
Author URI: https://williamsvilleempire.com
Description: The Operating System for Gen Z Life — a nine-hub digital ecosystem theme with granular admin theming controls. Designed as the visual scaffolding layer for the Social Square platform, providing design tokens, hub navigation, responsive layout, and template hooks for the Social Square Core and Hub plugins.
Version: 1.2.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.1
License: Proprietary
License URI: https://socialsquare.com/license
Text Domain: social-square
Tags: social-network, custom-colors, custom-fonts, dark-mode, hub-navigation

Social Square Theme — All rights reserved.
Williamsville Empire Development © 2026
*/

/* ==========================================================================
   BASE RESET & FOUNDATION
   All design tokens are in assets/css/design-tokens.css
   All component styles are in assets/css/components.css
   This file provides the WordPress-required theme header
   and minimal base resets.
   ========================================================================== */

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

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}

body {
    font-family: var(--ss-font-body);
    font-size: var(--ss-type-body);
    font-weight: var(--ss-weight-regular);
    line-height: 1.6;
    color: var(--ss-text-primary);
    background-color: var(--ss-page-bg);
    overflow-x: hidden;
    transition: background-color var(--ss-transition-slow), color var(--ss-transition-slow);
}

/* WordPress core alignment classes */
.alignwide {
    max-width: var(--ss-content-max-width-wide, 1440px);
    margin-left: auto;
    margin-right: auto;
}

.alignfull {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.alignleft {
    float: left;
    margin-right: var(--ss-spacing-md);
}

.alignright {
    float: right;
    margin-left: var(--ss-spacing-md);
}

/* Screen reader text (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 !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: var(--ss-primary-500);
    clip: auto !important;
    clip-path: none;
    color: #fff;
    display: block;
    font-size: var(--ss-type-ui);
    font-weight: var(--ss-weight-semibold);
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
    border-radius: var(--ss-radius-md);
}

/* Skip to content link */
.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    padding: 12px 24px;
    background: var(--ss-primary-500);
    color: #fff;
    border-radius: 0 0 var(--ss-radius-md) var(--ss-radius-md);
    font-family: var(--ss-font-ui);
    font-size: var(--ss-type-ui);
    font-weight: var(--ss-weight-medium);
    text-decoration: none;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0;
    outline: 2px solid var(--ss-primary-300);
    outline-offset: 2px;
}

/* Base image handling */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Base link styles */
a {
    color: var(--ss-text-link);
    text-decoration: none;
    transition: color var(--ss-transition-normal);
}

a:hover {
    color: var(--ss-text-link-hover);
    text-decoration: underline;
}

a:focus-visible {
    outline: 2px solid var(--ss-border-focus);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Selection */
::selection {
    background-color: var(--ss-selection-bg);
    color: var(--ss-text-primary);
}

/* Scrollbar styling (webkit) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--ss-neutral-100);
}

::-webkit-scrollbar-thumb {
    background: var(--ss-neutral-300);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ss-neutral-400);
}

/* WordPress admin bar adjustment */
body.admin-bar .ss-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .ss-header {
        top: 46px;
    }
}