/* Add your css code here */
/*
Variable Definitions:
  --r-bg: Sets the background color.
  --r-tx: Sets the text color.
  --r-h1: Sets the color for h1, h2, and h3 headings.
  --r-lk: Sets the link text color.
  --r-lk-h: Sets the hover color for link text.
  --r-br: Sets the border color.
  --r-bg-fr: Sets the background color for input forms.
  --r-tx-lk: Sets the menu link text color.
  --r-tx-lk-h: Sets the hover color for menu link text.
  --r-bg-lk: Sets the background color for menu links.
  --r-bg-lk-h: Sets the hover background color for menu links.
  --r-tx-bt: Sets the button text color.
  --r-tx-bt-h: Sets the hover color for button text.
  --r-bg-bt: Sets the button background color.
  --r-bg-bt-h: Sets the hover background color for buttons.
*/

/*
Regions Names, each region has an ID and a Class with the same name.
You can use .page-wrapper or #page-wrapper
#page-wrapper {}
#primary-sidebar-menu {}
#fixed-search-block {}
#popup-login-block {}
#header {}
#primary-menu {}
#welcome-text {}

#top-container {}
#top-box-first {}
#top-box-second {}
#top-box-third {}

#system-messages {}
#breadcrumb {}
#page-title {}

#main-container {}
#sidebar-box-first {}
#sidebar-box-main {}
#sidebar-box-second {}

#bottom-container {}
#bottom-box-first {}
#bottom-box-second {}
#bottom-box-third {}
#bottom-box-fourth {}

#footer-container {}
#footer-box-first {}
#footer-box-second {}
#footer-box-third {}

#footer-menu {}
#copyright {}

Examples:

#page-wrapper {
  background-color: var(--r-bg);
  color: var(--r-tx);
  border-color: var(--r-br);
}

h1, h2, h3 {
  color: var(--r-h1);
}

a:not(li.nav__menu-item a) {
  color: var(--r-lk);
  color: var(--r-lk-h);
}

input:not(.button) {
  background-color: var(--r-bg-fr);
}

li.nav__menu-item a {
  color: var(--r-tx-lk);
  background-color: var(--r-bg-lk);
}

li.nav__menu-item a:hover {
  color: var(--r-tx-lk-h);
  background-color: var(--r-bg-lk-h);
}

button:not(li.nav__menu-item button) {
  color: var(--r-tx-bt);
  background-color: var(--r-bg-bt);
}

button:not(li.nav__menu-item button):hover {
  color: var(--r-tx-bt-h);
  background-color: var(--r-bg-bt-h);
}
https://www.drupal.org/docs/extending-drupal/themes/contributed-themes/solo/instructions-for-developers-on-using-colors-in-solo-theme
*/

