#index-layout-centered {
  width: 100%;
  max-width: 360px;
  min-width: 0;  /*prevents smaller than 360px*/
  margin: 30px auto 20px auto;
}

#title-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.1rem; /* space between all children */
}

/* Header image */
#title-block #headerPic {
    flex: 0 1 auto;   /* can shrink but not grow */
    width: 49px; /* optional: limit max size */
    height: auto;     /* maintain aspect ratio */
}

/* Dynamic H1 text */
#title-block #dynamicH1 {
    font-size: clamp(16px, 95vw, 33px);  /* override only */
    min-width: 0;                        /* necessary for flex shrink */
}

/* Icon as background div */
#title-block #icon {
  flex: 0 1 auto;
  width: 31px;
  height: 30px;
  background-image: url(../images/magnify.gif);
  background-repeat: no-repeat;
  transition: background-position .2s linear, color .1s linear;
}


#title-block #icon:hover {
  background-position: 0px -30px;
  cursor: pointer;
}

input#search {
  width: 100%;       /* fill the container */
  /* max-width: 300px;  /* cap at design size */
  height: 35px;
  padding-top: 5px;
  padding-right: 2rem; /* space for the clear button */
  box-sizing: border-box; /* ensure padding is inside width */
  padding-bottom: 5px;
  padding-left: 5px;
  margin: 10px 0 15px 0; /* remove fixed right margin */
  border-radius: 3px;
  outline: none;
  border: 1px solid #ababab;
  font-size: 20px;
  line-height: 25px;
  color: #ababab;
}

input#search::placeholder {
  color: #ababab;   /* same base tone as text */
  opacity: 0.8;     /* make it lighter/fainter */
  font-weight: 300; /* optional: thinner font if supported */
}

input#search:hover,
input#search:focus {
  color: #3b3b3b;
  border: 2px solid #36a2d2;
  box-shadow:
    0 0 3px rgba(0, 0, 0, 0.25) inset,   /* inner glow, evenly distributed */
    0 0 5px rgba(54, 162, 210, 0.5);       /* outer glow, evenly distributed */
}

.top-spaced {
  margin-top: 10px;
}

div#welcometext {
  width: 360px;
  line-height: 24px;
  font-size: 20px;
  text-align: center;
  margin: 10px auto 60px auto;
}

.heading-sub {
  font-size: 22px;          /* main sentence size */
  line-height: 1.375em;       /* better spacing for legibility */
  font-weight: normal;       /* normal for main sentence */
  text-align: center;
  margin: 10px auto 20px auto; /* spacing similar to old version */
}

.dictionary-list div {
  margin-top: 5px;    /* adjust spacing as needed */
  font-weight: bold;
  font-style: italic;
  font-size: 22px;
  color: #194775;
}

p#intro {
  text-indent: 25px;
  font-style: italic;
  line-height: 24px;
  font-size: 18px;
  text-align: justify;
  opacity: 0.8;
}

.autocomplete-wrapper {
  position: relative;
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
}

.text-blue {
  color: #194775;
}

#results .col-md-4 {
  flex: 1 1 190px;		/* preferred size the flexbox algorithm uses when distributing space.*/
  min-width: 190px;
  max-width: 360px;
  width: auto !important; /* cancel Bootstrap’s fixed 33.333% */
  box-sizing: border-box;
}

.cimszo {
  line-height: 20px;
  font-size: 20px;
  font-weight: 700;
  font-style: oblique;
  margin-top: 0;
  margin-bottom: 16px; /* matches old p#cimszo spacing */
}

/* force group wrapping */
@media (max-width: 768px) {
  #results .col-md-4 {
    flex: 0 0 100%;		/* each takes full row */
    max-width: 100%;
  }
}


/* === START: merged results.css (RESULT SPECIFIC FORMATTING) === */

/* Dictionary entries */

dd.ertelmezes {
	font-weight: 400;
}

dd.gyakorisag {
    font-size: 1.125rem;
    color: #0000FF;
    font-weight: bold;
}

