/** * Rajgir Parent Theme * * Layout CSS — Sidebar * * Canonical path: * assets/css/layouts/sidebar.css * * Primary markup owner: * sidebar.php * * Current markup: * * * * Responsibility: * - Sidebar layout * - Sidebar spacing * - Sidebar widget layout * - Sidebar responsive behavior * - Sidebar visual structure * * Does NOT own: * - Widget data * - Business logic * - Feed ranking * - Recommendations * - Authentication * - Authorization * - Database mutation * - Application service authority * * @package Rajgir */ defined( 'ABSPATH' ) || exit; /* ========================================================================== 1. SIDEBAR FOUNDATION ========================================================================== */ .rg-sidebar { position: relative; width: 100%; min-width: 0; margin: 0; padding: 0; box-sizing: border-box; } /* ========================================================================== 2. SIDEBAR CHILD BOX SIZING ========================================================================== */ .rg-sidebar *, .rg-sidebar *::before, .rg-sidebar *::after { box-sizing: border-box; } /* ========================================================================== 3. SIDEBAR INNER ========================================================================== */ .rg-sidebar__inner { display: flex; flex-direction: column; width: 100%; min-width: 0; gap: var(--rajgir-space-sidebar-gap); } /* ========================================================================== 4. SIDEBAR WIDGET AREA ========================================================================== */ .rg-sidebar.widget-area { width: 100%; min-width: 0; } /* ========================================================================== 5. WIDGET FOUNDATION ========================================================================== */ .rg-sidebar .widget { width: 100%; min-width: 0; margin: 0; } /* ========================================================================== 6. WIDGET STACK ========================================================================== */ .rg-sidebar .widget + .widget { margin-top: var(--rajgir-space-sidebar-widget-gap); } /* ========================================================================== 7. WIDGET TITLE ========================================================================== */ .rg-sidebar .widget-title { margin: 0 0 var(--rajgir-space-sidebar-title-gap); color: var(--rajgir-color-sidebar-heading); font-family: var(--rajgir-type-heading-font-family); font-size: var(--rajgir-type-sidebar-title-font-size); font-weight: var(--rajgir-type-sidebar-title-font-weight); line-height: var(--rajgir-type-sidebar-title-line-height); overflow-wrap: break-word; } /* ========================================================================== 8. WIDGET CONTENT ========================================================================== */ .rg-sidebar .widget > :last-child { margin-bottom: 0; } /* ========================================================================== 9. WIDGET LIST ========================================================================== */ .rg-sidebar ul { margin: 0; padding: 0; list-style: none; } /* ========================================================================== 10. WIDGET LIST ITEM ========================================================================== */ .rg-sidebar li { margin: 0; padding: 0; } /* ========================================================================== 11. WIDGET LIST ITEM SPACING ========================================================================== */ .rg-sidebar li + li { margin-top: var(--rajgir-space-sidebar-item-gap); } /* ========================================================================== 12. WIDGET LINKS ========================================================================== */ .rg-sidebar a { color: var(--rajgir-color-sidebar-link); text-decoration: none; overflow-wrap: break-word; } /* ========================================================================== 13. WIDGET LINKS — HOVER ========================================================================== */ .rg-sidebar a:hover { color: var(--rajgir-color-sidebar-link-hover); text-decoration: underline; text-underline-offset: 0.15em; } /* ========================================================================== 14. WIDGET LINKS — FOCUS ========================================================================== */ .rg-sidebar a:focus-visible { outline: 2px solid var(--rajgir-color-focus); outline-offset: 2px; border-radius: var(--rajgir-radius-focus); } /* ========================================================================== 15. SIDEBAR TEXT ========================================================================== */ .rg-sidebar p { overflow-wrap: break-word; } /* ========================================================================== 16. SIDEBAR FORM ========================================================================== */ .rg-sidebar form { width: 100%; } /* ========================================================================== 17. SIDEBAR FORM CONTROLS ========================================================================== */ .rg-sidebar input, .rg-sidebar select, .rg-sidebar textarea { max-width: 100%; } /* * Detailed form presentation remains owned by: * * assets/css/components/forms.css */ /* ========================================================================== 18. SIDEBAR BUTTON ========================================================================== */ .rg-sidebar button { max-width: 100%; } /* * Button presentation remains owned by: * * assets/css/components/buttons.css */ /* ========================================================================== 19. SIDEBAR IMAGE ========================================================================== */ .rg-sidebar img { display: block; max-width: 100%; height: auto; } /* ========================================================================== 20. SIDEBAR MEDIA ========================================================================== */ .rg-sidebar video, .rg-sidebar iframe { display: block; max-width: 100%; } /* ========================================================================== 21. SIDEBAR TABLE ========================================================================== */ .rg-sidebar table { width: 100%; max-width: 100%; border-collapse: collapse; } /* ========================================================================== 22. SIDEBAR TABLE SAFETY ========================================================================== */ .rg-sidebar th, .rg-sidebar td { max-width: 100%; overflow-wrap: break-word; } /* ========================================================================== 23. SIDEBAR SEARCH ========================================================================== */ .rg-sidebar .search-form { display: flex; align-items: stretch; gap: var(--rajgir-space-sidebar-control-gap); width: 100%; } /* ========================================================================== 24. SIDEBAR SEARCH INPUT ========================================================================== */ .rg-sidebar .search-field { flex: 1 1 auto; min-width: 0; width: 100%; } /* ========================================================================== 25. SIDEBAR SEARCH SUBMIT ========================================================================== */ .rg-sidebar .search-submit { flex: 0 0 auto; } /* ========================================================================== 26. SIDEBAR MAIN LAYOUT CONTEXT ========================================================================== */ /* * Desktop composition: * * Container * │ * ├── Main Content * │ * └── Optional Sidebar * * Sidebar is not responsible for creating the page's main grid. * * The page-level layout belongs to: * * assets/css/layouts/page-layout.css */ /* ========================================================================== 27. SIDEBAR GRID ITEM ========================================================================== */ .rg-sidebar { grid-column: auto; } /* * The parent page layout determines the actual grid columns. */ /* ========================================================================== 28. SIDEBAR WIDTH ========================================================================== */ /* * Do not invent a constitutional fixed sidebar width here. * * The source establishes: * * Container + Main Content + Optional Sidebar * * but does not lock a universal numeric sidebar width. */ /* ========================================================================== 29. SIDEBAR FLEXIBILITY ========================================================================== */ .rg-sidebar__inner { min-width: 0; max-width: 100%; } /* ========================================================================== 30. SIDEBAR DESKTOP ========================================================================== */ @media (min-width: 1024px) { .rg-sidebar { align-self: start; } .rg-sidebar__inner { position: relative; } } /* ========================================================================== 31. SIDEBAR TABLET ========================================================================== */ @media (min-width: 768px) and (max-width: 1023px) { .rg-sidebar { width: 100%; } } /* ========================================================================== 32. SIDEBAR MOBILE ========================================================================== */ @media (max-width: 767px) { .rg-sidebar { width: 100%; margin-top: var(--rajgir-space-sidebar-mobile-margin); } .rg-sidebar__inner { gap: var(--rajgir-space-sidebar-mobile-gap); } } /* ========================================================================== 33. MOBILE SIDEBAR STACK ========================================================================== */ /* * Mobile default: * * Main Content * ↓ * Relevant Sidebar Content * * Sidebar is not forced into a side-by-side desktop arrangement. */ /* ========================================================================== 34. MOBILE SIDEBAR WIDGETS ========================================================================== */ @media (max-width: 767px) { .rg-sidebar .widget + .widget { margin-top: var(--rajgir-space-sidebar-mobile-widget-gap); } } /* ========================================================================== 35. SIDEBAR OPTIONALITY ========================================================================== */ /* * Sidebar visibility is controlled by the WordPress widget/template * architecture. * * sidebar.php already checks: * * is_active_sidebar( 'sidebar-1' ) * * CSS must not force an empty sidebar into the layout. */ /* ========================================================================== 36. SIDEBAR EMPTY SAFETY ========================================================================== */ /* * If no sidebar is active: * * sidebar.php * ↓ * return * * No empty visual sidebar should be created by CSS. */ /* ========================================================================== 37. SIDEBAR VALUE RULE ========================================================================== */ /* * Sidebar should be used where it provides user value, such as: * * - Related Content * - Filters * - Contextual Navigation * - Supplementary Information * - Dashboard Tools * * It should not exist merely to fill desktop whitespace. */ /* ========================================================================== 38. RELATED CONTENT ========================================================================== */ .rg-sidebar .rg-related-content { width: 100%; min-width: 0; } /* ========================================================================== 39. SIDEBAR FILTERS ========================================================================== */ .rg-sidebar .rg-filters { width: 100%; min-width: 0; } /* ========================================================================== 40. CONTEXTUAL NAVIGATION ========================================================================== */ .rg-sidebar .rg-contextual-navigation { width: 100%; min-width: 0; } /* ========================================================================== 41. SUPPLEMENTARY INFORMATION ========================================================================== */ .rg-sidebar .rg-supplementary { width: 100%; min-width: 0; } /* ========================================================================== 42. DASHBOARD TOOLS ========================================================================== */ .rg-sidebar .rg-dashboard-tools { width: 100%; min-width: 0; } /* * These classes are layout compatibility hooks only. * * They do not create domain functionality. */ /* ========================================================================== 43. SIDEBAR CARD COMPATIBILITY ========================================================================== */ .rg-sidebar .rg-card { width: 100%; max-width: 100%; } /* * Card presentation remains owned by: * * assets/css/components/cards.css */ /* ========================================================================== 44. SIDEBAR MEDIA COMPATIBILITY ========================================================================== */ .rg-sidebar .rg-media { width: 100%; max-width: 100%; } /* * Media presentation remains owned by: * * assets/css/components/media.css */ /* ========================================================================== 45. SIDEBAR BADGE COMPATIBILITY ========================================================================== */ .rg-sidebar .rg-badge { max-width: 100%; } /* * Badge presentation remains owned by the common Badge component. */ /* ========================================================================== 46. SIDEBAR BUTTON COMPATIBILITY ========================================================================== */ .rg-sidebar .rg-button { max-width: 100%; } /* * Button presentation remains owned by: * * assets/css/components/buttons.css */ /* ========================================================================== 47. SIDEBAR OVERFLOW SAFETY ========================================================================== */ .rg-sidebar, .rg-sidebar__inner, .rg-sidebar .widget { overflow-wrap: break-word; } /* ========================================================================== 48. NO BLIND OVERFLOW HIDING ========================================================================== */ /* * Do NOT use: * * overflow: hidden; * * on the entire sidebar merely to suppress layout problems. * * Content must remain discoverable and usable. */ /* ========================================================================== 49. NO HORIZONTAL SCROLL ========================================================================== */ .rg-sidebar { max-width: 100%; } /* * Child components must also respect available width. */ /* ========================================================================== 50. LONG CONTENT ========================================================================== */ .rg-sidebar pre, .rg-sidebar code { max-width: 100%; overflow-x: auto; } /* ========================================================================== 51. SIDEBAR FOCUS PRESERVATION ========================================================================== */ .rg-sidebar :focus-visible { outline: 2px solid var(--rajgir-color-focus); outline-offset: 2px; } /* ========================================================================== 52. SIDEBAR HEADING HIERARCHY ========================================================================== */ .rg-sidebar h2, .rg-sidebar h3, .rg-sidebar h4 { overflow-wrap: break-word; } /* ========================================================================== 53. SIDEBAR SECTION SEPARATION ========================================================================== */ .rg-sidebar__section + .rg-sidebar__section { margin-top: var(--rajgir-space-sidebar-section-gap); } /* ========================================================================== 54. SIDEBAR DIVIDER ========================================================================== */ .rg-sidebar__divider { width: 100%; height: 1px; margin: var(--rajgir-space-sidebar-divider-gap) 0; background: var(--rajgir-color-border); } /* ========================================================================== 55. SIDEBAR STICKY ========================================================================== */ /* * Sidebar sticky behavior is optional. * * Do not make every sidebar sticky by default. * * If an approved feature requires sticky behavior, the implementation * must preserve: * * - content visibility; * - accessibility; * - viewport boundaries; * - responsive behavior. */ /* ========================================================================== 56. OPTIONAL STICKY MODIFIER ========================================================================== */ .rg-sidebar--sticky { position: sticky; top: var(--rajgir-sidebar-sticky-offset); } /* ========================================================================== 57. STICKY MOBILE RESET ========================================================================== */ @media (max-width: 767px) { .rg-sidebar--sticky { position: static; top: auto; } } /* ========================================================================== 58. SIDEBAR Z-INDEX ========================================================================== */ /* * Sidebar does not require an arbitrary high z-index. * * Normal document flow is preferred. * * If an approved sticky/overlay context requires layering, consume * centralized z-index tokens only. */ /* ========================================================================== 59. SIDEBAR PERFORMANCE ========================================================================== */ /* * Sidebar is optional and contextual. * * Avoid unnecessary: * * - heavy JavaScript; * - large media; * - expensive animation; * - unnecessary DOM; * - duplicate queries. */ /* ========================================================================== 60. SIDEBAR ACCESSIBILITY ========================================================================== */ /* * sidebar.php provides: * * aria-label="Sidebar" * * where the sidebar exists. * * CSS must preserve the semantic aside structure. */ /* ========================================================================== 61. SIDEBAR SEMANTIC ORDER ========================================================================== */ /* * Visual presentation must not arbitrarily reorder sidebar content * against semantic/document order. */ /* ========================================================================== 62. SIDEBAR MOBILE ACCESSIBILITY ========================================================================== */ /* * When sidebar content moves below the main content on mobile, its * semantic relationship must remain understandable. */ /* ========================================================================== 63. SIDEBAR DOMAIN BOUNDARY ========================================================================== */ /* * Sidebar is a layout surface. * * It is NOT: * * - Business Engine * - Tourism Engine * - Search Engine * - Recommendation Engine * - Booking Engine * - Complaint Engine * - Authentication Engine */ /* ========================================================================== 64. SIDEBAR WIDGET BOUNDARY ========================================================================== */ /* * WordPress owns registered widget rendering. * * sidebar.php: * * dynamic_sidebar( 'sidebar-1' ) * * CSS: * * presentation only. */ /* ========================================================================== 65. SIDEBAR + PAGE LAYOUT ========================================================================== */ /* * page-layout.css decides: * * Main * + * Optional Sidebar * * sidebar.css decides: * * Sidebar presentation inside that allocated layout region. */ /* ========================================================================== 66. SIDEBAR + CONTAINER ========================================================================== */ /* * container.css owns: * * .rg-container * * sidebar.css must not duplicate global container width rules. */ /* ========================================================================== 67. SIDEBAR + COMPONENTS ========================================================================== */ /* * Sidebar may consume: * * Buttons * Cards * Forms * Navigation * Media * Badges * * but does not replace those component systems. */ /* ========================================================================== 68. SIDEBAR + RESPONSIVE ========================================================================== */ /* * Responsive architecture: * * Mobile * ↓ * Tablet * ↓ * Desktop * ↓ * Large Screen * * Sidebar must remain usable at every applicable viewport. */ /* ========================================================================== 69. SIDEBAR CONTENT WIDTH ========================================================================== */ .rg-sidebar__inner > * { max-width: 100%; min-width: 0; } /* ========================================================================== 70. SIDEBAR LINKS WIDTH ========================================================================== */ .rg-sidebar a { max-width: 100%; } /* ========================================================================== 71. SIDEBAR LIST TEXT ========================================================================== */ .rg-sidebar li { max-width: 100%; overflow-wrap: break-word; } /* ========================================================================== 72. SIDEBAR PRINT ========================================================================== */ @media print { .rg-sidebar { position: static; width: 100%; background: transparent; color: var(--rajgir-color-text); } .rg-sidebar--sticky { position: static; } } /* ========================================================================== 73. REDUCED MOTION ========================================================================== */ @media (prefers-reduced-motion: reduce) { .rg-sidebar a { transition: none; } } /* ========================================================================== 74. SIDEBAR TRANSITION ========================================================================== */ .rg-sidebar a { transition: var(--rajgir-motion-transition-fast); } /* ========================================================================== 75. FINAL SIDEBAR ARCHITECTURE ========================================================================== */ /* * Container * │ * ├── Main Content * │ * └── Optional Sidebar * │ * └── Widgets * * Desktop: * * Main + Sidebar * * Mobile: * * Main * ↓ * Relevant Sidebar Content * * Sidebar remains: * * Optional * Contextual * Accessible * Responsive * Presentation-only */