/*
Theme Name: Sastra Theme
Author: devover
Author URI: https://themeforest.net/user/devover
Description: Light and Professional Theme for Open Journal System (OJS) 3.x.
Version: 1.0.0
License: GPLv3
Tags: ojs, open journal systems, academic, journal, education, responsive, clean, professional, bootstrap 5
*/

/*------------------------------------------------------------------

  TABLE OF CONTENTS

  1.0 TINYMCE EDITOR & UI OVERRIDES
    - Button Label Fix
    - Context Menu Positioning Fix
    - PKP Form Field Grouping Adjustments

  2.0 MODAL EDITOR FRAMEWORK
    - Fullscreen Modal Container & Animation
    - Modal Content Box Layout
    - Modal Header Styling
    - Modal Body & TinyMCE Sizing

  3.0 HOMEPAGE SLIDER DROPZONE UI
    - Row & Column Flexbox Layout
    - Dropzone Area Styling
    - Preview Image Styling
    - Prompt Text Area
    - Remove Button Overlay

  4.0 ICON AND SNIPPET PICKER MODALS
    - Shared Modal Body Styles
    - Icon Grid Layout & Styling
    - Snippet Link Styling

  5.0 SHARE CHECKBOX GRID
    - Wrapper & Item Flexbox Layout
    - Responsive Adjustments
    - Custom Checkbox Alignment

  6.0 MISC. GLOBAL STYLES
    - Global Image Cover Utility

-------------------------------------------------------------------*/


/*==================================================
  1.0 TINYMCE EDITOR & UI OVERRIDES
==================================================*/

/* --- TinyMCE Button Label Fix --- */
/* Overrides default styling for a specific button label within TinyMCE's UI. */
/* !important likely needed due to high specificity of TinyMCE's internal styles. */
.tox-tbtn__select-label {
    text-decoration: none !important; /* Remove any underline */
    color: #1a202c !important;        /* Set a specific text color */
}

/* --- TinyMCE Context Menu Positioning Fix --- */
/* Forces the TinyMCE right-click context menu to use fixed positioning. */
/* This prevents it from being clipped or misplaced when inside modals or complex OJS forms. */
.mce-menu {
    position: fixed !important;
}

/* --- PKP Form Field Grouping Adjustments --- */
/* Targets form fields within a specific grouping structure (e.g., for color pickers). */
.groupForm .pkpFormField {
    margin-top: 0 !important; /* Removes top margin for tighter grouping */
}

/* Ensures description boxes align consistently within grouped forms by setting a minimum height. */
.groupForm > fieldset > .pkpFormField__description {
    min-height: 50px;
}


/*==================================================
  2.0 MODAL EDITOR FRAMEWORK
==================================================*/
/* Styles for a custom fullscreen modal used for editing content (e.g., homepage) */

/* --- Fullscreen Modal Container --- */
.editor-modal {
    display: none;                /* Hidden by default, shown via JS */
    position: fixed;              /* Stays in place relative to the viewport */
    z-index: 1001;                /* Sits above most other content */
    top: 0;
    left: 0;
    width: 100%;                  /* Full viewport width */
    height: 100%;                 /* Full viewport height */
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background overlay */
    overflow: hidden;             /* Prevent scrolling of the body behind the modal */
}

/* Specific z-index for the homepage editor modal, potentially lower than other modals */
.editor-modal-homepage {
    z-index: 999;
}

/* --- Modal Content Box --- */
.editor-modal-content {
    position: relative;          /* Positioning context for child elements */
    background-color: #fff;      /* White background */
    margin: 2% auto;             /* Centers horizontally, provides 2% top/bottom margin */
    padding: 0;                  /* Reset padding, handled by inner elements */
    width: 95%;                  /* Almost full width */
    height: 95%;                 /* Almost full height */
    display: flex;               /* Use flexbox for internal layout */
    flex-direction: column;      /* Stack header, body vertically */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); /* Drop shadow */
    animation: animatetop 0.4s;  /* Apply slide-down animation */
}