dd.szinonima {
    font-weight: 400;
	color: #110ca6;
}

dd.tajszo {

}

dd.ellentet {
    color: #FF0000;
    font-weight: bold;
}

dd.etimologia {
	color: rgb(213, 21, 93);
	padding: 10px 10px;		/* slight padding to make it distinct */
	font-style: italic;	
}

dd.tanacs {
    color: #47A347;
}

dd.osszetetel {

}

dd.magyarszarmazek{

}

dd.egyeb{

}

dd.szolas {
    font-style: italic;
}

/* to make <dt> headers (like “Szinonima”, etc) to look visually distinct */

dt.ertelmezes,
dt.gyakorisag,
dt.szinonima,
dt.tajszo,
dt.ellentet,
dt.etimologia,
dt.tanacs,
dt.osszetetel,
dt.magyarszarmazek,
dt.egyeb,
dt.szolas {
    font-weight: 600;
    font-size: 0.95em; /* slightly smaller than the dd content */
    margin-top: 0.5em;
    margin-bottom: 0.25em;
    color: #333;
}

/* hide <dt> and <dd> headers AND anything that contains a "screen-reader-only" class for semantic purposes (SEO / accessibility). */
.screen-reader-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* example how to target only a very specific element to make it invisible */
/* #ertelmezotalalat dd.cimszo.screen-reader-only { */
    /* position: absolute !important; */
    /* width: 1px; */
    /* height: 1px; */
    /* margin: 0; */
    /* padding: 0; */
    /* overflow: hidden; */
    /* clip: rect(0 0 0 0); */
    /* white-space: nowrap; */
    /* border: 0; */
/* } */

/* scope results hr to the SPA results container only */
.col-md-4 hr { 
    margin-bottom: 1.5rem;
}

p#cr {
	font-size: 0.6875rem;
	font-weight: 100;
	color:#91BDE9;
	font-style:italic;
	text-align:center;
	margin-bottom: 3.125rem;
}

/* === END: merged results.css (RESULT SPECIFIC FORMATTING) === */

.noresult-cimszo {
    line-height: 1.375em;
    font-size: 1.375rem;
    font-weight: 700;
    font-style: oblique;
    margin-top: 0;
    margin-bottom: 16px;
}

#noresult-description {
	line-height: 2.25em;
    font-size: 1rem;
}

.noresult-term {
	color: #FF0000;
    font-weight: bold;
	font-style: italic;
}

.mszotarTitle {
  color: #194775;
  font-weight: 600;
}

.noresult-suggestion {
    font-size: 1.125rem;
    font-weight: 600;
    font-style: italic;
    margin-top: 0;
    margin-bottom: 12px;

    word-break: break-word;      /* for older support */
    overflow-wrap: break-word;   /* standard modern CSS */
    hyphens: auto;               /* optional: adds hyphenation if supported */
}

.noresult-suggestion a {
    display: inline-block;       /* helps with wrapping in flex/grid containers */
    word-break: break-word;
    overflow-wrap: break-word;
}

.container-fluid.easter-egg-container {
  width: 100%;
  max-width: 360px;
  margin: 5px auto 40px auto;
  padding-left: 0;
  padding-right: 0;
}

.easter-egg-banner {
    display: inline-block;
    font-size: 1.1rem;
    line-height: 1.4em;
    background-color: #3b4a5a; /* soft blue-grey */
    color: #ffffff;            /* pure white text */
    padding: 0.3rem 0.7rem;    /* slightly more padding for softness */
    border-radius: 1rem;
    text-align: center;
    margin: 0 auto;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2); /* subtle pop */
}

.easter-egg-dice {
    font-size: 3rem;
    display: block;
    margin: 0 auto 0.5rem;
    color: #3b4a5a; /* match banner background for blending */
}

.easter-egg-banner-number {
	font-size: 1.3rem;
    font-weight: bold;
    color: #ffdd00; /* vivid yellow */
}