/*
Theme Name: CASIN
Theme URI: https://casin.ifispan.pl
Author: 8 of Pentacles
Author URI: https://8ofp.co
Description: The Comparative Analysis of Social Inequality website theme
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.0
*/

/* Layout Variables */
:root {
    --font-base: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 
    --gap: 2rem;
    --margin: calc(var(--gap));
    --columns: 8;
    --color: #111;
    --color-accent: #004dff;
    --content-max-width: 1600px; /* Reduced max width */
    --column-width: calc((100% - var(--gap) * (var(--columns) - 1)) / var(--columns));
    font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
}

/* Typography */
@supports (font-variation-settings: normal) {
    :root {
        --font-base: InterVariable, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    }
}

@media (max-width: 1023px) {
    :root {
        --gap: 1rem;
    }
}

body {
    font-family: var(--font-base);
    font-synthesis: none;
    font-size: calc(15px + 0.390625vw);
    line-height: 1.5;
    color: var(--color);
    margin: 0 auto;
    font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    margin-bottom: 1em;
    margin-top: 1.5em;
    font-size: 200%;
    font-weight: 300;
    text-wrap: balance;
}

h3 {
    font-size: 150%;
}

h4 {
    font-size: 125%;
    font-weight: 350;
}

h5, h6 {
    font-size: 100%;
}

p {
    margin-bottom: 1em;
    line-height: 1.5;
    text-wrap: pretty;
    hyphens: auto;
}

b {
    font-weight: 550;
}

strong {
    font-weight: 550;
}

i {
    font-style: italic;
}

em {
    font-style: italic;
}

a {
    color: inherit;
}

a:hover, a:focus {
    color: var(--color-accent);
}

h2 a:hover,
h2 a:focus,
h3 a:hover,
h3 a:focus {
    text-decoration: none !important;
    border-bottom: 2px solid !important;
}

/* List styling for entry-content */
.entry-content ul,
.entry-content ol {
    margin: 0 0 0.5em 0.5em;
    padding-left: 0.75em;
}

.entry-content ul {
    list-style: disc;
}

.entry-content ol {
    list-style: decimal;
}

.entry-content li {
    margin-bottom: 0.5em;
}

.entry-content ul ul,
.entry-content ol ul {
    list-style-type: circle;
    margin-top: 0.5em;
}

.entry-content ul ul ul,
.entry-content ol ul ul {
    list-style-type: square;
}

.entry-content ol ol,
.entry-content ul ol {
    list-style-type: lower-alpha;
    margin-top: 0.5em;
}

.entry-content ol ol ol,
.entry-content ul ol ol {
    list-style-type: lower-roman;
}

/* 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: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #007acc;
    display: block;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* Layout */
html, body {
    height: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

.body-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    position: static; /* Change from relative to static */
}

.container {
    width: 100%;
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 var(--margin);
    box-sizing: border-box;
}

.content-area {
    width: 100%;
    margin: 0;
    padding: 0;
}

main {
    flex: 1;
    position: relative;
    z-index: 5;
    width: 100%;
    margin: 0;
}

/* Header */
header.site-header {
    position: fixed;
    z-index: 1000;
    width: 100%;
    background-color: #fff;
    padding: var(--gap) 0;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Uncomment and fix the header-inner styles */
.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    width: 100%;
}

.logo {
    margin-right: auto;
    z-index: 10;
}

.logo a {
    color: var(--color);
    text-decoration: none;
}

.custom-logo {
    width: auto;
}

/* Logo Styling */
.site-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--color);
}

.svg-logo {
    height: 2rem;
    width: auto;
    display: inline-block;
    vertical-align: middle;
    border-radius: 0; /* Override the general image radius for the logo */
}

.site-title {
    display: inline-block;
    font-weight: 500;
    vertical-align: middle;
}

/* Navigation */
nav {
    display: flex;
}

nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

nav a {
    display: inline-block;
    padding: 0.5rem 0;
    margin: 0 0.75rem;
    text-decoration: none;
    color: var(--color);
    position: relative;
    font-weight: 400;
}

nav a:hover, 
nav a:focus {
    color: var(--color-accent);
}

nav a:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0.1em;
    background-color: var(--color-accent);
    transition: width 0.3s;
}

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

#menu-toggle {
    display: none;
}

.navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
}

/* Footer */
footer.site-footer {
    background-color: #f2e7ff;
    padding: var(--gap) 0;
    width: 100%;
    margin: 0;
}