/* --- Modal Slide-Down Animation --- */
@keyframes animatetop {
    from { top: -300px; opacity: 0; } /* Start off-screen and transparent */
    to { top: 0; opacity: 1; }        /* End in final position and opaque */
}

/* --- Modal Header --- */
.editor-modal-header {
    padding: 15px 20px;
    background-color: #f1f1f1;  /* Light grey background */
    color: #333;               /* Dark text color */
    border-bottom: 1px solid #ddd; /* Separator line */
    display: flex;              /* Use flexbox for alignment */
    justify-content: space-between; /* Space out title and actions */
    align-items: center;        /* Vertically center items */
    flex-shrink: 0;             /* Prevent header from shrinking */
}

.editor-modal-header h2 {
    margin: 0;                  /* Reset default heading margin */
    font-size: 1.25rem;
}

/* Vertical alignment fix for buttons within the header actions area */
.editor-modal-actions .pkpButton {
    vertical-align: middle;
}

/* --- Modal Body --- */
.editor-modal-body {
    padding: 15px;
    flex-grow: 1;              /* Allow body to take up remaining vertical space */
    display: flex;              /* Use flexbox for internal layout (e.g., TinyMCE) */
    flex-direction: column;
    overflow-y: auto;          /* Allow scrolling if content overflows */
}

/* Ensures the TinyMCE editor instance stretches to fill the modal body */
.editor-modal-body .tox.tox-tinymce {
    flex-grow: 1; /* Makes TinyMCE fill the available space in the flex container */
    /* Add min-height if necessary to prevent collapse */
    min-height: 400px;
}


/*==================================================
  3.0 HOMEPAGE SLIDER DROPZONE UI
==================================================*/
/* Custom UI for uploading slider images via drag & drop or click */

/* --- Main Row Container --- */
/* Uses flexbox to create a responsive row of dropzone columns */
.sastra-dropzone-row {
    display: flex;
    flex-wrap: wrap;       /* Allow columns to wrap onto the next line */
    gap: 20px;             /* Space between columns */
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 5px;
}

/* --- Individual Column Container --- */
/* Each column holds a header (e.g., for labels/inputs) and a dropzone */
.sastra-slider-column {
    flex: 1;               /* Allow columns to grow equally */
    min-width: 180px;      /* Minimum width before wrapping */
    display: flex;
    flex-direction: column;
    gap: 10px;             /* Space between header and dropzone */
}

/* Reset margin for form fields within the column header for alignment */
.sastra-slider-column-header .pkpFormField {
    margin-bottom: 0;
}

/* --- Dropzone Area --- */
.sastra-dropzone {
    height: 150px;           /* Fixed height for the dropzone */
    border: 2px dashed #ccc; /* Dashed border to indicate drop target */
    border-radius: 8px;
    color: #888;
    cursor: pointer;
    position: relative;       /* Positioning context for preview and remove button */
    display: flex;
    align-items: center;      /* Center content vertically */
    justify-content: center;  /* Center content horizontally */
    flex-direction: column;   /* Stack prompt/preview */
    overflow: hidden;         /* Hide parts of preview if image is large */
    transition: all 0.2s ease; /* Smooth transition for hover/drag states */
}
/* Style change when dragging over */
.sastra-dropzone.sastra-dragover {
    border-color: #007bff; /* Highlight color */
    background-color: #f8f9fa;
}

/* --- Preview Image within Dropzone --- */
.sastra-dropzone-preview {
    width: 100%;
    height: 100%;
    background-size: cover;      /* Scale image to cover the area */
    background-position: center; /* Center the image */
    position: absolute;          /* Position over the prompt */
    top: 0;
    left: 0;
    display: none;              /* Hidden by default */
}

/* --- Prompt Text Area --- */
.sastra-dropzone-prompt {
    padding: 1rem;
    /* border: 1px dashed #bbb; Removed redundant border */
    border-radius: 2px;
    text-align: center;
    font-size: 0.875rem;
    color: #777;
    cursor: pointer;
    z-index: 1; /* Ensure prompt is clickable when preview is hidden */
}
.sastra-dropzone-prompt i {
    font-size: 1.5rem; /* Icon size */
    display: block;    /* Make icon block-level */
    margin-bottom: 0.5rem;
}