/* KINGCHEFS General styles */
h1, h1.page-title-text {font-size:2rem;line-height:4rem; padding-block:0px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; margin-block:0px;}
h2 {font-size:24px;}
h3 {font-size:20px;}
.nav__menu-item-main .menu__url-title {font-size:1.125rem;font-weight:400;letter-spacing:1px;}
hr {border: 1px solid #CCC!important;}
.solo-outer .region-inner {padding:1rem;}
p {margin-top:0;text-align:justify;}
/* Front Page Styles */
#top-container-inner {padding-top:4rem;}
.top-box-inner {padding:2rem 1.5rem!important;}
.fa-people-arrows, .fa-database, .fa-book-open-reader {font-size:6rem;}
.views-view-responsive-grid--horizontal {align-items:center;}
.views-view-responsive-grid__item {padding-bottom:1rem;}
.footer-menu-inner, .copywrite-inner {padding-top:0!important;padding-bottom:0!important;}
ul.checked {list-style-type:none;}

/* Main listing Styles */
.view-main-list-pages {gap:2rem;}
.view-filters-sidebar {padding-top:1rem;}
.view-filters-sidebar fieldset {
    margin: 0;
    padding: 0 0 0 0.5rem !important;
    border-radius: 6px;
}
.view-filters-sidebar fieldset.from-wrapper > .fieldset-wrapper {padding:0; margin:0;}
.view-filters-sidebar .bef-checkboxes ul {list-style: none; padding: 0; margin: 0;}
.views-exposed-form li {padding:0;}
.views-exposed-form li li {padding:0 0 0 2rem;}
.view-body {padding-top:1rem;}

.card-wrapper {
  display: flex;
  flex-direction:column;
  align-items:flex-start;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid #e0e0e0;
}
.views-row:last-child .card-wrapper {
  border-bottom: none;
}
.card-left {
  width: 100%;
  display:flex;
  justify-content:center; 
}
.card-left img {
  display:block;
  width:clamp(180px, 65vw, 300px);
  height:auto;
  object-fit:contain;
}
@media (min-width: 768px) { /* Adjust this breakpoint as needed */

  /* On desktop, switch the main wrapper to a horizontal layout */
  .card-wrapper {
    flex-direction: row; /* DESKTOP OVERRIDE: Side-by-side */
    align-items: flex-start; /* Align to the top */
    gap: 2rem; /* A wider gap for desktop */
  }

  /* On desktop, reset the mobile centering for the logo */
  .card-left {
    margin: 0;
    flex-shrink:0;
    width:25%;
    max-width:300px;
    display:block;
  }
  .card-left img {
  width:100%;
  }
}


/* --- 3. Right Column (All Info) --- */

.card-right {
  display: grid;
  flex-grow:1;
  gap: 0.75rem; /* Vertical spacing between text blocks */
}


.card-title {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.3;
}
.card-title a {
  text-decoration: none;
  color: #1a1a1a;
}
.card-title a:hover {
  text-decoration: underline;
  color: #0056b3;
}

.card-rating {
  flex-shrink: 0; /* Prevent rating stars from wrapping */
}

/* --- Meta Area (Category & Address) --- */
.card-meta {
  display: grid;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: #555;
}

.card-address {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.card-address .fa-solid {
  color: #888;
}
.more-locations {
  margin-left: 0.5rem;
  font-size: 0.85rem;
}
.more-locations a {
  font-weight: 600;
}

.card-category a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted #999;
}
.card-category a:hover {
  border-bottom-style: solid;
  color: #0056b3;
}

/* --- Summary & Actions --- */
.card-summary {
  color: #333;
  line-height: 1.6;
}

.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: auto; /* Push actions to the bottom of the card */
  padding-top: 0.5rem;
}
.card-action-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5rem 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
  font-weight: 500;
  font-size: 0.9rem;
  transition: background-color 0.2s, color 0.2s;
}
.card-action-link:hover {
  background-color: #f0f0f0;
  border-color: #aaa;
}

/* node layout details */
.node__header, .node__content { margin-block-end:0;}

 /*fieldset styles*/
fieldset{border-radius: 8px; margin: 1rem; padding:0 1rem !important; width:auto !important; box-sizing:border-box !important;}
.business-legend, .fieldset-legend {padding:0 1em;font-weight:bold;}
/* Form Styles */
h4.label {font-weight:bold;}
input.shs-enabled {display:none;}
label.ck-label {display:none !important;}
.form-item__description .item-list > .solo-ul > .solo-li-list:nth-child(2) {
  display: none !important;}
/* --- Social Links Inline Form Layout (Final Version) --- */

/* 
 * 1. 选中作为“行”容器的 .form-item，但限定它必须是在 .details-wrapper 内部。
*/
#edit-field-business-social-links-wrapper .form-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

#edit-field-business-social-links-wrapper .form-item label {
  width: 100px; 
  flex-shrink: 0; 
  font-weight: bold;
  text-align: right; 
  padding-right: 10px;
}

#edit-field-business-social-links-wrapper .form-item .field-prefix {
  flex-shrink: 0; 
  padding: 0.5rem;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-right: none;
  border-radius: 5px 0 0 5px;
  white-space: nowrap;
}

#edit-field-business-social-links-wrapper .form-item input.form-text {
  flex-grow: 1;
  border-radius: 0 5px 5px 0;
}

