/* synth.no theme — ported from the D6 "rust" style.css.
   Sub-themes (tng, lilo, flamme) override only the palette variables. */

:root {
  --link: #621;
  --header-bg: #83878E;
  --accent-bg: #864;
  --sidebar-bg: #ddd;
  --footer-bg: #eee;
  --page-bg: #fff;
  --text: #000;
}

/* Base */
body {
  margin: 0;
  padding: 0;
  color: var(--text);
  background-color: var(--page-bg);
  font: 78%/1.45 Helvetica, Arial, Verdana, sans-serif;
}
a { text-decoration: none; }
a:link, a:visited { color: var(--link); }
a:hover { color: var(--link); text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { margin: 0.5em; }
h1 { font-size: 1.2em; }
h2 { font-size: 1.1em; }
img { max-width: 100%; height: auto; }
pre { background: #f0f0f0; padding: 0.75em 1.5em; border: 1px solid #bbb; overflow-x: auto; }

/* Header — the logo graphic is the banner; menu + search overlay top-right. */
#header {
  position: relative;
  background-color: var(--header-bg);
  min-height: 129px;
  overflow: hidden;
}
#logo-area { display: block; }
#logo img { display: block; border: 0; height: 129px; width: auto; max-width: none; }
/* The logo graphic contains the "synth.no" branding (as on the old site), so
   the text name/slogan is hidden visually but kept for screen readers. */
#name-and-slogan { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); }
#menu { position: absolute; top: 0.5em; right: 1em; text-align: right; font-size: 0.72em; text-transform: lowercase; }
#menu a { color: #eee; }
#menu a:hover { color: #fff; }
#menu ul { list-style: none; margin: 0; padding: 0; }
#menu li { display: inline-block; margin-left: 0.6em; }
#header-region { position: absolute; bottom: 0.6em; right: 1em; text-align: right; font-size: 0.72em; }
#header-region .form-item, #header-region .form-actions { display: inline-block; margin: 0 0.2em 0 0; vertical-align: middle; }
#header-region label { color: #eee; margin-right: 0.3em; }
#header-region input[type="text"], #header-region input[type="search"] { width: 8em; }

/* Content layout */
#content-wrap { display: flex; align-items: stretch; }
#main { flex: 1; padding: 10px; min-width: 0; }
#sidebar-left, #sidebar-right {
  background-color: var(--sidebar-bg);
  width: 15.5em;
  flex: 0 0 auto;
  padding: 5px;
  overflow-wrap: break-word;
}
#sidebar-left { border-right: 1px solid #999; }
#sidebar-right { border-left: 1px solid #999; }
/* keep wide embeds (Facebook likebox iframe) inside the column */
#sidebar-left iframe, #sidebar-right iframe, #sidebar-left img, #sidebar-right img { max-width: 100%; }

/* Mission box at the top of the mid column — flush to the column edges (D6). */
#mission { background-color: var(--accent-bg); color: #fff; padding: 1.2em 1.5em; margin: -10px -10px 1em -10px; font-style: italic; }
#mission a, #mission a:visited { color: #9cf; }

/* Sidebar blocks: tight, left-aligned headings + lists */
#sidebar-left h2, #sidebar-right h2, .block h2, .block .block__title {
  margin: 0.3em 0 0.1em 0; padding: 0; font-size: 1.3em; font-weight: bold; color: #444; line-height: 1.2;
}
/* every list in a sidebar: keep the bullets but a modest indent + tight lines */
#sidebar-left ul, #sidebar-right ul, #sidebar-left ol, #sidebar-right ol {
  list-style: disc; margin: 0.1em 0 0.3em 0; padding-left: 1.7em;
}
/* tight wrapped lines within an item, small gap between items */
#sidebar-left li, #sidebar-right li { margin: 0 0 0.2em 0; padding: 0; line-height: 1.15; }
/* thin separator line between sidebar blocks (like D6) */
#sidebar-left .block, #sidebar-right .block { margin-bottom: 0.9em; padding-bottom: 0.6em; border-bottom: 1px solid #bbb; }
#sidebar-left .block:last-child, #sidebar-right .block:last-child { border-bottom: 0; }
#sidebar-left p, #sidebar-right p { margin: 0.2em 0; }
.bday-when { margin: 0.3em 0 0; }