.footer-navigation ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0;
    list-style: none;
    margin: 0;
}

.site-info {
    margin: calc(var(--gap) * 2) 0;
    padding-top: calc(var(--gap) * 2);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Content Styling */
.entry-title {
    font-size: clamp(2rem, 1rem + 3vw, 4rem);
    font-weight: 300;
    line-height: 1.2;
    margin-bottom: 1rem;
    width: 100%;
}

.entry-title a {
    color: inherit;
    text-decoration: none;
}

.entry-title a:hover,
.entry-title a:focus {
    color: #007acc;
}


.entry-header {
    //background-image: url(assets/svg/casin.svg);
    background-position: center center;
}

.entry-header .grid-content h1,
.entry-header .grid-content .project-long-title,
.entry-header .grid-content .entry-header-meta {
    grid-column: 1 / span 5;
    posiotion: relative;
    z-index: 100;
    //margin-bottom: 27rem;
}

.entry-header img.svg-image {
    display: none;
}

.entry-header .grid-content img {
    grid-column: 6 / span 3;
    //border-radius: 0.5rem;
    position: absolute;
    width: 50vw;
    max-width: 1600px;;
    height: auto;
    left: 50%;
    transform: translateX(-50%);
    right: 0;
    top: calc(var(--gap) * 3);
    z-index: 0;
    opacity: 1;
    //mix-blend-mode: luminosity;

    
}
    

@media (max-width: 768px) {
    .has-post-thumbnail .grid-content {
        display: grid;
    }
    
    .entry-header .grid-content h1,
    .entry-header .grid-content .project-long-title,
    .entry-header .grid-content .entry-header-meta {
        grid-column: 1 / span var(--columns);
    }

    .entry-header .grid-content img {
        grid-column: 1 / span var(--columns);
        margin-top: var(--gap);
        display: none;
    }
    
    .has-post-thumbnail .grid-content .entry-content {
        grid-column: 1 / span var(--columns);
        margin-top: var(--gap);
    }
}

/* Article Header */
.entry-header {
    background-color: #c7e6ff;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: var(--gap) 0;
    padding-top: calc(var(--gap) * 5); /* Extra padding for the fixed header */
    margin-bottom: var(--gap);
}

/* Container for article content */
article .container {
    width: 100%;
    max-width: var(--content-max-width);
    margin: var(--margin) auto;
    padding: var(--margin);
    box-sizing: border-box;
}

/* Grid content layout */
.container .grid-content {
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    gap: var(--gap);
    width: 100%;
}

/* Featured image and content columns */
.featured-image {
    grid-column: 1 / span 4;
    margin-bottom: var(--gap);
}

.entry-content {
    grid-column: 5 / span 4;
}

/* Image styling */
.featured-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 0.5rem;
}

/* Mobile Menu */
@media (max-width: 1023px) {
    html.js nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 300px;
        max-width: 100%;
        background-color: white;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
        padding: 5rem 1rem 1rem;
        transform: translateX(100%);
        opacity: 0;
        visibility: hidden;
        overflow-y: auto;
        z-index: 100;
    }
    
    /* Remove the grey bar */
    html.js nav ul:before {
        display: none; /* Remove the grey line */
    }
    
    html.js nav ul {
        flex-direction: column;
        gap: 1rem;
        width: 100%;
        margin-top: 1rem; /* Add some spacing at the top instead */
    }
    
    html.js nav li {
        width: 100%;
    }
    
    html.js nav a {
        display: block;
        padding: 0.75rem 0;
        width: 100%;
    }
    
    html.js header.menu-open nav {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }
    
    #menu-toggle {
        display: flex;
        align-items: center;
        background: transparent;
        border: none;
        padding: 0.5rem;
        cursor: pointer;
        z-index: 102;
        position: relative;
        margin-left: auto; /* Push to the right */
        font-family: var(--font-base);
		color: var(--color) !important;
		-webkit-appearance: none;
		appearance: none; 
    }

    button#menu-toggle {
        color: var(--color) !important;
    }

    button#menu-toggle div.menu-text {
        color: var(--color) !important;
    }
    
    .menu-text {
        margin-right: 0.5rem;
        font-size: 1rem;
		color: var(--color) !important;
    }
    
    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 24px;
        height: 18px;
    }
    
    .hamburger span {
        display: block;
        height: 2px;
        width: 100%;
        background-color: #333;
        position: relative;
        transition: all 0.3s;
    }
    
    html.js header.menu-open .hamburger span:nth-child(1) {
        top: 8px;
        transform: rotate(45deg);
    }
    
    html.js header.menu-open .hamburger span:nth-child(2) {
        opacity: 0;
    }
    
    html.js header.menu-open .hamburger span:nth-child(3) {
        top: -8px;
        transform: rotate(-45deg);
    }
    
    nav a:after {
        display: none;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .has-post-thumbnail .grid-content {
        display: grid;
    }
    
    .has-post-thumbnail .grid-content .featured-image {
        grid-column: 1 / span var(--columns);
    }
    
    .has-post-thumbnail .grid-content .entry-content {
        grid-column: 1 / span var(--columns);
        margin-top: var(--gap);
    }
}