/* to be removed after mrgrate user social links field to a new better module */
#edit-field-user-social-links-wrapper {margin-top:10px;}
#edit-field-user-social-links-wrapper .form-select {width:unset;}
input[name^="field_user_social_links"][name$="[link]"] {width: unset; display: inline; }

/* Taxonomy Term Reference Tree Widget */
.field--widget-term-reference-tree .form-item {
    display: inline;
}
.no-term-reference-tree-button {display:none;}


/* Business Locations on Business Partner Page */
.views-view-responsive-grid--vertical .views-view-responsive-grid__item:not(:last-of-type) {border-bottom: 1px solid #dddddd;}
.views-view-responsive-grid__item-inner .field:not(:last-child) {margin-block-end: 0px;}
.views-view-responsive-grid__item-inner p {margin-block-start: 0px; margin-block-end:0px;}
.field--label-inline {display:flow-root;}



.business-profile-header {display:flex;align-items:center;gap:15px;min-width:0;}
.business-profile-header__logo {flex-shrink:0;}
.business-profile-header__logo img {display:block;height:64px; width:auto;}


.status-badge,
.claim-business-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-left: 12px;
  padding: 0.4em 0.9em;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 20px;
  vertical-align: middle;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  line-height: 1.2;
  border: 1px solid transparent;
}

.status-badge.claimed {
  color: #1d6a96;
  background-color: #e8f3ff;
  border: 1px solid #b4d7f8;
}

.status-badge.claimed::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f058";
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.claim-business-button {
  color: #28a745;
  background-color: transparent;
  border: 1px solid #28a745;
  cursor: pointer;
}

.claim-business-button::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f05a"; 
  font-size: 1em; 
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.claim-business-button:hover {
  background-color: #28a745;
  color: #ffffff;
}

.fieldgroup {
  border-radius: 6px;
  width:100% !important;
  box-sizing:border-box;
}
.info-group {
  border: 1px solid #cccccc;
  border-radius:4px;
  padding:0 1rem 1rem 1rem;
  margin:1rem 0;
}
.info-group-title {
  margin-top:-1rem;
  margin-left:0;
  margin-bottom:1rem;
  background-color:#FFF;
  padding:0 0.5rem;
  font-size:1.25rem;
  font-weight:bold;
  width: -moz-fit-content;
  width:fit-content;
}
.fieldset-legend {
  padding: 0 0.5em;
  font-size: 1.25em; /* Make it slightly larger than normal text */
  font-weight: 600;  /* A semi-bold weight */
  color: #333333;
}
.info-group dl, .business-information dl {
  display: grid;
  grid-template-columns: minmax(120px, 200px) 1fr;
  margin: 0; 
  padding: 0; 
}

.info-group dl dt,
.business-information dl dt,
.info-group dl dd,
.business-information dl dd {
 border-bottom: none; 
 align-items: center; /* 垂直居中对齐子内容 */
}

.business-information dl dt,
.info-group dl dt {
  text-align: left; /* 标签左对齐 */
  grid-column: 1; 
}

.business-information dl dd,
.info-group dl dd {
  grid-column: 2;
}
.info-group dl dt:after {content:":";}
ul.reference-links {margin:0;}
li.reference-link {font-size：0.9em;font-style:italic;}
p.address {margin:0;}
/* User Profile Page Styles */
ul.social-media-links--platforms { margin:5px 0;}

/* Support Ticket Styles */
.node__meta .node__author-info {font-style:italic;}
h3.comment-title {margin-block-end: 0px;}
div.submitted {font-size:0.9em;font-style:italic;}
div.comment-body p {margin:0.5em 0px;}

/* views facets styles */
.bef-checkboxes .form-item {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
}
.bef-checkboxes .form-item label {flex-grow:1;font-weight:normal;}
.bef-checkboxes .form-item input[type="checkbox"] {flex-shrink:0;}


/* Add Content Form Page Styles */
button, [type="button"], [type="reset"], [type="submit"] {
    -webkit-appearance: button;
    background-color: gainsboro;
    padding: 0.5rem;
    margin: 1rem;
}