/* =========================================================
CYMRU CASTLES
CASSIOPEIA SITEWIDE CONTENT / TYPOGRAPHY SYSTEM
Joomla 6 / Cassiopeia
Does NOT style the custom header/navigation
========================================================= */


/* =========================================================
GOOGLE FONTS
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800&display=swap');


/* =========================================================
BRAND VARIABLES
========================================================= */

:root{
  --cc-red:#e11818;
  --cc-red-dark:#bd1010;

  --cc-sky:#2ea8ff;
  --cc-sky-dark:#087dcf;

  --cc-navy:#13295d;

  --cc-heading:#0f172a;
  --cc-text:#334155;
  --cc-muted:#64748b;

  --cc-border:#e5e7eb;
  --cc-soft:#f5f7fb;
  --cc-soft-blue:#eef7ff;

  --cc-white:#ffffff;

  --cc-radius:18px;

  --cc-shadow:
    0 12px 32px rgba(15,23,42,.08);
}


/* =========================================================
BASE
========================================================= */

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.72;
  color:var(--cc-text);
  background:#fff;
}


/* =========================================================
CASSIOPEIA MAIN PAGE STRUCTURE
========================================================= */

/*
Remove unnecessary Cassiopeia visual clutter
but leave header/navigation alone.
*/

.site-grid{
  background:#fff;
}

/*
Main article container
*/

.container-component{
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:38px 28px 60px;
}

/*
Individual Joomla article
*/

.com-content-article,
.item-page{
  width:100%;
  max-width:none;
  margin:0;
}

/*
Article body
*/

.com-content-article__body{
  width:100%;
  color:var(--cc-text);
}


/* =========================================================
STANDARD CONTENT WIDTH
========================================================= */

/*
Normal text stays readable rather than stretching
the full desktop width.
*/

.com-content-article__body > p,
.com-content-article__body > h1,
.com-content-article__body > h2,
.com-content-article__body > h3,
.com-content-article__body > h4,
.com-content-article__body > ul,
.com-content-article__body > ol{
  max-width:1050px;
}


/* =========================================================
TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6{
  font-family:"Poppins",system-ui,sans-serif;
  color:var(--cc-heading);
  line-height:1.16;
  letter-spacing:-.015em;
}

h1{
  margin:
    0 0
    22px;

  font-size:
    clamp(2rem,3vw,3rem);

  font-weight:800;
}

h2{
  margin:
    2.2em 0
    .65em;

  font-size:
    clamp(1.55rem,2.2vw,2.2rem);

  font-weight:700;
}

h3{
  margin:
    1.8em 0
    .55em;

  font-size:
    clamp(1.2rem,1.55vw,1.55rem);

  font-weight:700;
}

h4{
  margin:
    1.5em 0
    .5em;

  font-size:1.1rem;
  font-weight:700;
}


/* =========================================================
PARAGRAPHS
========================================================= */

p{
  margin:
    0 0
    1.15em;
}

.com-content-article__body p{
  font-size:
    clamp(.98rem,1vw,1.04rem);
}


/* =========================================================
LISTS
========================================================= */

.com-content-article__body ul,
.com-content-article__body ol{
  margin:
    0 0
    1.3em;

  padding-left:
    1.35rem;
}

.com-content-article__body li{
  margin:
    .38em 0;
}


/* =========================================================
LINKS
========================================================= */

.container-component a{
  color:var(--cc-sky-dark);
  text-decoration:none;
  font-weight:600;
}

.container-component a:hover{
  color:var(--cc-red);
  text-decoration:underline;
  text-underline-offset:3px;
}


/* =========================================================
SECTIONS
========================================================= */

.com-content-article__body section{
  margin:
    0 0
    3.8rem;
}


/* =========================================================
GENERAL CONTENT CARDS
========================================================= */

.cc-card{
  position:relative;

  background:#fff;

  border:
    1px solid var(--cc-border);

  border-radius:
    var(--cc-radius);

  padding:
    26px 28px;

  margin:
    24px 0;

  box-shadow:
    0 8px 26px rgba(15,23,42,.055);
}

.cc-card h2:first-child,
.cc-card h3:first-child{
  margin-top:0;
}

.cc-card p:last-child,
.cc-card ul:last-child{
  margin-bottom:0;
}


/* =========================================================
CALLOUT
========================================================= */

.cc-callout{
  position:relative;

  overflow:hidden;

  background:
    linear-gradient(
      135deg,
      #f5f9ff,
      #fff
    );

  border:
    1px solid #dfeaf5;

  border-left:
    5px solid var(--cc-sky);

  border-radius:
    var(--cc-radius);

  padding:
    30px 34px;

  margin:
    30px 0;

  box-shadow:
    0 10px 30px rgba(15,23,42,.055);
}

