@font-face {
  font-family: Oswald-VariableFont_wght;
  src: url(fonts/Oswald-VariableFont_wght.ttf);
}
@font-face {
  font-family: RobotoCondensed;
  src: url(fonts/RobotoCondensed-Italic.ttf);
}
@font-face {
  font-family: Seagram;
  src: url(fonts/Seagram_tfb.ttf);
}

:root {
  --page-header-text-color: rgba(255, 0, 0, 1);

  --card-header-frame-color: rgba(0, 0, 0, 1);
  --card-header-text-color: rgba(255, 0, 0, 1);
  --card-name-text-color: rgba(255, 0, 0, 1);
  --card-val-text-color: rgba(247, 123, 123, 1);

  --card-link-frame-color: rgba(182, 247, 178, 0.05);
  --card-link-text-color: rgba(182, 247, 178, 0.7);
  --card-link-hover-text-color: rgba(160, 220, 155, 0.7);
}

* {
  margin: 0;
  padding: 0;
  box-sizing:border-box;
}
html {
  font-size:10px;
}
body {
  font-size:1.8rem;
  background-color: rgba(0, 0, 0, 1);
  background:url(images/DarkDevotionBG3.jpg) repeat;
}
h1 {
  font-size: 2rem;
  color:var(--primary-text-color);
}
h2 {
  font-size: 2rem;
}
a{
  color:var(--card-link-text-color);
/*  margin-top: 2px;
  align-items: center;
  padding: 0rem 0rem;
  background: linear-gradient(  to bottom,  rgba(0, 0, 0, 0.1),  rgba(255, 255, 255, 0.1));
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
*/
}
a:visited{
  color:var(--card-link-text-color);
}
a:hover{
  color:var(--card-link-hover-text-color);
}
.icon{
    width: 20px;        /* set desired size */
    height: 20px;       /* set desired size */
    margin-right: 5px;

    object-fit: contain; /* keeps aspect ratio */
}

header {
  position: relative;
  width: 100%;
  height: 16rem;                 /* fast höjd */
  display: flex;
  align-items: center;
  justify-content: center;      /* center image */
/*  justify-content: flex-start;   /* vänsterjustera bilden när den får plats */
  overflow: hidden;

  background-color: rgba(0, 0, 0, 0.2);
  box-shadow:  7px 7px 14px rgba(0, 0, 0, 0.5),
               -7px -7px 14px rgba(255, 255, 255, 0.1);
}
header img {
  content: url("images/DarkDevotionHeader.jpg"); /* desktop image */
  object-position: center center;
  max-width: none;              /* allow overflow */
  max-height: 100%;
  height: 100%;

  /*content: url("images/DarkDevotionHeaderMobile.jpg"); /* mobile image 
  display: block;
  max-width: 100%;              /* skala ner om headern är smal 
  max-height: 100%;             /* skala ner om headern är låg 
  width: auto;                  /* aldrig strecka 
  height: auto;                 /* aldrig strecka 
  object-fit: contain;          /* hela bilden syns 
  object-position: left center; /* vänsterjusterad när den får plats */
}
footer {
  justify-content: center;      /* center image */
  font-family: Arial;
  font-size:1.8rem;
  width:100%;
  padding: 0.1rem 1rem 0.1rem 1rem;
  display:flex;
  color:rgb(60, 60, 60);
  font-style: italic;
  background-color: rgba(0, 0, 0, 0.2);
  box-shadow:  7px 7px 14px rgba(0, 0, 0, 0.5),
               -7px -7px 14px rgba(255, 255, 255, 0.1);
}
main{
  margin:auto;
  width:100%;
  padding: 0.1rem 1rem 0.1rem 1rem;
  display:flex;
  flex-wrap: wrap;                  /* default nowrap gör att items width ignoreras */
/*  justify-content: flex-start;    /* flex-start, center, flex-end, space-between, space-around, space-evenly */
  justify-content: center;      /* center cards container */
  align-items:flex-start;             /* flex-start, center, flex-end, baseline (bara om olika fonter) */
}