/* --- Remove Button Overlay --- */
.sastra-dropzone-remove {
    position: absolute;
    right: 5px;          /* Position near top-right corner */
    top: 5px;
    color: #ff0000;       /* Red color for remove icon */
    background: rgba(255, 255, 255, 0.8); /* Semi-transparent white background */
    border: none;
    border-radius: 50%;   /* Make it circular */
    width: 20px;          /* Fixed size */
    height: 20px;
    line-height: 18px;    /* Center the 'x' vertically */
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    z-index: 2;           /* Ensure it's above the preview image */
    display: none;        /* Hidden by default */
}


/*==================================================
  4.0 ICON AND SNIPPET PICKER MODALS
==================================================*/
/* Styles specific to the modals used for selecting icons or content snippets */

/* --- Common Styles for Picker Body --- */
/* Shared layout for both icon and snippet pickers */
#icon-picker-modal-body,
#snippet-picker-modal-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    /* max-height: 100%; Removed, use flex properties of parent */
    overflow-y: auto;       /* Enable vertical scrolling */
}

/* --- Icon Grid --- */
/* Grid layout specifically for the icon picker */
.icon-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* Responsive grid */
    gap: 10px;
}

/* Headings within the icon picker */
#icon-picker-modal-body h4 {
    margin-top: 15px;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ddd;
}

/* Individual icon item styling (reused from section 3.0 styles) */
.icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 80px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    font-size: 12px;
    text-align: center;
    padding: 5px;
    box-sizing: border-box;
}

.icon-item:hover {
    background-color: #007ab2; /* Highlight color */
    color: #fff;
}

.icon-item i { /* Assumes Font Awesome or similar */
    font-size: 1.5em;
    margin-bottom: 8px;
}

/* Icon name text styling */
.icon-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

/* --- Snippet Link Colors --- */
/* Ensure links within the snippet picker inherit color correctly */
.snippet-group-container a {
    color: inherit !important; /* Force inherit color */
    transition: color 0.2s;
}
/* Apply hover color on snippet links */
.snippet-group-container a:hover {
    color: var(--bs-link-hover-color) !important;
}


/*==================================================
  5.0 SHARE CHECKBOX GRID
==================================================*/
/* Styles for the grid layout of share option checkboxes in theme settings */

/* Add margin above the checkbox container */
#SastraShareOption_content {
    margin-top: 10px;
}

/* --- Wrapper for Checkbox Items --- */
/* Uses flexbox for a responsive grid */
.share-options-wrapper {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap */
    gap: 15px;       /* Space between items */
}

/* --- Individual Checkbox Item --- */
/* Base layout: 4 columns on larger screens */
.share-option-item {
    /* flex: flex-grow | flex-shrink | flex-basis */
    /* calc() adjusts basis to account for the gap */
    flex: 0 1 calc(25% - 11.25px); /* Grow=0, Shrink=1, Basis=~25% */
    box-sizing: border-box;
    min-width: 150px; /* Minimum width before breaking layout */
}

/* --- Responsive: 2 Columns on Smaller Screens --- */
@media (max-width: 768px) {
    .share-option-item {
        /* Adjust flex-basis for 2 columns */
        flex: 0 1 calc(50% - 7.5px);
    }
}

/* --- Custom Checkbox Alignment --- */
/* Container for aligning checkbox and label */
.custom-form-check {
    display: flex;
    align-items: center; /* Vertically align checkbox and label */
    padding-left: 0;     /* Reset default padding */
}
/* Style the label associated with the checkbox */
.custom-form-check label {
    margin-left: 5px; /* Space between checkbox and label */
    cursor: pointer;
}


/*==================================================
  6.0 MISC. GLOBAL STYLES
==================================================*/

/* --- Global Full Image Styling --- */
/* Utility class for making images cover their container */
/* Duplicates .img-bg-full from Section 1.0 - Consider removing duplication */
.img-bg-full {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Scale image to cover while maintaining aspect ratio */
}