.cc-callout h1,
.cc-callout h2,
.cc-callout h3{
  margin-top:0;
}

.cc-callout p:last-child{
  margin-bottom:0;
}


/* =========================================================
CORPORATE PAGE WRAPPER
========================================================= */

.cc-page-corporate{
  width:100%;
}

.cc-page-corporate > section:first-child{
  margin-top:0;
}

.cc-page-corporate .cc-callout h1{
  font-weight:800;
  letter-spacing:-.025em;
}

.cc-page-corporate .cc-card ul{
  margin-bottom:0;
}

.cc-page-corporate .cc-card ul li{
  color:var(--cc-muted);
  font-weight:500;
}


/* =========================================================
SPLIT CONTENT
========================================================= */

.cc-split{
  display:grid;

  grid-template-columns:
    minmax(0,1.08fr)
    minmax(300px,.92fr);

  gap:38px;

  align-items:center;

  width:100%;

  background:#fff;

  border:
    1px solid var(--cc-border);

  border-radius:
    22px;

  padding:
    32px;

  margin:
    32px 0 52px;

  box-shadow:
    var(--cc-shadow);
}

.cc-split h2{
  margin-top:0;
}

.cc-split p{
  color:var(--cc-text);
}

.cc-split-img{
  width:100%;

  overflow:hidden;

  border-radius:
    17px;

  background:
    var(--cc-soft);
}

.cc-split-img img{
  display:block;

  width:100%;

  aspect-ratio:
    4 / 3;

  object-fit:cover;

  transition:
    transform .4s ease;
}

.cc-split:hover .cc-split-img img{
  transform:
    scale(1.025);
}


/* =========================================================
CONTENT BUTTON LINKS
========================================================= */

.cc-page-corporate a.cc-content-btn,
a.cc-content-btn{
  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:7px;

  margin-top:8px;

  padding:
    10px 17px;

  border-radius:
    999px;

  color:#fff !important;

  background:
    linear-gradient(
      135deg,
      var(--cc-red),
      #ff4141
    );

  font-family:
    "Poppins",
    system-ui,
    sans-serif;

  font-size:
    13px;

  font-weight:
    700;

  line-height:1;

  text-decoration:none !important;

  box-shadow:
    0 7px 18px rgba(225,24,24,.25);

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

a.cc-content-btn:hover{
  transform:
    translateY(-2px);

  box-shadow:
    0 11px 25px rgba(225,24,24,.35);
}


/* =========================================================
IMAGES INSIDE ARTICLE CONTENT
========================================================= */

.com-content-article__body img{
  max-width:100%;
  height:auto;
}

.com-content-article__body figure{
  margin:
    28px 0;

  padding:0;
}

.com-content-article__body figure img{
  display:block;
  border-radius:16px;
}


/* =========================================================
TABLES
========================================================= */

.com-content-article__body table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin:28px 0;
  overflow:hidden;
  border:1px solid var(--cc-border);
  border-radius:14px;
}

.com-content-article__body th{
  background:var(--cc-navy);
  color:#fff;
  font-family:"Poppins",system-ui,sans-serif;
  font-weight:700;
}

.com-content-article__body th,
.com-content-article__body td{
  padding:13px 15px;
  border-bottom:1px solid var(--cc-border);
  text-align:left;
}

.com-content-article__body tr:last-child td{
  border-bottom:0;
}


/* =========================================================
BLOCKQUOTES
========================================================= */

.com-content-article__body blockquote{
  margin:
    30px 0;

  padding:
    22px 26px;

  background:
    var(--cc-soft-blue);

  border-left:
    4px solid var(--cc-sky);

  border-radius:
    0 14px 14px 0;

  color:
    var(--cc-text);

  font-size:
    1.05rem;
}


/* =========================================================
HR
========================================================= */

.com-content-article__body hr{
  border:0;
  border-top:
    1px solid var(--cc-border);

  margin:
    42px 0;
}


/* =========================================================
JOOMLA ARTICLE META
========================================================= */

.article-info{
  color:
    var(--cc-muted);

  font-size:
    .85rem;

  margin-bottom:
    22px;
}


/* =========================================================
CATEGORY BLOG / ARTICLE CARDS
========================================================= */

.blog-items .blog-item,
.com-content-category-blog__item{
  background:#fff;

  border:
    1px solid var(--cc-border);

  border-radius:
    18px;

  padding:
    24px;

  margin-bottom:
    24px;

  box-shadow:
    0 8px 26px rgba(15,23,42,.055);
}


