/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */


/* === MINIMAL THEME-COMPATIBLE SEARCHBOX STYLES === */
/* WordPress themes will style .search-form, .search-field, .search-submit */
/* We only need to ensure proper layout structure */

form.hr-searchform-box-minimal {
    display: flex;
    align-items: stretch;
    gap: 0;
    max-width: 100%;
    /* All visual styling comes from theme's .search-form */
}

form.hr-searchform-box-minimal label {
    flex-grow: 1;
    margin: 0;
    display: flex;
}

.hr_searchfield-minimal {
    flex-grow: 1;
    min-width: 0;
    /* All visual styling comes from theme's .search-field */
}

button.hr_searchsubmit-minimal {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* All visual styling comes from theme's .search-submit */
}

.hr-searchicon-minimal {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.hr-searchicon-minimal svg {
    display: block;
    width: 1.2em;
    height: 1.2em;
    fill: currentColor; /* Inherits button text color from theme */
}



form.hr-searchform-widget, 
form.hr-searchform-box {
    position: relative;
    display: flex;
    align-items: stretch; /* Changed from 'center' to ensure full height */
   	border: var(--sis-sform-border-size, 1px) solid var(--hr-sis-sform-borderXcolor, #cccccc);
    border-radius: var(--sis-sform-border-radius, 5px);
		padding: 0;
    margin: var(--sis-sform-margin, 0 0 0 0);
    overflow: hidden; /* Ensures rounded corners clip child elements */
    background: #fff; /* Add explicit background to prevent parent bleed-through */
}
form.hr-searchform-widget:hover, 
form.hr-searchform-box:hover {
   	border: var(--sis-sform-border-size, 1px) solid var(--hr-sis-sform-hover-borderXcolor, #888888);
}


/* --- Label (wraps the Input Field) --- */
form.hr-searchform-box label {
    flex-grow: 1;
    margin: 0;
    padding: var(--sis-sform-padding, 3px 7px 3px 7px);
    display: flex; /* Changed to flex to control input height better */
    align-items: stretch; /* Ensures input fills label height */
}

/* --- Search Input Field --- */
.editor-styles-wrapper input.hr_searchfield[type="search"],
input.hr_searchfield[type="search"] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    /*padding: 0.3em 0.7em;*/
    color: #444;
    border-radius: 0; /* Remove individual border-radius, form handles it */
    /*font-size: 0.9rem;*/
    border: none;
    /*background: transparent;*/
    outline: none;
    margin: 0;
    line-height: normal;
}

/* --- Screen reader text --- */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    word-wrap: normal !important;
}
		
/* --- Search Submit Button --- */
button.hr_searchsubmit {
    color: #555;
    background-color: var(--sis-sform-bg-color, #ffffff);
    cursor: pointer;
    border: none;
    border-radius: 0; /* Remove individual border-radius, form handles it */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: normal;
    margin: 0;
}


label input.hr_searchfield[type="search"] {
    color: #555;
    font-size: var(--sis-sform-font-size, 1em) ;
    padding: 0;
}
form.hr-searchform-box {
    background-color: var(--sis-sform-bg-color, #ffffff) ;
    padding: 0;
}

button.hr_searchsubmit:hover,
button.hr_searchsubmit:focus {
    color: black;
    background-color: var(--sis-icon-hover-bg-color, #d6ddfd) ;
}

label input[type="search"].hr_searchfield {
    background-color: var(--sis-sform-bg-color, #ffffff);
}
/* deaktiviert:
label input[type="search"].hr_searchfield:placeholder-shown {
    background-color: green;
}
*/


/* --- Search Icon --- */
button.hr_searchsubmit {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sis-sform-padding, 3px 7px 3px 7px);
    font-size: var(--sis-sform-icon-size, 1em) ;
}

.hr-searchicon svg {
    display: block;
    margin: 0;
    padding:0;
}

/** 
 *   customize paging buttons 
 */

form#hr_SIS_paging.hr_paging {
	margin: auto;
	display: inline-block !important;
	float: none;
}

 /* Pagination links */
button.hr_paging_number {
    width: 50px !important;
    color: black !important;
    float: none;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
}

/* Style the active/current link */
button.hr_paging_number.hr_active_page {
    background-color: black !important;
    color: dodgerblue !important;
    font-weight: bold ;
}

/* Add a grey background color on mouse-over */
.hr_paging_number:hover:not(.active) {
	background-color: #ddd !important;
} 
button.hr_paging_number.btn.btn-primary {
	  color: black ;
	  width: 50px ;
	  margin: 0px 5px;
}

div.hr_page_form {
	display:flex;
	justify-content: center;
}

/**
 * customize  legacy advanced thumbnail layout  
 **/
div.hr_paging_buttons {
		margin: 15px;
}

div.hr_at_box {
   display:block;
   float:left;
   width:250px; 
   height:220px; 
   margin-top:16px; 
   padding: 10px;
}
 
div.hr_li_inner,
div.hr_at_inner {
   display:flex;
   justify-content:center;
   max-height:200px;
}

img.hr_li_image,
img.hr_at_image {
   display:flex;
   justify-content:center;
   max-width:100%; 
   max-height:180px; 
   margin:0;
   border: solid 1px #cccccc;
   object-fit: cover;
}
 
img.hr_li_image:hover,
img.hr_at_image:hover {
   opacity: .8;	
}

img.hr_li_image,
div.hr_at_box {
   border: var(--hr-sis-borderXsize, 1px) solid var(--hr-sis-borderXcolor, #f8f8ff); 
}

img.hr_li_image:hover,
div.hr_at_box:hover {
   border:  var(--hr-sis-borderXsize, 1px) solid var(--hr-sis-borderXcolor-hover, #c8c8cf);
}   /* end of legacy code */


div.hr_li-si_text,
div.hr_at_text {
   font-size:14px; 
   line-height:1; 
   margin:10px 0; 
   text-align:center;
}


/* single und linked image table display borders */
table.hr_resultlist {
    border-collapse: collapse;
}
td.hr_cell {
    border-width: var(--sis-table-border-width, 1px);
    border-style: solid;
    border-color: var(--sis-table-borderXcr, #333) ;
    background-color: var(--sis-table-bgXcolor, #ffffff00) ;
    padding: var(--sis-table-cell-padding, 5px 15px 5px 15px) ;
}


/**********************************************************
 * customize atr and atg boxes for images and text 
 *****************************************************/
div.hr_atr_box,
div.hr_atg_box {
		border: var(--sis-at-borderXwidth, 0) solid var(--sis-at-borderXcolor, #cccccc);
		padding: var(--sis-at-padding, 0px 0px 15px 0px);
		margin: var(--sis-at-margin, 3px 3px 3px 3px);
		background-color: var(--sis-at-box-bgXcolor, #ffffff00);
}
div.hr_atr_box {
		height: auto;           /* ← NEU: Box wächst mit Inhalt */
    overflow: visible;      /* ← NEU: kein Abschneiden */
}

div.hr_atr_box:hover,
div.hr_atg_box:hover {
		border: var(--sis-at-borderXwidth, 0) solid var(--sis-at-borderXcolor-hover, #888888);
}
div.hr_atr_box:hover img.hr_atr_image,
div.hr_atg_box:hover img.hr_atg_image {
		border: var(--sis-at-borderXwidth, 0) solid var(--sis-at-borderXcolor-hover, #888888);
		opacity:0.8;
}

div.hr_atr_inner {
    display: flex;              /* ✅ Changed from inline-block */
    flex-direction: column;     /* ✅ Stack image above text */
    align-items: center;        /* ✅ Center both horizontally */
    flex-shrink: 0;             /* ✅ Prevent shrinking */
    width: fit-content;         /* ✅ Only as wide as image */
    max-width: 100%;        		/* verhindert Überlauf im Container */
    overflow: visible; 
    height: auto;          
}

/* Link: Block-Element, schrumpft auf das (skalierte) Bild, keine inline-Lücken */
div.hr_atr_inner a {
    display: block;
    width: fit-content;
    max-width: 100%;      /* respektiert max-width:240px vom inner */
    margin: 0 auto;
    padding: 0;
    line-height: 0;
}

/* Bild: proportional in max-width UND max-height, ohne Beschnitt */
img.hr_atr_image {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;      /* => über den Link an inner (240px) gekoppelt */
    /* max-height:200px kommt weiterhin per inline-Style vom <img> */
    margin: 0;
}

/* Text passt sich der Bildbreite an, ohne die Box zu verbreitern */
div.hr_atr_inner .hr_atb_text {
    width: 0;
    min-width: 100%;
    box-sizing: border-box;
    text-align: center;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

div.hr_atg_inner {
		display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
div.hr_atg_box div.hr_atg_inner a img {
		vertical-align: middle ;  /* !important; */
}


/* Link füllt den definierten Rahmen (z.B. 240x200) komplett aus */
div.hr_atg_inner a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    line-height: 0;
}

/* Bild füllt den Rahmen in EINER Achse voll, proportional, ohne Beschnitt */
img.hr_atg_image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;      /* skaliert proportional, füllt H oder V */
    object-position: center;
    margin: 0;
    padding: 0;
}

/* atb=atg+atr */
div.hr_atb_text {
	 color: var(--sis-at-font-color, #222222);
   font-size:0.9rem; 
   line-height:1.1rem; 
   margin-top:0.7rem; 
   text-align:center;
   /* white-space: normal;  Zeilenumbruch erlauben - deaktiviert */
   overflow-wrap: break-word;	/* Modern standard */
   word-break: break-word;    	/* Break long words */
   hyphens: auto;            		/* Optional hyphenation */
	 max-width: 100%;            	/* niemals breiter als das Bild */
}


/* customize fancybox toolbar buttons */
button.f-button,
button.f-button.is-arrow::before,
button.f-button:focus:not(:focus-visible),
button.f-button:active {
	background-color: transparent !important;
}

/* Gemeinsame Basis: Bezugsrahmen für das Overlay, Clipping */
div.image-item-text {
    position: relative;
    display: block;
    overflow: hidden;
    box-sizing: border-box;
    min-width: 0;
}

/* Nur PHP-Mosaik: Höhe aus dem Seitenverhältnis (padding-trick, iOS-fest) */
div.image-item-ratio::before {
    content: "";
    display: block;
    width: 100%;
    padding-top: calc(100% / var(--hr-ar, 1.5));
}

div.image-item-ratio > a {
    position: absolute;
    inset: 0;
    display: block;
}

div.image-item-ratio > a > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.image-hover-info {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;                 /* am unteren Bildrand verankern */
    width: 100%;
    box-sizing: border-box;    /* padding zählt in die 100% rein */
    background: rgba(0,0,0,0.2);
    color: #fff;
    padding: 12px;
    text-align: center;

    /* Umbruch erzwingen */
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;

    opacity: 0;
    transform: translateY(100%);   /* startet unterhalb, verborgen */
    transition: all 0.25s ease;
    pointer-events: none;
}

div.image-item-text:hover .image-hover-info {
    opacity: 1;
    transform: translateY(0);      /* fährt von unten ins Bild */
}

div.image-item-title {
    font-size: 0.9rem;
    line-height: 0.9rem;
    font-weight: 550;
    padding-bottom: 10px;
}
div.image-item-author {
		font-size: 0.85rem;
    font-style: italic;
    line-height: 0.9rem;
    padding-bottom: 5px;
}
div.image-item-description {
    font-size: 0.8rem;
    line-height: 0.9rem;
}