/* Guides on www.kronly.ro (/ghiduri and /ghiduri/<slug>) — Story 28-1.
   Loaded after styles.css and built on its variables. One reading column, plain type:
   these pages are read by someone who came from a search with a question. */

.ghid-nav { position: sticky; top: 0; z-index: 10; background: var(--bg-primary); box-shadow: var(--shadow-navbar); }
.ghid-nav__inner { max-width: var(--max-width); margin: 0 auto; padding: var(--spacing-sm) var(--spacing-lg); display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); }
.ghid-nav__logo { display: inline-flex; align-items: center; gap: var(--spacing-xs); font-weight: 700; font-size: var(--font-size-lg); color: var(--text-primary); }
.ghid-nav__logo img { width: 32px; height: 32px; border-radius: 8px; background: var(--color-primary); }
.ghid-nav__links { display: flex; flex-wrap: wrap; gap: var(--spacing-xs) var(--spacing-lg); font-size: var(--font-size-sm); font-weight: 600; }
.ghid-nav__links a { color: var(--text-secondary); }
.ghid-nav__links a:hover, .ghid-nav__links a[aria-current="page"] { color: var(--color-primary-dark); }

.ghid { background: var(--bg-secondary); padding: var(--spacing-xl) 0 var(--spacing-3xl); }
.ghid__col { max-width: 760px; margin: 0 auto; padding: 0 var(--spacing-lg); }
.ghid__crumbs { font-size: var(--font-size-sm); color: var(--text-tertiary); margin-bottom: var(--spacing-md); }
.ghid__crumbs a { color: var(--text-secondary); text-decoration: underline; }
.ghid h1 { font-size: var(--font-size-2xl); line-height: 1.2; margin-bottom: var(--spacing-md); }
.ghid__answer { font-size: var(--font-size-md); line-height: 1.6; color: var(--text-primary); margin-bottom: var(--spacing-lg); }
.ghid h2 { font-size: var(--font-size-xl); line-height: 1.25; margin: var(--spacing-2xl) 0 var(--spacing-sm); }
.ghid h3 { font-size: var(--font-size-md); margin: var(--spacing-lg) 0 var(--spacing-xs); }
.ghid p, .ghid li { line-height: 1.65; color: var(--text-secondary); }
.ghid p { margin-bottom: var(--spacing-md); }
.ghid ul.ghid__list, .ghid ol.ghid__list { margin: 0 0 var(--spacing-md) 1.25rem; }
.ghid ul.ghid__list { list-style: disc; }
.ghid ol.ghid__list { list-style: decimal; }
.ghid ul.ghid__list li, .ghid ol.ghid__list li { margin-bottom: var(--spacing-xs); }
.ghid a.ghid__link, .ghid p a, .ghid li a, .ghid td a { color: var(--color-primary-dark); text-decoration: underline; }
.ghid strong { color: var(--text-primary); }

.ghid__card { background: var(--bg-primary); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: var(--spacing-lg); margin-bottom: var(--spacing-lg); }
.ghid__downloads { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); margin: var(--spacing-md) 0 var(--spacing-xs); }
.ghid__download { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 48px; padding: 0 var(--spacing-lg); border-radius: var(--radius-sm); background: var(--color-primary-dark); color: #fff; font-weight: 700; text-decoration: none; }
.ghid__download:hover { background: var(--color-primary); }
.ghid__download--alt { background: var(--bg-primary); color: var(--color-primary-dark); box-shadow: inset 0 0 0 2px var(--color-primary-dark); }
.ghid__download--alt:hover { background: var(--color-primary-light); }
.ghid__fine { font-size: var(--font-size-sm); color: var(--text-tertiary); margin: 0; }

.ghid__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-sm); margin-bottom: var(--spacing-lg); }
.ghid__fact { background: var(--bg-primary); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: var(--spacing-md); }
.ghid__fact strong { display: block; font-size: var(--font-size-2xl); line-height: 1.1; font-variant-numeric: tabular-nums; }
.ghid__fact span { font-size: var(--font-size-sm); color: var(--text-secondary); }