/* =========================================================
PAGINATION
========================================================= */

.pagination{
  gap:5px;
}

.pagination .page-link{
  border-radius:10px;
}


/* =========================================================
FORM ELEMENTS
========================================================= */

.container-component input[type="text"],
.container-component input[type="email"],
.container-component input[type="tel"],
.container-component input[type="number"],
.container-component input[type="date"],
.container-component select,
.container-component textarea{
  width:100%;

  border:
    1px solid #d6dce5;

  border-radius:
    10px;

  padding:
    11px 13px;

  background:#fff;

  color:
    var(--cc-heading);

  font-family:
    "Inter",
    system-ui,
    sans-serif;

  transition:
    border-color .15s ease,
    box-shadow .15s ease;
}

.container-component input:focus,
.container-component select:focus,
.container-component textarea:focus{
  outline:0;

  border-color:
    var(--cc-sky);

  box-shadow:
    0 0 0 3px rgba(46,168,255,.12);
}


/* =========================================================
JOOMLA STANDARD BUTTONS
========================================================= */

.container-component .btn-primary{
  background:
    linear-gradient(
      135deg,
      var(--cc-red),
      #ff4141
    );

  border:0;

  border-radius:
    999px;

  padding:
    10px 18px;

  font-family:
    "Poppins",
    system-ui,
    sans-serif;

  font-weight:
    700;

  box-shadow:
    0 7px 18px rgba(225,24,24,.23);
}


/* =========================================================
MAIN BOTTOM MODULE
========================================================= */

.main-bottom.card{
  width:100%;

  max-width:1280px;

  margin:
    20px auto 45px;

  border:
    1px solid var(--cc-border);

  border-radius:
    18px;

  box-shadow:none;
}

.main-bottom.card .card-body{
  padding:
    20px 24px;
}


/* =========================================================
BOTTOM LEGAL MENU
========================================================= */

.main-bottom .mod-menu{
  display:flex;

  flex-wrap:wrap;

  justify-content:center;

  gap:
    8px 20px;

  list-style:none;

  margin:0;

  padding:0;
}

.main-bottom .mod-menu li{
  margin:0;
}

.main-bottom .mod-menu a{
  color:
    var(--cc-muted);

  font-size:
    13px;

  font-weight:
    600;

  text-decoration:none;
}

.main-bottom .mod-menu a:hover{
  color:
    var(--cc-red);
}


/* =========================================================
REMOVE CASSIOPEIA ODD ARTICLE SPACING
========================================================= */

.com-content-article__body > :first-child{
  margin-top:0;
}

.com-content-article__body > :last-child{
  margin-bottom:0;
}


/* =========================================================
RESPONSIVE – TABLET
========================================================= */

@media(max-width:1000px){

  .container-component{
    padding:
      30px 22px
      50px;
  }

  .cc-split{
    grid-template-columns:1fr;
  }

  .cc-split-img{
    order:2;
  }

}


/* =========================================================
RESPONSIVE – MOBILE
========================================================= */

@media(max-width:768px){

  body{
    font-size:15px;
    line-height:1.65;
  }

  .container-component{
    padding:
      25px 15px
      42px;
  }

  h1{
    font-size:
      clamp(1.8rem,8vw,2.3rem);
  }

  h2{
    margin-top:
      1.8em;

    font-size:
      clamp(1.4rem,6.8vw,1.85rem);
  }

  h3{
    font-size:
      1.2rem;
  }

  .com-content-article__body section{
    margin-bottom:
      2.8rem;
  }

  .cc-card{
    padding:
      20px 18px;

    border-radius:
      14px;
  }

  .cc-callout{
    padding:
      22px 19px;

    margin:
      22px 0;

    border-radius:
      14px;
  }

  .cc-split{
    grid-template-columns:1fr;

    gap:22px;

    padding:
      19px;

    margin:
      24px 0 38px;

    border-radius:
      16px;
  }

  .cc-split-img{
    border-radius:
      13px;
  }

  .main-bottom.card{
    margin:
      10px 15px 30px;

    width:
      calc(100% - 30px);
  }

  .main-bottom .mod-menu{
    justify-content:flex-start;
  }

}


/* =========================================================
VERY SMALL MOBILE
========================================================= */

@media(max-width:450px){

  .container-component{
    padding-left:12px;
    padding-right:12px;
  }

  .cc-card,
  .cc-callout,
  .cc-split{
    padding:
      17px 15px;
  }

}