body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  color: #333333;
}

/* Header (group level) */
header {
  background-color: #666666; /* neutral grå */
  color: #ffffff;
  padding: 15px 20px;
}

header .logo {
  font-size: 1.6rem;
  font-weight: bold;
}

/* Header Title */
header h1 {
  font-family: Besknees, Verdana, Arial, sans-serif;
  font-size: 48px;      /* större */
  color: #ffffff;       /* vit text */
  margin: 10px 0;
  text-align: center;
}

/* New top navigation */
header nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 25px;
  padding: 10px 0;
  margin: 0;
}

header nav a {
  color: #ffffff;
  font-weight: bold;
  text-decoration: none;
  font-size: 16px;
}

header nav a:hover {
  text-decoration: underline;
}

/* Intro text above features */
.intro {
  text-align: center;
  margin: 20px auto;
  font-size: 18px;
  color: #333;
}


/* Advertisement placeholders */
.ad-top,
.ad-middle,
.ad-sidebar {
  background-color: #f8f8f8;
  text-align: center;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #dddddd;
  color: #666666;
}

.main-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;

  /*
    On wide screens the layout becomes difficult to read if it stretches
    across the entire viewport.  Restrict the overall width of the main
    container to roughly 900 pixels and centre it on the page.  This keeps
    text lines at a comfortable length and maintains a balanced layout
    regardless of screen size.
  */
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.content {
  flex: 3;
  padding: 20px;
}

.sidebar {
  flex: 1;
  padding: 20px;
  background-color: #fafafa;
  border-left: 1px solid #dddddd;
}

/* Sidebar navigation */
.sidebar-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-nav li {
  margin-bottom: 8px;
}

.sidebar-nav a {
  color: #004d99;
  text-decoration: none;
}

.sidebar-nav a:hover {
  text-decoration: underline;
}

/* Footer (group level) */
footer {
  background-color: #333333; /* mörkgrå */
  color: #ffffff;
  text-align: center;
  padding: 20px 10px;
  border-top: 3px solid #999999; /* ljusgrå accent */
  font-size: 14px;
}
footer a {
  color: #cccccc; /* diskret grå-länk */
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}


h1,
h2,
h3 {
  color: #004d99;
}

form label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

form input[type="text"],
form select {
  padding: 8px;
  margin-bottom: 10px;
  width: 100%;
  max-width: 300px;
  border: 1px solid #cccccc;
  border-radius: 4px;
}

form button {
  background-color: #004d99;
  color: #ffffff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

form button:hover {
  background-color: #003366;
}

/* === Feature Boxes for Xavier Group === */
.features {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
}

.feature-box {
    flex: 1 1 260px;
    background: #fff;
    border: 2px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.feature-box h3 {
    margin: -15px -15px 10px -15px;
    padding: 8px;
    border-radius: 8px 8px 0 0;
    font-family: Besknees, Verdana, Arial, sans-serif;
    font-size: 18px;
}

/* === Brand Feature Boxes === */

/* Xavier Media */
.feature-xmedia {
  border-color: #336699;
  background: #f5f9fc;
}
.feature-xmedia h3 {
  background: #336699;
  color: #fff;
}
.feature-xmedia a {
  color: #336699;
}

/* WebWorld */
.feature-webworld {
  border-color: #009966;
  background: #f2fbf7;
}
.feature-webworld h3 {
  background: #009966;
  color: #fff;
}
.feature-webworld a {
  color: #3399CC; /* secondary accent */
}

/* Xavier Group */
.feature-group {
  border-color: #666666;
  background: #f7f7f7;
}
.feature-group h3 {
  background: #666666;
  color: #fff;
}
.feature-group a {
  color: #adc2d6; /* secondary blue-gray */
}

/* Xavier Finans */
.feature-xavierfinans {
  border-color: #006666;
  background: #f0f7f5;
}
.feature-xavierfinans h3 {
  background: #006666;
  color: #FFCC66; /* secondary gold */
}
.feature-xavierfinans a {
  color: #006666;
}

/* Xavier Astrology */
.feature-astrology {
  border-color: #663399;
  background: #f9f5fc;
}
.feature-astrology h3 {
  background: #663399;
  color: #FFCC66; /* gold accent */
}
.feature-astrology a {
  color: #336699; /* secondary accent */
}

/* Xavier Environmental */
.feature-environmental {
  border-color: #339933;
  background: #f5fcf7;
}
.feature-environmental h3 {
  background: #339933;
  color: #fff;
}
.feature-environmental a {
  color: #66CC66; /* lighter green secondary */
}

/* Roswell UFOs / RYQN */
.feature-roswellufos {
  border-color: #FF3300;
  background: #111111;
  color: #eee;
}
.feature-roswellufos h3 {
  background: #FF3300;
  color: #FFCC00;
}
.feature-roswellufos a {
  color: #FFCC00;
}
.feature-roswellufos a:hover {
  color: #fff;
}

/* SubmitCafe */
.feature-submitcafe {
  border-color: #FF6600;
  background: #fff8f2;
}
.feature-submitcafe h3 {
  background: #FF6600;
  color: #fff;
}
.feature-submitcafe a {
  color: #336699; /* secondary blue */
}



/* Links inside feature-boxes */
.feature-box a {
  font-weight: bold;
  text-decoration: none;
}
.feature-box a:hover {
  text-decoration: underline;
}


/* Article list inside feature box */
.feature-box .latest {
    margin-top: 10px;
    font-size: 14px;
}
.feature-box .latest h4 {
    margin: 0 0 5px;
    font-size: 15px;
}
.feature-box .latest ul {
  list-style-type: disc;   /* punktlista */
  padding-left: 20px;      /* lite indrag */
}

.feature-box .latest ul li {
  margin-bottom: 5px;
  font-weight: normal;     /* inte feta */
}

.feature-box .latest ul li a {
  text-decoration: none;
  font-weight: normal;     /* inga feta länkar */
  color: inherit;          /* tar boxens färg */
}

.feature-box .latest ul li a:hover {
  text-decoration: underline;
}
/* Contact form styling */
.contact-form {
  background: #FAFAFA;
  padding: 25px;
  border: 1px solid #DDD;
  border-radius: 6px;
  max-width: 700px;
  margin: 0 auto 40px auto; /* centrerad låda men vänsterjusterat innehåll */
}

.contact-form h1,
.contact-form p {
  text-align: left;
}

.form-row {
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
}

.form-row label {
  font-weight: bold;
  margin-bottom: 6px;
  color: #336699;
}

.input {
  width: 100%;
  padding: 10px;
  font-size: 15px;
  border: 1px solid #ADC1D6;
  border-radius: 4px;
}

.input:focus {
  outline: none;
  border-color: #336699;
  box-shadow: 0 0 4px rgba(51,102,153,0.3);
}

textarea.input {
  resize: vertical;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.button {
  background-color: #336699;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 15px;
  border-radius: 4px;
  cursor: pointer;
  transition: background .2s;
}

.button:hover {
  background-color: #28517a;
}

.alert {
  margin-bottom: 20px;
  padding: 10px;
  border-radius: 4px;
}

.alert.ok {
  background-color: #EAF4D6;
  border: 1px solid #99CC33;
  color: #336600;
}

.alert.err {
  background-color: #FDECEA;
  border: 1px solid #E74C3C;
  color: #A94442;
}

.alert.hidden {
  display: none;
}