/* Child Pages Display */
.child-page-section {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: calc( var(--gap) * 2) 0;
}

.child-page-section.odd {
    background-color: #ffffff;
}

.child-page-section.even {
    background-color: #f9f9f9;
}

/* Research Projects Template - Updated Layout */

/* Always place the image at the proper position regardless of odd/even */
.child-page-grid {
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    gap: var(--gap);
}

/* Base positioning for both cases */
.child-page-image {
    grid-column: 1 / span 4;
    order: 1; /* Default position */
}

.child-page-content {
    grid-column: 5 / span 4;
    order: 2; /* Default position */
}

/* Adjust positions for odd/even sections */
.child-page-section.odd .child-page-image {
    grid-column: 5 / span 4;
    order: 2; /* Move image to the right */
}

.child-page-section.odd .child-page-content {
    grid-column: 1 / span 4;
    order: 1; /* Move content to the left */
}

.research-projects {
    margin: var(--gap) 0;
}

.research-project {
    padding: calc(var(--gap) * 2) 0;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.research-project.odd {
    background-color: #ffffff;
}

.research-project.even {
    background-color: #f9f9f9;
}

.research-project-grid {
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    gap: var(--gap);
    align-items: start;
}

/* Research-specific 3:5 ratio */
.research-project-image {
    grid-column: 1 / span 3;
}

.research-project-content {
    grid-column: 4 / span 5;
}

/* Adjust positions for odd/even articles */
.research-project.odd .research-project-image {
    grid-column: 6 / span 3;
    order: 1;
}

.research-project.odd .research-project-content {
    grid-column: 1 / span 5;
    order: 0;
}

.research-project.even .research-project-image {
    grid-column: 1 / span 3;
    order: 0;
}

.research-project.even .research-project-content {
    grid-column: 4 / span 5;
    order: 1;
}

.research-project-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0.5rem;
}

.research-project-title {
    margin-top: 0;
}

.research-project-title a {
    color: var(--color);
    text-decoration: none;
}

.research-project-title a:hover,
.research-project-title a:focus {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.button .button-text {
    position: relative;
    z-index: 1;
}

/* Visually hide text but keep it available for screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .research-project-grid {
        grid-template-columns: 1fr;
    }
    
    .research-project-image,
    .research-project-content,
    .research-project.odd .research-project-image,
    .research-project.odd .research-project-content,
    .research-project.even .research-project-image,
    .research-project.even .research-project-content {
        grid-column: 1 / -1;
        order: 0;
    }
    
    .research-project-image {
        margin-bottom: var(--gap);
    }
}

.child-page-grid {
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    gap: var(--gap);
    align-items: start; /* Change from center to start for top alignment */
}

/* If needed, also align the content to top */
.child-page-content {
    align-self: start;
}

.child-page-image {
    align-self: start;
}

.odd .child-page-content {
    grid-column: 1 / span 4;
}

.odd .child-page-image {
    grid-column: 5 / span 4;
}

.even .child-page-image {
    grid-column: 1 / span 4;
}

.even .child-page-content {
    grid-column: 5 / span 4;
}

.child-page-title {
    margin-top: 0;
    /*font-size: 1.75rem;*/
}

.child-page-title a {
    color: var(--color);
    text-decoration: none;
}

.child-page-title a:hover {
    text-decoration: underline;
}

.child-page-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0.5rem;
}

@media (max-width: 768px) {
    .odd .child-page-content,
    .even .child-page-content,
    .odd .child-page-image,
    .even .child-page-image {
        grid-column: span var(--columns); /* On mobile, each card spans full width */
    }
}

/* Back button for child pages */
.parent-page-link {
    margin-top: var(--gap);
}

