/* === ESTILOS GENERALES === */
body { font-family: 'Inter', sans-serif; color: #333; }

/*
 * Do not globally override all heading tags.  Previous versions of this
 * stylesheet applied a Spectral/italic style to h1–h4 elements across
 * the page, which inadvertently affected the WordPress editor toolbar
 * and other content areas.  Heading styles should be applied via
 * component‑specific classes (e.g. .tnr-results-label, .title-tnd) rather
 * than globally.  Leaving h1–h4 unspecified ensures they inherit the
 * default theme font and style.
 */

/* Mensajes */
.tnr-success {
    background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb;
    padding: 15px; margin-bottom: 20px; border-radius: 4px;
}
.tnr-error {
    background-color: #fff5e7; border-left: 4px solid #b79cee;
    color: #171a30; padding: 15px; margin-bottom: 20px;
}

/* Contenedores */
.tnr-registration-form, 
.tnr-profile-form, 
.tnr-login-wrapper {
    background-color: #E9ECFF; padding: 2rem; border-radius: 6px; 
    margin-bottom: 2rem; width: 100%; box-sizing: border-box;
    /* FIX: Permitir que el dropdown salga del contenedor */
    overflow: visible !important; 
    position: relative; z-index: 1;
}

/* Inputs */
.tnr-registration-form input[type="text"], 
.tnr-registration-form input[type="email"], 
.tnr-registration-form input[type="password"], 
.tnr-registration-form textarea,
.tnr-profile-form input[type="text"], 
.tnr-profile-form textarea,
.tnr-login-wrapper input[type="text"],
.tnr-login-wrapper input[type="password"] {
    width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px;
    box-sizing: border-box; margin-top: 5px; margin-bottom: 15px;
    font-family: 'Inter', sans-serif; background: #fff; font-size: 1rem;
}

/* Ensure URL inputs share the same styling as other inputs */
.tnr-registration-form input[type="url"],
.tnr-profile-form input[type="url"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 5px;
    margin-bottom: 15px;
    font-family: 'Inter', sans-serif;
    background: #fff;
    font-size: 1rem;
}

/* Botones */
/* Restrict button styling to our plugin-specific buttons via class .tnr-button */
.tnr-button {
    background-color: #283EFF !important; color: #ffffff !important;
    padding: 12px 25px; border: none; border-radius: 4px;
    cursor: pointer; font-weight: bold; font-size: 1rem; width: 100%;
    transition: background-color 0.2s ease;
}
.tnr-button:hover {
    background-color: #1a2fb8 !important; color: #ffffff !important;
}

/* === DROPDOWNS === */
.tnr-dropdown {
    position: relative; display: block; margin-bottom: 10px;
}
.tnr-dropbtn {
    width: 100%;
    text-align: left;
    /* Restore the original blue dropdown look */
    background: #283EFF;
    border: 1px solid #283EFF;
    padding: 12px;
    border-radius: 4px;
    color: #ffffff;
    /* Slightly smaller and lighter than the taxonomy names for contrast */
    font-size: 0.9rem;
    font-weight: normal;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tnr-dropdown-content {
    display: none; position: absolute; top: 100%; left: 0;
    background-color: #fff; width: 100%; box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    /* FIX: Z-Index muy alto */
    z-index: 10000; 
    border: 1px solid #ddd; border-radius: 4px;
    max-height: 250px; overflow-y: auto; padding: 0; 
}
.tnr-dropdown-content.tnr-drop-up {
    top: auto; bottom: 100%; box-shadow: 0px -8px 16px rgba(0,0,0,0.2); border-bottom: none; border-top: 1px solid #ddd;
}
.tnr-dropdown-content label {
    display: block; border-bottom: 1px solid #f5f5f5; padding: 12px 15px;
    cursor: pointer; transition: background-color 0.2s, color 0.2s;
}
.tnr-dropdown-content label:last-child { border-bottom: none; }
.tnr-term-name { color: #283EFF; font-weight: bold; display:block; }
.tnr-term-desc { display: block; margin-top: 4px; color: #666; font-size: 0.85em; line-height: 1.2; }
/* Hover */
.tnr-dropdown-content label:hover { background-color: #283EFF; }
.tnr-dropdown-content label:hover .tnr-term-name { color: #ffffff !important; }
.tnr-dropdown-content label:hover .tnr-term-desc { color: #e0e0e0 !important; }

/* Buscador y Modal */
/* Filters bar: includes the search input followed by three dropdowns. Uses flex-wrap to create two rows: search (100%) and three dropdown columns */
.tnr-filters-bar {
    background-color: #E9ECFF;
    padding: 20px;
    border-radius: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
    box-sizing: border-box;
}
/* Search input styling */
.tnr-search-input {
    flex: 1 1 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    box-sizing: border-box;
    background: #fff;
}
/* Dropdown containers inside filters bar fill one third of the width */
.tnr-filters-bar .tnr-dropdown {
    flex: 1 1 calc(33.333% - 10px);
    min-width: 0;
}
/* Ensure dropdown buttons stretch to container */
.tnr-filters-bar .tnr-dropbtn {
    width: 100%;
    min-width: 0;
}
/* Dropdown contents width matches dropdown width */
.tnr-filters-bar .tnr-dropdown-content {
    min-width: 100%;
}
/* Remove unused .tnr-search-wrapper .tnr-dropdown rules */
.tnr-results-grid { display: grid; gap: 15px; }
.tnr-card { background: white; padding: 20px; border-bottom: 1px solid #eee; cursor: pointer; transition: 0.2s; }
.tnr-card:hover { background: #f0f4ff; }
.tnr-card h3 {
    /* Align card titles with the modal title: use Inter, bold, black and a larger size */
    color: #000;
    margin: 0;
    font-family: 'Inter', sans-serif;
    /* Match the modal title size and weight */
    font-size: 2.3rem;
    font-weight: 600;
    font-weight: 700;
    font-style: normal;
}

/* Explicitly style titles inside card headers to mirror the modal title */
.tnr-card-header h3 {
    font-family: 'Inter', sans-serif;
    font-size: 2.7rem;
    font-weight: 600;
    font-style: normal;
    color: #000;
    margin: 0;
    padding: 0;
}
.tnr-arrow { color: #283EFF; margin-right: 10px; font-weight: bold; }
.tnr-results-label {
    font-family: 'Inter', sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: #283EFF;
    margin: 20px 0 10px 0;
    text-transform: none;
}

/* Adjust card title and excerpt for better readability */
.tnr-card-header h3 {
    font-family: 'Inter', sans-serif;
    font-size: 1.3rem;
    margin: 0 0 5px 0;
}
.tnr-card-excerpt {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    margin: 0 0 10px 0;
    color: #171a30;
}
.tnr-card-tax-meta {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: #545d80;
}
.tnr-card-tax-meta span {
    display: block;
    margin-bottom: 3px;
}
.tnr-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    /* Increase z-index significantly so that the modal overlay and its content
       appear above sticky headers or menus on the site.  The previous value
       of 100000 was being overlaid by some themes on mobile devices. */
    z-index: 9999999;
    display: flex; justify-content: center; align-items: center;
}
.tnr-modal-content {
    background: white;
    width: 80%;
    max-width: 800px;
    padding: 30px;
    border-radius: 8px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
/* Style close button as blue X inside a white circle */
.tnr-modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 24px;
    background: #fff;
    color: #283EFF;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    line-height: 32px;
    text-align: center;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 0 4px rgba(0,0,0,0.1);
}
.tnr-modal-close:hover {
    background: #E9ECFF;
}

/* Hide old modal body structure as we now use header and columns layout */
.tnr-modal-body,
.tnr-modal-left,
.tnr-modal-right {
    display: none !important;
}
#tnr-m-logo { width: 100%; height: auto; border: 1px solid #eee; }

/* Modal title updated: black color, no border */
#tnr-m-title {
    color: #000;
    margin: 0;
    font-family: 'Inter', sans-serif;
    /* Modal title uses the body font with semi‑bold weight.  Size 2.3rem matches previous design. */
    font-size: 2.3rem;
    font-weight: 600;
    font-style: normal;
    border: none;
    padding: 0;
    margin-bottom: 5px;
}
/* Tagline under the title */
.tnr-tagline {
    color: #283EFF;
    font-size: 1rem;
    margin-bottom: 20px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
}

/* Modal header: logo and text occupying full width */
.tnr-modal-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
    border-bottom: 1px solid #E9ECFF;
    padding-bottom: 15px;
}
.tnr-header-logo {
    flex: 0 0 120px;
}
.tnr-header-logo img {
    width: 100%;
    height: auto;
    border: 1px solid #eee;
}
.tnr-header-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Modal columns: two thirds left and one third right */
.tnr-modal-columns {
    display: flex;
    flex-wrap: nowrap;
    gap: 40px;
}
.tnr-columns-left {
    flex: 2 1 66.666%;
    max-width: 66.666%;
}
.tnr-columns-right {
    flex: 1 1 33.333%;
    max-width: 33.333%;
}

/* Section headings inside modal columns */
.tnr-columns-left h3,
.tnr-columns-right h3 {
    margin-top: 0;
    margin-bottom: 8px;
    color: #283EFF;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-transform: none;
    /* Ensure section headings use the body font without italics */
    font-style: normal;
}

/* Adjust content spacing inside modal columns */
.tnr-columns-left div,
.tnr-columns-right div {
    margin-bottom: 15px;
    line-height: 1.5;
}

/* Title style for modal sections: uses body font, smaller size and no italics */
/* Title style for modal sections: uses body font.  Increase size by roughly
   three points (approx. 0.3rem) over the previous 0.9rem, and keep semi‑bold. */
.title-tnd {
    color: #283EFF;
    font-family: 'Inter', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    font-style: normal;
    margin-top: 0;
    margin-bottom: 8px;
}

/* Style website link */
.tnr-columns-left #tnr-m-website a {
    color: #283EFF;
    text-decoration: none;
    word-break: break-all;
}
.tnr-columns-left #tnr-m-website a:hover {
    text-decoration: underline;
}

/* Responsive adjustments for mobile devices */
@media (max-width: 600px) {
    .tnr-modal-content {
        width: 100%;
        max-width: none;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
    .tnr-modal-columns {
        flex-wrap: wrap;
    }
    .tnr-columns-left,
    .tnr-columns-right {
        flex: 1 1 100%;
        max-width: 100%;
    }

    /* When the viewport is narrow, stack each dropdown on its own line
       rather than squeezing three into a single row.  This prevents
       buttons like “Focus areas” from wrapping to two lines and
       enlarging the button height. */
    .tnr-filters-bar .tnr-dropdown {
        flex: 1 1 100%;
    }
}

/* --------------------------------------------------------------------------
   Ensure registration form dropdowns sit on the same line on very wide screens
   On screens wider than 2056px the three taxonomy dropdowns (role, focus,
   region) in the registration form should share a single row rather than
   stacking vertically.  We scope this rule to the .tnr-registration-form to
   avoid affecting the search filter bar.  Use inline-block so they flow
   horizontally, with widths roughly equal to one third minus the gap.
*/

/* Columns inside modal body */
.tnr-modal-content-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 20px;
}
.tnr-about-column,
.tnr-meta-column {
    flex: 1 1 45%;
    max-width: 100%;
}
.tnr-about-column h3,
.tnr-meta-column h3 {
    margin-top: 0;
    margin-bottom: 5px;
    color: #283EFF;
    font-size: 1.2rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    text-transform: none;
    font-style: normal;
}

/* --------------------------------------------------------------------------
   WordPress Editor integration

   The profile update page embeds the WordPress rich‑text editor via
   wp_editor().  Without specific overrides, some of our plugin styles
   (notably button and heading rules) can bleed into the editor toolbar,
   causing the “Visual/Code” tabs to appear as blue buttons.  These rules
   explicitly reset the editor tabs and container to the default WordPress
   appearance when rendered inside our profile form.  Use !important to
   override previous declarations and theme styles.
*/
.tnr-profile-form .wp-editor-tabs a,
.tnr-profile-form .wp-editor-tabs button {
    background: #f7f7f7 !important;
    border: 1px solid #ccc !important;
    border-bottom: none !important;
    color: #32373c !important;
    padding: 4px 8px !important;
    margin-right: 4px !important;
    text-decoration: none !important;
    font-weight: normal !important;
    box-shadow: none !important;
}

.tnr-profile-form .wp-editor-tabs .active,
.tnr-profile-form .wp-editor-tabs a.active,
.tnr-profile-form .wp-editor-tabs button.active {
    background: #fff !important;
    color: #0073aa !important;
    border-bottom: none !important;
}

.tnr-profile-form .wp-editor-wrap {
    background: #fff !important;
    border: 1px solid #ccc !important;
}
.tnr-about-column div,
.tnr-meta-column div {
    margin-bottom: 15px;
    line-height: 1.4;
}

/* Remove unused grid meta layout */
.tnr-modal-meta-grid { display:none; }
.tnr-m-col strong { display:none; }

/* --------------------------------------------------------------------------
   Pagination controls for the search interface
   The wrapper contains the page size selector and page links.  Align
   horizontally with space between on larger screens and stack on mobile.
*/
.tnr-pagination-wrapper {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    font-family: 'Inter', sans-serif;
    gap: 15px;
}
.tnr-page-size label {
    font-size: 0.9rem;
    color: #171a30;
}
.tnr-page-size select {
    margin-left: 5px;
    padding: 4px 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
}
.tnr-page-links {
    list-style: none;
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
}
.tnr-page-links li a {
    color: #283EFF;
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
}
.tnr-page-links li.active a {
    background-color: #283EFF;
    color: #fff;
}
.tnr-page-links li a:hover {
    background-color: #e0e4ff;
}

/* --------------------------------------------------------------------------
   Override styles for card titles in the search results.  We ensure that
   titles use the same body font family as the modal title, with a size
   slightly smaller (approx. three typographic points smaller than the
   modal title) and semi‑bold weight.  Use !important to override prior
   declarations that may set heading fonts or sizes. */
.tnr-card-header h3 {
    font-family: 'Inter', sans-serif !important;
    font-size: 2.1rem !important;
    font-weight: 600 !important;
    color: #000 !important;
    margin: 0 0 5px 0 !important;
    padding: 0 !important;
}

/* --------------------------------------------------------------------------
   Registration dropdown row layout
   Apply a flexible layout similar to the search filter bar for the
   dropdown menus used in the registration form.  Each dropdown will
   occupy roughly one third of the row on wide screens, wrapping to new
   lines on smaller viewports.  Using min-width: 0 ensures that the
   flex items shrink properly when the container width is limited. */
.tnr-reg-dropdown-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.tnr-reg-dropdown-row .tnr-dropdown {
    flex: 1 1 calc(33.333% - 10px);
    min-width: 0;
}
@media (max-width: 600px) {
    .tnr-reg-dropdown-row .tnr-dropdown {
        flex: 1 1 100%;
    }
}