.ghid__table-wrap { overflow-x: auto; margin-bottom: var(--spacing-md); }
.ghid table { width: 100%; border-collapse: collapse; background: var(--bg-primary); border-radius: var(--radius-sm); font-size: var(--font-size-sm); }
.ghid th, .ghid td { text-align: left; padding: var(--spacing-xs) var(--spacing-sm); border-bottom: 1px solid var(--bg-tertiary); color: var(--text-secondary); }
.ghid th { color: var(--text-primary); }

/* The month at a glance: seven columns, Monday first. */
.ghid__cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: var(--spacing-sm); font-variant-numeric: tabular-nums; }
.ghid__cal > * { text-align: center; padding: 8px 0; border-radius: 6px; font-size: var(--font-size-sm); }
.ghid__cal-head { font-weight: 700; color: var(--text-tertiary); }
.ghid__cal-day { background: var(--bg-primary); color: var(--text-primary); }
.ghid__cal-day--weekend { background: var(--bg-tertiary); color: var(--text-tertiary); }
.ghid__cal-day--holiday { background: var(--color-primary-light); color: var(--color-primary-dark); font-weight: 700; box-shadow: inset 0 0 0 1px var(--color-primary-dark); }
.ghid__legend { display: flex; flex-wrap: wrap; gap: var(--spacing-xs) var(--spacing-md); font-size: var(--font-size-sm); color: var(--text-secondary); margin-bottom: var(--spacing-md); }
.ghid__legend span::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--bg-primary); box-shadow: inset 0 0 0 1px var(--bg-tertiary); }
.ghid__legend .is-weekend::before { background: var(--bg-tertiary); }
.ghid__legend .is-holiday::before { background: var(--color-primary-light); box-shadow: inset 0 0 0 1px var(--color-primary-dark); }

.ghid figure { margin: 0 0 var(--spacing-lg); }
.ghid figure img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.ghid figure.ghid__shot img { width: 100%; max-width: 300px; border-radius: 28px; }
.ghid figcaption { font-size: var(--font-size-sm); color: var(--text-tertiary); text-align: center; margin-top: var(--spacing-xs); }

/* The app call to action. Without JavaScript both store badges show. */
.ghid__app { background: var(--bg-time-tracking); border-radius: var(--radius-md); padding: var(--spacing-lg); margin: var(--spacing-xl) 0; }
.ghid__app h2 { margin-top: 0; }
.ghid__badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-md); margin-top: var(--spacing-md); }
.ghid__badges img { display: block; height: 52px; width: auto; }
[data-os="android"] .ghid__badge--ios,
[data-os="ios"] .ghid__badge--android { display: none; }

.ghid__faq dt { font-weight: 700; color: var(--text-primary); margin-top: var(--spacing-md); }
.ghid__faq dd { margin: var(--spacing-xs) 0 0; color: var(--text-secondary); line-height: 1.65; }
.ghid__sources { font-size: var(--font-size-sm); }
.ghid__sources li { color: var(--text-tertiary); }
.ghid__updated { font-size: var(--font-size-sm); color: var(--text-tertiary); margin-top: var(--spacing-xl); }

.ghid__hub-list { display: grid; gap: var(--spacing-md); margin-top: var(--spacing-lg); }
.ghid__hub-item { display: block; background: var(--bg-primary); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: var(--spacing-lg); color: inherit; }
.ghid__hub-item:hover { box-shadow: var(--shadow-card-hover); }
.ghid__hub-item strong { display: block; font-size: var(--font-size-md); margin-bottom: 4px; }
.ghid__hub-item span { color: var(--text-secondary); font-size: var(--font-size-sm); line-height: 1.5; }

@media (max-width: 480px) {
  .ghid h1 { font-size: var(--font-size-xl); }
  .ghid__download { width: 100%; }
  .ghid__fact { padding: var(--spacing-sm); }
  .ghid__fact strong { font-size: var(--font-size-xl); }
}