.back-button, .button {
    text-decoration: none;
    color: #ffffff;
    background-color: #000000;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: border-radius 0.3s ease, padding 0.3s ease;
}

.back-button:hover, .button:hover, .button:focus {
    color: #ffffff;
    border-radius: 0;
    padding: 0.5rem 1.25rem; /* Slightly increase padding on hover */
}

.position-download {
    margin-top: calc(var(--gap) * 2);
    margin-bottom: calc(var(--gap) * 2);
}

.work-position-deadline {
    margin-bottom: calc(var(--gap) * 1);
}

.person-cv-download {
    margin-top: calc(var(--gap) * 2);
    margin-bottom: calc(var(--gap) * 1);
}

.archive-link-button,
.publication-file-button {
    margin-top: calc(var(--gap) * 2);
    margin-bottom: calc(var(--gap) * 2);
}

.resource-section h3 a {
    text-decoration: none;
}

.publications-section {
    background-color: #f9f9f9;
    padding-bottom: calc(var(--gap) * 1);
}

.resource-item {
    padding: var(--gap) 0;
}

/* Add white space before colored sections in research single page */
.section-separator {
    margin-bottom: calc( var(--gap) * 2);
    width: 100%;
    clear: both;
}

.read-more {
     margin-top: calc( var(--gap) * 2);
}

/* People Directory Styling */
.people-section {
    margin-bottom: var(--gap);
    width: 100%;
}

.people-section h2 {
    padding-bottom: 1.5rem;
    padding-top: 2rem;
}

.people-grid {
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    gap: var(--gap);
    width: 100%;
}

.person-card {
    grid-column: span 3; /* Each card spans 2 columns of the 8-column grid */
    border-radius: 0.5rem;
    overflow: hidden;
    //box-shadow: 0 1px 2px rgba(0, 0, 0, 0.01);
    background-color: #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.person-card:hover, .person-card:focus {
    transform: translateY(-5px);
    //box-shadow: 0 10px 16px rgba(0, 0, 0, 0.1);
}

.person-link {
    text-decoration: none;
    color: var(--color);
    display: block;
}

.person-image {
    aspect-ratio: 1 / 1; /* Force square aspect ratio */
    overflow: hidden;
}

.person-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the square area */
    transition: transform 0.3s ease;
}

.person-card:hover .person-image img,
.person-card:focus .person-image img {
    transform: scale(1.05);
}

.person-placeholder {
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.person-info {
    padding: 1rem;
}

.person-name {
    margin: 0;
}

/* Event Card Styling */
.event-card {
    grid-column: span 2; /* Make event cards span 2 columns (smaller than people cards) */
    background-color: #f9f9f9;
}

.event-date-card {
    margin-top: var(--gap);
}

/* Event card media queries */
@media (max-width: 1024px) {
    .event-card {
        grid-column: span 4; /* On smaller screens, each event card spans 4 columns (half the grid) */
    }
}

@media (max-width: 480px) {
    .event-card {
        grid-column: span var(--columns); /* On mobile, each event card spans full width */
    }
}

/* Event sections */
.events-section {
    margin-bottom: calc( var(--gap) * 4);
}

.more-events-link {
    margin: calc( var(--gap) * 2) 0;
    text-align: right;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .person-card {
        grid-column: span 4; /* On smaller screens, each card spans 4 columns (half the grid) */
    }
}

@media (max-width: 480px) {
    .person-card {
        grid-column: span var(--columns); /* On mobile, each card spans full width */
    }
}

/* Responsive adjustments for child pages */
@media (max-width: 768px) {
    /* Fix for child page grid on mobile */
    .child-page-grid {
        display: flex;
        flex-direction: column;
    }
    
    /* Make both odd and even sections have full width contents */
    .child-page-section.odd .child-page-image,
    .child-page-section.even .child-page-image,
    .child-page-section.odd .child-page-content,
    .child-page-section.even .child-page-content {
        grid-column: 1 / span var(--columns);
        width: 100%;
    }
    
    /* Reset order to ensure proper mobile stacking */
    .child-page-section.odd .child-page-image,
    .child-page-section.even .child-page-image {
        order: 1; /* Images always come first visually on mobile */
    }
    
    .child-page-section.odd .child-page-content,
    .child-page-section.even .child-page-content {
        order: 2; /* Content always comes second visually on mobile */
    }
    
    /* Add proper spacing between image and content */
    .child-page-image {
        margin-bottom: var(--gap);
    }
}