:root {
  --primary: #db7e17;
  --secondary: #fff;
  --textcolor: #000;
  --textcolor-secondary: #414141; }

/*

	Media Query mixin

	See https://github.com/sass-mq/sass-mq/ for original full version.

	@example scss
	 .element {
	   @include mq($from: mobile) {
		 color: red;
	   }

	   @include mq($to: tablet) {
		 color: blue;
	   }

	   @include mq(mobile, tablet) {
		 color: green;
	   }

	   @include mq($from: tablet, $and: '(orientation: landscape)') {
		 color: teal;
	   }

	   @include mq(em(950px)) {
		 color: hotpink;
	   }

	   @include mq(em(950px), $media-feature: height) {
		 color: hotpink;
	   }

	   @include mq(tablet, $media-type: screen) {
		 color: hotpink;
	   }

	   // Advanced use:
	   $custom-breakpoints: (L: 900px, XL: 1200px);
	   @include mq(L, $bp: $custom-breakpoints) {
		 color: hotpink;
	   }
	 }

*/
/*

	Margin / Padding Quick Resets

	example: top & bottom margin set to $spacing-unit
	.element {
		@include push--ends;
	}

	example: left & right padding set to $spacing-unit--small
	.element {
		@include soft--sides($spacing-unit--small);
	}

*/
/*

	Helper mixins

*/
/*

	Form input placeholder text

	example:

	input,
	textarea {
		@include input-placeholder {
			color: $grey;
		}
	}

*/
/*

	Retina images

	example:

	.element {
		@include retina {
			background-image: url(../img/background@2x.png);
		}
	}

*/
/*

	Content margins

	fore removing first/last child margins

	example: default
	.element {
		@include content-margins;
	}

	output:
	.element > *:first-child {
		margin-top: 0;
	}
	.element > *:last-child {
		margin-bottom: 0;
	}

	example: empty selector
	.element {
		@include content-margins('false');
	}

	output:
	.element:first-child {
		margin-top: 0;
	}
	.element:last-child {
		margin-bottom: 0;
	}

*/
/*

	CSS Triangle

	used for creating CSS only triangles

	example:
	.element {

		&::before {
			@include css-triangle(blue, down);
		}
	}

*/
/*

	Hide text

	example:

	.element {
		@include hide-text;
	}

*/
/*

	Responsive ratio

	Used for creating scalable elements that maintain the same ratio

	example:
	.element {
		@include responsive-ratio(400, 300);
	}

*/
/*

	Icon

	For using fontastic icons in pseudo elements

*/
/*

	Colours

	background, colour, etc. match up with colour map in _variables.scss

	modify to suit per project

*/
/*

	Fluid Property

	http://www.adrenalinmedia.com.au/the-agency/insights/this-changes-everything-css-fluid-properties.aspx

	HTML:

	<h1 class="element">
		<span>Text to replace</span>
	</h1>

	example:
	h1 {
		@include fp(font-size, 50, 100); // 50px at 320, 100px at 1920;
	}

	output:
	h1 {
		font-size: calc(3.125vw + 40px); //This is the magic!
	}

	@media (max-width:320px){ //Clips the start to the min value
		font-size:50px;
	}

	@media (min-width:1920px){ //Clips the end to the max value
		font-size:100px;
	}


*/
/*

	Misc

*/
/*

	Font face

	example:

	@include font-face('Clarendon', 'clarendon-webfont');
	@include font-face('Clarendon', 'clarendon-webfont', $w--bold, italic);

*/
/*

	REMs

*/
/*

	EMs calculator

*/
/*

	SVG inliner

*/
/*

	Media Query mixin

	See https://github.com/sass-mq/sass-mq/ for original full version.

	@example scss
	 .element {
	   @include mq($from: mobile) {
		 color: red;
	   }

	   @include mq($to: tablet) {
		 color: blue;
	   }

	   @include mq(mobile, tablet) {
		 color: green;
	   }

	   @include mq($from: tablet, $and: '(orientation: landscape)') {
		 color: teal;
	   }

	   @include mq(em(950px)) {
		 color: hotpink;
	   }

	   @include mq(em(950px), $media-feature: height) {
		 color: hotpink;
	   }

	   @include mq(tablet, $media-type: screen) {
		 color: hotpink;
	   }

	   // Advanced use:
	   $custom-breakpoints: (L: 900px, XL: 1200px);
	   @include mq(L, $bp: $custom-breakpoints) {
		 color: hotpink;
	   }
	 }

*/
/*

	Margin / Padding Quick Resets

	example: top & bottom margin set to $spacing-unit
	.element {
		@include push--ends;
	}

	example: left & right padding set to $spacing-unit--small
	.element {
		@include soft--sides($spacing-unit--small);
	}

*/
/*

	Helper mixins

*/
/*

	Form input placeholder text

	example:

	input,
	textarea {
		@include input-placeholder {
			color: $grey;
		}
	}

*/
/*

	Retina images

	example:

	.element {
		@include retina {
			background-image: url(../img/background@2x.png);
		}
	}

*/
/*

	Content margins

	fore removing first/last child margins

	example: default
	.element {
		@include content-margins;
	}

	output:
	.element > *:first-child {
		margin-top: 0;
	}
	.element > *:last-child {
		margin-bottom: 0;
	}

	example: empty selector
	.element {
		@include content-margins('false');
	}

	output:
	.element:first-child {
		margin-top: 0;
	}
	.element:last-child {
		margin-bottom: 0;
	}

*/
/*

	CSS Triangle

	used for creating CSS only triangles

	example:
	.element {

		&::before {
			@include css-triangle(blue, down);
		}
	}

*/
/*

	Hide text

	example:

	.element {
		@include hide-text;
	}

*/
/*

	Responsive ratio

	Used for creating scalable elements that maintain the same ratio

	example:
	.element {
		@include responsive-ratio(400, 300);
	}

*/
/*

	Icon

	For using fontastic icons in pseudo elements

*/
/*

	Colours

	background, colour, etc. match up with colour map in _variables.scss

	modify to suit per project

*/
/*

	Fluid Property

	http://www.adrenalinmedia.com.au/the-agency/insights/this-changes-everything-css-fluid-properties.aspx

	HTML:

	<h1 class="element">
		<span>Text to replace</span>
	</h1>

	example:
	h1 {
		@include fp(font-size, 50, 100); // 50px at 320, 100px at 1920;
	}

	output:
	h1 {
		font-size: calc(3.125vw + 40px); //This is the magic!
	}

	@media (max-width:320px){ //Clips the start to the min value
		font-size:50px;
	}

	@media (min-width:1920px){ //Clips the end to the max value
		font-size:100px;
	}


*/
/*

	Misc

*/
/*

	Font face

	example:

	@include font-face('Clarendon', 'clarendon-webfont');
	@include font-face('Clarendon', 'clarendon-webfont', $w--bold, italic);

*/
/*

	REMs

*/
/*

	EMs calculator

*/
/*

	SVG inliner

*/
/*

	Media Query mixin

	See https://github.com/sass-mq/sass-mq/ for original full version.

	@example scss
	 .element {
	   @include mq($from: mobile) {
		 color: red;
	   }

	   @include mq($to: tablet) {
		 color: blue;
	   }

	   @include mq(mobile, tablet) {
		 color: green;
	   }

	   @include mq($from: tablet, $and: '(orientation: landscape)') {
		 color: teal;
	   }

	   @include mq(em(950px)) {
		 color: hotpink;
	   }

	   @include mq(em(950px), $media-feature: height) {
		 color: hotpink;
	   }

	   @include mq(tablet, $media-type: screen) {
		 color: hotpink;
	   }

	   // Advanced use:
	   $custom-breakpoints: (L: 900px, XL: 1200px);
	   @include mq(L, $bp: $custom-breakpoints) {
		 color: hotpink;
	   }
	 }

*/
/*

	Margin / Padding Quick Resets

	example: top & bottom margin set to $spacing-unit
	.element {
		@include push--ends;
	}

	example: left & right padding set to $spacing-unit--small
	.element {
		@include soft--sides($spacing-unit--small);
	}

*/
/*

	Helper mixins

*/
/*

	Form input placeholder text

	example:

	input,
	textarea {
		@include input-placeholder {
			color: $grey;
		}
	}

*/
/*

	Retina images

	example:

	.element {
		@include retina {
			background-image: url(../img/background@2x.png);
		}
	}

*/
/*

	Content margins

	fore removing first/last child margins

	example: default
	.element {
		@include content-margins;
	}

	output:
	.element > *:first-child {
		margin-top: 0;
	}
	.element > *:last-child {
		margin-bottom: 0;
	}

	example: empty selector
	.element {
		@include content-margins('false');
	}

	output:
	.element:first-child {
		margin-top: 0;
	}
	.element:last-child {
		margin-bottom: 0;
	}

*/
/*

	CSS Triangle

	used for creating CSS only triangles

	example:
	.element {

		&::before {
			@include css-triangle(blue, down);
		}
	}

*/
/*

	Hide text

	example:

	.element {
		@include hide-text;
	}

*/
/*

	Responsive ratio

	Used for creating scalable elements that maintain the same ratio

	example:
	.element {
		@include responsive-ratio(400, 300);
	}

*/
/*

	Icon

	For using fontastic icons in pseudo elements

*/
/*

	Colours

	background, colour, etc. match up with colour map in _variables.scss

	modify to suit per project

*/
/*

	Fluid Property

	http://www.adrenalinmedia.com.au/the-agency/insights/this-changes-everything-css-fluid-properties.aspx

	HTML:

	<h1 class="element">
		<span>Text to replace</span>
	</h1>

	example:
	h1 {
		@include fp(font-size, 50, 100); // 50px at 320, 100px at 1920;
	}

	output:
	h1 {
		font-size: calc(3.125vw + 40px); //This is the magic!
	}

	@media (max-width:320px){ //Clips the start to the min value
		font-size:50px;
	}

	@media (min-width:1920px){ //Clips the end to the max value
		font-size:100px;
	}


*/
/*

	Misc

*/
/*

	Font face

	example:

	@include font-face('Clarendon', 'clarendon-webfont');
	@include font-face('Clarendon', 'clarendon-webfont', $w--bold, italic);

*/
.article-detail {
  background: none; }
  .article-detail__highlight {
    color: #db7e17; }
  .article-detail__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-height: 700px; }
  @media screen and (min-width: 1201px) {
    .article-detail__content {
      display: inline;
      padding-right: 1.25rem; } }
  .article-detail__content p a {
    color: var(--primary); }
  .article-detail__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1.25rem;
    font-weight: 500;
    color: var(--textcolor); }
    .article-detail__meta svg {
      color: var(--primary);
      margin-inline-end: 0.625rem; }
    .article-detail__meta > div {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-start; }
  .article-detail__title h2 {
    color: #db7e17; }
  .article-detail__info {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 1.5rem; }
  .article-detail__info-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px; }
    .article-detail__info-row--highlighted {
      background-color: #fff3cd;
      padding: 8px;
      border-radius: 4px; }
  .article-detail__label {
    font-weight: 500;
    color: var(--textcolor);
    width: 150px;
    flex: 0 0 150px; }
  .article-detail__value {
    word-break: break-word; }
  .article-detail__author-name {
    color: var(--textcolor);
    font-weight: 500; }
  .article-detail__gallery {
    margin-bottom: 2.1875rem;
    position: relative;
    z-index: 2; }
    @media screen and (min-width: 1201px) {
      .article-detail__gallery {
        display: inline-block;
        float: right;
        width: 780px;
        margin-inline-start: 1.25rem;
        margin-bottom: 0; } }
    .article-detail__gallery .swiper-pagination .swiper-pagination-bullet:after {
      background: #000; }
  .article-detail__reference ul {
    list-style: none;
    padding-left: 0px; }
    .article-detail__reference ul li span {
      color: var(--primary); }
  @media screen and (max-width: 1450px) and (min-width: 1201px) {
    .article-detail__gallery {
      width: 650px; } }
  @media screen and (max-width: 767px) {
    .article-detail__label {
      width: 120px;
      flex: 0 0 120px; } }

/* Responsive rich text images — preserve editor-set size and alignment.
   No `height` rule here so explicit height (HTML attr or inline style)
   from the editor's Insert/Edit Image dialog is respected. Modern
   browsers preserve aspect ratio automatically via width/height attrs. */
.article-detail__body img,
.article-detail__content img:not(.img-fluid) {
  max-width: 100%;
  object-fit: contain; }

.article-detail__body .richtext-image,
.article-detail__content .richtext-image {
  max-width: 100%;
  object-fit: contain;
  margin-bottom: 1rem; }

/* Floated images (TinyMCE "Align Left" / "Align Right"): give breathing
   space so wrapping text has a gutter. Width is honored from the editor;
   the 50% fallback cap below only kicks in when the editor didn't set one. */
.article-detail__body img[style*="float: left"],
.article-detail__body img[style*="float:left"],
.article-detail__content img[style*="float: left"],
.article-detail__content img[style*="float:left"] {
  margin: 0.25rem 1.5rem 1rem 0; }

.article-detail__body img[style*="float: right"],
.article-detail__body img[style*="float:right"],
.article-detail__content img[style*="float: right"],
.article-detail__content img[style*="float:right"] {
  margin: 0.25rem 0 1rem 1.5rem; }

/* Fallback width cap only when the editor did NOT set an explicit width
   (via HTML width attribute or inline style). Editor-set widths always win. */
.article-detail__body img[style*="float: left"]:not([width]):not([style*="width"]),
.article-detail__body img[style*="float:left"]:not([width]):not([style*="width"]),
.article-detail__body img[style*="float: right"]:not([width]):not([style*="width"]),
.article-detail__body img[style*="float:right"]:not([width]):not([style*="width"]),
.article-detail__content img[style*="float: left"]:not([width]):not([style*="width"]),
.article-detail__content img[style*="float:left"]:not([width]):not([style*="width"]),
.article-detail__content img[style*="float: right"]:not([width]):not([style*="width"]),
.article-detail__content img[style*="float:right"]:not([width]):not([style*="width"]) {
  max-width: 50%; }

/* Clear floats inside the article body so floats don't bleed
   into subsequent sections. */
.article-detail__body::after,
.article-detail__content::after {
  content: "";
  display: block;
  clear: both; }

@media screen and (max-width: 767px) {
  .article-detail__body img,
  .article-detail__content img:not(.img-fluid) {
    max-width: 100%; }

  /* On mobile there isn't room for side-by-side text + image, so
     drop the float and let the image flow full-width. */
  .article-detail__body img[style*="float: left"],
  .article-detail__body img[style*="float:left"],
  .article-detail__body img[style*="float: right"],
  .article-detail__body img[style*="float:right"],
  .article-detail__content img[style*="float: left"],
  .article-detail__content img[style*="float:left"],
  .article-detail__content img[style*="float: right"],
  .article-detail__content img[style*="float:right"] {
    float: none !important;
    max-width: 100%;
    margin: 0.5rem 0 1rem; } }

/* Fix bidi rendering for mixed Arabic/English content.
   unicode-bidi: plaintext makes each paragraph determine its own
   text direction from its content, so English paragraphs display LTR
   (correct quote/period order) and Arabic paragraphs stay RTL. */
/*.article-detail__body p,
.article-detail__body blockquote,
.article-detail__body li {
  unicode-bidi: plaintext; }
*/
/* Prevent lists from overlapping a floated image.
   display: flow-root creates a block formatting context so the list
   box sits beside the float instead of sliding under it. */
.article-detail__body ul,
.article-detail__body ol {
  display: flow-root;
  padding-inline-start: 1.5rem; }

/* Table styling for TinyMCE-generated tables.
   Bootstrap strips table borders by default; restore them so
   editor-inserted tables render as expected. */
.article-detail__body table {
  border-collapse: collapse;
  border: 1px solid #dee2e6;
  width: 100%;
  margin-bottom: 1rem; }

.article-detail__body table tbody,
.article-detail__body table thead,
.article-detail__body table tr {
  border-color: inherit; }

.article-detail__body table td,
.article-detail__body table th {
  border: 1px solid;
  border-color: inherit;
  padding: 0.5rem 0.75rem;
  vertical-align: top;
  text-align: inherit; }

.article-detail__body table th {
  font-weight: 600;
  background-color: #f8f9fa; }