/* Breadcrumb — inline trail, » separators, no numbering */
.breadcrumb { margin-bottom: 0.6em; font-size: 0.85em; }
.breadcrumb__list { list-style: none; margin: 0; padding: 0; }
.breadcrumb__item { display: inline; }
.breadcrumb__item + .breadcrumb__item::before { content: " » "; color: #999; }

/* Components */
#highlighted, .messages--status, .messages { background-color: var(--accent-bg); color: #fff; padding: 0.5em 1em; margin-bottom: 1em; }
.messages a, .messages em { color: #fff; }
.messages--error, .error { border-color: red; }
#help { font-size: 0.9em; margin-bottom: 1em; }
.breadcrumb { margin-bottom: 0.5em; font-size: 0.9em; }
h1.page-title, .title, .title a { font-weight: bold; color: #222; }
.node__submitted, .submitted { color: #999; font-size: 0.8em; }

.block { margin-bottom: 1.2em; }

/* Inline-labelled fields (user profile: "Name: Henrik" on one line) */
.field--label-inline { margin: 0 0 0.25em 0; }
.field--label-inline .field__label { font-weight: bold; display: inline; padding-right: 0.4em; }
.field--label-inline .field__item,
.field--label-inline .field__items { display: inline; }
.field--label-inline .field__item p { display: inline; margin: 0; }
/* "Medlem i" (member_for) renders as a form-item with an <h4> label, not a
   field; align it with the inline profile fields (no indent, inline bold label). */
.block-system .form-item { margin: 0 0 0.25em 0; padding: 0; }
.block-system .form-item h4.label,
.block-system .form-item .label {
  display: inline; font-weight: bold; font-size: 1em; margin: 0; padding-right: 0.4em;
}

/* Profile avatar sits at the top of the user page, just below the tabs */
.block-system .field--name-user-picture { margin: 0 0 0.75em 0; }
.block-system .field--name-user-picture img { border: 1px solid #ccc; display: block; }

/* Above-label fields (biography, interests) keep a little breathing room */
.field--label-above { margin: 0 0 0.75em 0; }
.field--label-above .field__label { font-weight: bold; }

/* Event calendar (/event) — monthly grid */
.event-calendar { margin: 0.5em 0; }
.cal-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4em; }
.cal-heading { font-weight: bold; font-size: 1.2em; }
.cal-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal-grid th { font-size: 0.8em; color: #666; padding: 0.2em; text-align: left; border-bottom: 1px solid #bbb; }
.cal-grid td { border: 1px solid #e0e0e0; vertical-align: top; height: 4.5em; padding: 2px 3px; overflow: hidden; }
.cal-empty { background: #f7f7f7; border-color: #eee; }
.cal-daynum { font-size: 0.8em; color: #999; }
.cal-today { background: #fbf7f2; }
.cal-today .cal-daynum { color: var(--accent-bg); font-weight: bold; }
.cal-has-events { background: #f5f2ee; }
.cal-event { font-size: 0.72em; line-height: 1.2; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-listlink { margin-top: 0.6em; font-size: 0.85em; }
@media (max-width: 720px) {
  .cal-grid td { height: auto; }
  .cal-event { white-space: normal; }
}

/* Forum container index (/forum) */
.forum-index { width: 100%; border-collapse: collapse; margin: 0.5em 0; }
.forum-index th, .forum-index td { text-align: left; padding: 0.4em 0.6em; border-bottom: 1px solid #ddd; vertical-align: top; }
.forum-index th { font-size: 0.85em; color: #666; border-bottom: 2px solid #bbb; }
.forum-index .forum-topics, .forum-index .forum-posts { text-align: right; width: 4em; white-space: nowrap; }
.forum-index .forum-last { white-space: nowrap; font-size: 0.85em; color: #888; }
.forum-index .forum-name a { font-weight: bold; }
.forum-description { font-size: 0.85em; color: #666; margin-top: 0.2em; }
/* Forum topic prev/next navigation */
.forum-topic-navigation { margin: 1em 0; font-size: 0.85em; display: flex; justify-content: space-between; gap: 1em; }
.forum-nav-next { margin-left: auto; text-align: right; }

/* Gallery link on an image node ("Galleri: <name>") */
.node-gallery-link { margin: 0.5em 0; font-size: 0.9em; }

/* "Historikk" profile section — heading + inline items + action links */
.synth-historikk { margin-top: 1em; }
.synth-historikk h2 { margin: 0 0 0.3em 0; padding: 0; font-size: 1.3em; font-weight: bold; color: #444; }
.synth-historikk__action { margin: 0.4em 0 0; }

/* Mid column — article listing (teasers) */
.clearfix::after { content: ""; display: table; clear: both; }

.views-row { border-bottom: 1px solid #ddd; padding-bottom: 1.25em; margin-bottom: 1.5em; }
.views-row:last-child { border-bottom: 0; }

article.node { margin: 0; overflow: hidden; }
article.node > h2 { margin: 0 0 0.15em 0; font-size: 1.4em; line-height: 1.25; }
/* Mid-column article titles are black (not the rust link colour), like D6. */
article.node > h2 a:link, article.node > h2 a:visited { color: #222; }
article.node > h2 a:hover { color: #222; text-decoration: underline; }

/* Submitted line: subtle "Skrive av <author> <date>" */
.node__submitted, .submitted { color: #888; font-size: 0.8em; margin-bottom: 0.6em; }
.node__submitted a:link, .node__submitted a:visited { color: #888; }
.node__submitted a:hover { color: var(--link); }

/* Body / teaser text: readable line-height */
.node__content { line-height: 1.55; }
.node__content .field--name-body p:first-child { margin-top: 0; }

.node--sticky, .sticky { padding: 0.5em; background: #f3ede8; border: 1px solid #e0d4c8; }

/* Attached article image floats to the right of the teaser text */
.field--name-field-nodeimage, .field--name-field-image {
  float: right;
  max-width: 240px;
  margin: 0.2em 0 0.75em 1.25em;
}
.field--name-field-nodeimage img, .field--name-field-image img {
  display: block;
  border: 1px solid #ccc;
}

/* Read-more + comment links — small, plain, at the bottom of the entry */
ul.links.inline { list-style: none; clear: both; margin: 0.6em 0 0 0; padding: 0; font-size: 0.78em; }
ul.links.inline li { display: inline-block; margin: 0 1em 0 0; }
ul.links.inline a:link, ul.links.inline a:visited { color: var(--link); font-weight: normal; }
ul.links.inline a:hover { text-decoration: underline; }

/* Small metadata badges in the sidebar blocks */
.node-type, .comment-age { color: #999; font-size: 0.85em; }
.bday-when { font-size: 0.8em; font-weight: bold; color: #888; margin: 0.4em 0 0.1em; }
.online-summary { font-size: 0.85em; margin: 0 0 0.3em; }

/* Login block — centred fields (matches D6 Brukarinnlogging) */
#sidebar-left .user-login-form { text-align: center; }
#sidebar-left .user-login-form .form-item { margin: 0.3em 0; }
#sidebar-left .user-login-form label { display: block; }
#sidebar-left .user-login-form input[type="text"],
#sidebar-left .user-login-form input[type="password"] { width: 90%; }
#sidebar-left .user-login-form .form-actions { text-align: center; }

/* Poll block */
.poll-question { font-weight: bold; margin-bottom: 0.4em; }
/* The poll question links to the poll node, but shows black (not rust), like D6. */
.poll-question a:link, .poll-question a:visited { color: #222; }
.poll-question a:hover { color: #222; text-decoration: underline; }
.poll-choice { font-size: 0.85em; margin: 0.25em 0; }
.poll-text { display: block; }
.poll-bar { display: block; background: #ddd; height: 7px; margin: 1px 0; }
.poll-bar > span { display: block; background: var(--accent-bg); height: 7px; }
.poll-pct { color: #888; font-size: 0.8em; }
.poll-votes { color: #aaa; font-size: 0.8em; margin-left: 0.3em; }
.poll-total { color: #888; font-size: 0.8em; margin-top: 0.4em; }
.poll-older { margin-top: 0.5em; font-size: 0.85em; }
.poll-cancel { margin-top: 0.4em; font-size: 0.85em; }
.poll-choice--mine .poll-text { font-weight: bold; }
/* On the poll node page the poll sits above the body — give it room. */
.node--type-poll .poll { margin: 0.5em 0 1em; }

/* Poll vote form — radio list + "Stem" button */
form#synth-poll-vote-form .form-radios .form-item,
form.synth-poll-vote-form .js-form-type-radio { margin: 0.15em 0; }
.poll form .form-item { margin: 0.15em 0; }
.poll .form-radios label { font-weight: normal; }
.poll .form-actions { margin-top: 0.5em; }

/* Comments — bordered, avatar floated right (matches old synth.no) */
.comment {
  border: 1px solid #ccc;
  background: #fafafa;
  padding: 0.6em 0.8em;
  margin-bottom: 1em;
}
.comment .field--name-user-picture {
  float: right;
  margin: 0 0 0.5em 0.8em;
}
.comment .field--name-user-picture img { border: 1px solid #ccc; display: block; }
.comment__submitted, .comment .submitted { color: #888; font-size: 0.8em; margin: 0 0 0.4em 0; }
.comment__submitted a:link, .comment__submitted a:visited { color: #888; }
.comment__title { font-size: 1.05em; margin: 0 0 0.3em 0; }
.comment .field--name-comment-body { margin: 0.4em 0; line-height: 1.5; }
.comment.by-anonymous { background: #f4f0ec; }
.indented { margin-left: 1.5em; }  /* threaded replies */

/* Biletegalleri index (/image) — grid of gallery covers with count + date */
.gallery-index { display: flex; flex-wrap: wrap; gap: 1.5em; margin-top: 0.5em; }
.gallery-teaser { width: 150px; text-align: center; }
.gallery-teaser__cover img { border: 1px solid #ccc; display: block; margin: 0 auto; }
.gallery-teaser__title { font-size: 1em; margin: 0.4em 0 0.1em; }
.gallery-teaser__title a:link, .gallery-teaser__title a:visited { color: var(--link); }
.gallery-teaser__descr { font-size: 0.8em; color: #555; margin: 0 0 0.2em; }
.gallery-teaser__count { font-size: 0.8em; }
.gallery-teaser__updated { font-size: 0.75em; color: #888; }

/* Image gallery grid (/image/TID) */
.views-view-grid { width: 100%; border-collapse: separate; border-spacing: 6px; }
.views-view-grid td, .views-view-grid .views-col { vertical-align: top; text-align: center; }
.views-view-grid img { border: 1px solid #ccc; display: inline-block; }
.views-view-grid .views-field-title { font-size: 0.75em; margin-top: 2px; }

/* RSS feed link with the orange feed icon */
.feed-icon {
  padding-left: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f60'%3E%3Cpath d='M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19 7.38 20 6.18 20 5 20 4 19 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44m0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1z'/%3E%3C/svg%3E") left center no-repeat;
  background-size: 15px;
}

/* Pager — horizontal, boxed page links */
.pager { margin: 1.5em 0; text-align: center; }
.pager__items { list-style: none; margin: 0; padding: 0; }
.pager__item { display: inline-block; margin: 0 0.1em; }
.pager__item a { display: inline-block; padding: 0.2em 0.55em; border: 1px solid #ccc; background: #f2f2f2; color: var(--link); }
.pager__item a:hover { background: #e6e6e6; text-decoration: none; }
.pager__item.is-active a { background: var(--accent-bg); color: #fff; border-color: var(--accent-bg); font-weight: bold; }
.pager__item--ellipsis { display: inline-block; padding: 0.2em 0.3em; color: #999; }

/* Takk (thanks) — a small grey "button" toggle + "Takk frå: <names>" list (D6) */
.takk { font-size: 0.8em; margin: 0.4em 0 0; color: #666; }
.takk-link {
  display: inline-block;
  background-color: #eee;
  padding: 3px 8px;
  border: 1px solid #ddd;
  border-radius: 3px;
  color: var(--link);
}
.takk-link:hover { background-color: #e2e2e2; text-decoration: none; }
.takk .takk-box { color: #888; }
.takk .takk-text { font-weight: bold; margin-right: 0.2em; }
.takk .takk-box a:link, .takk .takk-box a:visited { color: #777; }

/* Node footer: links + "Takk frå:" stack on the left; the takk button sits on
   the right, vertically centred across both rows (like D6). */
.node-footer { position: relative; padding-right: 6.5em; }
.node-footer .takk { margin: 0; }
.node-footer .takk-link {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.node-footer ul.links.inline { margin-top: 0; }

/* Comments: takk button floats to the bottom-right of the comment. */
.comment .takk { margin-top: 0.3em; overflow: hidden; }
.comment .takk .takk-link { float: right; margin-left: 0.6em; }

/* Footer */
#footer {
  background-color: var(--footer-bg);
  padding: 1em;
  font-size: 0.8em;
  clear: both;
}

/* Main menu (navigation region) — lowercase links like D6's primary links. */
[id$="-mainmenu"] a { text-transform: lowercase; }

/* Tabs (local tasks) — horizontal row of tab links, like D6 */
ul.tabs { list-style: none; margin: 0 0 1em 0; padding: 0 0 0.2em 0; border-bottom: 1px solid #bbb; }
ul.tabs.secondary { border-bottom: 0; margin-top: -0.6em; }
.tabs__tab { display: inline-block; margin: 0 0.2em -1px 0; padding: 0; }
.tabs__tab a {
  display: inline-block; padding: 0.2em 0.8em;
  border: 1px solid #bbb; border-bottom: 0;
  background: #f2f2f2; color: var(--link);
  border-radius: 3px 3px 0 0;
}
.tabs__tab a:hover { background: #e6e6e6; text-decoration: none; }
.tabs__tab.is-active a { background: var(--page-bg); color: #222; font-weight: bold; border-bottom: 1px solid var(--page-bg); }
.tabs.secondary .tabs__tab a { border-radius: 3px; border-bottom: 1px solid #bbb; font-size: 0.9em; }

@media (max-width: 720px) {
  #content-wrap { flex-direction: column; }
  #sidebar-left, #sidebar-right { width: auto; border: 0; border-top: 1px solid #999; }
  #header { flex-direction: column; align-items: flex-start; }
  #menu { text-align: left; margin-left: 0; }
  .field--name-field-nodeimage, .field--name-field-image {
    float: none;
    max-width: 100%;
    margin: 0 0 0.75em 0;
  }
}