section{
  width:100%;
  padding-bottom: 1rem;
  display:flex;
  flex-wrap: wrap;                  /* default nowrap gör att items width ignoreras */
  gap: 1rem;                  /* spacing between rows */
/*  justify-content:flex-start;    /* flex-start, center, flex-end, space-between, space-around, space-evenly */
  justify-content: center;      /* center cards */
  align-items:flex-start;             /* flex-start, center, flex-end, baseline (bara om olika fonter) */
}
.page__header{
  justify-content: center;      /* center image */
  font-family: Oswald-VariableFont_wght;
  width:100%;
  color:var(--page-header-text-color);
  padding: 0.2rem 1rem 0.2rem 1rem;
  display:flex;
}
.contact__link{
  justify-content: center;      /* center image */
  width:100%;
  display:flex;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.5rem;
  font-style: italic;
}


/******************************************************************
  the card
*******************************************************************/
.eventcard{
  max-width: 768px;
  width: 100%;
  padding: 0.5rem 0.5rem;
  display: flex;                 /* ✅ required */
  flex-direction: column;        /* header, main, links stacked */
  gap: 0.75rem;                  /* spacing between rows */
  border-radius: 18px;
  background-color: rgba(0, 0, 0, 0.3);
  box-shadow:  5px 5px 12px rgba(0, 0, 0, 0.9),
               -5px -5px 12px rgba(255, 255, 255, 0.15);
}
.eventcard__row{
  width: 100%;
  display: flex;                 /* ✅ two columns inside */
  flex-direction: row;
}

/* the card header - a row in the card with 100% width */
.eventcard__header{
  display: flex;                 /* ✅ two columns inside */
  flex-direction: row;
  flex-wrap: nowrap;             /* keep as 2 columns unless you want wrapping */
  align-items: baseline;         /* date + title align nicely */
  gap: 1rem;
  width: 100%;
  padding: 0.5rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.95);
  border: 1px solid var(--card-header-frame-color);
  font-family: Oswald-VariableFont_wght;
  font-size: 2.2rem;
  color:var(--card-header-text-color);
  background: linear-gradient(  to bottom,  rgba(0, 0, 0, 0.1),  rgba(255, 255, 255, 0.05));
}
.eventcard__header__date{
  flex: 0 0 115px;
  max-width: 115px;
}
.eventcard__header__title,
.eventcard__val{
  flex: 1 1 0;                /* 0-basis brukar ge bättre “ta resterande” */
  min-width: 0;               /* måste finnas för att flex-item ska kunna krympa */
  white-space: normal;        /* default, men bra att vara tydlig */
  overflow-wrap: anywhere;    /* bryt även långa ord om fönstret blir för smalt */
}


/******************************************************************
  the card main area - a row in the card with 100% width 
*******************************************************************/
/*.eventcard__main{
  display: flex; 
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0.2rem;
  padding: 0.3rem 1.2rem;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.5rem;
  font-style: italic;
  width: 100%;
}*/
.eventcard__main {
  display: flex;
  flex-direction: row;   /* ⬅️ change from column */
  flex-wrap: wrap;       /* ⬅️ allow rows to wrap */
  gap: 0.2rem 0.5rem;
  padding: 0.3rem 1.2rem;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.5rem;
  font-style: italic;
  width: 100%;
}

.eventcard__name{
  flex: 0 0 115px;
  max-width: 115px;
  color:var(--card-name-text-color);
}
.eventcard__val{
  color:var(--card-val-text-color);
}
/*
.eventcard__rowspace{
  min-height:5px;
}
*/

/******************************************************************
  the card links row at the bottom - a row in the card with 100% width */
*******************************************************************/
.eventcard__links{
  display: flex;
  flex-wrap: wrap;               /* ✅ links wrap to new lines */
  gap: 0.5rem 0.5rem;           /* row/column gap */
  width: 100%;
}

/* links with a rounded corner border and the same color for visited links as for not visited */
.eventcard__main a{
  margin-top: 5px;
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--card-link-frame-color);
  color:var(--card-link-text-color);
  background: linear-gradient(  to bottom,  rgba(0, 0, 0, 0.1),  rgba(255, 255, 255, 0.1));
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}
.icon{
  margin-right:5px;
  width: 20px;
  height: 20px;
}

.eventcard__links a:visited{
  color:var(--card-link-text-color);
}

.eventcard__links a:hover{
  color:var(--card-link-hover-text-color);
}